How to make a Tab Bar in React Native 💙

For this case, we will use expo CLI to be able to work in the most comfortable way possible.

If you don't have Expo CLI, you will have to do this in your terminal: sudo npm install -g expo-cli
  1. We execute expo init -your name project- in our terminal. We choose Blank template the first option
  2. We enter our directory with cd -the name of your project-, once there we will execute expo start and our project will be executed, in this case, we will install the expo app available for ios and Android on our personal cell phone, our terminal will look like this.

3. With the camera of our cell phone scanning this QR code, this will open the Expo app on our cell phone, we will wait a bit for the code to compile, and we will continue to open the project with vscode or your favorite code editor.

4. Now we install all the necessary packages

1. npm install @react-navigation/nativ
2. expo install react-native-screens react-native-safe-area-context
3. npm install @react-navigation/bottom-tabs

5. Now we will create a folder called screen that will have all the views that you want to appear as tabs, for example:

Screens> inside(Home, Profile, whatever)

6. Now we will create the home tab Home/index.js

import { View, Text, SafeAreaView } from 'react-native'


export default function HomeScreen(){
return (
<SafeAreaView>
<View>
<Text>Hello HomeScreen</Text>
</View>
</SafeAreaView>
)
}

7. Once we have a home, what we will do is create a folder called components, inside it, we will create a tabs directory with an index.js file, in this index file we will create this code.

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'

import HomeScreen from "../../screens/Home";
import ScannerScreen from "../../screens/Scanner";
import ProfileScreen from "../../screens/Profile";

const Tab = createBottomTabNavigator();

export default function TabBar(){
/* This is wrapper navigation for more examples, visit : https://reactnavigation.org/docs/tab-based-navigation/ */
return
(
<Tab.Navigator>
<Tab.Screen name='Home' component={HomeScreen} />
<Tab.Screen name='Scanner' component={ScannerScreen} />
<Tab.Screen name='Profile' component={ProfileScreen} />
</Tab.Navigator>
)
}

8. The last thing we have to do is import and configure your navigation in App.js.

/* Screen navigator*/
import
'react-native-gesture-handler'
import { NavigationContainer } from '@react-navigation/native'
/* Tabs */
import
TabBar from "./components/Tab_bar";



export default function App() {
return (
<NavigationContainer>
<TabBar />
</NavigationContainer>
);
}

9. The last thing we have to do is import and configure your navigation in App.js, and with that our navigation by tabs would be ready

--

--

--

Colombian software developer 🇨🇴 https://devtor-homepage.vercel.app

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

5 Vim Plugins I Can’t Live Without for Javascript Development

JAVASCRIPT-WINDOW,DOCUMENT AND SCREEN.

No-nonsense webpack project

How to Scrap a Website Using Flask and Beautiful Soup

Server Sent Events with Typescript and Redux Sagas

HTML Autocomplete OFF!

In defense of console.log()…

Greyscaled macbook with code and a notebook

What Is An Execution Context?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Hector Cohen

Hector Cohen

Colombian software developer 🇨🇴 https://devtor-homepage.vercel.app

More from Medium

Top 5 Benefits of React Native in Mobile App Development

Top 5 Benefits of React Native in Mobile App Development

Customizable Bottomtab React Native

RTL(Right To Left) support with internationalization for React Native Applications.

A simple start with React native