CODEWITHSUNDEEP
react-nativereact-native-navigation
Malcolm S
Malcolm S

Reputation: 133

React Native how to programmatically navigate to a stack screen that is on a tab navigator

I have searched tirelessly for an answer to this issue.

I have a Tab Navigator:

const AppNavigator = () => {
return (
<Tab.Navigator initialRouteName="Search">
  <Tab.Screen
    name="Home"
    children={() => <HomeScreen />}
    options={{
      tabBarIcon: ({ color, size }) => (
        <MaterialCommunityIcons name="home" color={color} size={size} />
      ),
    }}
  />
  <Tab.Screen
    name="Search"
    children={() => <SearchContainerNavigator />}
    options={{
      tabBarIcon: ({ color, size }) => (
        <FontAwesome5 name="search" color={color} size={size} />
      ),
    }}
  />
  <Tab.Screen
    name="Feedback"
    children={() => <FeedbackScreen />}
    options={{
      tabBarIcon: ({ color, size }) => (
        <MaterialCommunityIcons name="email" color={color} size={size} />
      ),
    }}
  />
</Tab.Navigator>
);
};

And this Stack navigator:

const SearchContainerNavigator = () => (
<Stack.Navigator screenOptions={{ headerShown: false}} initialRouteName="SearchSelect">
    <Stack.Screen name="SearchSelect" component={SearchSelectScreen} />
    <Stack.Screen name="AircraftSearch" component={AircraftSearchScreen} />
    <Stack.Screen name="AircraftResults" component={AircraftResultsScreen} />
    <Stack.Screen name="AircraftDetail" component={AircraftDetailScreen} />
    <Stack.Screen name="BrandSearch" component={BrandSearchScreen} />
    <Stack.Screen name="BrandResults" component={BrandResultsScreen} />
    <Stack.Screen name="BrandDetail" component={BrandDetailScreen} />
    <Stack.Screen name="Favourites" component={FavouritesScreen} />
</Stack.Navigator>
)

My issue is how do I programmatically navigate from HomeScreen tab to the AircraftDetailsScreen on the Search Tab??

Thanks in advance.

EDIT:

HomeScreen is a class.

 handleAircraftSelect = (aircraft_id) => {
 this.props.navigation.navigate("Search", {
   screen: "AircraftDetail",
   params: { id: aircraft_id },
 });
 };

Upvotes: 3

Views: 5289

Answers (2)

Kalpak Deshpande
Kalpak Deshpande

Reputation: 31

For react-navigation 6.x you can use this like below:

navigation.jumpTo('Profile', { name: 'Michaś' });

Upvotes: 3

V&#225;clav Ryska
V&#225;clav Ryska

Reputation: 248

navigation.navigate('Search', {screen: 'AircraftDetail'});

https://reactnavigation.org/docs/nesting-navigators/#navigating-to-a-screen-in-a-nested-navigator

Upvotes: 8

Related Questions