Hi Guys,

Today, I will explain you how to create paper Bottom navigation in react native. You can easily create paper Bottom navigation in react native. First i will import stylesheet namespace from react-native-paper, after I will make paper Bottom navigation using in react native.

Here, I will give you full example for simply display paper Bottom navigation using react native as bellow.

In the first step Run the following command for create project.

expo init PaperBottomNavigation 

In the step,I will install npm i react-native-paper package.

npm i react-native-paper

In this step, You will open App.js file and put the code.

import * as React from 'react';
import { Text, StyleSheet } from 'react-native';
import { Card, Provider ,Appbar ,Title,Paragraph , BottomNavigation} from 'react-native-paper';

const MyComponent = () => {

  const MusicRoute = () => Music;

  const AlbumsRoute = () => Albums;

  const RecentsRoute = () => Recents;

  const _goBack = () => console.log('Went back');

  const _handleSearch = () => console.log('Searching');

  const _handleMore = () => console.log('Shown more');

  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'music', title: 'Music', icon: 'music',color: '#795548' },
    { key: 'albums', title: 'Albums', icon: 'album', color: '#607D8B' },
    { key: 'recents', title: 'Recents', icon: 'history', color: '#3F51B5' },
  ]);

  const renderScene = BottomNavigation.SceneMap({
    music: MusicRoute,
    albums: AlbumsRoute,
    recents: RecentsRoute,
  });


  return (
    <Provider>
    <Appbar.Header style={styles.header}>
      <Appbar.BackAction onPress={_goBack} />
      <Appbar.Content title="Mywebtuts" subtitle="Subtitle" />
      <Appbar.Action icon="magnify" onPress={_handleSearch} />
      <Appbar.Action icon="dots-vertical" onPress={_handleMore} />
    </Appbar.Header>
     <BottomNavigation
      navigationState={{ index, routes }}
      onIndexChange={setIndex}
      renderScene={renderScene}
    />
    </Provider>
  );
};


const styles = StyleSheet.create({
  title:{
    margin: 10,
    fontSize: 15,
    textAlign:'center',
    fontSize: 35
  }
});
export default MyComponent;

In the last step run your project using bellow command.

npm start

It will help you...