0

I'm trying to make a nested navigation in my React Native App

Stack Navigator

  1. Screen1

  2. Screen2

    Tab Navigator

    a. Screen 3

    b. Screen 4

Tab Navigator exists inside Screen 2 components.

App.js

return (
      <NavigationContainer>
        <Stack.Navigator screenOptions={{ headerShown: false }}>
          {isLoggedin ? (
            <>
             
              <Stack.Screen name="Dashboard" component={Dashboard} />
            </>
          ) : (
            <> 
              <Stack.Screen name="Login" component={LoginScreen} />
              <Stack.Screen name="LoginUser" component={LoginUserName} />
            </>
          )}
          {/* <Stack.Screen name="Documentaiton" component={LoginUserName} /> */}
        </Stack.Navigator>
      </NavigationContainer>
  
  );
export default App;

Dashboard.js

return (
    

    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Home} />
    </Tab.Navigator>

   
  );
}
export default Dashboard;

Home.js

  return (
    <View style={{ flex: 1, backgroundColor: colors.white }}>
      <Text> TEST </Text>
    </View>
  );
}

export default Home;

I'm getting an error regarding exporting, since its components, could the issue be that I'm doing nesting navigation between components with exporting methods?

BitByte
  • 121
  • 6
  • 1
    This looks like an issue around exporting indeed. It would be helpful to have the full files, and not just core of it. Maybe you're importing `{ Home }` instead of `Home` ? – walidvb Aug 31 '20 at 17:06
  • All the importing is done properly such as the follownig, import Dashboard from "./app/screens/Dashboard"; – BitByte Aug 31 '20 at 20:54
  • Then it should work, as far as I can see. An example on codesandbox.io might help people to debug. – walidvb Sep 01 '20 at 13:02

0 Answers0