React Native [ Stacks - Navigation ] Give a function navigation-CodePudding

I am running into an issue where I want to pass navigation to a component

My setup is I have 2 views they both are using NavigationContainer

Issue is I want to make my own navbar, I made it its own component located in its own nav.js file I am unable to figure out how to give the component navigation.

How can I fix this?

App.js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import LoginScreen from './views/login'

import HomeScreen from './views/home'
import ProfileScreen from './views/profile'

export default function App() {
  const Stack = createStackNavigator();
  
  return (
    <NavigationContainer linking={{
      config: {
        screens: {
          Login: "/",
          Home: "/home",
          Profile: "/Profile/:Username"
        }
      },
      }}>
      <Stack.Navigator
      screenOptions={{
        headerShown: false
      }}>
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Home.js

import MobileNav from './nav/mobile'

const Home = ({navigation}) => {
      return (
        <View style={styles.Body} >
              // Home Contect here
            <MobileNav />
        </View>

      );
  }
  
export default Home;

Nav.js

const MobileNav = () => {
      return (
        <View style={styles.NavBody} >

            <View style={styles.FlexBody}>
              
              <View style={styles.FlexGroup} >
                <Pressable style={styles.ProfilePictureParent} onPress={() => this.navigation.navigate("Profile", {Username: 'IAmVolvic'}) }>
                  <Image 
                    source={{uri: 'https://avatars.dicebear.com/api/adventurer/IAmVolvic.svg'}} 
                    style={styles.ProfilePicture} 
                  />
                </Pressable>
              </View>

            </View>
            
        </View>
      );
  }
  
  export default MobileNav;

CodePudding user response：

You should be able to simply use the useNavigation hook here. eg:

import {useNavigation} from '@react-navigation/native';
const MobileNav = () => {

const Navigation = useNavigation();

      return (
        <View style={styles.NavBody} >

            <View style={styles.FlexBody}>
              
              <View style={styles.FlexGroup} >
                <Pressable style={styles.ProfilePictureParent} onPress={() => Navigation.navigate("Profile", {Username: 'IAmVolvic'}) }>
                  <Image 
                    source={{uri: 'https://avatars.dicebear.com/api/adventurer/IAmVolvic.svg'}} 
                    style={styles.ProfilePicture} 
                  />
                </Pressable>
              </View>

            </View>
            
        </View>
      );
  }
  
  export default MobileNav;