Hi I am trying to navigate to next component using navigate
function. I am using react-navigation
for the navigation among multiple components.
Suppose I have index.android.js
and DashboardScreen.js
component. I am trying to navigate to DashboardScreen.js
component from index component.
It is navigating but index component always retain in component stack. when I press back then it opens index.android.js
which should not be. Does anyone know how to manage this in react-native
. In Android, finish()
works for this.
navigate("DashboardScreen");
When I am navigating from SplashScreen
to EnableNotification
then SplashScreen
should be destroyed, if I am navigating from EnableNotification
to CreateMessage
then EnableNotification
should be destroyed and if I am navigating from CreateMessage
to DashboardScreen
then CreateMessage
should be destroyed. As of now no component is being destroyed.
index.android.js
class SplashScreen extends Component {
render() {
if (__DEV__) {
console.disableYellowBox = true;
}
const { navigate } = this.props.navigation;
AsyncStorage.getItem("@ProductTour:key").then(value => {
console.log(value);
if (value) {
navigate("DashboardScreen");
}
});
return (
....
);
}
}
const App = StackNavigator(
{
Splash: {
screen: SplashScreen,
navigationOptions: {
header: {
visible: false
}
}
},
EnableNotification: {
screen: EnableNotificationScreen,
navigationOptions: {
header: {
visible: false
}
}
},
CreateMessage: {
screen: CreateMessageScreen,
navigationOptions: {
header: {
visible: false
}
}
},
DashboardScreen: {
screen: DashboardScreen,
navigationOptions: {
header: {
visible: false
}
}
}
},
{
initialRouteName: "Splash"
}
);
Just use 'replace' in place of 'navigate'
this.props.navigation.replace('Your Next Component Name')