Android App Development
iOS App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 126.96.36.199 release ready!
Owner and Founder. Opencart
In this blog, we will learn about Navigation and Bottom tab navigation in react native.
Before going to our topic Bottom tab navigation just take a look how navigation works in react native.
As we know a website or a mobile application consist of many screens and pages. To move form one screen to another or to show other screen on button click is navigation.
For example open a login screen on login button click.
In web we use href tag.
Navigation in react native can be achieve using navigation library and navigate prop.
In this example we have two screen Home screen and About screen.
Home screen have a button on which click you will navigate to about screen.
Now main part of our sample code due to which we will be able to navigate is in our App.js file.
Now Run the sample App.
So far, we have learn how navigation works in react native. Now our sample app is able to navigate from one screen to another.
So, let’s move to Bottom Tab Navigation.
Bottom tab navigation is one of most used navigation in mobile apps.
1. Bottom tab Navigation- In bottom tab navigation tab are aligned to bottom of the screen
2. Top tab navigation- Tabs are align to top of the screen below header or toolbar.
Let’s take an example of bottom tab bar navigation
For bottom tab bar we are reusing the above navigation example.
For Home screen and About screen we used same code as in navigation example. If you want to add or modify or redesign your screen you can do it accordingly.
There is little change in app.js class for bottom tab navigation.
Now run the sample code
You may face some issues/errors related to gesture and surface view and view area and screen.
To resolve these errors you have to add below dependency in your project.
If you want to learn more about bottom tab navigation in react native, you can visit here.
In this blog we have learn about navigation in react native and how we can achieve navigation through bottom tabs in react native.
Hope ! this will help you in finding what you are looking for.
Thanks for reading.
Your email address will not be published. Required fields are marked*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
Great Product, Great Team, and Great Support Service. And if you want to add more features to the product, they can submit any idea that comes to your mind. They really care about their clients and we are really happy and honored to deal with Webkul.
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.