how to make an search function in react native

Question

This is an reference of git hub and using this code to make as same searh function in react native with this example? but i want to make a serach function after user inputs then it should

import React, { Component } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';
import { ListItem, SearchBar } from 'react-native-elements';

class Search extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      error: null,
    };

    this.arrayholder = [];
  }

  componentDidMount() {
    this.makeRemoteRequest();
  }

  makeRemoteRequest = () => {
    const url = `https://www.achhamall.com/staging-achhamall.com/index.php?route=webservices/api&method=appGetCategoryDetails`;
    this.setState({ loading: true });

    fetch(url)
      .then(res => res.json())
      .then(res => {
        this.setState({
          data: res.products,
          error: res.error || null,
          loading: false,
        });
        this.arrayholder = res.products;
        console.log(res.products)
      })
      .catch(error => {
        this.setState({ error, loading: false });
      });
  };

  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: '86%',
          backgroundColor: '#CED0CE',
          marginLeft: '14%',
        }}
      />
    );
  };

  searchFilterFunction = text => {
    this.setState({
      value: text,
    });

    const newData = this.arrayholder.filter(item => {
      const itemData = `${item.name.toUpperCase()} ${item.name.toUpperCase()}`;
      const textData = text.toUpperCase();

      return itemData.indexOf(textData) > -1;
    });
    this.setState({
      data: newData,
    });
  };

  renderHeader = () => {
    return (
      <SearchBar
        placeholder="Type Here..."
        lightTheme
        round
        onChangeText={text => this.searchFilterFunction(text)}
        autoCorrect={false}
        value={this.state.value}
      />
    );
  };

  render() {
    if (this.state.loading) {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <ActivityIndicator />
        </View>
      );
    }
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <ListItem

              title={item.name}
            />
          )}
          keyExtractor={item => item.name}
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}
        />
      </View>
    );
  }
}

export default Search;

and while running and typing the text to input gives error undefined is not an object (evaluating _'this.arrayholder.filter')

Answer 1

This happened because your data is not fetching therefor arrayholder get undefined check your url. and You can solve this issue using this

this.arrayholder = res.products == undefined ? [] :res.products;

in makeRemoteRequest function

Check below code,

import React, { Component } from 'react';
import { View, Text, FlatList, ActivityIndicator } from 'react-native';
import { ListItem, SearchBar } from 'react-native-elements';

class Search extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      error: null,
    };

    this.arrayholder = [];
  }

  componentDidMount() {
    this.makeRemoteRequest();
  }

  makeRemoteRequest = () => {
    const url = `https://www.achhamall.com/staging-achhamall.com/index.php?route=webservices/api&method=appGetCategoryDetails`;
    this.setState({ loading: true });

    fetch(url)
      .then(res => res.json())
      .then(res => {
        this.setState({
          data: res.products,
          error: res.error || null,
          loading: false,
        });
        this.arrayholder = res.products == undefined ? [] :res.products;
        console.log(res.products)
      })
      .catch(error => {
        this.setState({ error, loading: false });
      });
  };

  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: '86%',
          backgroundColor: '#CED0CE',
          marginLeft: '14%',
        }}
      />
    );
  };

  searchFilterFunction = text => {
    this.setState({
      value: text,
    });
        console.log('dddd',this.arrayholder)
    const newData = this.arrayholder.filter(item => {
      const itemData = `${item.name.toUpperCase()} ${item.name.toUpperCase()}`;
      const textData = text.toUpperCase();

      return itemData.indexOf(textData) > -1;
    });
    this.setState({
      data: newData,
    });
  };

  renderHeader = () => {
    return (
      <SearchBar
        placeholder="Type Here..."
        lightTheme
        round
        onChangeText={text => this.searchFilterFunction(text)}
        autoCorrect={false}
        value={this.state.value}
      />
    );
  };

  render() {
    if (this.state.loading) {
      return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <ActivityIndicator />
        </View>
      );
    }
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <ListItem

              title={item.name}
            />
          )}
          keyExtractor={item => item.name}
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}
        />
      </View>
    );
  }
}

export default Search;

Feel free for doubts.

Answer 2

Check out this code snippet , how you can use search and implement it in the Flatlist

     import React from 'react';
    import MapView,{ Marker } from 'react-native-maps';
    import {
      SafeAreaView,
      StyleSheet,
      ScrollView,
      View,
      Image,
  Text,
  ToastAndroid,
  PermissionsAndroid,
  StatusBar,
  Platform,

} from 'react-native';
import {Header,SearchBar,ListItem} from 'react-native-elements';
import Icon from 'react-native-vector-icons/MaterialIcons';

import {Fab} from 'native-base';
import { from } from 'rxjs';
const axios = require('axios');


class App extends React.Component{

  state = {
    search: '',
    searchResponse: [],
    isFlatlistVisible: false,

    loading: false
  };





  queryText = (text="") => {

    if(text==""){
      this.setState({searchResponse: []});


    }

    else{
      axios.get(`http:ww.gdhdhdh.com`)
      .then((response) => {

        this.setState({searchResponse: response.data.prop_data});

      });
    }
    }

  updateSearch = search => {

    this.setState({ search });
    this.queryText(search)
  };

  componentDidMount(){
   this.queryText()


  }
  render(){

    const{search} = this.state;
    const {searchResponse} = this.state;

    return(

      <>
      <StatusBar backgroundColor="blue" barStyle="light-content" />


     <SearchBar
       placeholder="Type Here..."
       onChangeText={this.updateSearch}
       value={search}

       />}

     />
    <View>

    </View>
     {this.state.search?<ScrollView>
     {
    searchResponse.map((item, i) => (

      <ListItem
        key={i}
        title={item.name}
        bottomDivider
        onPress= {() => ToastAndroid.show(`${item.name}`, ToastAndroid.SHORT)}
      />

    ))
  }
  </ScrollView>:<View style={styles.container}>

    </View> }


         </>
    );
  }
}

const styles = StyleSheet.create({
    container: {
     flex:1,
      alignItems: 'center',
    },
    map: {
      height: "100%",
      width: "100%",
    },
  textColor: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 20,
    marginBottom: 15
  },
  red: {
    color: 'red',
  },
});


    export default App;