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.
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
, 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! 🚀
SOCIAL SHARE CARD GENERATOR