React Native Batch Autocomplete

Batch Custom Search Auto Complete for React Native

Getting started

Install the latest version:

npm install --save react-native-batch-autocomplete
  or
yarn add react-native-batch-autocomplete

Example

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(
    <RNBatchAutoComplete
      apiKey="BATCH_API_KEY" //required
      domainServer="BATCH_DOMAIN_SERVER" //required
      handleError={(e) => 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, 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.