Reputation: 813
I have a Navigator in an Android react native application. I'm using navigator.push() to navigate to a different page. It would seem natural that the back button would pop the navigator and to go back one page, but that's not what's happening.After searching a lot I get a function for the same problem but i think i am placing it in wrong manner please look at this help me out.
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
} = React;
var SCREEN_WIDTH = require('Dimensions').get('window').width;
var BaseConfig = Navigator.SceneConfigs.FloatFromRight;
componentWillMount = () => {
BackAndroid.addEventListener('hardwareBackPress', () => Actions.pop());
};
var PageOne = React.createClass({
_handlePress() {
this.props.navigator.push({id: 2,});
},
render() {
return (
<View style={[styles.container, {backgroundColor: 'green'}]}>
<Text style={styles.welcome}>Greetings!</Text>
<TouchableOpacity onPress={this._handlePress}>
<View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
<Text style={styles.welcome}>Go to page two</Text>
</View>
</TouchableOpacity>
</View>
)
},
});
var PageTwo = React.createClass({
_handlePress() {
this.props.navigator.pop();
},
render() {
return (
<View style={[styles.container, {backgroundColor: 'purple'}]}>
<Text style={styles.welcome}>This is page two!</Text>
<TouchableOpacity onPress={this._handlePress}>
<View style={{paddingVertical: 10, paddingHorizontal: 20, backgroundColor: 'black'}}>
<Text style={styles.welcome}>Go back</Text>
</View>
</TouchableOpacity>
</View>
)
},
});
var SampleApp = React.createClass({
_renderScene(route, navigator) {
if (route.id === 1) {
return <PageOne navigator={navigator} />
} else if (route.id === 2) {
return <PageTwo navigator={navigator} />
}
},
_configureScene(route) {
return CustomSceneConfig;
},
render() {
return (
<Navigator
initialRoute={{id: 1, }}
renderScene={this._renderScene}
configureScene={this._configureScene} />
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: 'white',
},
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);
module.exports = SampleApp;
Upvotes: 2
Views: 72
Reputation: 612
BackAndroid should return true or false for proper working.
Try this:
componentWillMount = () => {
BackAndroid.addEventListener('hardwareBackPress', () =>
const lengthOfNavigator = this.props.navigator.getCurrentRoutes();
if (lengthOfNavigator.length !== 1) {
this.props.navigator.pop();
return true;
} else {
return false;
}
);
};
getCurrentRoutes is used to get all the components pushed in the navigator stack.
Upvotes: 1