Example of Bottom Sheet (Material Design) in React Native

This is an Example of Bottom Sheet (Material Design) in React Native. To make a Bottom Sheet we will use BottomSheet component provided by react-native-btr. Bottom Sheet was firstly introduced in android material design and became very popular. Different people use bottom sheet differently but the simple example which can be seen in day to day … Read moreExample of Bottom Sheet (Material Design) in React Native

React Native Card View using react-native-paper

Here is an example of React Native Card View using react-native-paper. If you want to explore some more options to make a Card View you can visit our previous post on React Native Card View. For this example, we are using Card component provided by react-native-paper.  So let’s get started. Installation of Dependency Open the terminal and jump … Read moreReact Native Card View using react-native-paper

React Native Card View for Android and IOS

Here is an example of React Native Card View for Android and IOS using react-native-elements. To make a React Native Card View we have a Card component provided by the React Native elements but we can also use other libraries too as there are many options available. For this example, we are using Card component provided … Read moreReact Native Card View for Android and IOS

React Native SnackBar – Bottom Flash Message

Here is an example of React Native SnackBar. We will use react-native-snackbar-component to generate Snackbar in React Native. React Native SnackBar is a completely new way to show alert to the user. While using an Alert dialog we block the user’s visible area and force him to click on the screen to continue but in case of … Read moreReact Native SnackBar – Bottom Flash Message

React Native Floating Action Button

Here is an example of React Native Floating Action Button. It was first introduced in Android Material Design. When we have to show a ListView and also need a button on the same screen we can use Floating Action Button. Gmail App is the best example where you can see the Floating Action Button. To … Read moreReact Native Floating Action Button

React Native Swipe Down to Refresh List View Using Refresh Control

Here is an example of React Native Swipe Down to Refresh List View Using Refresh Control. It was first introduced in Android Material Design and became very popular. Almost all Apps are using Swipe down to refresh. In React Native you can use this feature using RefreshControl provided by React Native. To Import Refresh Control in … Read moreReact Native Swipe Down to Refresh List View Using Refresh Control

React Native Collapsible Toolbar with Animation

Here is an example of React Native Collapsible Toolbar with Animation. It was first introduced in Android Material Design and became very popular. In Collapsible Toolbar when screen renders for the first time we got the broad header which will help us to get the attention of the user on important details. As the user scrolls … Read moreReact Native Collapsible Toolbar with Animation

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. 3+

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 let’s … Read moreHow to Make React Native Bottom Navigation with Latest Navigation V. 3+