After the user is logged in the code will call: navigation.navigate('Dashboard'); to navigate to the dashboard and display the bottom tab menu. However, this is not working. How do I navigate from the login page to the my tab menu again?
If I remove the const navigation = useNavigation(); it is still not working
This is app.js:
export default function App() {
const navigation = useNavigation();
useEffect(() => {
auth.onAuthStateChanged(user => {
navigation.navigate('MyTabs');
// alert("Should go dash");
})
}, [])
if (1 == 1){
return (
<LoginScreen />
);
}
return (
<MyTabs />
);
}
This is my bottom tab menu:
const Tab = createBottomTabNavigator();
const dashboardName = "Dashboard";
const activitesName = "Activities";
const friendsName = "Friends";
function MyTabs() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName={dashboardName}
screenOptions={({route}) => ({
tabBarIcon: ({focused, color, size}) => {
let iconName;
let rn = route.name;
if(rn === dashboardName) {
iconName = 'stats-chart';
} else if (rn === friendsName) {
iconName = 'person';
} else {
iconName = 'calendar';
}
return <Ionicons name={iconName} size={size} color={color} />
},
tabBarStyle:{
height:60,
backgroundColor: '#000000'
},
tabBarItemStyle:{
activeTintColor: '#5DB075'
}
})}
tabBarOptions={{
activeTintColor: '#5DB075',
inactiveTintColor: '#ffffff',
labelStyle: { paddingBottom: 10, fontSize: 10, outerHeight: 100},
}}
>
<Tab.Screen name={activitesName} component={Activities} />
<Tab.Screen name={dashboardName} component={Dashboard} />
<Tab.Screen name={friendsName} component={Friends} />
</Tab.Navigator>
</NavigationContainer>
);
}
Neither App nor Login are located in a navigator inside the navigation container. This can't work. You need an authentication workflow which conditionally renders the LoginScreen or all the other screens. No navigation is needed (and it doesn't work in this case).
Here is the recommended way to fix this according to react-native-navigation.
const Tab = createBottomTabNavigator();
const dashboardName = "Dashboard";
const activitesName = "Activities";
const friendsName = "Friends";
export default const App = () => {
const [isSignedIn, setSignedIn] = useState()
React.useEffect(() => {
const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
setSignedIn(user ? true : false)
});
return unsubscribe;
}, [])
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName={dashboardName}
screenOptions={({route}) => ({
tabBarIcon: ({focused, color, size}) => {
let iconName;
let rn = route.name;
if(rn === dashboardName) {
iconName = 'stats-chart';
} else if (rn === friendsName) {
iconName = 'person';
} else {
iconName = 'calendar';
}
return <Ionicons name={iconName} size={size} color={color}
/>
},
tabBarStyle:{
height:60,
backgroundColor: '#000000'
},
tabBarItemStyle:{
activeTintColor: '#5DB075'
}
})}
tabBarOptions={{
activeTintColor: '#5DB075',
inactiveTintColor: '#ffffff',
labelStyle: { paddingBottom: 10, fontSize: 10, outerHeight: 100},
}}
>
{
isSignedIn ? (
<>
<Tab.Screen name={activitesName} component={Activities} />
<Tab.Screen name={dashboardName} component={Dashboard} />
<Tab.Screen name={friendsName} component={Friends} />
</>
) : (
<>
<Tab.Screen name={"Login"} component={LoginScreen} />
</>
)
}
</Tab.Navigator>
</NavigationContainer>
);
}
In you LoginScreen, you might want to hide the TabBar which is now visible.
const LoginScreen = ({navigation}) => {
useLayoutEffect(() => {
navigation.setOptions({ tabBarStyle: { display: 'none' } });
}, [navigation])
...