Displaying Icon in headerLeft option

[AllanAraujo]

💬 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?

UI Kitten and Eva version

Package	Version
@eva-design/eva	^2.0.0
@ui-kitten/components	^5.0.0
@ui-kitten/eva-icons"	^5.0.0

[artyorsh]

I'd suggest using DrawerNavigator with custom component property. We can't predict the usage of React Navigation (or any other navigation library) in the apps you build.

See the guide.