From 2d983740fb3a0456fc9e9336f4344473cc5354c8 Mon Sep 17 00:00:00 2001 From: Nicolas Charpentier Date: Mon, 1 Feb 2016 20:20:12 -0500 Subject: [PATCH 1/2] Add back android support --- README.md | 5 +++-- components/NavBarContainer.js | 21 +++++++++++++++++++++ index.js | 1 + 3 files changed, 25 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index babae92..9719edf 100644 --- a/README.md +++ b/README.md @@ -52,9 +52,9 @@ class MyApp extends React.Component { } render() { - return } } @@ -104,6 +104,7 @@ The **``** object used to initialize the navigation can take the follo - `rightCorner`: If you have the same occuring action buttons on the right side of your navigation bar (like the Twitter "Compose"-button), you can specify a component for that view. - `customAction`: A special callback prop for your action buttons (this can be handy for triggering a side menu for example). The action gets triggered from your custom `leftCorner` or `rightCorner` components by calling `this.props.customAction("someActionName")` from them. It is then picked up like this: ``. - `hideNavigationBar`: Hide the navigation bar, always +- `handleBackAndroid` (Boolean value): Apply a listener to the native back button on Android. On click, it will go to the previous route until it reach the first scene, then it will exit the app. The **`this.props.toRoute()`** callback prop takes one parameter (a JavaScript object) which can have the following keys: - `name`: The name of your route, which will be shown as the title of the navigation bar unless it is changed. diff --git a/components/NavBarContainer.js b/components/NavBarContainer.js index 7ee7383..88cc7b4 100644 --- a/components/NavBarContainer.js +++ b/components/NavBarContainer.js @@ -6,6 +6,8 @@ const { StyleSheet, View, Component, + Platform, + BackAndroid, } = React; class NavBarContainer extends Component { @@ -22,6 +24,19 @@ class NavBarContainer extends Component { }; } + componentDidMount() { + if (Platform.OS === 'android' && !!this.props.handleBackAndroid) { + BackAndroid.addEventListener('hardwareBackPress', () => { + if (this.props.currentRoute.index > 0) { + this.goBack(); + return true; + } + + return false; + }); + } + } + componentWillReceiveProps(newProps) { if (this.props && this.props.currentRoute.index !== newProps.currentRoute.index) { this.setState({ @@ -30,6 +45,12 @@ class NavBarContainer extends Component { } } + componentWillUnmount() { + if (Platform.OS === 'android' && !!this.props.handleBackAndroid) { + BackAndroid.removeEventListener('hardwareBackPress'); + } + } + goBack() { this.props.toBack(this.props.navigator); } diff --git a/index.js b/index.js index a5d2383..55ae23a 100644 --- a/index.js +++ b/index.js @@ -185,6 +185,7 @@ class Router extends React.Component { rightProps={this.state.rightProps} titleProps={this.state.titleProps} customAction={this.customAction} + handleBackAndroid={this.props.handleBackAndroid} /> ); } From a2e6fd3c31c3c7e52207f079fb03068e33818c5d Mon Sep 17 00:00:00 2001 From: Nicolas Charpentier Date: Tue, 2 Feb 2016 09:35:09 -0500 Subject: [PATCH 2/2] Add missing prop --- components/NavBarContainer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/components/NavBarContainer.js b/components/NavBarContainer.js index 3734ff2..f37ff72 100644 --- a/components/NavBarContainer.js +++ b/components/NavBarContainer.js @@ -8,6 +8,7 @@ const propTypes = { borderColor: PropTypes.string, currentRoute: PropTypes.object.isRequired, customAction: PropTypes.func, + handleBackAndroid: PropTypes.bool, leftProps: PropTypes.object, navigator: PropTypes.object.isRequired, rightCorner: PropTypes.func,