React Native
Implement Bottom navigation with a sidebar
Need technical help?
Our experts will get back to you within 24 hours.
Prerequisites
Install the required dependencies for React Navigation:
npm install @react-navigation/native @react-navigation/bottom-tabs @react-navigation/drawer react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons
Project Structure
Bottom Navigation: Use createBottomTabNavigator for the bottom tabs.
Sidebar (Drawer Navigation): Use createDrawerNavigator for the sidebar.
Implementation
1. Create Bottom Tab Navigator
File: BottomTabs.js
import React from 'react';import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';import HomeScreen from './screens/HomeScreen';import ProfileScreen from './screens/ProfileScreen';import SettingsScreen from './screens/SettingsScreen';import Icon from 'react-native-vector-icons/Ionicons';const Tab = createBottomTabNavigator();const BottomTabs = () => { return ( <Tab.Navigator screenOptions={({ route }) => ({ tabBarIcon: ({ color, size }) => { let iconName; if (route.name === 'Home') iconName = 'home'; else if (route.name === 'Profile') iconName = 'person'; else if (route.name === 'Settings') iconName = 'settings'; return <Icon name={iconName} size={size} color={color} />; }, tabBarActiveTintColor: 'tomato', tabBarInactiveTintColor: 'gray', })} > <Tab.Screen name="Home" component={HomeScreen} /> <Tab.Screen name="Profile" component={ProfileScreen} /> <Tab.Screen name="Settings" component={SettingsScreen} /> </Tab.Navigator> );};export default BottomTabs;
2. Create Drawer Navigator
File: DrawerNavigator.js
import React from 'react';import { createDrawerNavigator } from '@react-navigation/drawer';import BottomTabs from './BottomTabs';import NotificationsScreen from './screens/NotificationsScreen';import CustomDrawerContent from './components/CustomDrawerContent';const Drawer = createDrawerNavigator();const DrawerNavigator = () => { return ( <Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} />} screenOptions={{ drawerStyle: { backgroundColor: '#f8f9fa', width: 250, }, }} > <Drawer.Screen name="HomeTabs" component={BottomTabs} options={{ title: 'Home' }} /> <Drawer.Screen name="Notifications" component={NotificationsScreen} /> </Drawer.Navigator> );};export default DrawerNavigator;
3. Create Screens
File: screens/HomeScreen.js
import React from 'react';import { View, Text, StyleSheet } from 'react-native';const HomeScreen = () => { return ( <View style={styles.container}> <Text>Home Screen</Text> </View> );}const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', },});export default HomeScreen;
Same, create ProfileScreen.js, SettingsScreen.js, and NotificationsScreen.js with different content.
4. Customize the Drawer
File: components/CustomDrawerContent.js
import React from 'react';import { DrawerContentScrollView, DrawerItemList, DrawerItem } from '@react-navigation/drawer';import { View, Text, StyleSheet } from 'react-native';const CustomDrawerContent = (props) => { return ( <DrawerContentScrollView {...props}> <View style={styles.header}> <Text style={styles.headerText}>Custom Drawer</Text> </View> <DrawerItemList {...props} /> <DrawerItem label="Help" onPress={() => alert('Link to help')} /> </DrawerContentScrollView> );};const styles = StyleSheet.create({ header: { height: 100, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f4a261', marginBottom: 10, }, headerText: { fontSize: 18, color: '#fff', fontWeight: 'bold', },});export default CustomDrawerContent;
5. Main App
File: App.js
import React from 'react';import { NavigationContainer } from '@react-navigation/native';import DrawerNavigator from './DrawerNavigator';const App = () => { return ( <NavigationContainer> <DrawerNavigator /> </NavigationContainer> );};export default App; Advantages
Modularity: Bottom tabs and drawer navigation are separated, keeping the navigation structure clean.
Customizability: Custom drawer content allows unique branding or personalized options.
Scalability: Easily extend the navigation system by adding new tabs or drawer items.
User Experience: Combines intuitive bottom navigation with accessible sidebar options, enhancing usability.
Ready to transform your business with our technology solutions? Contact Us today to Leverage Our React Native Expertise.
0
React Native
