0

I was trying to call the this.props.navigation.goBack() function after I modified the headerLeft icon:

const Stack = createStackNavigator();

class App extends Component {
  render() {
    return (
        <NavigationContainer>
          <Stack.Navigator
            initialRouteName={'VideoList'}
            screenOptions={{
              headerBackTitleVisible: false,
            }}>
            <Stack.Screen
              name="Video Details"
              component={VideoDetails}
              options={{
                headerBackTitleVisible: false,
                headerLeft: ({focused}) => (
                  <TouchableOpacity onPress={this.props.navigation.goBack()}>
                    <Image
                      source={icons.back}
                      resizeMode="contain"
                      style={{
                        width: 15,
                        height: 15,
                        marginLeft: 20,
                        tintColor: focused ? COLORS.primary : COLORS.secondary,
                      }}
                    />
                  </TouchableOpacity>
                ),
              }}
            />
          </Stack.Navigator>
        </NavigationContainer>
    );
  }
}

As you can see I am using an image to replace the headerLeft, however upon clicking the button via TouchableOpacity it doesn't redirect me to the previous screen. The back button doesnt push back using this.props.navigation.goBack();

Any idea how to fix this?

  • Does this answer your question? [React Navigation back() and goBack() not working](https://stackoverflow.com/questions/45489343/react-navigation-back-and-goback-not-working) – Danial Sep 11 '21 at 09:39
  • I tried it but it did not work. Same with this `this.props.navigation.goBack(null); ` –  Sep 11 '21 at 09:45

1 Answers1

1

Please try this

  headerLeft: ({onPress}) => (
              <TouchableOpacity onPress={onPress}>
               {...}
              </TouchableOpacity>
            )
Malik Abdullah
  • 166
  • 5
  • 1
    It works! can you explain why does it works and the `this.props.navigation.goBack()` didnt? –  Sep 11 '21 at 10:03
  • 1
    Yes if you go to definition of headerLeft you can see all supported props. And also there is one writing mistake you are trying onPress={this.props.navigation.goBack()} correct method : onPress={()=>this.props.navigation.goBack()} onPress={this.props.navigation.goBack} – Malik Abdullah Sep 11 '21 at 10:11
  • `onPress` works but `onPress={()=>this.props.navigation.goBack()} onPress={this.props.navigation.goBack}` did not work. Eitherway thanks! –  Sep 11 '21 at 10:15