Step 1: Set up a blank react-native project
Open terminal in the working directory and run
npx react-native init ExampleApp
cd into project folder i.e ExampleApp
cd ExampleApp
Step 2: Add the necessary dependencies.
yarn add @react-navigation/native
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
The libraries we've installed so far are the building blocks and shared foundations for navigators, and each navigator in React Navigation lives in its own library.
So far what we have installed is the foundation for navigation using React Navigation. However, in order to start navigating to different screens/scenes/pages in our app, we will need to install other navigators depending on how we want to navigate.
The 3 most common ones are
- Stack Navigator
- Drawer Navigator (As the name suggests, it provides a navigation drawer navigator)
- BottomTabs (Provides bottom tabbed navigation).
//Install only the one that you need. Refer to the documentation to understand in details
yarn add @react-navigation/stack
yarn add @react-navigation/bottom-tabs
yarn add @react-navigation/drawer
All these navigators contain properties (Navigator and Screen) that are essential in setting up the Navigator.
Step 3: Building our navigation
Let's get started by bootstrapping and creating all the files we are going to work with.
mkdir src && cd src && touch package.json
mkdir navigation screens components
cd navigation && touch AppNavigator.js MainTabs.js
cd .. && cd screens && touch Home.js Profile.js Contacts.js
cd .. && cd components && touch ContactListItem.js Avatar.js Icons.js
Open our App.js and add the following code to create a stack navigator
// In App.js in a new project
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import AppNavigator from 'src/navigation/AppNavigator.js';
const App = () => {
return (
<NavigationContainer>
<AppNavigator />
</NavigationContainer>
);
}
export default App;
Now open the AppNavigator.js file and add code
import * as React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import MainTabs from './MainTabs';
const Stack = createStackNavigator();
const AppNavigator = () => {
return (
<Stack.Navigator>
<Stack.Screen name='MainTabs' component={MainTabs} />
</Stack.Navigator>
);
}
export default AppNavigator;
Next, we open the MainTabs file and edit the code as below
//MainTabs.js
import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from 'src/screens/Home';
import Profile from 'src/screens/Profile';
import Contacts from 'src/screens/Contacts';
const Tabs = createBottomTabNavigator();
const MainTabs = () => {
return (
<Tab.Navigator>
<Tab.Screen name='Home' component={Home} />
<Tab.Screen name='Home' component={Profile} />
<Tab.Screen name='Home' component={Contacts} />
</Tab.Navigator>
);
}
export default MainTabs;
Top comments (3)
i wanna ask about the boostrapping my cmd always showingg this " 'touch' is not recognized as an internal or external command, operable program or batch file." what should i do?? im really new using react native
touch comes with git. If you need it then install git and select option to use optional unix tool in command line
Instead this code
Maybe you need to change to this on MainTabs.js