React Native
Implement Bottom navigation with a sidebar
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.
React Native
Contact Us