Batch Custom Search Auto Complete for React Native
Install the latest version:
npm install --save react-native-batch-autocomplete
or
yarn add react-native-batch-autocomplete
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;
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 |
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) |
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.