How to make search filter with list item in react-native

Question

I have been wanting to make search filter in this listitem but i kind of get confused, if you are experienced with this, please take a look at my code.

import React, { Component } from 'react'; 
import {   Text,   View,   ScrollView,   TextInput, } from 'react-native'; 
import { List, ListItem } from 'react-native-elements'; 
import { users } from '../config/data';

class Feed extends Component {   constructor(props){
    super(props);
    this.state = {
      user:'',
    }   }   onLearnMore = (user) => {
    this.props.navigation.navigate('Details', { ...user });   };

  filterSearch(text){
    const newData = users.filter((item)=>{
      const itemData = item.name.first.toUpperCase()
      const textData = text.toUpperCase()
      return itemData.indexOf(textData)>-1
    })
    this.setState({
      text:text
    })   }

  render() {
    return (
      <ScrollView>
        <TextInput
            onChangeText={(text) => this.filterSearch(text)}
            value={this.state.text}
          />
        <List>
          {users.map((user) => (
            <ListItem
              key={user.login.username}
              roundAvatar
              avatar={{ uri: user.picture.thumbnail }}
              title={`${user.name.first.toUpperCase()} ${user.name.last.toUpperCase()}`}
              subtitle={user.email}
              onPress={() => this.onLearnMore(user)}
            />
          ))}
        </List>
      </ScrollView>
    );   } }

export default Feed;

i have been surfing the internet but i found that most of it discuss about listview instead of list item from react-native-elements, help me!

Answer 1

You were almost correct. You successfully filter your users but then render the same not filtered users in your list. To change this easily you can use component state.

Example

import React, { Component } from 'react'; 
import {   Text,   View,   ScrollView,   TextInput, } from 'react-native'; 
import { List, ListItem } from 'react-native-elements'; 
import { users } from '../config/data';

class Feed extends Component {   
  constructor(props){
    super(props);
      this.state = {
        user:'',
        users: users // we are setting the initial state with the data you import
      }
  }   

  onLearnMore = (user) => {
    this.props.navigation.navigate('Details', { ...user });
  };

  filterSearch(text){
    const newData = users.filter((item)=>{
      const itemData = item.name.first.toUpperCase()
      const textData = text.toUpperCase()
      return itemData.indexOf(textData)>-1
    });
    this.setState({
      text:text,
      users: newData // after filter we are setting users to new array
    });
  }

  render() {
    // rather than mapping users loaded from data file we are using state value
    return (
      <ScrollView>
        <TextInput
            onChangeText={(text) => this.filterSearch(text)}
            value={this.state.text}
          />
        <List>
          {this.state.users.map((user) => (
            <ListItem
              key={user.login.username}
              roundAvatar
              avatar={{ uri: user.picture.thumbnail }}
              title={`${user.name.first.toUpperCase()} ${user.name.last.toUpperCase()}`}
              subtitle={user.email}
              onPress={() => this.onLearnMore(user)}
            />
          ))}
        </List>
      </ScrollView>
    );   } }

export default Feed;