🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

An auto-suggest enhanced TextInput component for React Native.

Form React Native

Documentation

AutoSuggest TextInput Component

alt tag

Installation

  • npm install autosuggest --save

Example:

check the index.ios.js in the example repo.

import { TextInput } from 'react-native' import AutoSuggest from 'react-native-autosuggest';

   <AutoSuggest       onChangeText={(text) => console.log('input changing!')}       terms={['Apple', 'Banana', 'Orange', 'Strawberry', 'Lemon', 'Cantaloupe', 'Peach', 'Mandarin', 'Date', 'Kiwi']}       ...     /> 

Props

Prop Type Optional Default Description
onChangeText Function false (prop is manadatory) fired when the input changes. e.g (ev) => console.log(event)
terms Array false (prop is mandatory) list of suggestions. e.g ['Chicago', 'New York', 'San Francisco']
onChangeTextDebounce Number true 300 the minimum break in milliseconds that the onChangeText callback needs to take before firing again.
onItemPress Function true undefined fired when an item in the menu is pressed with that item's string value as the argument. You probably don't need this, and should just use onChangeText
placeholder String true '' e.g 'please enter a name'
clearBtnStyles Object true ...see src styles that go around your clear btn
clearBtnVisibility Bool true false is the clear input button visible?
clearBtn Array true undefined only if you want a custom btn component
containerStyles Object true ...see src applies to the entire application
placeholderTextColor String true 'lightgrey' placeholder text color
otherTextInputProps Object true undefined check the TextInput docs for the full list)
textInputStyles Object true undefined applies to the TextInput component e.g {width: 400, backgroundColor: "black"})
rowWrapperStyles Object true undefined applies to the View around the dropdown
rowTextStyles Object true undefined applies the dropdown text

Contributing


You May Also Like