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