batchautocomplete

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
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.