React Native Material Bottom Navigation View for Android iOS Example

Material Bottom Navigation View is a hidden view which doesn’t display on device screen at first. This view comes up from bottom of application screen when user press specific button with slide down to slide up animation. Material Bottom Navigation View can contain any widgets or components. In React Native there are no specific component available named as Bottom Navigation View, but using the custom NPM Github library we can easily achieve this View in our app. So in this tutorial we would going to make a Material Bottom Navigation View for Android iOS Example Tutorial in React Native app.

Contents in this project Material Bottom Navigation View for Android iOS Example Tutorial in React Native:

1. The first step is to install REACT NATIVE BTR NPM GitHub library in your react native project. To install the REACT NATIVE BTR library you need to open your project folder in Command Prompt or Terminal and execute below command.

Screenshot of Command Prompt :

2. Import StyleSheet, View, Platform, Text and Button component in your project.

3. Import BottomSheet component from react-native-btr library in your project.

4. Create constructor() in your project, Now we would make a Boolean State named as visible and set its default value as false. This state is used to show and hide the Bottom Navigation View.

5. Create a function named as _toggleBottomNavigationView() in your main class. Inside this function we would simply toggle the State value.

6. Creating a Root View in render’s return block, This would be our MAIN root view.

7. Creating a Button component inside the Root view, Using this button we would call the _toggleBottomNavigationView() function and show and hide the Bottom Navigation View.

8. Creating the BottomSheet component after button component. Put any components or widgets inside it which you want to show inside Bottom sheet View.

visible : Used to SHOW and HIDE the Bottom Sheet View.

onBackButtonPress : Actives the Android back button so if the back button on android device will press then it will call the toggle function and hide the View.

9. Creating Style.

10. Complete source code for App.js File :


Material Bottom Navigation View

Leave a Reply

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