React native - onpress doesn't work inside drawer navigation header

Question

I'm trying to add a custom menu icon button inside the navigation header in my react native app. I successfully did that, but the press event doesn't fire as long as the icon is in the header. For example, if I have the icon here:

https://www.dropbox.com/s/xyah9ei43wgt1ut/menu_regular.png?dl=0

The press event doesn't work, but if I have it here (moved it lower):

https://www.dropbox.com/s/54utpr1efb3o0lm/menu_moved.png?dl=0

The event fires ok.

Here's my current setup navigator:

const MainNavigator = createStackNavigator(
    {
        login: { screen: MainLoginScreen },
        signup: { screen: SignupScreen },
        profileScreen: { screen: ProfileScreen },
        main: {
            screen: createDrawerNavigator({
                Home: createStackNavigator(
                    {
                        map: {
                            screen: MapScreen,
                            headerMode: 'screen',
                            navigationOptions: {
                                headerVisible: true,
                                headerTransparent: false,
                                headerLeft: (
                                    <View style={{ position: 'absolute', left: 10, display: 'flex', zIndex: 11550 }}>
                                        <Icon
                                            raised
                                            name='bars'
                                            type='font-awesome'
                                            color='rgba(255, 255, 255, 0)'
                                            reverseColor='#444'
                                            onPress={() => { console.log("press"); navigation.goBack() }}
                                            reverse
                                        />
                                    </View>
                                )
                            }
                        },
                        history: { screen: HistoryScreen },
                        foundItem: { screen: FoundItemScreen },
                    }
                ),
                Settings: {
                    screen: SettingsScreen,
                    navigationOptions: ({ navigation }) => ({
                        title: 'Edit Profile',
                    })
                }
            }, {
                    contentComponent: customDrawerComponent,
                    drawerWidth: width * 0.8
                }
            )
        }
    }, {
        headerMode: 'screen',
        navigationOptions: {
            headerTransparent: true,
            headerLeftContainerStyle: { paddingLeft: 20 }
        }
    }
);

The icon from the screenshot is inside headerLeft. I've also tried various zIndex values, but with no luck.

Thanks in advance!

Edit:

The drawer has the same issue on the first item, press events don't work on the full area of the drawer item when it's over the header:

https://www.dropbox.com/s/krva5cgp7s59d13/drawer_opened.png?dl=0

score 0 · Answer 1 · answered May 03 '19 at 10:22

0

Try to wrap Icon inside some Touchable Element like TouchableOpacity/TouchableHighlight and then add an onPress prop to that element

answered May 03 '19 at 10:22

Usman Saeed

211
1
8

score 0 · Answer 2 · answered May 03 '19 at 10:23

You can get the onPress event in navigationOption's header using navigation params like

static navigationOptions = ({ navigation }) => ({
    headerLeft: (
            <TouchableOpacity  onPress={() => navigation.state.params.handleSave()} >
                <Image source={ImageSource} />
            </TouchableOpacity>
    )
})

Then set the navigation params from the componentDidMount like:

componentDidMount() {
    this.props.navigation.setParams({ handleSave: this.onSavePress.bind(this)})
}

then can call the method like:

onSavePress() {
    // Do Something
}

React native - onpress doesn't work inside drawer navigation header

2 Answers2