react-native-expo-autocomplete-dropdown

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

Option	Description	Type	Default
data	set of list items	array	null
widthBySide	give Margin left Right	int	null
placeholder	placeholder value	string	null
parentCallback={handleCallback}	return object	object
placeholderTextColor	placeholder Text Color	string	null
borderBottomColor	border Bottom Color	string	null
onFocusBottomColor	onFocus border Bottom Color	string	null
borderRadius	border radius of input field	int	null
borderBottomWidth	border Bottom Width	int	false
borderRadiusList	menu dropdown list item radius	int	null
listElevation	Elevation prop for Elevation of item	int	null
listBackgroundColor	menu item background color	string	null
listTextColor	menu item text color	string	null