title: react native search result too large and need pagination
body: <p>i am new to this react native and i am require to develop a simple app to search something from given api. Given api does not have pages but count of results and sometimes the results  that comes out is large</p>
  
  <p>this case, my search result is loading while displaying some of the result from the api. I found out this to be very bad design for myself and i wanted to do something like load only 10 result first and when scroll until end will load another 10 results and keep on going with 10 results. I think this is call infinite scrolling?</p>
  
  <p>during my search in google, i see alot of example but i am not sure how to implement this on my side instead. This is my search code.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { StyleSheet, Alert, Dimensions, Platform, View,TouchableOpacity,TouchableHighlight,FlatList  } from 'react-native'
  import { Button,Header, Icon, Input, Item, Left, Right, Text,Thumbnail } from 'native-base'
  import { ListItem, Avatar } from 'react-native-elements'
  
  
  const { width, height } = Dimensions.get('window')
  class Search extends Component {
    constructor(){
      super();
      this.state = {
        searchResult: [],
      };
    }
  
     static navigationOptions = {
     title: "Search Results",
               headerStyle: {
                backgroundColor: '#4050B5',
              },
              headerTintColor: '#fff',
              headerTitleStyle: {
                fontWeight: 'bold'
      }
    };
  
    getSearchResult(searchURL){
      console.log("Search URL is =&gt; "+searchURL);
      return fetch(searchURL)
      .then((response) =&gt; response.json())
      .then((responseJson) =&gt; {
          this.setState({searchResult:responseJson.result});
      })
      .catch((error) =&gt; {
        console.error(error);
      });
    }
  
    configureSearchURL(props){
      const { navigation } = props;
      let selectedTitles = navigation.getParam('selectedTitles');
      let searchKeyword = navigation.getParam('searchKeyword');
      console.log("selectTitles =&gt; "+selectedTitles);
      console.log("searchKeyword =&gt; "+searchKeyword);
      let searchURL = 'https://imas-go.com/test_item_search.php?';
      let titleParameter = "";
  
      if(selectedTitles != null || selectedTitles != ""){
         for (let i=0;i&lt;selectedTitles.length;i++){
          if(i==0){
            titleParameter+="vers[]="+selectedTitles[i];
          } else {
            titleParameter+="&amp;vers[]="+selectedTitles[i];
          }
        }
        searchURL+=titleParameter;
      }
  
      if(searchKeyword.trim().length &gt; 0){
        searchURL+="&amp;name="+searchKeyword;
      }
      console.log("final search url =&gt; "+searchURL);
      this.getSearchResult(searchURL);
    }
  
    componentDidMount(){
     this.configureSearchURL(this.props);
    }
  
    keyExtractor = (item, index) =&gt; item.sno+item.name;
  
  renderItem = ({ item }) =&gt; (
   &lt;ListItem
        title= {item.name}
        subtitle={
          &lt;View style={styles.subtitleView}&gt;
            &lt;Text style={styles.ratingText}&gt;Ver: {item.ver}&lt;/Text&gt;
            &lt;Text style={styles.ratingText}&gt;Price: {item.price}&lt;/Text&gt;
            &lt;Text style={styles.ratingText}&gt;Stock: {item.stock}&lt;/Text&gt;
          &lt;/View&gt;
        }
       avatar={&lt;Avatar
                  large
                  medium
                  source={{uri: `https://imas-go.com/card_image/ws/front/${item.ver}/${item.cid}.jpg`}}
                  onPress={() =&gt; console.log("Works!")}
                /&gt;}
      /&gt;
  )   
    render() {
  
        return(
          &lt;FlatList
        keyExtractor={this.keyExtractor}
        data={this.state.searchResult}
        renderItem={this.renderItem}
      /&gt;
  
          );
    }
  }
  
  styles = StyleSheet.create({
    subtitleView: {
      flexDirection: 'row',
      paddingLeft: 10,
      paddingTop: 5
    },
    ratingText: {
      paddingLeft: 10,
      color: 'grey'
    }
  })
  
  export default Search;
  </code></pre>
  
  <p>i have a page that searches with keywords and category and redirect to this search.js page and form the parameter for the api search url. Hope someone can help me in implement this</p>