how to nest navigation with react native?

Viewed 30

here is my AppNavigator.js

    const StackNavigator = createStackNavigator(
    {
        LoginScreen: LoginScreen,
        RegisterScreen: RegisterScreen,
        Tabs:Tabs,
        Detail:DetailScreen 
    }, 
    { 
        initialRouteName: 'LoginScreen',
        headerMode: 'none',
    });
export default createAppContainer(StackNavigator)

here is my Tabs.js

<Tab.Navigator
tabBarOptions={{
    showLabel: false,
    style:{
        position: 'absolute',
        bottom:5,
        left:5,
        right:5,
        elevation:0,
        backgroundColor: '#068b71',
        borderRadius:10,
        height: 50,
        ...styles.shadow
    }
}}>
  <Tab.Screen name="Home" component={HomeScreen} 
  options={{
      tabBarIcon:({focused})=>(
          <View style={{alignItems:'center', justifyContent:'center'}}>
              <Image source={require('../assets/icons/home.png')} 
              resizeMode='contain'
              style={{
                  width:25,
                  height:25,
                  tintColor: focused ? '#ffffff' : '#748c94'
              }}/>
              <Text style={{color: focused ? '#ffffff' : '#748c94', fontSize:10}}>Home</Text>
          </View>
      )
  }} >
  </Tab.Screen>
  <Tab.Screen name="Profile" component={ProfileScreen} 
  options={{
      tabBarIcon:({focused})=>(
          <View style={{alignItems:'center', justifyContent:'center'}}>
              <Image source={require('../assets/icons/profile.png')} 
              resizeMode='contain'
              style={{
                  width:25,
                  height:25,
                  tintColor: focused ? '#ffffff' : '#748c94'
              }}/>
              <Text style={{color: focused ? '#ffffff' : '#748c94', fontSize:10}}>Profile</Text>
          </View>
      )
  }} />
  
</Tab.Navigator>

and i want to navigate from list view that exist in homeScreen

 <TouchableOpacity style={styles.item} onPress={()=>{navigation.navigate('Detail')}}>

i got this error : The action 'NAVIGATE' with payload {"name":"Detail"} was not handled by any navigator. itry many solution but none of them work help please im stuck.

0 Answers
Related