js react react native react navigation

In React Navigation, you can navigate from a child navigator to a screen in the parent navigator by using the navigation prop and accessing the parent navigator’s navigation object.

To achieve this, you need to pass the navigation object of the parent navigator down to the child navigator as a prop. Here’s an example of how you can set it up:

import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';

// Child Navigator
const ChildStack = createStackNavigator({
  ChildScreen1: { screen: ChildScreen1 },
  ChildScreen2: { screen: ChildScreen2 },
});

// Parent Navigator
const ParentTabNavigator = createBottomTabNavigator({
  ParentScreen1: { screen: ParentScreen1 },
  ParentScreen2: { screen: ParentScreen2 },
  ChildStack: { screen: ChildStack },
});

// Create App Container
const AppContainer = createAppContainer(ParentTabNavigator);

// In your ParentScreen1 or ParentScreen2 component
// Pass the navigation object down to the ChildStack component as a prop
class ParentScreen1 extends React.Component {
  render() {
    return (
      <View>
        {/* Other content */}
        <ChildStack navigation={this.props.navigation} />
      </View>
    );
  }
}

// In your ChildScreen1 or ChildScreen2 component
// Access the parent navigator's navigation object to navigate to a screen in the parent navigator
class ChildScreen1 extends React.Component {
  navigateToParentScreen = () => {
    this.props.navigation.navigate('ParentScreen2'); // Navigating to ParentScreen2
  };

  render() {
    return (
      <View>
        {/* Other content */}
        <Button onPress={this.navigateToParentScreen} title="Go to ParentScreen2" />
      </View>
    );
  }
}

In the example above, the ChildStack is nested inside the ParentTabNavigator. The ParentScreen1 component passes the navigation prop down to the ChildStack component. Then, in the ChildScreen1 component, you can access the navigation object through this.props.navigation and use it to navigate to the ParentScreen2 by calling navigate('ParentScreen2').

Remember to import the necessary components from the react-navigation package and wrap your top-level component with the AppContainer to enable navigation.

Note: The example above assumes you are using the latest version of React Navigation (v5 or above). If you are using an older version, the syntax and methods may differ slightly.

Another Example In ReactNative

        <NavigationContainer>
            <Stack.Navigator initialRouteName={'LoginNavigation'}>
                <Stack.Screen name="LoginNavigationScreen"
                              component={LoginNavigation}
                              options={{
                                  headerTitle: 'Login'
                              }}
                />
                <Stack.Screen name="HomeScreen"
                              component={HomeScreen}
                              options={{
                                  headerTitle: 'Home',
                                  headerLeft: () => ProfileImage
                              }}
                />



function LoginNavigation(){
    const Stack = createNativeStackNavigator();
    return(
            <Stack.Navigator initialRouteName={'BabyProfileScreen'}  screenOptions={{ headerShown: false }}>
                <Stack.Screen name="SplashScreen"
                              component={SplashScreen}
                              options={{
                                  headerTitle: 'Baby Monitor'
                              }}
                />
                <Stack.Screen name="BabyProfileScreen"
                              component={BabyProfileScreen}
                              options={{
                                  headerTitle: 'Baby Profile'
                              }}
                />
            </Stack.Navigator>
    )
}

export default LoginNavigation;

function BabyProfileScreen({navigation}) {
...
// From a screen in child navigation, you can navigate to any screen in 
//   parent screen.
return(
  <List.Item onPress={()=>navigation.navigate('HomeScreen')}
     title={kid.name}
     description={`${kid.gender}, ${moment(kid.dob).format('LL')}, ${kid.weight} gm`}
     left={props => kid.picture ? <Avatar.Image size={40} source={{uri: kid.picture}} /> : <List.Icon icon={'profile'}/>}
  />
)