FlatList - PullToRefresh, Load More and Filtering implementation

Hey Guys!! Good Day!!!

In last post, we have seen how to render FlatList using React Native Elements. Today, Let's see how to implement filtering functionality, load more functionality and pull to refresh functionality.

(i) First, let's see how to implement filtering data from FlatList. Initially, we have to set some fields in State as below:
                        isLoading - to show/hide ActivityIndicator 
                        dataSource - to set the values to FlatList
                        dataBackup - to store the values as backup 

Let's fetch data from api, on app's launch and set the values to dataSource and dataBackup and use that to render it in FlatList. Then we can set FlatList with itemSeparator - to show our custom bottom line, header - to add Searchbar at the top of it.

                                 <FlatList
                                         ....
                                         ....
                                         ItemSeparatorComponent={this.renderSeparator}
                                         ListHeaderComponent={this.renderHeader} />

In Searchbar, we have to listen for its value change. While it changes, we have to call a function, filterList().

                                         <SearchBar
                                                 ....
                                                 ....
                                                 value={this.state.query}  
                                                 onChangeText={(text) => this.filterList(text)} />

In filterList(),  we have to filter the data (that matches the name with the typed value), from the data stored in dataBackup array and set the matched results to dataSource array. That will change FlatList data. Its that simple!! ;)
                                         filterList = (text) => {  
                                                      var newData = this.state.dataBackup;  
                                                      newData = this.state.dataBackup.filter((item)=>{  
                                                      const itemData = item.name.toLowerCase()  
                                                      const textData = text.toLowerCase()  
                                                      return itemData.indexOf(textData)>-1  
                                                });  
                                               this.setState({  
                                                      query:text,  
                                                      dataSource: newData
                                              });  
                                        }  

 import React from 'react';  
 import { View, FlatList, ActivityIndicator } from 'react-native';  
 import { ListItem, SearchBar } from 'react-native-elements';  
 export default class App extends React.Component {  
  constructor(Props) {  
   super(Props);  
   this.state = {  
    query : '',  
    dataSource: [],  
    dataBackup: [],  
    isLoading: true  
   };  
  }  
  componentDidMount() {  
   this.fetchData();  
  }  
  fetchData = () => {  
   const url = `https://jsonplaceholder.typicode.com/users`;  
   this.setState({ loading: true });  
   return fetch(url)  
    .then(response => response.json())  
    .then(response => {  
     this.setState({  
      dataBackup: response,  
      dataSource: response,  
      isLoading: false,  
     });  
    })  
    .catch(error => {  
     console.error(error);  
    });  
  };  
  renderHeader = () => {  
   return (  
    <SearchBar  
     placeholder="Type Here..."  
     icon={({ type: 'material' }, { color: '#86939e' }, { name: 'search' })}  
     clearIcon={({ color: '#86939e' }, { name: 'close' })}  
     round  
     lightTheme  
     value={this.state.query}  
     onChangeText={(text) => this.filterList(text)}  
    />  
   );  
  };  
  renderSeparator = () => {  
   return (  
    <View  
     style={{  
      height: 1,  
      width: '84%',  
      backgroundColor: '#CED0CE',  
      marginLeft: '14%',  
     }}  
    />  
   );  
  };  
  filterList = (text) => {  
   var newData = this.state.dataBackup;  
    newData = this.state.dataBackup.filter((item)=>{  
    const itemData = item.name.toLowerCase()  
    const textData = text.toLowerCase()  
    return itemData.indexOf(textData)>-1  
   });  
   this.setState({  
    query:text,  
    dataSource: newData // after filter we are setting users to new array  
   });  
  }  
  render() {  
   if (this.state.isLoading) {  
    return (  
     <View style={{ flex: 1, padding: 20, justifyContent: 'center' }}>  
      <ActivityIndicator />  
     </View>  
    );  
   }  
   return (  
    <View>  
     <FlatList  
      data={this.state.dataSource}  
      renderItem={({ item }) => (  
       <ListItem  
        roundAvatar  
        title={item.name}  
        subtitle={item.email}  
        avatar={{ uri: 'https://cdn1.iconfinder.com/data/icons/rcons-user-action/512/user-512.png' }}  
        containerStyle={{ borderBottomWidth: 0 }}  
       />  
      )}  
      ItemSeparatorComponent={this.renderSeparator}  
      ListHeaderComponent={this.renderHeader}  
     />  
    </View>  
   );  
  }  
 }  

