Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,6 @@ const firstRoute = {
class MyApp extends React.Component {

render() {

return (
<Router
firstRoute={firstRoute}
Expand Down Expand Up @@ -107,6 +106,7 @@ The **`<Router \>`** 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: `<Router customAction={this.doSomething} />`.
- `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.
Expand Down
22 changes: 21 additions & 1 deletion components/NavBarContainer.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { StyleSheet, View, PropTypes } from 'react-native';
import React, { StyleSheet, View, PropTypes, Platform, BackAndroid } from 'react-native';

import NavBarContent from './NavBarContent';

Expand All @@ -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,
Expand Down Expand Up @@ -50,6 +51,19 @@ class NavBarContainer extends React.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({
Expand All @@ -58,6 +72,12 @@ class NavBarContainer extends React.Component {
}
}

componentWillUnmount() {
if (Platform.OS === 'android' && !!this.props.handleBackAndroid) {
BackAndroid.removeEventListener('hardwareBackPress');
}
}

goBack() {
this.props.toBack(this.props.navigator);
}
Expand Down
1 change: 1 addition & 0 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,7 @@ class Router extends React.Component {
rightProps={this.state.rightProps}
titleProps={this.state.titleProps}
customAction={this.customAction}
handleBackAndroid={this.props.handleBackAndroid}
/>
);
}
Expand Down