Menu
Here I'm using react-navigation as my navigation library.
How can I change the back button (that is added automatically by react-navigation) functionality for a specific screen?
I mean instead of going one step in the stack of screens I want it to go 2 steps back in stack or do it manually by giving the screen name (again only on one component).
699
To handle the Android Back Button Press in the React Native we have to register the hardwareBackPress event listener with a callback function, which will be called after pressing the Back Button.
However, in React Native, there is a better way to allow users to go back (or forward) by one screen. You can implement the button that, when clicked, returns the user to a specific screen. In react-navigation, you can do that using the goBack () method. The goBack () method is one of the most important methods in the react-navigation library.
In react-navigation, you can do that using the goBack () method. The goBack () method is one of the most important methods in the react-navigation library. It allows you to go back to one of the previous screens in your navigation stack.
Clicking this button will take you back to the screen you viewed before the DetailsScreen component. It’s important to understand that to go back to a specific screen in the navigation stack using the goBack method, you must call it from the component you want to go back from.
So, the default functionality of the back button in StackNavigator is:- If you press the Back Button on screen C, it will take you to the previous screen i.e, screen B. To override that you could do something like this on screen C:- Show activity on this post. You can override back button for a specific screen with navigationOptions of that screen.
Consider, that you have 3 screens A, B, C respectively. So, the default functionality of the back button in StackNavigator is:- If you press the Back Button on screen C, it will take you to the previous screen i.e, screen B. To override that you could do something like this on screen C:-
import { HeaderBackButton } from 'react-navigation';
static navigationOptions = ({navigation}) => {
return{
headerLeft:(<HeaderBackButton onPress={()=>{navigation.navigate('A')}}/>)
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
