{"action":"created","issue":{"url":"https://api.github.com/repos/react-navigation/react-navigation/issues/1728","repository_url":"https://api.github.com/repos/react-navigation/react-navigation","labels_url":"https://api.github.com/repos/react-navigation/react-navigation/issues/1728/labels{/name}","comments_url":"https://api.github.com/repos/react-navigation/react-navigation/issues/1728/comments","events_url":"https://api.github.com/repos/react-navigation/react-navigation/issues/1728/events","html_url":"https://github.com/react-navigation/react-navigation/issues/1728","id":232311323,"node_id":"MDU6SXNzdWUyMzIzMTEzMjM=","number":1728,"title":"Cannot Properly Center Title on Android","user":{"login":"StevePotter","id":271103,"node_id":"MDQ6VXNlcjI3MTEwMw==","avatar_url":"https://avatars1.githubusercontent.com/u/271103?v=4","gravatar_id":"","url":"https://api.github.com/users/StevePotter","html_url":"https://github.com/StevePotter","followers_url":"https://api.github.com/users/StevePotter/followers","following_url":"https://api.github.com/users/StevePotter/following{/other_user}","gists_url":"https://api.github.com/users/StevePotter/gists{/gist_id}","starred_url":"https://api.github.com/users/StevePotter/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/StevePotter/subscriptions","organizations_url":"https://api.github.com/users/StevePotter/orgs","repos_url":"https://api.github.com/users/StevePotter/repos","events_url":"https://api.github.com/users/StevePotter/events{/privacy}","received_events_url":"https://api.github.com/users/StevePotter/received_events","type":"User","site_admin":false},"labels":[{"id":526653628,"node_id":"MDU6TGFiZWw1MjY2NTM2Mjg=","url":"https://api.github.com/repos/react-navigation/react-navigation/labels/bug","name":"bug","color":"e74c3c","default":true},{"id":527291770,"node_id":"MDU6TGFiZWw1MjcyOTE3NzA=","url":"https://api.github.com/repos/react-navigation/react-navigation/labels/good%20first%20issue","name":"good first issue","color":"1d76db","default":true}],"state":"closed","locked":false,"assignee":{"login":"brentvatne","id":90494,"node_id":"MDQ6VXNlcjkwNDk0","avatar_url":"https://avatars2.githubusercontent.com/u/90494?v=4","gravatar_id":"","url":"https://api.github.com/users/brentvatne","html_url":"https://github.com/brentvatne","followers_url":"https://api.github.com/users/brentvatne/followers","following_url":"https://api.github.com/users/brentvatne/following{/other_user}","gists_url":"https://api.github.com/users/brentvatne/gists{/gist_id}","starred_url":"https://api.github.com/users/brentvatne/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/brentvatne/subscriptions","organizations_url":"https://api.github.com/users/brentvatne/orgs","repos_url":"https://api.github.com/users/brentvatne/repos","events_url":"https://api.github.com/users/brentvatne/events{/privacy}","received_events_url":"https://api.github.com/users/brentvatne/received_events","type":"User","site_admin":false},"assignees":[{"login":"brentvatne","id":90494,"node_id":"MDQ6VXNlcjkwNDk0","avatar_url":"https://avatars2.githubusercontent.com/u/90494?v=4","gravatar_id":"","url":"https://api.github.com/users/brentvatne","html_url":"https://github.com/brentvatne","followers_url":"https://api.github.com/users/brentvatne/followers","following_url":"https://api.github.com/users/brentvatne/following{/other_user}","gists_url":"https://api.github.com/users/brentvatne/gists{/gist_id}","starred_url":"https://api.github.com/users/brentvatne/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/brentvatne/subscriptions","organizations_url":"https://api.github.com/users/brentvatne/orgs","repos_url":"https://api.github.com/users/brentvatne/repos","events_url":"https://api.github.com/users/brentvatne/events{/privacy}","received_events_url":"https://api.github.com/users/brentvatne/received_events","type":"User","site_admin":false}],"milestone":null,"comments":21,"created_at":"2017-05-30T16:33:52Z","updated_at":"2018-10-18T05:29:04Z","closed_at":"2018-06-28T00:49:34Z","author_association":"NONE","body":"The default for title alignment on Android is left but in our app we center it.   \r\n\r\nTo center the title, I specified a style in `headerTitleStyle` that has `alignSelf: 'center'`.  That moved the title to the middle, but it was offset by 40px, as shown here:\r\n<img width=\"377\" alt=\"screenshot 2017-05-29 16 27 41\" src=\"https://cloud.githubusercontent.com/assets/271103/26582058/8d04106e-450d-11e7-8460-1450789bf38d.png\">\r\n\r\nI found the cause, which is in \r\n[this line from Header.js](https://github.com/react-community/react-navigation/blob/30ca3c1f80617abc28fdd71f0b37d4f62b3e388a/src/views/Header.js#L163).  On Android, this essentially cancels out the offset from `TITLE_OFFSET`.  Since there is not 'right' component but there is a 'left' back button, the style on the title's container is `{ left: 40, right: 0 }`, which causes the problem.  It would also be nice to have access to magic constants like `TITLE_OFFSET` as well.  Maybe there could be a config setting for those as well.\r\n\r\nIt took a lot of work to get the title to align to the center.  I suggest adding a property like `headerTitleAlign`.  That could allow someone like me to override the default behavior.  Would you be open to something like that?\r\n\r\nBy the way, I have fixed the problem in our app by subclassing Header.js and adding:\r\n```\r\n  _renderTitle(props: SceneProps, options: *): ?React.Element<*> {\r\n    const view = super._renderTitle(props, options)\r\n    // see https://github.com/react-community/react-navigation/blob/30ca3c1f80617abc28fdd71f0b37d4f62b3e388a/src/views/Header.js#L162\r\n    // by setting the right to 0 and not the left, the title is off center\r\n    // style is an array and we check for left/right being set and if so, match \r\n    let left, right\r\n    for (const style of view.props.style) {\r\n      if (style.left !== undefined) {\r\n        left = style.left\r\n      }\r\n      if (style.right !== undefined) {\r\n        right = style.right\r\n      }\r\n    }\r\n    if (left !== undefined || right !== undefined) {\r\n      if (left === undefined) {\r\n        left = right\r\n      } else if (right === undefined) {\r\n        right = left\r\n      } else {\r\n        left = right = Math.max(left, right)\r\n      }\r\n      view.props.style.push({ right, left })\r\n    }\r\n\r\n    return view\r\n  }\r\n```\r\nThis logic works for centering only. "},"comment":{"url":"https://api.github.com/repos/react-navigation/react-navigation/issues/comments/430879860","html_url":"https://github.com/react-navigation/react-navigation/issues/1728#issuecomment-430879860","issue_url":"https://api.github.com/repos/react-navigation/react-navigation/issues/1728","id":430879860,"node_id":"MDEyOklzc3VlQ29tbWVudDQzMDg3OTg2MA==","user":{"login":"PrinceSharzeel","id":25885967,"node_id":"MDQ6VXNlcjI1ODg1OTY3","avatar_url":"https://avatars3.githubusercontent.com/u/25885967?v=4","gravatar_id":"","url":"https://api.github.com/users/PrinceSharzeel","html_url":"https://github.com/PrinceSharzeel","followers_url":"https://api.github.com/users/PrinceSharzeel/followers","following_url":"https://api.github.com/users/PrinceSharzeel/following{/other_user}","gists_url":"https://api.github.com/users/PrinceSharzeel/gists{/gist_id}","starred_url":"https://api.github.com/users/PrinceSharzeel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/PrinceSharzeel/subscriptions","organizations_url":"https://api.github.com/users/PrinceSharzeel/orgs","repos_url":"https://api.github.com/users/PrinceSharzeel/repos","events_url":"https://api.github.com/users/PrinceSharzeel/events{/privacy}","received_events_url":"https://api.github.com/users/PrinceSharzeel/received_events","type":"User","site_admin":false},"created_at":"2018-10-18T05:29:04Z","updated_at":"2018-10-18T05:29:04Z","author_association":"NONE","body":"[](https://stackoverflow.com/questions/52866912/cannot-center-align-header-title-in-react-native-android)\r\n\r\nCant do this..please help with it"}}
{"actor":{"display_login":"PrinceSharzeel"}}