React Native Paper Bottom Tab Bar With React Navigation

Hello friends, First of all thanks you all for visiting my website and reading my content. Now as you all know I’m trying my best to cover react native paper library with it’s all components. Now come to the main part today we would learn about react native paper bottom tab bar with react navigation latest 6.x version. React Navigation is one of the most usable library to integrate multiple screens in react native.

So we combine both of them react native paper and react navigation and react native vector icons and make a fine look application with beautiful material style bottom tab bar with Icons. Now the main thing most of you like is I have implemented highlight selected Tab feature. So when user select’s a TAB the it will be highlighted so user will know who’s tab he is on. So let’s get started 🙂 .

Contents in this project React Native Paper Bottom Tab Bar With React Navigation :-

1. Now this is one of the main part for this tutorial. We have to install Quite a few libraries in our react native project. In order to implement Bottom tab bar with react navigation and react native paper. So let’s start installing all of them. First of all Install React Native Paper.

or

2. Now we have to Integrate React Native Vector Icons. I have already made a Vector Icons fully installation tutorial. Read it from HERE.

3. Now we have to install React Navigation in our react native project.

or

4. After Installing react navigation we have to install its supporting libraries react-native-screens and react-native-safe-area-context in our project also.

or

5. Now at the end we have to install Bottom Tabs Navigator of React Navigation.

or

6. This STEP is for ANDROID ONLY. Open your project location in CMD or Terminal and execute below command to rebuild your Gradle.

7. This STEP is for iOS ONLY. Open your project location in Terminal and execute below command to install PODS and link installed packages.

8. Open your project’s main App.js file and import Appbar, Provider as PaperProvider from ‘react-native-paper’, NavigationContainer from @react-navigation/native, createBottomTabNavigator from ‘@react-navigation/bottom-tabs’ and StyleSheet, Text, View from react native.

9. Creating a component named as Screen_1. This is our First Screen for Bottom TAB Navigator.

Screenshot :-

10. Creating Second screen named as Screen_2.

Screenshot :-

11. Creating our Third screen named as Screen_3.

Screenshot :-

12. Creating a Custom component named as Custom_TabBAR with 3 props state, descriptors and navigation. We would use these props to control Bottom TAB BAR. Now there are few things we need to understand before going further.

  1. We would change the ICON color using isFocused State. So when user select’s the Icon it will be highlighted.
  2. onPressTAB function is used to navigate to selected screen.
  3. All the Icons is coming from React Native Vector Icons package. We would pass the Icons name in the next function.

Screenshot :-

13. Making a object of createBottomTabNavigator() named as Tab. Using this object we would render all the TABS.

14. Creating a function named as RenderTABS(). Here we would simply call our Custom_TabBAR with props. Now we would start rendering TABS for our Bottom TAB Navigator.

  1. In the name prop we would pass the ICON name. You can find list of all ICONS here in the MaterialCommunityIcons section.
  2. In the component prop we would pass the Screen name.

15. Creating our main Export default App component and here we would simply render the RenderTABS inside NavigationContainer component.

16. Creating Style.

17. Complete Source Code for App.js file :-

Screenshot in Android Device :-

Screenshot in iOS device :-

Leave a Reply

Your email address will not be published.