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?