react native-tutorial

React native bottom Bottom of Tab Navigation

The Bottom Tabs Navigator will be the subject of our first library examination. The React Navigation documentation describes this as the simplest method of delivering tabbed navigation; it produces “A simple tab bar on the bottom of the screen that allows you move between multiple routes.”

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

As you can see, we start by making a navigation object, followed by a wrapper Navigator and a number of screens by utilising Stack. Although it is the most straightforward representation of your navigation, it is also quite easy to use. When working with programmes that are straightforward or have a small number of displays, this is a fantastic solution.

The screen components of routes are not mounted until they are initially focused since they are lazily initialised.

Using this library is very simple: make sure you have @react-navigation/native installed, then install [@react-navigation/bottom-tabs] (https://github.com/react-navigation/react-navigation/tree/main/packages/bottom-tabs).

Usage is very similar to the stack navigator we saw in the previous example.

This component is highly configurable to fit your needs. You can pass in a tab bar component to handle rendering and visualizing the tab bar on the bottom.

Some other configuration options include the ability to customize the style of the default tab bar or screens or listen to different events.

These bottom tabs are super simple and plain, but also very extensible. If you’re trying to build something more advanced for your tabbed navigation, this is a great library to build around and style because it exposes almost all of the styling options to the user.

For example, you can pass in your own button using the tabBarButton prop or directly style the tab bar with the tabBarStyle prop.

This makes it really powerful to use in applications where you need a lot of customization.

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published. Required fields are marked *