Using UIKitten Icon in Header options react navigation 5

Question

I have a stack/drawer navigation in my application. I'd like to be able to have a menu icon in my top header navigation that toggles the Drawer menu open and closed.

This is my code:

import * as React from 'react';
import { useNavigation, DrawerActions } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { TouchableOpacity } from 'react-native';
import {
  Layout,
  Icon,
  Text,
  TopNavigation,
  TopNavigationAction,
} from '@ui-kitten/components';
import DrawerMenu from './DrawerMenu';

const Stack = createStackNavigator();

const MenuIcon = (props) => <Icon name="menu" {...props} />;

const ToggleMenuAction = () => <TopNavigationAction icon={MenuIcon} />;

const MenuButton = () => (
  <TopNavigation accessoryLeft={ToggleMenuAction} title="Eva Application" />
);

const HeaderLeft = () => {
  const navigation = useNavigation();
  return (
    <Layout style={{ flexDirection: 'row' }}>
      <TouchableOpacity
        onPress={() => {
          navigation.dispatch(DrawerActions.toggleDrawer());
        }}
      >
        <MenuButton />
      </TouchableOpacity>
    </Layout>
  );
};

export default function AppStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        options={{
          // eslint-disable-next-line react/display-name
          headerLeft: () => <HeaderLeft />,
        }}
        component={DrawerMenu}
        name="Drawer"
      />
    </Stack.Navigator>
  );
}

I do not want to have the title next to my header button. What is odd is that when I remove the title field from

const MenuButton = () => (
  <TopNavigation accessoryLeft={ToggleMenuAction} title="Eva Application" />
);

And make it just

const MenuButton = () => (
  <TopNavigation accessoryLeft={ToggleMenuAction} />
);

The toggle functionality just stops working. I have to click the menu button several times to make the menu toggle open and closed, but when the title is there, it works smoothly.

Why would that be the case?

Answer 1

By removing the title you are making the hit area (the area that triggers the onPress event) smaller.
You can see the area by setting a background color for the TouchableOpacity.
Also, clicking on the menu icon directly does not trigger the onPress event, you need to click in the red space around the menu icon to trigger it.
So the fact that you have to click multiple times most likely comes down to hitting the right spot.

With title:

const MenuButton = () => (
  <TopNavigation accessoryLeft={ToggleMenuAction} title="Eva Application" style={{backgroundColor:'red'}}/>
);

Without title:

const MenuButton = () => (
  <TopNavigation accessoryLeft={ToggleMenuAction} style={{backgroundColor:'red'}}/>
);