{"action":"created","issue":{"url":"https://api.github.com/repos/react-navigation/react-navigation/issues/4652","repository_url":"https://api.github.com/repos/react-navigation/react-navigation","labels_url":"https://api.github.com/repos/react-navigation/react-navigation/issues/4652/labels{/name}","comments_url":"https://api.github.com/repos/react-navigation/react-navigation/issues/4652/comments","events_url":"https://api.github.com/repos/react-navigation/react-navigation/issues/4652/events","html_url":"https://github.com/react-navigation/react-navigation/pull/4652","id":338996299,"node_id":"MDExOlB1bGxSZXF1ZXN0MTk5NzkxMTQ2","number":4652,"title":"Makes \"easy\" to define left and right Header buttons","user":{"login":"Piropa","id":32076502,"node_id":"MDQ6VXNlcjMyMDc2NTAy","avatar_url":"https://avatars0.githubusercontent.com/u/32076502?v=4","gravatar_id":"","url":"https://api.github.com/users/Piropa","html_url":"https://github.com/Piropa","followers_url":"https://api.github.com/users/Piropa/followers","following_url":"https://api.github.com/users/Piropa/following{/other_user}","gists_url":"https://api.github.com/users/Piropa/gists{/gist_id}","starred_url":"https://api.github.com/users/Piropa/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Piropa/subscriptions","organizations_url":"https://api.github.com/users/Piropa/orgs","repos_url":"https://api.github.com/users/Piropa/repos","events_url":"https://api.github.com/users/Piropa/events{/privacy}","received_events_url":"https://api.github.com/users/Piropa/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":10,"created_at":"2018-07-06T16:17:25Z","updated_at":"2018-07-08T21:42:01Z","closed_at":null,"author_association":"NONE","pull_request":{"url":"https://api.github.com/repos/react-navigation/react-navigation/pulls/4652","html_url":"https://github.com/react-navigation/react-navigation/pull/4652","diff_url":"https://github.com/react-navigation/react-navigation/pull/4652.diff","patch_url":"https://github.com/react-navigation/react-navigation/pull/4652.patch"},"body":"The idea behind this is to ease the creation of left and right buttons to the header bar preserving the default styling or defining a new one.\r\n\r\n## Motivation\r\n\r\nI've found quite unpleasant to add custom buttons to the header bar, since the properties \"headerLeft\" and \"headerRight\" only allow me to define a custom element or custom component without any of the predefined platforms margins and colors already established by react-navigation, forcing me to rebuild the whole component and clone styling. Also found that in order to define a new action for the left button, then I have to create a whole new custom object, which I don't like.\r\n\r\nThen, by implementing this changes, I can create Right Button which will respect all default styling, I can also easily change the Left or Right button icons or actions without having to create a whole component.\r\n\r\n## Changes\r\n\r\nI have added the following variables to the navigation options:\r\n```\r\noptions: {\r\n   // Default Title for right button (iOS only)\r\n   headerRightTitle: string\r\n\r\n   // Default Truncated Title for right button (iOS only)\r\n   headerTruncatedRightTitle: string\r\n\r\n   // Style for the right button Title (iOS only)\r\n   headerRightTitleStyle: TextStyle\r\n\r\n   // Default action for left button\r\n   headerLeftOnPress: () => void\r\n\r\n   // Default action for right button\r\n   headerRightOnPress: () => void\r\n\r\n   // Default image for left button\r\n   headerBackImage:\r\n      React.Element<> |\r\n      React.Component<{tintColor, title}> |\r\n      {\r\n         source:\r\n            React.Element<> |\r\n            React.Component<{style<ViewStyle> , tintColor, title}> |\r\n            ImageSourcePropType\r\n      }\r\n\r\n   // Default image for right button\r\n   headerRightImage:\r\n      React.Element<> |\r\n      React.Component<{tintColor, title}> |\r\n      {\r\n         source:\r\n            React.Element<> |\r\n            React.Component<{style<ViewStyle> , tintColor, title}> |\r\n            ImageSourcePropType\r\n      }\r\n\r\n   // Left button (all definitions)\r\n   headerLeft:\r\n      React.Element<> |\r\n      React.Component<{onPress, pressColorAndroid, tintColor, backImage, \r\n                       title, truncatedTitle, titleStyle, width}> |\r\n      {\r\n         source:\r\n            React.Element<> |\r\n            React.Component<{style<ViewStyle> , tintColor, title}> |\r\n            ImageSourcePropType,\r\n         onPress: () => void,\r\n      }\r\n\r\n   // Right button (all definitions)\r\n   headerRight:\r\n      React.Element<> |\r\n      React.Component<{onPress, pressColorAndroid, tintColor, rightImage, \r\n                       title, truncatedTitle, titleStyle, width}> |\r\n      {\r\n         source:\r\n            React.Element<> |\r\n            React.Component<{style<ViewStyle> , tintColor, title}> |\r\n            ImageSourcePropType,\r\n         onPress: () => void,\r\n         title: string,\r\n         truncatedTitle: string,\r\n      }\r\n}\r\n```\r\nThis fork is based on [@rghorbani's fork](https://github.com/react-navigation/react-navigation/pull/4331/commits/29189a6e517e7287d47ffd58b6089bf0d3da3e3e) for react-navigation which adds Custom Container Styles for the header Title and Buttons within the navigator options:\r\n```\r\noptions {\r\n    headerLeftContainerStyle: ViewStyle,\r\n    headerRightContainerStyle: ViewStyle,\r\n    headerTitleContainerStyle: ViewStyle\r\n}\r\n```\r\n\r\n## Usage Examples:\r\n1. Add a Right default button (the default icon is the ios-more vertical three dots)\r\n```\r\noptions = {\r\n    headerRight: {}\r\n}\r\n```\r\n\r\n2. Use a Custom Action for Right Button:\r\n```\r\noptions = {\r\n    headerRight: { onPress: myCustomActionRight }\r\n}\r\n```\r\nOR\r\n```\r\noptions = {\r\n    headerRightOnPress: myCustomActionRight\r\n}\r\n```\r\n\r\n3. Use a custom Icon for Right Button:\r\n```\r\noptions = {\r\n    headerRightImage: { source: myImageURISourceOrReqSource }\r\n}\r\n```\r\nOR\r\n```\r\noptions = {\r\n    headerRight: { source: myImageURISourceOrReqSource }\r\n}\r\n```\r\n\r\n4. Use a Custom Action for Left Button:\r\n```\r\noptions = {\r\n    headerLeft: { onPress: myCustomActionLeft }\r\n}\r\n```\r\nOR\r\n```\r\noptions = {\r\n    headerLeftOnPress: myCustomActionLeft \r\n}\r\n```\r\n\r\n5. Use a custom Icon for Left Button:\r\n```\r\noptions = {\r\n    headerBackImage: { source: myImageURISourceOrReqSource }\r\n}\r\n```\r\nOR\r\n```\r\noptions = {\r\n    headerLeft: { source: myImageURISourceOrReqSource }\r\n}\r\n```\r\n\r\nThe customized actions will respect the default styles, tintcolor and spacing calculated by react-navigation or customized via style customizing options\r\n"},"comment":{"url":"https://api.github.com/repos/react-navigation/react-navigation/issues/comments/403319410","html_url":"https://github.com/react-navigation/react-navigation/pull/4652#issuecomment-403319410","issue_url":"https://api.github.com/repos/react-navigation/react-navigation/issues/4652","id":403319410,"node_id":"MDEyOklzc3VlQ29tbWVudDQwMzMxOTQxMA==","user":{"login":"react-navigation-ci","id":36749262,"node_id":"MDQ6VXNlcjM2NzQ5MjYy","avatar_url":"https://avatars1.githubusercontent.com/u/36749262?v=4","gravatar_id":"","url":"https://api.github.com/users/react-navigation-ci","html_url":"https://github.com/react-navigation-ci","followers_url":"https://api.github.com/users/react-navigation-ci/followers","following_url":"https://api.github.com/users/react-navigation-ci/following{/other_user}","gists_url":"https://api.github.com/users/react-navigation-ci/gists{/gist_id}","starred_url":"https://api.github.com/users/react-navigation-ci/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/react-navigation-ci/subscriptions","organizations_url":"https://api.github.com/users/react-navigation-ci/orgs","repos_url":"https://api.github.com/users/react-navigation-ci/repos","events_url":"https://api.github.com/users/react-navigation-ci/events{/privacy}","received_events_url":"https://api.github.com/users/react-navigation-ci/received_events","type":"User","site_admin":false},"created_at":"2018-07-08T21:42:01Z","updated_at":"2018-07-08T21:42:01Z","author_association":"NONE","body":"NavigationPlayground for 6798a1e48180ed484e5fc04253239e0668dc85cd has been deployed.\n\n![](https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https%3A%2F%2Fexpo.io%2F%40react-navigation-ci%2FNavigationPlayground%3Frelease-channel%3D6798a1e48180ed484e5fc04253239e0668dc85cd)\nhttps://expo.io/@react-navigation-ci/NavigationPlayground?release-channel=6798a1e48180ed484e5fc04253239e0668dc85cd"}}
{"actor":{"display_login":"react-navigation-ci"}}