I'm trying to make a nested navigation in my React Native App
Stack Navigator
Screen1
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?