Different Type of Modal Box in React Native

This is an Example of Different Type of Modal Box in React Native. We will use the Modal Component provided by react-native-modalbox. Modal Box is a React Native component which very easy and fully customizable. It has also implemented the ‘swipe down to close’ feature. A modal is a dialog box/popup window that is displayed on top of … Read moreDifferent Type of Modal Box in React Native

Example of onLongPress on TouchableOpacity in React Native

This is an Example of onLongPress on TouchableOpacity in React Native. As the topic name describes itself, we will set onLongPress on TouchableOpacity button. This is a very common thing that we experience in our daily use like we use to get edit or delete option on long press of any list element or a button. In … Read moreExample of onLongPress on TouchableOpacity in React Native

Example of Searching in List using Search Bar in React Native

Here is an Example of Searching in List using Search Bar in React Native. In our previous example of a search bar using TextInput, we have mentioned that searching is very important if we have a long list. It provides great user experience and control over the data to the App user. The user can easily search the data … Read moreExample of Searching in List using Search Bar in React Native

React Native Show Message for empty FlatList

Here is an example of React Native Show Message for empty FlatList. As the topic name describes we will show the Message for the empty list. We can use this while we are making a dynamic list and the data is coming from the server. After loading the data from the server we can directly set … Read moreReact Native Show Message for empty FlatList

Make Search Bar Filter for List View Data in React Native

This is an example to Make Search Bar Filter for List View Data in React Native. Basically, We will make a React Native FlatList with real-time searching ability. If we have a Long list in the app then it is very inconvenient to search the required data by scrolling the whole list. Let’s take an example of E-Commerce … Read moreMake Search Bar Filter for List View Data in React Native

Scroll to the Top or Bottom of the ListView in React Native

Here is an example to Scroll to the Top or Bottom of the ListView in React Native on the Click of Button. We have often seen this type of things in websites where you scroll towards the button and suddenly a button pop up to take you at the top of the page. It provides a … Read moreScroll to the Top or Bottom of the ListView in React Native

React Native Add Header Footer in ListView / FlatList

Here is an example of React Native Add Header Footer in ListView / FlatList. As the topic name describes we will add the header and footer in FlatList. To add header and footer in FlatList we will use ListHeaderComponent and ListFooterComponent props of the FlatList same as we use ItemSeparatorComponent while adding FlatList Item Separator. Add Header … Read moreReact Native Add Header Footer in ListView / FlatList

Example of Popup Dialog in React Native

Here is an Example of Popup Dialog in React Native. We will use PopupDialog component provided by react-native-popup-dialog to make a Dialog. We can use Alert instead of the popup dialog if we just want to show the text but when it comes to the customization of alert content we have to use popup dialog. Popup Dialog … Read moreExample of Popup Dialog in React Native

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