Gift Card Screen using react-native-confetti-cannon

This is an Example to make a Gift Card Screen using react-native-confetti-cannon for Android and IOS devices. You can create any types of screens using react-native-confetti-cannon. You have seen this type of animations whenever you got a gift vouchers or any cash back amount. Have a look at the simple code and comment below with more … Read moreGift Card Screen using react-native-confetti-cannon

Segmented Control Tab in React Native for Android and iOS

This is an Example of Segmented Control Tab in React Native for Android and iOS using react-native-segmented-control-tab. iOS developers knows what Segmented Control Tab is but if you are coming from an Android development background and have no idea what Segmented Control Tab is, then just imagine a Tab View in Android. Segmented Control Tab is same … Read moreSegmented Control Tab in React Native for Android and iOS

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 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. You … 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

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

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