react-navigation/packages/material-bottom-tabs

@react-navigation/material-bottom-tabs

React Navigation integration for bottom navigation component from react-native-paper.

Documentation can be found on the React Navigation website.

Installation

Open a Terminal in your project's folder and run,

yarn add @react-navigation/native @react-navigation/material-bottom-tabs

Setup react-native-paper following the Getting Started guide.

Usage

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

const MaterialBottomTabs = createMaterialBottomTabNavigator();

export default function App() {
  return (
    <MaterialBottomTabs.Navigator>
      <MaterialBottomTabs.Screen
        name="article"
        component={Article}
        options={{
          tabBarLabel: 'Article',
          tabBarIcon: 'file-document-box',
        }}
      />
      <MaterialBottomTabs.Screen
        name="chat"
        component={Chat}
        options={{
          tabBarLabel: 'Chat',
          tabBarIcon: 'message-reply',
        }}
      />
      <MaterialBottomTabs.Screen
        name="contacts"
        component={Contacts}
        options={{
          tabBarLabel: 'Contacts',
          tabBarIcon: 'contacts',
        }}
      />
      <MaterialBottomTabs.Screen
        name="albums"
        component={Albums}
        options={{
          tabBarLabel: 'Albums',
          tabBarIcon: 'image-album',
        }}
      />
    </MaterialBottomTabs.Navigator>
  );
}