Issue creating bottom-tab - react-native

Question

I have created a login screen for my expo react-native app. However, once the the user has logged in, at the home screen, I would like to show 3 icons at the bottom tab.But i am not sure how to create the bottom tabs. Essentially, there will be 3 tabs that need to be created (e.g. calendar, activity and settings).
App.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import LoginScreen from './screens/Dashboard/LoginScreen';
import HomeScreen from './screens/Dashboard/HomeScreen';
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen options={{ headerShown: false }} name="Login" component={LoginScreen} />
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
HomeScreen.js
import { useNavigation } from '#react-navigation/core'
import React from 'react'
import { StyleSheet, Text, TouchableOpacity, View, Image } from 'react-native'
import { auth } from '../../firebase'
const HomeScreen = () => {
const navigation = useNavigation()
const handleSignOut = () => {
auth
.signOut()
.then(() => {
navigation.replace("Login")
})
.catch(error => alert(error.message))
}
return (
<View style={styles.container}>
<Text>Email: {auth.currentUser?.email}</Text>
<TouchableOpacity
onPress={handleSignOut}
style={styles.button}
>
<Text style={styles.buttonText}>Sign out</Text>
</TouchableOpacity>
</View>
)
}
export default HomeScreen
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
button: {
backgroundColor: '#0782F9',
width: '60%',
padding: 15,
borderRadius: 10,
alignItems: 'center',
marginTop: 40,
},
buttonText: {
color: 'white',
fontWeight: '700',
fontSize: 16,
},
image: {
width: 40,
height: 40,
},
})
Would appreciate your help. Thanks.

Answer 1

Create a component like shown in react navigation docs https://reactnavigation.org/docs/material-bottom-tab-navigator/#example and then replace the "HomeScreen" component with the newly create Tabs navigator component.
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen options={{ headerShown: false }} name="Login" component={LoginScreen} />
<Stack.Screen name="Home" component={MyTabs} />
</Stack.Navigator>
</NavigationContainer>
);
}
[1]: https://reactnavigation.org/docs/material-bottom-tab-navigator