Custom headerRight/headerLeft buttons are not clickable on Android

[reinvanimschoot]

I just noticed that custom buttons on Android are not clickable.

The simplest example would be a one screen stack navigator:

const TestStack = createStackNavigator({
  TestScreen: {
    screen: TestScreen,
    navigationOptions: ({navigation}) => ({
      headerRight: (
        <TouchableOpacity
          onPress={() => console.log('Button is Pressed!') }>
          <Text>PRESS ME</Text>
        </TouchableOpacity>
      ),
    }),
  },

Everything works flawless on iOS but on Android I get not press feedback. I tried adding elevation, a different combination of headerModes, but even in this simple example it's not working.

[VeXell]

@reinvanimschoot I had same problem because i have div with position absolute above buttons. Style display was 'none', but i still could not click on android. I just changes height to 0 and it helped me.

[gavinangym]

I'm having this problem on v5 actually. Android only. The JSX inside the TouchableOpacity renders correctly, but logging the output of the onPress shows nothing is being called.

I'm wrapping my navigators as such: DrawerNavigator -> StackNavigator -> TabNavigator

            <Drawer.Navigator>
                <Drawer.Screen name="Home" component={HomeStack}/>
                <Drawer.Screen name="Settings" component={SettingsScreen}/>
            </Drawer.Navigator>

        <Stack.Screen
            name="home"
            component={HomeTabs}
            options={(props) => {
                const {navigation, route} = props;
                return ({
                headerTitle: () => <Image resizeMode='contain' style={styles.logo} source={logo} />,
                headerLeft: () => (
                    <TouchableOpacity onPress={() => navigation.toggleDrawer()} style={{flexDirection:"row", paddingLeft: 10}}>
                    <Icon
                      name='bars'
                      type='font-awesome'
                      color='white'
                      size={25}
                    />
                  </TouchableOpacity>
                ),
                gestureEnabled: false,
            })}}
            />

<Tab.Navigator tabBar={props => <BottomTabBar {...props}/>}>
            <Tab.Screen 
                name="listScreen" 
                component={ListScreen} 
                options={{
                    tabBarLabel: 'xxx',
                }}
            />
</Tab.Navigator>

Sooo, navigation.toggleDrawer() works correctly in the stack. However, inside the ListScreen, I use a leftButton to call navigation.goBack(), nothing happens and onPress is never called.

[github-actions[bot]]

Hey! Thanks for opening the issue. Can you provide a minimal repro which demonstrates the issue? Posting a snippet of your code in the issue is useful, but it's not usually straightforward to run. A repro will help us debug the issue faster. Please try to keep the repro as small as possible. The easiest way to provide a repro is on snack.expo.io. If it's not possible to repro it on snack.expo.io, then you can also provide the repro in a GitHub repository.

[elvispap]

Hey guys...I am having the same issue as well. I also posted on StackOverflow, you can see here.

For me on press event works on android works only in the main screen of every stack navigator but not in secondary screens. On IOS everything is fine.

Please, let me know if you find out the cause of the issue or I am willing to create a small repo where the issue occurs. @gavinangym let me know if you are going to upload the minimal repo which demonstrates the issue because it can be we are facing the same issue.

[gavinangym]

I created an expo snack, but that one seems to work. Not sure if its the emulator or what. Still tracing the differences between my actual app implementation and the snack. Best if you can also upload your repo while I see what is the difference between my snack and actual

[gavinangym]

Updating to the following packages seems to have resolved it for me: "@react-navigation/stack": "5.1.0", //was 5.0.5 "@react-navigation/drawer": "5.1.0", //was 5.0.5 "@react-navigation/native": "5.0.8", //was 5.0.5 "@react-navigation/bottom-tabs": "5.1.0", //was 5.0.5

[tamangsuresh]

Any one have solution for v4.

[raajnadar]

upgrade to latest version

[sadikyalcin]

I had the same issue on one screen (StackNavigator) on v4. I only have one screen on my stack now so removing headerMode, transitionConfig and disabling gestures fixed it. @tamangsuresh give it a try.

[nanacnote]

Please make sure headerMode="screen" for some reason "float" does not work

[sabun123]

I was having this issue with React Navigation v5 as well, my custom headerLeft component was not fully clickable on Android but was totally fine on iOS. Basically, only at the very left tip of the screen on Android would headerLeft start recognizing user presses. I figure something invisible is sitting in the middle of the header overlapping my customer headerLeft.

In the styles of my custom headerLeft component, I just did:

  buttonContainer: {
    ...
    zIndex: 100, // fixes Android not allowing full touchableopacity to be press-able
  },

Adding a high z-index seems to do the trick, and my custom headerLeft component works as expected now on Android.

This is on the following versions of this package:

    "@react-navigation/drawer": "5.9.3",
    "@react-navigation/native": "5.7.4",
    "@react-navigation/stack": "5.9.3",

[aadityapaliwal94]

I am still facing this issue in Android. I am using react-navigation v5. Tried the above solutions but they didn't work. iOS is working fine.

My stack

const HomeStack = () => { return ( <Stack.Navigator mode='card' headerMode={"screen"} screenOptions={{ cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS }}> <Stack.Screen name='Home' component={Reader} options={({ route, navigation }) => ({ title: "Comic", headerShown:true, header: () => (<HeaderBar route={route} navigation={navigation} />) })} /> </Stack.Navigator> ) }

• "@react-navigation/compat": "^5.3.14",
• "@react-navigation/drawer": "^5.12.4",
• "@react-navigation/native": "^5.9.3",
• "@react-navigation/stack": "^5.14.3",

[abedolinger]

I doubt this is your problem @aadityapaliwal94, but I was just facing this issue and it was because I had defined conflicting styles in my headerRight component and my headerRightContainerStyle. Specifically I had set position: 'absolute', height: 0, width: 0 in headerRightContainerStyle, and then defined the headerRight component normally. I'm surprised the component displayed at all, but I am not surprised that it wasn't clickable.

[github-actions[bot]]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[zvs001]

Issue happened to me when I upgraded libs to v6

    "@react-navigation/core": "^6.0.1",
    "@react-navigation/drawer": "^6.1.4",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/stack": "^6.0.7",

[eddievlagea]

@zvs001 have you found a fix?

[zvs001]

Yes. it happens for me when I use headerTransparent: true

I solved it by adding headerMode param:

screenOptions: {
    headerMode: 'float',
}

[akinyele]

Was having this issue earlier. Just incase this helps anyone, what solved it for me was removing position: 'absolute'.

[hernanspc]

sasa

[shaquillehinds]

I had the same issue but for me it was because I had set tabBarStyle: {display: 'none'} in my bottomTabNavigator screenOptions. I'm using react navigation 6 so the only way to hide the bottom nav is to set the display to none or translateY. Using translateY to hide the bottom nav instead of display fixed it for me

[windyinwind]

The above solutions are not working for me. It turned out that I was importing TouchableOpacity from 'react-native-gesture-handler' After changing to import TouchableOpacity from 'react-native'. it started working for me.

[mattia-beta]

Yes. it happens for me when I use headerTransparent: true

I solved it by adding headerMode param:

screenOptions: {
    headerMode: 'float',
}

Yes!! It's working!!