I created a project has a Welcome
screen navigate to MainActivity
screen. I want that when the user clicks the back button it will close the app in MainActivity
not back to Welcome
screen. I use the library react-navigation
, so I looked for some solution from Github.
When I use the code from https://github.com/react-navigation/react-navigation/issues/295. I get the error:
NavigationActions.reset is not a function
I console.log(NavigationActions);
There is no reset obviously. But why can everybody else use the code?
I can't figure it out. Any help would be appreciated. Thanks in advance.
Here is my Welcome.js:
import React, { Component } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';
import { NavigationActions } from 'react-navigation';
import { connect } from 'react-redux';
import { ColorSetting } from './common/ColorSetting';
import { fetchMainMovieList } from '../actions';
class Welcome extends Component {
static navigationOptions = {
header: null,
};
componentDidMount() {
// call main page data first
this.props.fetchMainMovieList();
this.timer = setTimeout(() => {
this.navigateToMainActivity();
}, 3000);
}
componentWillUnmount() {
// if this.timer existed,then use clearTimeout to remove it.
this.timer && clearTimeout(this.timer);
}
navigateToMainActivity() {
console.log(NavigationActions);
const resetAction = NavigationActions.reset({
index: 1,
actions: [
NavigationActions.navigate({ routeName: 'MainActivity' })
]
});
this.props.navigation.dispatch(resetAction);
}
render() {
return (
<View>
<Text>Three !</Text>
</View>
);
}
}
export default connect(null, { fetchMainMovieList })(Welcome);
in version >2 of react navigation, you can use this code to reset stack:
import { NavigationActions, StackActions } from 'react-navigation';
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'MainActivity' })],
});
this.props.navigation.dispatch(resetAction);
I hope this will help...