{"action":"created","issue":{"url":"https://api.github.com/repos/react-community/react-navigation/issues/2869","repository_url":"https://api.github.com/repos/react-community/react-navigation","labels_url":"https://api.github.com/repos/react-community/react-navigation/issues/2869/labels{/name}","comments_url":"https://api.github.com/repos/react-community/react-navigation/issues/2869/comments","events_url":"https://api.github.com/repos/react-community/react-navigation/issues/2869/events","html_url":"https://github.com/react-community/react-navigation/pull/2869","id":270364642,"number":2869,"title":" allow back button customization, more than just title change and tint.","user":{"login":"pvinis","id":100233,"avatar_url":"https://avatars2.githubusercontent.com/u/100233?v=4","gravatar_id":"","url":"https://api.github.com/users/pvinis","html_url":"https://github.com/pvinis","followers_url":"https://api.github.com/users/pvinis/followers","following_url":"https://api.github.com/users/pvinis/following{/other_user}","gists_url":"https://api.github.com/users/pvinis/gists{/gist_id}","starred_url":"https://api.github.com/users/pvinis/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/pvinis/subscriptions","organizations_url":"https://api.github.com/users/pvinis/orgs","repos_url":"https://api.github.com/users/pvinis/repos","events_url":"https://api.github.com/users/pvinis/events{/privacy}","received_events_url":"https://api.github.com/users/pvinis/received_events","type":"User","site_admin":false},"labels":[{"id":598136973,"url":"https://api.github.com/repos/react-community/react-navigation/labels/Status:%20Needs%20Review","name":"Status: Needs Review","color":"fbca04","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2017-11-01T16:20:52Z","updated_at":"2017-11-02T13:06:56Z","closed_at":null,"author_association":"NONE","pull_request":{"url":"https://api.github.com/repos/react-community/react-navigation/pulls/2869","html_url":"https://github.com/react-community/react-navigation/pull/2869","diff_url":"https://github.com/react-community/react-navigation/pull/2869.diff","patch_url":"https://github.com/react-community/react-navigation/pull/2869.patch"},"body":"This PR allows the user to use any react element as a back button.\r\nWe can already use something like\r\n```\r\nconst Navigator = StackNavigator(\r\n  {\r\n    Splash: { screen: SplashScreen },\r\n    Login: { screen: LoginScreen },\r\n    Main: { screen: MainScreen },\r\n  },\r\n  {\r\n    initialRouteName: 'Splash',\r\n    navigationOptions: {\r\n      headerMode: 'screen',\r\n      headerStyle: {\r\n        backgroundColor: Colors.navBarBackground,\r\n        borderBottomWidth: 1 / PixelRatio.get(),\r\n        borderBottomColor: Colors.separator,\r\n      },\r\n      headerTitleStyle: {\r\n        color: Colors.textBlue,\r\n        fontFamily: Fonts.type.base,\r\n      },\r\n```\r\nNow we can also add something like\r\n```\r\n    headerBack: <Image source={Images.iconBack} />,\r\n```\r\nor like\r\n```\r\n    headerBack: (\r\n      <View style={{\r\n        alignItems: 'center',\r\n        flexDirection: 'row',\r\n      }}>\r\n        <Image source={Images.iconBack} />\r\n        <Text style={{paddingRight: 10, }} numberOfLines={1}>BACK</Text>\r\n      </View>\r\n    ),\r\n```\r\nThis will be wrapped and made into a button that goes back.\r\nThe difference with `headerLeft` is basically that `headerLeft` can be anything, and added in any screen. `headerBack` is always a button that goes back, that contains any custom element the user gives, and it will only appear on non-zero index screens.\r\n\r\nWithout a custom `headerBack` (regular back button, automatically rendered, as before):\r\n![img_0052](https://cloud.githubusercontent.com/assets/100233/26007178/b1c8ee1e-373f-11e7-8f28-087338452b00.PNG)\r\n(`PavlosTv` is the title of the previous screen)\r\n\r\nWith a custom `headerBack` (custom element, wrapped as a `goBack` button):\r\n![img_0051](https://cloud.githubusercontent.com/assets/100233/26007123/8246ae42-373f-11e7-84de-cf0c71ec84a0.PNG)\r\n\r\nWith a custom `headerBack` (custom element, wrapped as a `goBack` button):\r\n![img_0053](https://cloud.githubusercontent.com/assets/100233/26007154/a22ea2f0-373f-11e7-88e3-fd7cdc73f46d.PNG)\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/react-community/react-navigation/issues/comments/341415023","html_url":"https://github.com/react-community/react-navigation/pull/2869#issuecomment-341415023","issue_url":"https://api.github.com/repos/react-community/react-navigation/issues/2869","id":341415023,"user":{"login":"Ashoat","id":863579,"avatar_url":"https://avatars0.githubusercontent.com/u/863579?v=4","gravatar_id":"","url":"https://api.github.com/users/Ashoat","html_url":"https://github.com/Ashoat","followers_url":"https://api.github.com/users/Ashoat/followers","following_url":"https://api.github.com/users/Ashoat/following{/other_user}","gists_url":"https://api.github.com/users/Ashoat/gists{/gist_id}","starred_url":"https://api.github.com/users/Ashoat/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Ashoat/subscriptions","organizations_url":"https://api.github.com/users/Ashoat/orgs","repos_url":"https://api.github.com/users/Ashoat/repos","events_url":"https://api.github.com/users/Ashoat/events{/privacy}","received_events_url":"https://api.github.com/users/Ashoat/received_events","type":"User","site_admin":false},"created_at":"2017-11-02T13:06:56Z","updated_at":"2017-11-02T13:06:56Z","author_association":"COLLABORATOR","body":"1. Can you copy-paste the Flow errors into a Gist and link it here?\r\n2. Give [this](https://flow.org/en/docs/react/children/) a read. Basically you should type `children` as `React.Node` if you're just forwarding it on. If you need a specific kind of a child, or if you end up passing `children` to the `React.Children` API, you need to type as `React.ChildrenArray`.\r\n3. I'm guessing the `onPress` issue is that you're passing a nullable function in to `TouchableItem`, but I'm not sure. See what happens if you only pass it in when it's not null or undefined."}}
{"actor":{"display_login":"Ashoat"}}