Welcome to my channel. In this video, I'll be
demonstrating how to add nested navigation in React Native and Expo. You'll see a demo
of the final outcome of this project, which utilizes both Stack navigation
and Bottom tab navigation. Let's begin. To start, we'll create a new Expo
project using the blank template, give it a name, and continue
with downloading dependencies. We'll be using both the bottom and stack
react-navigation in this project, so we'll need to install the necessary packages. Follow
along with the video on the screen for guidance. First, we'll import
'react-native-gesture-handler', a library that provides gesture
management modules for native apps. Now, we'll run the application to make sure
it's working properly with the default code. We're now ready to begin building our project. Next, we'll create a "src" folder and within
it, two separate folders for our bottom tab navigation files and stack navigation files.
In this project, we'll be creating two bottom tab screens: Home and Profile. Inside the Home
screen, we'll use stack navigation to navigate to the Detail screen. We'll create these
files and customize the code accordingly. We'll import NavigationContainer,
createStackNavigator, and createMaterialBottomTabNavigator
from 'react-navigation/native' and 'react-navigation/material-bottom-tabs'
respectively. NavigationContainer is a component that provides the navigation state and helpers
for the navigators, while createStackNavigator and createMaterialBottomTabNavigator are functions
that create stack and tab navigator components. We'll also import three custom components - Home, Profile, and Detail - which will
be rendered by the navigators. We'll create two constants,
Tab and Stack, by calling the createMaterialBottomTabNavigator
and createStackNavigator functions. We'll also define two functional components, TabNavigator and StackNavigator, which use
the Tab and Stack navigators respectively. Each functional component returns a JSX element
that defines the structure of the navigator. Finally, we'll export the App component,
which wraps the TabNavigator component in a NavigationContainer, making the navigators
available throughout the entire app. In the Home screen, we'll use the useNavigation component and a
text component to navigate to the Detail screen. In this video, you've learned how to nest React Navigation.
Check out my channel's React Native and Expo playlist for more amazing project
videos. If you found this video helpful, please give it a like and consider subscribing
for more React Native and Expo projects.
