batchautocomplete
v0.0.38
Published
Batch Custom Search Auto Complete for React Native
Downloads
68
Maintainers
Readme
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.