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 |