Navigate to nested screen react native

Question

I have a bottom tab navigator like so:

const Tab = BottomTabNavigator()

const BottomTab = () => (

  <Tab.Navigator>
    <Tab.Screen name = "Feed" component = {FeedNavigator}/>
    <Tab.Screen name = "Profile" component = {Profile}/>
  <Tab.Navigator>
)

The feed component is a Stack navigator like so:

const FeedNavigator = () => {
  return (
    <Stack.Navigator> 
      <Stack.Screen name = "Food" component = {Food}/>
      <Stack.Screen name = "MainFeed" component = {MainFeed}/>
    </Stack.Navigator>
  )
}

how do i navigate from my Profile screen to the Food component inside the FeedNavigator and pass props to it

score 0 · Accepted Answer · answered May 25 '22 at 13:17

0

navigation.navigate('Feed', { screen: 'Food', params: { user: 'jane'}, });

answered May 25 '22 at 13:17

Sergey Kharatyan

96
2

the problem with this is that now everytime you try to access Feed from anywhere in the app it will automatically redirect you to Food – OneTuskedMario Oct 23 '22 at 20:02

score 0 · Answer 2 · answered May 25 '22 at 14:37

0

You can navigate in a nested navigator using below code.

navigation.navigate('Feed',{ screen: 'Food',params : {}})

answered May 25 '22 at 14:37

Muhammad Ashfaq

2,359
5
20
46

Navigate to nested screen react native

2 Answers2