react-native-autosuggest

AutoSuggest TextInput Component

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