Calling useNavigation hook from TouchableOpacity inside a DrawerNavigator from react-navigation pkg throwing error, full source on question body

Question

I'm learning react and react-native last 4 days because need build an mobile app and having the following problem when coding a react-native app:
After some research I found a way to embed a TouchableOpacity inside the top bar of DrawerNavigator, just after the hamburger button and it works giving me an alert.
The problem comes when I try to replace the alert with a call to useNavigation().navigate('Login'); from inside it onPress attribute, it throw the error below.
I want mirror the behavior of menu item on the TouchableOpacity doing the navigation.

 Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem., js engine: hermes
info Reloading app...

The full source follow as:

import * as React from 'react';
import { Button, Image, StyleSheet, Text, TouchableOpacity, View, Alert  } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
} from '@react-navigation/drawer';
// https://reactnavigation.org/docs/use-navigation/
import { useNavigation } from '@react-navigation/native';

const getScreenCtx = content => {
  return (<View style={stl.boxCtx}>{content}</View>);
}

const Home = ({ navigation }) => {
  return ( getScreenCtx(<Text style={stl.boxDescr}>Home</Text>) );
}
const Login = ({ navigation }) => {
  return ( getScreenCtx(<Text style={stl.boxDescr}>Login</Text>) );
}
const Logout = ({ navigation }) => {
  return ( getScreenCtx(<Text style={stl.boxDescr}>Logout</Text>) );
}

const navToLogin = () => {
  useNavigation().navigate('Login');
}

const NestedTabBar = props => {
  return (
  <>
    <TouchableOpacity
      style={stl.itemNav}
      onPress={
        () => {
          //Alert.alert('NavigateToLogin');
          navToLogin();
        }
    } >
      <Text>[NavigateToLogin]</Text>
    </TouchableOpacity>
  </>
  );
}

const ContentTopWideHamburgBar = props => {
  return <NestedTabBar />;// <Text style={stl.hamburgBar}>ContentTopHamburgBar</Text>
}
const ContentColapsibleSideBarMenuHeader = props => {
  return <Text style={stl.sideMenuHeader}>SideBarMenuHeader</Text>
}
const ContentColapsibleSideBarMenuFooter = props => {
  return <Text style={stl.sideMenuFooter}>SideBarMenuFooter</Text>
}

const ContentColapsibleSideBarMenu = props => {
  return (
    <View style={stl.sideBarMenu}>
      <DrawerContentScrollView {...props}>
        <ContentColapsibleSideBarMenuHeader/>
        <DrawerItemList {...props} />
      </DrawerContentScrollView>
      <ContentColapsibleSideBarMenuFooter/>
    </View>
  );
}

const Drawer = createDrawerNavigator();

const ContentItensNavigationRouteMap = () => {
  return (
    <>
      <Drawer.Screen component={Home} name='Home' />
      <Drawer.Screen component={Login} name='Login' />
      <Drawer.Screen component={Logout} name='Logout' />
    </>
  );
}

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
        screenOptions={
          {
            headerStyle: { backgroundColor: 'magenta', },
            headerTintColor: 'white', // hamburg color
            headerTitleStyle: { fontWeight: 'bold', },
            headerTitle: (props) => <ContentTopWideHamburgBar {...props} />
          }
        }
        contentOptions={
          {
            activeTintColor: 'red',
            activeBackgroundColor: 'red',
            inactiveTintColor: 'red',
            inactiveBackgroundColor: 'red',
          }
        }
        drawerContent={props => <ContentColapsibleSideBarMenu {...props} />} >
          {ContentItensNavigationRouteMap()}
    </Drawer.Navigator>
  );
};

export default function ShellNavigator() {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
}

const stl = StyleSheet.create({
  boxDescr: {
    fontSize: 30,
    margin: 10,
    padding:10,
    backgroundColor: 'lightblue',
    color: 'red',
  },
  boxCtx:{
    display: 'flex',
    flex: 1,
    fontSize: 30,
    margin: 0,
    backgroundColor: 'yellow',
  },
  hamburgBar: {
    fontSize: 20,
    margin: 10,
    backgroundColor: 'pink',
  },
  sideMenuHeader: {
    fontSize: 20,
    margin: 10,
    backgroundColor: 'blueviolet',
  },
  sideMenuFooter: {
    fontSize: 20,
    margin: 10,
    backgroundColor: 'purple',
  },
  sideBarMenu: {
    flex: 1,
    fontSize: 20,
    margin: 10,
    backgroundColor: 'greenyellow',
  },
  itemNav: {
    fontSize: 40,
    padding: 10,
    backgroundColor: 'red',
  },
});

Answer 1

Here navToLogin is a stand alone function, not in a Functional component. Hooks need to be in a functional component to use. The bellow code should work which navToLogin move the function inside a functional component.

const NestedTabBar = props => {
  const navigation = useNavigation();

  const navToLogin = () => {
    navigation.navigate('Login');
  }
  
  return (
  <>
    <TouchableOpacity
      style={stl.itemNav}
      onPress={
        () => {
          //Alert.alert('NavigateToLogin');
          navToLogin();
        }
    } >
      <Text>[NavigateToLogin]</Text>
    </TouchableOpacity>
  </>
  );
}