vizir/react-native-autocomplete-select

AutoComplete with selection for react-native

react-native-autocomplete-select

Simple AutoComplete with selection for react-native

Install

npm install --save react-native-autocomplete-select

Usage

Simple example:

import AutoComplete from 'react-native-autocomplete-select'

...

const onSelect = (suggestion) => {
  console.log(suggestion) // the pressed suggestion
}

const suggestions = [
  {text: 'suggestion1', anotherProperty: 'value'},
  {text: 'suggestion2', anotherProperty: 'value2'}
]

<AutoComplete
  onSelect={onSelect}
  suggestions={suggestions}
  suggestionObjectTextProperty='text'
  value='sug'
/>

Will output:

Available Properties	Description
suggestions	An array of objects or values to use as suggestions
value	Current value of the input
minimumSimilarityScore	Value from 0 (matches anything) to 1 (only matches if the strings are the same), defaults to 0.6. The input value will be compared to the suggestion, the suggestion score should be greater than or equal to this value to be shown.
comparationFuzziness	Value from 0 to 1, defaults to 0.5. This is the fuzziness level used on similarity comparation.
suggestionObjectTextProperty	If the suggestions in the array are objects, this will be used to get the suggestion value. The value will be shown on the list and will be used to check the similarity of the suggestion to the input value.
onChangeText	Function to execute when the input value changes.
onSelect	(Required) Function to call when a suggestion is pressed. Will be called with the suggestion as a parameter
suggestionsWrapperStyle	Style of the list of suggestion.
suggestionStyle	Style of the suggestion item in the list.
suggestionTextStyle	Style of the suggestion text.
style	Style of the component.
inputStyle	Style of the text input.

Contributing

1. Fork this repository
2. Create a branch based on master about what you are doing

• Names should be separated by hyphen: example-name

3. Commit using the format: [<type>] <message>

• The type should be: Feat, Fix, Refactor or Docs
• Example message: [Docs] Added contributing to readme
• Do not forget to add tests!

4. Run all tests npm test and linter npm run lint
5. Create a pull request describing the changes you made

License

MIT

react-native-autocomplete-select's Issues

Error When starting react-native run-android

Loading dependency graph, done.
Bundling index.js [development, non-minified] 0.0% (0/1), failed.
error: bundling failed: ambiguous resolution: module D:\Google Drive\DivisionbyZero\smsSorter\index.js tries to require react-native, but there are several files providing this module. You can delete or fix them:

• D:\Google Drive\DivisionbyZero\smsSorter\node_modules\react-native-autocomplete-select\node_modules\react-native\package.json
• D:\Google Drive\DivisionbyZero\smsSorter\node_modules\react-native\package.json

Autocomplete not appearing in iOS

Hey @VizirAdmin, the autocomplete does not appear in iOS. But it works fine on Android. Can I get some help on this?

Is their a way to hide suggestions ?

Is their a way to hide suggestions
i have multiple Autosuggest on the page and would like to close the previous one on focus lost

undefined is not an object ( evaluatin g'_react3.default.PropTypes.array')

Heres my package

{
"main": "node_modules/expo/AppEntry.js",
"private": true,
"scripts": {
"test": "node ./node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"@expo/samples": "2.1.1",
"expo": "^24.0.0",
"react": "16.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-24.0.0.tar.gz",
"react-native-autocomplete-select": "^1.0.0",
"react-navigation": "^1.0.0-beta.21"
},
"devDependencies": {
"jest-expo": "^24.0.0"
}
}

Does not work on react 16

The text input stutters with the input value thats always there, you cannot type or clear the input value, no searches are returned.

Unable to resolve module `AccessibilityInfo`

RN error: Unable to resolve module AccessibilityInfo after installing your module

Making it work the hacky way

First of all #4:
A bunch of these

This warning is caused by a @providesModule declaration with the same name across two different files.
Loading dependency graph, done.
warning: the transform cache was reset.

Unable to resolve module `AccessibilityInfo` from `./node_modules/react-native/Libraries/react-native/react-native-implementation.js`: Module does not exist in the module map

Fixed by deleting the react-native folder inside the module #4 (comment)
rm -r ./node_modules/react-native-autocomplete-select/node_modules/react-native

After that you might get:

FAILURE: Build failed with an exception.

* What went wrong:
Could not list contents of './node_modules/react-native-autocomplete-select/node_modules/.bin/react-native'.

You also need to delete that file
rm ./node_modules/react-native-autocomplete-select/node_modules/.bin/react-native

Also apply 9194061 but don't forget to add prop-types to package.json