Autocomplete text input component

[Sami-21]

Is your feature request related to a problem? Please describe.
I have been using native paper for different projects and I came across a problem several times where I needed an autocomplete component, I tried 2 packages but I would love to have a component from the native paper so that my UI remains consistent

Describe the solution you'd like
I implemented an autocomplete component with the use of TextInput + Menu component from native paper

interface Props<T extends Record<string, any>> {
  theme?: AppTheme;
  value: {
    origValue: string | undefined;
  };
  label: string;
  data: T[];
  displayKey: keyof T;
  containerStyle?: StyleProp<ViewStyle>;
  onChange: (text: string) => void;
  leadingIcon?: IconSource;
  trailingIcon?: IconSource;
  textInputstyle?: StyleProp<TextStyle>;
  menuStyle?: StyleProp<ViewStyle>;
  textInputRight?: ReactNode;
  textInputLeft?: ReactNode;
}

const Autocomplete = <T extends Record<string, any>>({
  theme = lightTheme,
  value: propValue,
  label,
  data,
  displayKey,
  containerStyle = {},
  onChange: originOnChange,
  textInputstyle = {},
  leadingIcon = "",
  trailingIcon = "",
  menuStyle = {},
  textInputRight = null,
  textInputLeft = null,
}: Props<T>) => {
  const [value, setValue] = useState<string | undefined>(propValue.origValue);
  const [menuVisible, setMenuVisible] = useState<boolean>(false);

  return (
    <View
      style={
        containerStyle,
      }
    >
      <TextInput
        theme={theme}
        mode="outlined"
        onFocus={() => {
          if (value || value?.length === 0) {
            setMenuVisible(true);
          }
        }}
        outlineStyle={
          menuVisible
            ? {
                borderBottomRightRadius: 0,
                borderBottomLeftRadius: 0,
              }
            : {}
        }
        onBlur={() => setMenuVisible(false)}
        label={label}
        {...(textInputRight ? { right: textInputRight } : {})}
        {...(textInputLeft ? { left: textInputLeft } : {})}
        style={textInputstyle}
        onChangeText={(text) => {
          originOnChange(text);
          setMenuVisible(true);
          setValue(text);
        }}
        value={value}
      />
      {menuVisible && (
        <View
          style={{
            flex: 1,
            width: "100%",
            backgroundColor: "white",
            borderWidth: 1,
            borderColor: theme.colors.primary,
            borderBottomRightRadius: 4,
            borderBottomLeftRadius: 4,
            flexDirection: "column",
            position: "absolute",
            top: "100%",
            left: 0,
            zIndex: 10,
          }}
        >
          {data.length === 0 && (
            <Text style={{ padding: 10 }}>
              <Text style={{ textAlign: "center" }}>
                No result found
              </Text>
            </Text>
          )}
          {data.map((item, index) => (
            <Menu.Item
              key={index}
              style={ menuStyle}
              leadingIcon={leadingIcon}
              trailingIcon={trailingIcon}
              onPress={() => {
                const selectedValue = String(item[displayKey]);
                console.log(selectedValue);

                setValue(selectedValue);
                setMenuVisible(false);
                originOnChange(selectedValue);
              }}
              title={String(item[displayKey])}
            />
          ))}
        </View>
      )}
    </View>
  );
};

Describe alternatives you've considered
I have tried two alternatives:
react-native-autocomplete-dropdown and react-native-autocomplete-input
I dropped those packages out of fear since they were backed only by one contributor.

Additional context
N/A

[RichardLindhout]

I once tried it and came really far but i came to conclusion we need a bottom sheet modal on mobile instead of a dropdown
https://github.com/web-ridge/react-native-paper-autocomplete

[RichardLindhout]

It's really hard though to get it working on web + native with great performance and inside scroll containers

[RichardLindhout]

The package needs to get a lot of work and bugfixes

[storm345s]

Hi! I need that component too, for the moment i had to make a poor implementation of it to fulfill my requirements but i think that component would be great for this library. I took a look at other libraries and i didn't see that component at it, didn't find any stable package eigther...

I tried to use the two packages mentioned by @Sami-21 (react-native-autocomplete-dropdown and react-native-autocomplete-input) but no one works fine for me because the dropdown only allow to choose the options it contains, and the autocomplete-input doesn't repositionate properly