How to navigate to a specific screen and disallow going back with react-native-navigation - react-native

Question

I am using react-native-navigation and I have a stack of screens.
When I go from screen A to screen B, I don't want to give the user the option to go back to screen A, just forward.
I am trying Navigation.popTo("screen.B.id") but I'm getting this error:
Is there any way to achieve this? Thanks in advance.

Answer 1

React-navigation
You can reset the stack like this:
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'screenB' })],
});
this.props.navigation.dispatch(resetAction);
React-native-navigation
A workaround would be to catch the back listener like so:
import {BackHandler} from 'react-native';
export default class RoomType extends Component {
_didFocusSubscription;
_willBlurSubscription;
constructor(props) {
super(props);
this._didFocusSubscription = props.navigation.addListener('didFocus',payload =>
BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
);
}
}
componentDidMount() {
this._willBlurSubscription = this.props.navigation.addListener('willBlur', payload =>
BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
);
}
componentWillUnmount() {
this._didFocusSubscription && this._didFocusSubscription.remove();
this._willBlurSubscription && this._willBlurSubscription.remove();
}
onBackButtonPressAndroid = () => {
//code when you press the back button
};

Answer 2

You could try with setting Screen B to your new root.
setStackRoot(componentId, params)
Maybe you have to popToRoot(componentId, mergeOptions?) if necessary.
Source: react-native-navigation docs

Answer 3

In react-native-navigation, there are 2 options you could choose from to achieve what I believe you are looking for.
try adding the below to your topBar option specifically in the child component you are choosing.
backButton: {
visible: false
}
for a small example, the child you don't want a back option for put:
component: {
id: 'screenB',
name: 'screenB',
options: {
title: {
text: 'screenB'
},
topBar: {
// the other options you want
backButton: {
visible: false
}
}
}
}
you can completely reset the root navigation to the new screen.
In my Opinion,
Option 1. is a simple way to flat out just remove the back button from a specific screen to disable the ability to ever go back to the original screen.
Option 2. is nice when you want to remove the previous screen from the entire equation of the app itself.
my personal use-case for option 2:
I made an app that originally opens to a login/register stack. Once logged in/ registered, I save that information to the AsyncStorage and completely reset the root to the home page.
When opening the app for the second time, it checks for user info from the AsyncStorage. If the app finds user information, It sets the root for the home page and rest of the app. If the app doesn't find user information, it sets the root to the login/register stack and the cycle continues.
I hope this helps!

Answer 4

Use createSwitchNavigator from 'react-navigation' for both screens,which will not let back button of second screen to switch to first screen and also header will not be there with back arrow.
In your App.js,
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { createSwitchNavigator,createAppContainer } from 'react-navigation';
import ScreenOne from './components/ScreenOne ';
import ScreenTwo from './components/ScreenTwo ';
const App=createSwitchNavigator({
ScreenOne :{screen:ScreenOne },
ScreenTwo :{screen:ScreenTwo }
});
export default createAppContainer(App);