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).
You can override back button for a specific screen with navigationOptions
of that screen. You can read more info about overriding back button in react-navigation
docs
Example from docs
class HomeScreen extends React.Component {
static navigationOptions = {
headerTitle: <LogoTitle />,
headerRight: (
<Button
onPress={() => alert('This is a button!')}
title="Info"
color="#fff"
/>
),
};
}
Overriding the back button
The back button will be rendered automatically in a
StackNavigator
whenever it is possible for the user to go back from their current screen — in other words, the back button will be rendered whenever there is more than one screen in the stack.Generally, this is what you want. But it's possible that in some circumstances that you want to customize the back button more than you can through the options mentioned above, in which case you can specify a
headerLeft
, just as we did withheaderRight
, and completely override the back button.