Navigate using MenuItem onPress

Question

I'm using UI-Kitten's Topbar, and in there, I want to switch to a different Screen onPress:

const MenuIcon = (props): IconElement => (
    <Icon
      {...props}
      name='three-bars'
    />
);

const InfoIcon = (props): IconElement => (
    <Icon
      {...props}
      name='info'
    />
);

export const TopNavigator = (): React.ReactElement => {
  const [menuVisible, setMenuVisible] = React.useState(false);

  const toggleMenu = (): void => {
    setMenuVisible(!menuVisible);
  };

  const renderMenuAction = (): React.ReactElement => (
    <TopNavigationAction
      icon={MenuIcon}
      onPress={toggleMenu}
    />
  );
  const themeContext = React.useContext(ThemeContext);
  const renderRightActions = (): React.ReactElement => (
    
    <>
      <OverflowMenu
        anchor={renderMenuAction}
        visible={menuVisible}
        onBackdropPress={toggleMenu}
      >
        <MenuItem 
          accessoryLeft={InfoIcon}
          title='About'
          onPress={() => navigation.navigate('myScreenName')}
        />
      </OverflowMenu>
    </>
  );

  return (
    <Layout
      style={styles.container}
      level='1'
    >
      <TopNavigation
        alignment='center'
        title='App'
        accessoryRight={renderRightActions}
      />
    </Layout>
  );
};

When I now click the about, it says:

Property 'navigation' doesn't exist

I know that I have to do something with a navigation prop, but I don't really know where and how. I couldn't figure it out. Everything I've tried led to more errors and problems. Could someone help me out?

Answer 1

In the TopNavigator execution context, there is no definition of navigation. I don't know you comply with the hierarchy of react-navigation rules or not. But if you did, you would call useNavigation hook in the TopNavigator function like the following:

export const TopNavigator = (): React.ReactElement => {
  const navigation = useNavigation();

Then you shouldn't see that error.