react-native: how can I do a navigation somewhere in a modal

Viewed 34

I have this in app.js

<NavigationContainer>
<TabNav.Navigator initialRouteName='home'>
<TabNav.Screen name='home' component={Map} options={{
            tabBarIcon: ({ color }) => (
              <MaterialCommunityIcons name="map-search-outline" color={color} size={30} style={style.iconStyle} />
            ),
            tabBarLabel: (null)
          }} />
          <TabNav.Screen name='user' component={User} options={{
            tabBarIcon: ({ color }) => (
              <MaterialCommunityIcons name="card-account-details-outline" color={color} size={30} style={style.iconStyle} />
            ),
tabBarLabel: (null)
          }} />

          <TabNav.Screen name='settings' component={Settings} options={{
            tabBarIcon: ({ color }) => (
              <MaterialCommunityIcons name="set-square" color={color} size={30} style={style.iconStyle} />
            ),
            tabBarLabel: (null)
          }} />
        </TabNav.Navigator>
      </NavigationContainer>

In the component Map with the MapView there is markers showing modals with informations. How can I go into new form screens component edit and report from that modal ? Navigation stack doesn't work from there, or I am missing something ?

1 Answers

You can simply do it by passing props.

<Component navigation={this.props.navigation} />

Inside Component

this.props.navigation.navigate('NextScreen')
Related