byteburgers / react-native-autocomplete-input

Pure javascript autocomplete input for react-native
https://byteburgers.com/autocomplete
MIT License
818 stars 255 forks source link

Add renderResultList prop #230

Closed ajenkins closed 2 years ago

ajenkins commented 2 years ago

This allows you to replace <FlatList /> with another component. The motivation for this is to allow you to use <Autocomplete /> inside of a <ScrollView /> without getting that VirtualizedLists should never be nested inside plain ScrollViews error.

Fixes #219

I added unit tests, but I also manually tested using my own app. Here's the relevant part of my code so you can see how this would work in practice:

import { useState } from "react";
import { Text, View, Pressable } from "react-native";
import Autocomplete from "react-native-autocomplete-input";

function MyAutocomplete() {
  const [search, setSearch] = useState("");
  const [selectedTag, setSelectedTag] = useState(null);
  const data = [{id: "example", value: "example"}];

  return (
     <Autocomplete
        value={search}
        onChangeText={(text) => {
          setSearch(text);
          setSelectedTag(null);
        }}
        data={[...tags, { id: "new", value: `Create new tag: ${search}` }]}
        renderResultList={({ data, style }) => (
          <View style={style}>
            {data.map(({ id, value }) => (
              <Pressable
                onPress={() => {
                  setSelectedTag(id);
                  if (id !== "new") {
                    setSearch(value);
                  }
                }}
                key={id}
              >
                <Text>{value}</Text>
              </Pressable>
            ))}
          </View>
        )}
        hideResults={search.length < 3}
        containerStyle={{ flexGrow: 1 }}
      />);
}
mrlaessig commented 2 years ago

Thx for contributing! New version is released including the change.

gabriellend commented 11 months ago

@mrlaessig Doesn't this lose the optimization of a FlatList though? Is there any other solution being worked on that allows us to keep the FlatList under the hood?

mrlaessig commented 11 months ago

FlatList is still the default if no custom list is supplied.

gabriellend commented 11 months ago

@mrlaessig I understand that but I'm wondering if there is a solution in the works to the VirtualizedList error that isn't at the expense of the FlatList. I'm still getting the error with the latest version and I saw a couple other closed issues about it where some said it was fixed, some said it wasn't. This was the only one where I could see a clear solution but it doesn't seem to be optimal so just seeking clarification, wondering if I missed something. Thanks!