I'm building a React Native app using Expo and i can't find a way to call the navigation function inside a Stack from my App.js

here is my App.js (Look the TouchableOpacity inside Home Stack)

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Login from "./src/screens/Login/Login";
import Home from "./src/screens/Home/Home";
import Profile from "./src/screens/Profile/Profile";
import { Image, Text, TouchableOpacity } from "react-native";
import profileIcon from "./assets/img/profile.jpg";

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer style={{ position: "relative" }}>
      <Stack.Navigator>
        <Stack.Screen
          name="Login"
          component={Login}
          options={{ title: "Login", headerShown: false }}
        />
        <Stack.Screen
          name="Home"
          component={Home}
          options={{
            title: "LOCOMOOV",
            headerRight: () => (
              <TouchableOpacity onPress={() => { >>> FUNCTION TO NAVIGATE HERE <<< }} style={{zIndex: 1, position: 'absolute', right: 0}}>
                <Image
                  source={profileIcon}
                  style={{ width: 30}}
                  resizeMode="contain"
                />
              </TouchableOpacity>
            ),
            headerStyle: {
              backgroundColor: "#092969",
            },
            headerTintColor: "#fff",
            headerTitleStyle: {
              fontWeight: "bold",
            },
            headerBackTitle: "Sair",
          }}
        />
        <Stack.Screen
          name="Profile"
          component={Profile}
          options={{ title: "Perfil", headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

it's easy to do it outside App.js, calling navigation prop, but i have no idea how to do it here

CodePudding user response：

navigation is passed as a prop to stack screen options:

          options={({ navigation }) => ({
            headerRight: () => (
              <TouchableOpacity onPress={() => navigation.navigate('Profile')}} style={{zIndex: 1, position: 'absolute', right: 0}}>
                <Image
                  source={profileIcon}
                  style={{ width: 30}}
                  resizeMode="contain"
                />
              </TouchableOpacity>
            ),
          })}