npm install @react-navigation/native @react-navigation/bottom-tabs
Other dependencies (some may not be necessary)
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
App.js
import 'react-native-gesture-handler'import { StatusBar } from 'expo-status-bar'import React, {useEffect, useState} from 'react'import {StyleSheet, SafeAreaView, Switch} from 'react-native'//import MainStackNavigator from './navigation/MainStackNavigator'import BottomTabNavigator from './navigation/BottomTabNavigator'//import DrawerNavigator from './navigation/DrawerNavigator'const App = () => { const [navType, setNavType] = useState(false) return ( <SafeAreaView style={styles.appContainer}> <BottomTabNavigator /> {/* <DrawerNavigator /> */} <StatusBar backgroundColor="#0000ff" /> </SafeAreaView> )}const styles = StyleSheet.create({ appContainer: { flex: 1, }, switchStyle: { flex: 1, }})export default AppBottomTabNavigator.js
import * as React from 'react'import {Platform, Button} from 'react-native'import {NavigationContainer} from '@react-navigation/native'import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'import Ionicons from 'react-native-vector-icons/Ionicons'import HomeScreen from '../screens/HomeScreen'import ProfileScreen from '../screens/ProfileScreen'import SettingsScreen from '../screens/SettingsScreen'const Tab = createBottomTabNavigator()function BottomTabNavigator() { return ( <NavigationContainer> <Tab.Navigator> <Tab.Screen name="Home" component={HomeScreen} options={{ title: 'Home Screen', tabBarIcon: ({focused, color, size}) => { focused ? color = '#333' : color = '#0000ff' return <Ionicons name={Platform.OS === 'ios' ? 'ios-home' : 'md-home'} size={30} color={color} /> } }} /> <Tab.Screen name="Profile" component={ProfileScreen} options={{ title: 'Profile Screen', tabBarIcon: ({focused, color, size}) => { focused ? color = '#333' : color = '#0000ff' return <Ionicons name={Platform.OS === 'ios' ? 'ios-person' : 'md-person'} size={30} color={color} /> }, tabBarBadge: 3 }} /> <Tab.Screen name="Settings" component={SettingsScreen} options={{ title: 'Settings Screen', tabBarIcon: ({focused, color, size}) => { focused ? color = '#333' : color = '#0000ff' return <Ionicons name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'} size={30} color={color} /> } }} /> </Tab.Navigator> </NavigationContainer> )}export default BottomTabNavigator
Comments