# react-native-autocomplete-input

> Pure javascript autocomplete input for react-native

Latest version **5.5.6** (published 2025-01-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-autocomplete-input
pnpm add react-native-autocomplete-input
yarn add react-native-autocomplete-input
bun add react-native-autocomplete-input
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 5.5.6 |
| Published | 2025-01-24 |
| First published | 2016-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 870 |
| Maintainers | laurenceb |
| Keywords | react-native, iOS, input, Android, autocomplete |

## Links

- npm: https://www.npmjs.com/package/react-native-autocomplete-input
- Repository: https://github.com/byteburgers/react-native-autocomplete-input
- Homepage: https://github.com/byteburgers/react-native-autocomplete-input#readme
- Issues: https://github.com/byteburgers/react-native-autocomplete-input/issues
- npm.io page: https://npm.io/package/react-native-autocomplete-input

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 5.5.6 (latest) — 2025-01-24
- 5.6.0-beta.0 (next) — 2024-12-30
- 5.5.5 — 2025-01-02
- 5.5.4 — 2025-01-01
- 5.5.3 — 2024-12-30
- 5.5.2 — 2024-11-16
- 5.5.1 — 2024-11-16
- 5.5.0 — 2024-11-16
- 5.4.0 — 2023-10-15
- 5.3.2 — 2023-02-20
- 5.3.1 — 2023-02-20
- 5.3.0 — 2023-02-19
- 5.1.1-alpha.1 — 2023-02-19
- 5.1.1-alpha.0 — 2023-02-19
- 5.2.1 — 2023-02-19
- … 40 more at https://npm.io/package/react-native-autocomplete-input/versions

## README

# react-native-autocomplete-input
[![npm version](https://badge.fury.io/js/react-native-autocomplete-input.svg)](https://badge.fury.io/js/react-native-autocomplete-input)
[![Test](https://github.com/mrlaessig/react-native-autocomplete-input/actions/workflows/test.yml/badge.svg)](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.

![Autocomplete Example](https://raw.githubusercontent.com/mrlaessig/react-native-autocomplete-input/master/example.gif)

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 (
    <Autocomplete
      data={data}
      value={query}
      onChangeText={(text) => setQuery(text)}
      flatListProps={{
        keyExtractor: (_, idx) => idx,
        renderItem: ({ item }) => <Text>{item}</Text>,
      }}
    />
  );
}
```

### 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 (
    <View>
      <View style={styles.autocompleteContainer}>
        <Autocomplete {/* your props */} />
      </View>
      <View>
        <Text>Some content</Text>
      </View>
    </View>
  );
}

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 `<ScrollView />`. 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
```

---
_Source: https://npm.io/package/react-native-autocomplete-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._