This content originally appeared on DEV Community and was authored by Amit Kumar
Navigating between screens is an essential part of any mobile application. In this blog, I'll guide you step-by-step on how to integrate Stack Navigator and Bottom Tab Navigator into your React Native project using @react-navigation.
Prerequisites
Before we begin, ensure you have the following setup:
- Create a React Native project using
npx @react-native-community/cli init projectName. - Follow the React Navigation Docs to set up the required dependencies. For this guide, use the following packages:
"@react-navigation/bottom-tabs": "^7.2.0",
"@react-navigation/elements": "^2.2.5",
"@react-navigation/native": "^7.0.14",
"@react-navigation/native-stack": "^7.2.0",
"@react-navigation/stack": "^7.1.1",
"react": "18.3.1",
"react-native": "0.76.6",
"react-native-gesture-handler": "^2.22.0",
"react-native-safe-area-context": "^5.1.0",
"react-native-screens": "^4.5.0",
Project Structure
Organize your project in the following way for better readability:
src/
├── screens/
│ ├── HomeScreen.js
│ ├── ProfileScreen.js
│ ├── DetailScreen.js
│ ├── SettingScreen.js
├── navigation/
│ ├── bottomNavigator.js
│ ├── rootNavigator.js
│ ├── styles.js
Step 1: Setup App.js
In App.js, wrap your main navigator with the SafeAreaProvider for better handling of device-specific safe areas.
import React from 'react';
import MainNavigator from './src/navigation/rootNavigator';
import { SafeAreaProvider } from 'react-native-safe-area-context';
const App = () => {
return (
<SafeAreaProvider>
<MainNavigator />
</SafeAreaProvider>
);
};
export default App;
Step 2: Create Screens
Inside src/screens, create the following components:
Example: 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;
Repeat this process for ProfileScreen, DetailScreen, and SettingScreen, changing the displayed text accordingly.
Step 3: Create the Bottom Tab Navigator
In src/navigation/bottomNavigator.js, set up the Bottom Tab Navigator with custom icons for each tab.
import {View} from 'react-native';
import React from 'react';
import {
BottomTabBar,
createBottomTabNavigator,
} from '@react-navigation/bottom-tabs';
import styles from './styles';
import HomeScreen from '../screens/HomeScreen';
import ProfileScreen from '../screens/ProfileScreen';
import DetailScreen from '../screens/DetailScreen';
import SettingScreen from '../screens/SettingScreen';
import {
DetailAltIcon,
DetailIcon,
HomeAltIcon,
HomeIcon,
ProfileAltIcon,
ProfileIcon,
SettingAltIcon,
SettingIcon,
} from '../assets';
const BottomNavigator = () => {
let WIDTH = 25;
let HEIGHT = 25;
const BottomTabNavigator = createBottomTabNavigator();
const tabBarListeners = ({navigation, route}) => ({
tabPress: () => navigation.navigate(route.name),
});
return (
<BottomTabNavigator.Navigator
tabBar={props => (
<View style={styles.wrapperStyle}>
<BottomTabBar {...props} style={styles.bottomTabStyles} />
</View>
)}
screenOptions={{
tabBarActiveTintColor: '#000000',
tabBarInactiveTintColor: '#767676',
}}>
<BottomTabNavigator.Screen
options={{
tabBarShowLabel: true,
gestureEnabled: false,
unmountOnBlur: true,
headerShown: false,
tabBarIcon: ({focused}) =>
focused ? (
<HomeAltIcon width={WIDTH} height={HEIGHT} />
) : (
<HomeIcon width={WIDTH} height={HEIGHT} />
),
}}
name="Home"
listeners={tabBarListeners}
component={HomeScreen}
/>
<BottomTabNavigator.Screen
options={{
tabBarShowLabel: true,
gestureEnabled: false,
unmountOnBlur: true,
headerShown: false,
tabBarIcon: ({focused}) =>
focused ? (
<SettingAltIcon width={WIDTH} height={HEIGHT} />
) : (
<SettingIcon width={WIDTH} height={HEIGHT} />
),
}}
name="Setting"
listeners={tabBarListeners}
component={SettingScreen}
/>
<BottomTabNavigator.Screen
options={{
tabBarShowLabel: true,
gestureEnabled: false,
unmountOnBlur: true,
headerShown: false,
tabBarIcon: ({focused}) =>
focused ? (
<DetailAltIcon width={WIDTH} height={HEIGHT} />
) : (
<DetailIcon width={WIDTH} height={HEIGHT} />
),
}}
name="Detail"
listeners={tabBarListeners}
component={DetailScreen}
/>
<BottomTabNavigator.Screen
options={{
tabBarShowLabel: true,
gestureEnabled: false,
unmountOnBlur: true,
headerShown: false,
tabBarIcon: ({focused}) =>
focused ? (
<ProfileAltIcon width={WIDTH} height={HEIGHT} />
) : (
<ProfileIcon width={WIDTH} height={HEIGHT} />
),
}}
name="Profile"
listeners={tabBarListeners}
component={ProfileScreen}
/>
</BottomTabNavigator.Navigator>
);
};
export default BottomNavigator;
You can customize the tab bar further, such as adding icons, custom styles, or listeners.
Step 4: Create the Root Navigator
In src/navigation/rootNavigator.js, create the Stack Navigator and integrate the Bottom Tab Navigator.
import React from 'react';
import {
CommonActions,
NavigationContainer,
createNavigationContainerRef,
} from '@react-navigation/native';
import {
CardStyleInterpolators,
createStackNavigator,
} from '@react-navigation/stack';
import BottomNavigator from './bottomNavigator';
import SplashScreen from '../screens/SplashScreen';
import NewStackScreen from '../screens/NewScreen';
const Stack = createStackNavigator();
const LoginStack = () => {
return (
<Stack.Navigator
screenOptions={{
headerShown: false,
}}>
<Stack.Screen name="Splash" component={SplashScreen} />
<Stack.Screen name="NewScreen" component={NewStackScreen} />
<Stack.Screen
name="HomeScreen"
component={BottomNavigator}
options={{
cardStyleInterpolator: CardStyleInterpolators.forFadeFromCenter,
gestureEnabled: false,
}}
/>
</Stack.Navigator>
);
};
const MainNavigator = () => {
return (
<NavigationContainer
options={{
gestureEnabled: false,
}}
>
<LoginStack />
</NavigationContainer>
);
};
export default MainNavigator;
Step 5: Style the Tab Bar
In src/navigation/styles.js, define styles for the bottom tab bar.
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
wrapperStyle: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
overflow: 'hidden',
},
bottomTabStyles: {
backgroundColor: '#fff',
height: 60,
},
});
Running the App
- Start your app using:
npx react-native start
npx react-native run-android # for Android
npx react-native run-ios # for iOS
- You should now see a fully functional app with a Bottom Tab Navigator and a Stack Navigator integrated.
Conclusion
Integrating Stack and Bottom Tab Navigators allows you to create complex navigation flows in your React Native app. This guide provides the foundation, and you can build upon it by adding more screens, customizing navigation, or using advanced features like deep linking or dynamic routes.
Let me know if you have any questions or need further assistance! 🚀
This content originally appeared on DEV Community and was authored by Amit Kumar
Amit Kumar | Sciencx (2025-01-10T17:01:34+00:00) How to Integrate Stack and Bottom Tab Navigator in React Native. Retrieved from https://www.scien.cx/2025/01/10/how-to-integrate-stack-and-bottom-tab-navigator-in-react-native/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.