tzs007 / react-native-autosuggest

AutoSuggest Text Input

AutoSuggest Text input using Array of object as list of searchable content. And return selected of object with term object must have this key {text, value}.

Installation

• npm install {link of this git download} --save

---

Example:

import AutoSuggest from 'react-native-autosuggest';

const suggestions = [
      {text: 'Banana', value: '1'},
      {text: 'Apple', value: '2'}
    ]

<AutoSuggest
      rowTextStyles={{backgroundColor: 'darkblue', color: 'white'}}
      terms={suggestions}
      placeholder="select a fruit."
      textInputStyles={{backgroundColor: 'black', color: 'white'}}
      onChangeText={(el) => console.log('changing text!', el.text)}
      onItemPress={(el) => console.log('changing text!', el.text)}
      clearBtnVisibility={false}
      maxRow = {10}
    />

Props:

Refer to React's TextInput documentation for more information on placeholder and onChangeText. Refer to the source code for more information about the rest.

• onChangeText (function, fired when the input changes.)
• onChangeTextDebounce (integer, the minimum break in milliseconds that the onChangeText callback needs to take before firing again. default is 0.)
• onItemPress (function 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)
• clearBtn (Array e.g. [[] -- only if you want a custom btn component, default is undefined.)
• terms (Array e.g. ['Chicago', 'New York', 'San Francisco'])
• placeholder (String e.g. "Please enter a City.")
• maxRow (Number e.g. 10, Default number is 5)

Styles:

• clearBtnStyles (Object e.g. {backgroundColor: "white", flex: 2})
• textInputStyles (Object e.g. {width: 400, backgroundColor: "black"})
• containerStyles (Object e.g. {flex: 2})
• rowWrapperStyles

Todo:

• pass a custom component for the "clear" button