Search data in ListView react native

Question

I'm currently learning react-native and getting stuck in ListView problems. I want to search data in ListView from a TextInput and i expect that the result is in ListView too.

Here's what i've done so far:

var PageOne = React.createClass({
  getInitialState:function(){
    return{
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
      colorProps: {
        titleColor: 'white',
      },
      searchText:"",
    }
  },

  componentDidMount() {
    this.fetchData();
  },

  fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
          loaded: true,
        });
      })
      .done();
  },

  setSearchText(action){
    let searchText = event.nativeEvent.text;
    this.setState({searchText});

    /*
     *
     * 
     */

  },

  render() {
    return (
      <View style={{ flex: 1 }}>
        <ToolbarAndroid
          title="Movies"
          {...this.state.colorProps}
          style={{height:40, backgroundColor:'blue'}}
           />
        <TextInput
          placeholder="Search movies......."
          value={this.state.searchText}
          onChange={this.setSearchText.bind(this)} />
        <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderMovie}
        style={styles.listView}
        />
      </View>
    );
  },

  renderMovie(movie) {
    return (
    <TouchableOpacity onPress={this._handlePressList.bind(this, movie)}>
      <View style={styles.container}>
        <Image
          source={{uri: movie.posters.thumbnail}}
          style={styles.thumbnail}
        />
        <View style={styles.rightContainer}>
          <Text style={styles.title}>{movie.title}</Text>
          <Text style={styles.year}>{movie.year}</Text>
        </View>
      </View>
    </TouchableOpacity>
    );
  },

what am i supposed to do next? Please help. Thanks :)

Update! After read the answer from urbancvek, i add function in setSearchText() method like this:

setSearchText(event){
    const searchText = event.nativeEvent.text;
    
    moviesLength = this.state.movies.length;
    aMovie = this.state.movies;

    const filteredMovies = this.state.movies.filter(checkTitle);
    console.log("movies: " + JSON.stringify(filteredMovies));

    function checkTitle() {
        for(i=0;i<moviesLength;i++){
          if(aMovie[i].title === searchText){
            console.log("found:  " + aMovie[i].title);
            return aMovie[i];
          }
        }
    }
    
    this.setState({
        searchText,
        dataSource: this.state.dataSource.cloneWithRows(filteredMovies),
    });
  },

But it always show me all the movies, not filtered one. any ideas? thanks

Answer 1

In your fetchData method you should probably save responseData to state too. You will then interact with this data each time search field changes.

fetchData() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
          movies: responseData.movies,
          loaded: true,
        });
      }).done();
 },

Now in your setSearchText() method you should include some filter function that will find the movies you want from the movies you saved to state in fetchData().

setSearchText(action){
    const searchText = event.nativeEvent.text;
    const filteredMovies = this.state.movies.filter(/* awesome filter function */);

    this.setState({
        searchText,
        dataSource: this.state.dataSource.cloneWithRows(filteredMovies);
    });
},

Each time you want to update ListView you have to update it's dataSource. Only this way ListView component can realize that the data it's displaying has changed.

Hope I helped.

Answer 2

Searching data in the listview is basically just searching for it in a linked list or an array just take the input and search for it in the datasource or data blob. You can use linear search or binary search whichever you prefer.

Answer 3

The UIExplorer example from Facebook shows how to do this with ListView: https://github.com/facebook/react-native/tree/master/Examples/UIExplorer