Switch from One Screen to another using React Navigation 4.+ (Router)

This is an Example to Switch from One Screen to another using React Navigation 4.+ (Router). We will use react-navigation library for the Navigation. React Native Navigation (Version 4+) is used to switch from one screen to another in the desired manner. This navigation solution is written entirely in JavaScript (so you can read and understand all of the … Read moreSwitch from One Screen to another using React Navigation 4.+ (Router)

React Native Pass Value From One Screen to Another Using React Navigation

Passing the value from one screen to another is one of the most useful things while we have an application which needs to communicate between the different screens. We can easily pass the data between different activities easily using the this.props.navigation.navigate() which is used to navigate between different screens. In the same method, we can … Read moreReact Native Pass Value From One Screen to Another Using React Navigation

Example of React Native Tab with Latest React Navigation Version 4.+

Here is an Example of React Native Tab for Android and IOS. We will use react-navigation to make a Tab Navigation in this example. Tabs are the most common style of navigation in mobile apps. Tabs can be on the bottom of the screen or on the top (below the header or even instead of a header). … Read moreExample of React Native Tab with Latest React Navigation Version 4.+

React Native View Pager with 3 Different Indicators

This is an Example of React Native View Pager with 3 Different Indicators. React Native View Pager allows the user to flip left and right through pages. In our ViewPager Example, we’ll implement a ViewPager that swipes through three different views with the indicator. PagerDotIndicator PagerTabIndicator PagerTitleIndicator Installation of Dependency To use PagerTabIndicator, IndicatorViewPager, PagerTitleIndicator, PagerDotIndicator you need to … Read moreReact Native View Pager with 3 Different Indicators

Bottom Navigation with Navigation Icon from Local Directory

Here is an example of Bottom Navigation with Navigation Icon from Local Directory. This post is an extension of my previous post on How to Make React Native Bottom Navigation with Latest Navigation V. 3+. In this example, we are making the same layout and flow as the previous one, Bottom Navigation with navigation options like … Read moreBottom Navigation with Navigation Icon from Local Directory

How to Make React Native Bottom Navigation with Latest Navigation V. 4+

Here is an example of React Native Bottom Navigation. Bottom Navigation is very useful when you have 2-3 main navigation options. It provides the user with easy access to regular usable options. In this example, We will make a Bottom Navigation with navigation options like Home and Setting. Each screen has other navigation options too. So … Read moreHow to Make React Native Bottom Navigation with Latest Navigation V. 4+

React Native Global Scope Variables

We all know either we are developing any web or any mobile app, We always need Global Scope Variables. If you are not familiar with global variable just think about the variables which can be accessed from any screen/activity after first initialization. They can be used on any screen as local variables but the difference is their scope is global. … Read moreReact Native Global Scope Variables

React Native Finish Current Screen while Navigating to Next Screen

While we navigate to the next screen from any screen the old screen remains in the stack and after coming back we see the same screen. React Native Finish Current Screen while Navigating to Next Screen includes how we navigate to next screen and finish the old one from the stack? Why do we need … Read moreReact Native Finish Current Screen while Navigating to Next Screen

Example of React Native Navigation Drawer with Latest Navigation V. 4+

This is an Example of React Native Navigation Drawer for Android and IOS. We will use react-navigation to make a navigation drawer in this example. React Native Navigation Drawer is a very popular component in app development. It provides you to manage the number of app options in a very easy manner. A user can navigate from one … Read moreExample of React Native Navigation Drawer with Latest Navigation V. 4+

Handling Android Back Button Press in React Native

When the user presses the Android hardware back button in React Native, react-navigation will pop a screen or exit the app if there are no screens to pop. This is the sensible default behavior, but there are situations when you might want to implement custom handling. This is where handling android back button is useful. … Read moreHandling Android Back Button Press in React Native