https://github.com/byteburgers/react-native-autocomplete-input
Pure javascript autocomplete input for react-native
https://github.com/byteburgers/react-native-autocomplete-input
android autocomplete input ios javascript react-native typescript
Last synced: about 1 month ago
JSON representation
Pure javascript autocomplete input for react-native
- Host: GitHub
- URL: https://github.com/byteburgers/react-native-autocomplete-input
- Owner: byteburgers
- License: mit
- Created: 2016-02-22T14:38:28.000Z (about 9 years ago)
- Default Branch: main
- Last Pushed: 2024-10-28T22:28:48.000Z (6 months ago)
- Last Synced: 2024-10-29T13:49:47.265Z (6 months ago)
- Topics: android, autocomplete, input, ios, javascript, react-native, typescript
- Language: TypeScript
- Homepage: https://byteburgers.com/autocomplete
- Size: 2.71 MB
- Stars: 816
- Watchers: 15
- Forks: 255
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-autocomplete-input ★366 - Pure javascript autocomplete input for react-native (Components / UI)
README
# react-native-autocomplete-input
[](https://badge.fury.io/js/react-native-autocomplete-input)
[](https://github.com/mrlaessig/react-native-autocomplete-input/actions/workflows/test.yml)
A pure JS autocomplete component for React Native written in TypeScript. Use this component in your own projects or use it as inspiration to build your own autocomplete.
Play around with the [Example Snack](https://byteburgers.com/autocomplete)
### Installation
```shell
# Install with npm
$ npm install --save react-native-autocomplete-input
# Install with yarn
$ yarn add react-native-autocomplete-input
```
### Example
```javascript
function MyComponent() {
const [ query, setQuery ] = useState('');
const data = useFilteredData(query);
return (
setQuery(text)}
flatListProps={{
keyExtractor: (_, idx) => idx,
renderItem: ({ item }) => {item},
}}
/>
);
}
```
### Android
Android does not support overflows ([#20](https://github.com/mrlaessig/react-native-autocomplete-input/issues/20)), for that reason it is necessary to wrap the autocomplete into a *absolute* positioned view on Android. This will allow the suggestion list to overlap other views inside your component.
```javascript
function MyComponent() {
return (
Some content
);
}
const styles = StyleSheet.create({
autocompleteContainer: {
flex: 1,
left: 0,
position: 'absolute',
right: 0,
top: 0,
zIndex: 1
}
});
```
### Props
| Prop | Type | Description |
| :------------ |:---------------:| :-----|
| containerStyle | style | These styles will be applied to the container which surrounds the autocomplete component. |
| hideResults | bool | Set to `true` to hide the suggestion list.
| data | array | An array with suggestion items to be rendered in `renderItem({ item, i })`. Any array with length > 0 will open the suggestion list and any array with length < 1 will hide the list. |
| inputContainerStyle | style | These styles will be applied to the container which surrounds the textInput component. |
| listContainerStyle | style | These styles will be applied to the container which surrounds the result list. |
| listStyle | style | These style will be applied to the result list. |
| onShowResults | function | `onShowResults` will be called when the autocomplete suggestions appear or disappear. |
| onStartShouldSetResponderCapture | function | `onStartShouldSetResponderCapture` will be passed to the result list view container ([onStartShouldSetResponderCapture](https://reactnative.dev/docs/gesture-responder-system#capture-shouldset-handlers)). |
| renderTextInput | function | render custom TextInput. All props passed to this function. |
| flatListProps | object | custom props to [FlatList](https://reactnative.dev/docs/flatlist). |
| renderResultList | function | render custom result list. Can be used to replace FlatList. All props passed to this function. |
## Known issues
* By default the autocomplete will not behave as expected inside a ``. Set the scroll view's prop to fix this: `keyboardShouldPersistTaps={true}` for RN <= 0.39, or `keyboardShouldPersistTaps='always'` for RN >= 0.40. ([#5](https://github.com/mrlaessig/react-native-autocomplete-input/issues/5)). Alternatively, you can use renderResultList to render a custom result list that does not use FlatList. See the tests for an example.
* If you want to test with Jest add ```jest.mock('react-native-autocomplete-input', () => 'Autocomplete');``` to your test.
## Contribute
Feel free to open issues or submit a PR!
### Local development
```shell
# Install Dependencies
$ npm i
# Locally link the autocomplete package into the example project
$ npm link react-native-autocomplete-input -w starwarsmoviefinder
# Enable package rebuild on changes
$ npx nx watch --projects=react-native-autocomplete-input -- npm run build
# Run the example project
$ npm run start -w starwarsmoviefinder
```