1.0.1 • Published 3 years ago
@mad-family-ui/react-native-autocomplete v1.0.1
react-native-autocomplete
A pure TypeScript autocomplete component for React Native (iOS) (Android - Not working completely).
How to use react-native-autocomplete
Installation
$ npm install --save @mad-family-ui/react-native-autocompleteExample
// ...
return (
<Autocomplete
list={[
{name: 'Apple', value: 'apple'},
{name: 'Orange', value: 'orange'},
{name: 'Grape', value: 'grape'},
{name: 'Banana', value: 'banana'},
]}
labelKey="name"
valueKey="value"
/>
);
// ...A complete example for iOS can be found here.
Props
| Prop | Type | Description |
|---|---|---|
| list* | Array of object | List of objects used as the data for the Autocomplete |
| zIndex | number | the container component will have this zIndex set. Useful when you have multiple Autocomplete in 1 Screen |
| containerHeight | string / number | The outermost container height |
| labelKey* | string | The key searched for in the list for showing the text in the autocomplete suggestion list |
| valueKey* | string | The key searched for in the list for finding selected item |
| searchKeys* | Array of strings | This array of keys is used to filter out the suggestions from the list of objects passed |
| onSelectItem* | (item: any) => void | When Item is selected, this function is invoked to return the selected item. |
| defaultValue | string | If provided, will find the item from list using valueKey and set it selected by default |
| containerStyle | style | These styles will be applied to the container which surrounds the autocomplete component. |
| listContainerStyle | style | These styles will be applied to the container which surrounds the autocomplete suggestion list component (ScrollView). |
| inputContainerStyle | style | These styles will be applied to the input container which surrounds the input component. |
| inputStyle | style | These styles will be applied to the input component. |
| listItemContainerStyle | style | These styles will be applied to the container which surrounds the suggestion item component. |
| listItemTextStyle | style | These styles will be applied to the suggestion item. |
| customItemRenderer | (item: any, index: number) => React.ReactElement | Custom Item Renderer |
| noResultComponent | React.ReactElement | Custom No Result Component |
| theme | "light"/"dark" | Support for dark and light theme. Useful if creating an app when you are supporting phone theme used |
Android
- To make this component work on Android, we need to specify the containerHeight property as Android cannot detect clicks in absolute positioning.
Changelog
1.0.0
- Used Flatlist instead of Scrollview for performance improvements.
Contribute
- Android has issues with able to detect clicks with absolute positioning. If you could help solve this issue, please help :)
- Feel free to open issues or do a PR!