Run Application:

(ii) Next, Let's see how to handle data when refreshing the list and reaching the bottom of the list. For that we have to use the default methods in FlatList, onRefresh, onEndReached. Initially, on State, we have to initiate the following:
                   dataSource - to set values to FlatList
                   isLoading - to show/hide ActivityIndicator
                   refreshing - to show/hide Refreshing indicator
                   page - used by api, to get date with offset value
                   seed - also used by api
We knew how to fetch data from API and set it to FlatList already. So let's jump how to implement onRefresh. For that, first we have to set onRefresh method to FlatList.

                                   <FlatList
                                        ....
                                        ....
                                       onRefresh = {this.onRefresh}/>

Then we have to create a method onRefresh() , in which we have reset seed and page values to '1' to invoke api to get data.

                                    onRefresh = () => {
                                            this.state = {
                                                 dataSource: [],
                                                 refreshing: true,
                                                 page: 1,
                                                 seed: 1
                                            }
                                            this.fetchData()
                                    }

Don't forget to set refreshing to false in fetchData(). Otherwise it will show the refresh indicator forever :P

 import React from 'react';  
 import { View, FlatList, ActivityIndicator } from 'react-native';  
 import { ListItem, SearchBar } from 'react-native-elements';  
 export default class App extends React.Component {  
   constructor(Props){  
   super(Props)  
   this.state = {  
    dataSource: [],  
    isLoading : true,  
    page: 1,  
    seed: 1,  
    refreshing: false,  
   }  
  }  
  componentDidMount(){  
   this.fetchData()  
  }  
  fetchData = () =>{  
   const { page, seed } = this.state;  
   const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=10`;  
   this.setState({ loading: true });  
   return fetch(url)  
   .then((response) => response.json())  
   .then((response) => {this.setState({  
      dataSource: page == 1 ? response.results : [...this.state.dataSource, ...response.results],  
       isLoading: false,  
      refreshing: false,  
     });  
    })  
   .catch((error) => {console.error(error);})  
  }  
   renderHeader = () => {  
   return (  
    <SearchBar  
     placeholder="Type Here..."  
     icon={({ type: 'material' }, { color: '#86939e' }, { name: 'search' })}  
     clearIcon={({ color: '#86939e' }, { name: 'close' })}  
     round  
     lightTheme  
    />  
   );  
  };  
   renderSeparator = () => {  
   return (  
    <View  
     style={{  
      height: 1,  
      width: '84%',  
      backgroundColor: '#CED0CE',  
      marginLeft: '14%',  
     }}  
    />  
   );  
  };  
  onRefresh = () => {  
   this.setState({  
    dataSource: [],  
    isLoading : false,  
    refreshing : true,  
    seed : 1,  
    page : 1  
   })  
   this.fetchData()  
  }  
  loadMore = () =>{  
   this.setState({  
    refreshing : true,  
    page : this.state.page + 1,  
   })  
   this.fetchData()  
  }  
  render() {  
   if(this.state.isLoading){  
    return(  
     <View style={{flex: 1, padding: 20, justifyContent: 'center'}}>  
      <ActivityIndicator/>  
     </View>  
    )  
   }  
   return (  
    <View>  
     <FlatList  
      data={this.state.dataSource}  
      renderItem={({ item }) => (  
       <ListItem  
        roundAvatar  
        title={item.name.first +" " +item.name.last}  
        subtitle={item.email}  
        avatar={{ uri: item.picture.thumbnail }}  
        containerStyle={{ borderBottomWidth: 0 }}  
       />  
      )}  
      ItemSeparatorComponent={this.renderSeparator}  
      ListHeaderComponent={this.renderHeader}  
      onRefresh={this.onRefresh}  
      refreshing={this.state.refreshing}  
      onEndReached={this.loadMore}  
     />  
    </View>  
   );  
  }  
 }  

Run Application:

Its too fun to do that right??!!! Let's learn something new in next post. Until then, Bubyeeee!!!!