react-native-expo-autocomplete-dropdown v1.0.26

React-Native-AutoComplete-DropDown

Dropdown Item picker with search and autocomplete (typeahead) functionality for react native

Demo

Example on Expo snacks

Installation

Run: npm install --save react-native-expo-autocomplete-dropdown or yarn add react-native-expo-autocomplete-dropdown

Platform

IOS and android

Usage

import AutoComplete from "react-native-expo-autocomplete-dropdown";

DateSet

dataSet property must be an array of objects or null. Object required keys are:

{
    id: 'some uniq string id',
    title: 'list item title'
}

Example with local Dataset

import { StyleSheet, Text, View } from "react-native";
import AutoComplete from "react-native-expo-autocomplete-dropdown";

export default function App() {
  const handleCallback = (childData) => {
    console.log("child", childData);
  };
  return (
    <View style={styles.container}>
      <AutoComplete
        data={[
          { id: "1", title: "Apple" },
          { id: "2", title: "banana" },
          { id: "3", title: "Amrod" },
          { id: "4", title: "pear" },
          { id: "5", title: "pine Apple" },
          { id: "6", title: "orange" },
        ]}
        widthBySide={30}
        placeholder={"select fruit"}
        backgroundColorTextInput={"black"}
        placeholderTextColor={"green"}
        borderBottomColor={"green"}
        onFocusBottomColor={"black"}
        borderRadius={7}
        borderBottomWidth={2}
        borderRadiusList={10}
        listElevation={7}
        listBackgroundColor={"white"}
        listTextColor={"black"}
        listborderBottomColor={"black"}
        parentCallback={handleCallback}
      ></AutoComplete>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Note:

Some time scroll not work so use "flex:1" in parents component

Options