React Native Apply Real Time Search Bar Filter on FlatList JSON Data Example Tutorial

Search Bar filter is one of the most common way to filter large amount of dynamic data in mobile applications. As we all know search bar filter is present in almost every single large scale android & iOS mobile app. We have already make a tutorial on real time search using ListView but as our user required we are now making this in FlatList also. In today’s tutorial we would make in React Native Apply Real Time Search Bar Filter on FlatList JSON Data in Android and iOS App Example Tutorial. The JSON used in current tutorial is coming from JSONPlaceholder website. This website provides us free dummy JSON data for testing purpose. So let’s get started .

Contents in this project React Native Apply Real Time Search Bar Filter on FlatList JSON Data Android iOS Example Tutorial:

1. Open your project’s main App.js file and import ActivityIndicator, Alert, FlatList, Text, StyleSheet, View, and TextInput component.

2. Creating our main Root Parent class named as App export default Component.

3. Creating constructor() in App class. Now we would make 3 States named as isLoading, text and data. We would also make a arrayholder in constructor.

  • isLoading : is used to show and hide the ActivityIndicator component after done loading data.
  • text : Used to hold TextInput component entered text.
  • data : Used to hold JSON data coming from server.
  • arrayholder : Used to filter data.

4. Creating componentDidMount() method and here we would parse all the JSON coming from web URL and store the JSON into data. After done loading JSON we would also make false isLoading State to hide the Activity Indicator component from screen.

5. Creating a function named as GetFlatListItem() with name argument. We would use this function to print the selected Flat List item on mobile screen using Alert.

6. Create a function named as searchData() with text argument. We would call this function on TextInput’s onChangeText() event. So every time when user starts typing inside TextInput component it will filter the JSON data according to typed text.

7. Creating another function named as itemSeparator(). In this function we would simply drawing a horizontal line. We would call this function on ItemSeparatorComponent() event of Flat List.

8. Creating ActivityIndicator component in render’s block with isLoading State. Now we would make TextInput and FlatList component in render’s return block.

9. Creating Style.

10. Complete source code for App.js File:

Screenshots:

React Native Apply Real Time Search Bar Filter on FlatList JSON Data Example Tutorial

React Native Apply Real Time Search Bar Filter on FlatList JSON Data Example Tutorial