CODEWITHSUNDEEP
javascriptreact-nativereact-navigationreact-navigation-v5
Arun Chaitanya
Arun Chaitanya

Reputation: 23

How to set a specific screen in deeply nested navigator with navigation.navigate -react native

In StackScreen Component, you can see that the button navigates to the deeply nested navigator MyMatches which is a TopTab Navigator. If I press the button in StackScreen component, MyMatches1 screen is opened by default because it is mentioned first in MyMatchesTopTabNavigator. But what if I want to open MyMatches2 screen on press of the button. I am not able to choose child screens furthur. Please Help.

Here is the demo link. Download Expo to see the demo https://snack.expo.io/3h_Sv-Izw

const Tab = createMaterialTopTabNavigator();
const Stack = createStackNavigator();
const BottomTab = createBottomTabNavigator();

const MyMatchesListScreen = ({route, navigation}) => {
  return (
    <View style={styles.matchesListContainer}>
      <Text>My Matches List</Text>
    </View>
  );
};

const MatchesListScreen = ({route, navigation}) => {
  return (
    <View style={styles.matchesListContainer}>
      <Text>Matches List</Text>
    </View>
  );
};

const StackScreen = ({route, navigation}) => {
  return (
    <View style={styles.matchesListContainer}>
      <Text>Stack Screen</Text>
      **
      <Button
        title="Go to stack Screen"
        onPress={() => {
          navigation.navigate('MyTabs', {screen: 'MyMatches'});
        }}
      />
      **
    </View>
  );
};

function MatchesTopTabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Matches1" component={MatchesListScreen} />
      <Tab.Screen name="Matches2" component={MatchesListScreen} />
    </Tab.Navigator>
  );
}

function MyMatchesTopTabNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="MyMatches1" component={MyMatchesListScreen} />
      <Tab.Screen name="MyMatches2" component={MyMatchesListScreen} />
    </Tab.Navigator>
  );
}

function HomeBottomNavigator() {
  return (
    <BottomTab.Navigator>
      <Tab.Screen name="Matches" component={MatchesTopTabNavigator} />
      <Tab.Screen name="MyMatches" component={MyMatchesTopTabNavigator} />
    </BottomTab.Navigator>
  );
}

function StackNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="StackScreen" component={StackScreen} />
        <Stack.Screen name="MyTabs" component={HomeBottomNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default function App() {
  return (
    <View style={styles.container}>
      <StackNavigator />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 20,
    height: '100%',
    width: '100%',
    flex: 1,
  },
  matchesListContainer: {
    height: '100%',
    width: '100%',
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Upvotes: 2

Views: 984

Answers (1)

XplosiVe06
XplosiVe06

Reputation: 646

A bit late, but for those coming here:

navigation.navigate('MyTabs', {
    screen: 'MyMatches',
    params: {
      screen: 'MyMatches2',
      params: {
        param1: '',
      },
    },
  })

Upvotes: 1

Related Questions