Modifying back button with react-navigation on specific screen

Question

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).

Answer 1

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')}}/>)
 }
}

Answer 2

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 with headerRight, and completely override the back button.

Answer 3

If you are on version 5, and are dealing with a functional component, you can use a layout effect hook to accomplish this (example from the docs reference):

function ProfileScreen({ navigation, route }) {
  const [value, onChangeText] = React.useState(route.params.title);

  React.useLayoutEffect(() => {
    navigation.setOptions({
      title: value === '' ? 'No title' : value,
    });
  }, [navigation, value]);

Note that if you are changing headerLeft, you may need to pass a function to it (GH issue reference).

Answer 4

By default, HeaderBackButton component is used. You can implement it and use it to override the back button styles, press props, for example: link to docs

import { HeaderBackButton } from '@react-navigation/stack';

const styles = StyleSheet.create({
  custom: {
  // Custom styles here
  }
});

<Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerLeft: (props) => (
      <HeaderBackButton
        {...props}
        style={styles.custom}
        onPress={() => {
        // Do something
        }}
      />
    ),
  }}
/>;

If you want full control, you can use your custom back button component, example:

import { CustomBackButton } from 'path/to/custom/component';

<Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerLeft: (props) => (
      <CustomBackButton {...props} />
    ),
  }}
/>;

Answer 5

You can do this while creating the stack navigator as well. Updated as of react-navigation v4.

import { createStackNavigator, HeaderBackButton } from "react-navigation-stack";

const yourStackNavigator = createStackNavigator({
  SomeRoute: SomeScreen,
  SpecificRoute: {
    screen: SpecificScreen,
    navigationOptions: ({ navigation }) => ({
        headerLeft: (<HeaderBackButton onPress={_ => navigation.navigate("Somewhere")}/>)
    })
  },
});

Answer 6

Short Way

You have A, B, C screens. You are currently A, after touch component you entered B. Now you are in screen B. In screen B your code can execute like under example:

// handling after back button event
navigation.pop();  // The B screen will delete
navigation.navigate("C");  // The C you are switching

Now you are in C. If you use back button you are going to go back to A.

Alternatively, we can use replace:

// handling after back button event
navigation.replace("C");  // The B screen will put out for C