# batchautocomplete > Batch Custom Search Auto Complete for React Native Latest version **0.0.38** (published 2023-03-09) · 0 weekly downloads ## Install ```sh npm install batchautocomplete pnpm add batchautocomplete yarn add batchautocomplete bun add batchautocomplete ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.0.38 | | Published | 2023-03-09 | | First published | 2023-02-24 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 33.5 KB | | Known vulnerabilities | 0 (+3 in 1 direct dependencies) | | Install scripts | no | | Maintainers | seema.nagar | | Keywords | custom autocomplete, autocomplete, autosuggest, react native autosuggest, react native autocomplete, react native batch autocomplete | ## Links - npm: https://www.npmjs.com/package/batchautocomplete - npm.io page: https://npm.io/package/batchautocomplete ## Dependencies (2) - [lodash](https://npm.io/package/lodash.md) 4.17.21 - [prop-types](https://npm.io/package/prop-types.md) 15.7.2 ## Recent versions - 0.0.38 (latest) — 2023-03-09 - 0.0.37 — 2023-03-09 - 0.0.36 — 2023-03-06 - 0.0.35 — 2023-03-06 - 0.0.34 — 2023-03-06 - 0.0.33 — 2023-03-06 - 0.0.32 — 2023-03-03 - 0.0.31 — 2023-03-03 - 0.0.30 — 2023-03-03 - 0.0.29 — 2023-03-03 - 0.0.28 — 2023-03-02 - 0.0.27 — 2023-03-02 - 0.0.26 — 2023-03-01 - 0.0.25 — 2023-03-01 - 0.0.24 — 2023-03-01 - … 23 more at https://npm.io/package/batchautocomplete/versions ## README # React Native Batch Autocomplete Batch Custom Search Auto Complete for React Native ## Getting started Install the latest version: ```sh npm install --save react-native-batch-autocomplete or yarn add react-native-batch-autocomplete ``` ## Example ```js import React from 'react'; import { RNBatchAutoComplete } from 'react-native-batch-autocomplete'; const YourComponent = () => ( const recentSearchData = [ // List of suggestions to be displayed before any input is provided in search input box. ]; const handleError = (e) => { // Handle error as you want console.log('Error while searching: ',e); } const onPress = (data) => { // Do Your Execution with data console.log('Seleted item: ', data) } return( handleError(e)} onPress={(data) => onPress(data)} recentSearchData={recentSearchData} textInputProps={{ placeholderTextColor: '#454545', }} /> ); ); export default YourComponent; ``` ## Props | Prop Name | type | description | default value | | ----------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | | debounce | number | used to delay the search API call when a user is start typing | 700 | | | apiKey | string | Batch Data API Key | | | | domainServer | string | Batch Data Domain | | | | numberOfLines | number | number of lines (android - multiline must be set to true) https://reactnative.dev/docs/textinput#numberoflines | 1 | | minLength | number | minimum length of text to trigger a search | 2 | | take | number | set the number of suggestions to be displayed | 5 | | showLoader | boolean | show loader indicator when a user is typing the keyword in input box and the search API call in progress | true | | showNoDataFound | boolean | show view to users when no results are found for the given input | true | | noDataFoundText | string | set the text to be shown when no results for the given input | No results found | | showRecentSearch | boolean | show list of recent seaches | false | | recentSearchesData | object | set some list of recent searches which can be displayed | [ ] | styles | object | See styles section below | | | placeholder | string | placeholder text https://reactnative.dev/docs/textinput#placeholder | Enter Location or Address... | | textInputProps | object | define props for the [textInput](https://reactnative.dev/docs/textinput), or provide a custom input component | | | handleError | function | returns if an unspecified error comes back from the API | | | onPress | function | returns when after a suggestion is selected | | | renderRow | function | custom component to render each result row (use this to show an icon beside each result). `data` and `index` will be passed as input parameters | | | renderLeftButton | function | add a component to the left side of the Text Input | | | renderRightButton | function | add a component to the right side of the Text Input | | | renderSuggectionLeftButton | function | add a component to the left side of the suggetion Text | | | renderRecentSearchLeftButton | function | add a component to the left side of the recent search Text | | ## Styling `RNBatchAutoComplete` can be easily customized the styles as per your app requirement. Pass styles props to `RNBatchAutoComplete` for different elements (check below keys for style object) | key | type | | ---------------------------------- | ----------------------------------- | | container | object (View style) | | textInputContainer | object (View style) | | textInput | object (Text style) | | listViewContainer | object (View style) | | suggestionContainer | object (View style) | | suggestionRow | object (View style) | | suggestionText | object (Text style) | | separator | object (View style) | | recentSearchContainer | object (View style) | | recentSearcheRow | object (View style) | | recentAddressText | object (Text style) | | noDataFoundContainer | object (View style) | | noDataFoundText | object (Text style) | | loaderContainer | object (View style) | ## Reference Methods | method name | type | description | | -------------------- | ------------------------- | ----------------------------------------------------------------------- | | `getAddressText` | `() => string` | return the value of TextInput | | `setAddressText` | `(value: string) => void` | set the value of TextInput | | `focus` | `void` | makes the TextInput focus | | `blur` | `void` | makes the TextInput lose focus | | `clear` | `void` | removes all text from the TextInput | | `isFocused` | `() => boolean` | returns `true` if the TextInput is currently focused; `false` otherwise | You can access these methods using a ref. --- _Source: https://npm.io/package/batchautocomplete · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._