react native autocomplete list is empty

Question

im newbie to React Native UI development I am trying to develop a Searchable Dropdown FlatList Component, i came across https://www.npmjs.com/package/react-native-searchable-dropdown & https://www.npmjs.com/package/react-native-autocomplete-input

I found autocomplete input as more appropriate

I tried to implement it, but the list is emply.. please help me out what mistake or what exactly mistake i might be doing to implement it properly

constructor(props) {
    super(props);
    this.state = { DataList: [{
      id: 1,
      name: 'JavaScript',
    },
    {
      id: 2,
      name: 'Java',
    },
    {
      id: 3,
      name: 'Ruby',
    },
    {
      id: 4,
      name: 'React Native',
    },
    {
      id: 5,
      name: 'PHP',
    },
    {
      id: 6,
      name: 'Python',
    },
    {
      id: 7,
      name: 'Go',
    },
    {
      id: 8,
      name: 'Swift',
    },], query: '' };
  }

  findData(query) {
    if (query === '') {
      return [];
    }
    const { DataList } = this.state;
    const regex = new RegExp(`${query}`, 'i');
    return DataList .filter(data => data.name.search(regex) >= 0);
  }

...

render(){
    const { query } = this.state;
    const DataList = this.findData(query);

    const comp = (a, b) => a.toLowerCase().trim() === b.toLowerCase().trim();

    return (
...
<Autocomplete
          autoCapitalize="none"
          autoCorrect={false}
          containerStyle={styles.autocompleteContainer}
          data={DataList.length === 1 && comp(query, DataList[0].name) ? [] : DataList}
          defaultValue={query}
          onChangeText={text => this.setState({ query: text })}
          placeholder="Enter Name"
          renderItem={({ text }) => (
            <TouchableOpacity onPress={() => this.setState({ query: text })}>
              <Text style={styles.itemText}>
                 {text}
              </Text>
            </TouchableOpacity>
          )}
        />

...
)

Result Images [1]: https://i.sstatic.net/0IHRM.jpg [2]: https://i.sstatic.net/gtlHB.jpg The [2] Image is what i want to develop at the end..

Thank you for your time and support :)

Answer 1

The problem is with this code

renderItem={({ text }) => (
            <TouchableOpacity onPress={() => this.setState({ query: text })}>
              <Text style={styles.itemText}>
                 {text}
              </Text>
            </TouchableOpacity>
          )}

You will receive item in renderItem function not a text

Please change it to

renderItem={({ item }) => (
            <TouchableOpacity
              onPress={() => this.setState({ query: item.name })}
            >
              <Text style={styles.itemText}>{item.name}</Text>
            </TouchableOpacity>
          )}

Sample App Demo

Complete Sample Code

import React from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import Autocomplete from "react-native-autocomplete-input";

export default class Home1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      DataList: [
        {
          id: 1,
          name: "JavaScript"
        },
        {
          id: 2,
          name: "Java"
        },
        {
          id: 3,
          name: "Ruby"
        },
        {
          id: 4,
          name: "React Native"
        },
        {
          id: 5,
          name: "PHP"
        },
        {
          id: 6,
          name: "Python"
        },
        {
          id: 7,
          name: "Go"
        },
        {
          id: 8,
          name: "Swift"
        }
      ],
      query: ""
    };
  }

  findData(query) {
    if (query === "") {
      return [];
    }
    const { DataList } = this.state;
    const regex = new RegExp(`${query}`, "i");
    return DataList.filter(data => data.name.search(regex) >= 0);
  }

  render() {
    const { query } = this.state;
    const DataList = this.findData(query);

    console.log("DataList", DataList);

    const comp = (a, b) => a.toLowerCase().trim() === b.toLowerCase().trim();

    return (
      <View style={styles.container}>
        <Autocomplete
          autoCapitalize="none"
          autoCorrect={false}
          containerStyle={styles.autocompleteContainer}
          data={
            DataList.length === 1 && comp(query, DataList[0].name)
              ? []
              : DataList
          }
          defaultValue={query}
          onChangeText={text => this.setState({ query: text })}
          placeholder="Enter Name"
          renderItem={({ item }) => (
            <TouchableOpacity
              onPress={() => this.setState({ query: item.name })}
            >
              <Text style={styles.itemText}>{item.name}</Text>
            </TouchableOpacity>
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 40
  },
  itemText: {
    padding: 16
  }
});