Address Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.
This guide will get you started with integrating the Batch Address Auto Complete React Native Library with your applications. Everything about creating a Client Token, Installing the library and integrating it with your applications is covered in this guide.
Installation and Integration
Step 1: Installation
Autocomplete library is registered as a package on npm. You can install the latest version with the npm CLI command
npm install --save react-native-batch-autocomplete
or
yarn add react-native-batch-autocomplete
Once the Library is installed, it is ready to be included in our applications.
Step 2: Library Initialization
To begin using our downloaded library in our applications, we must first import our library with authentication details. Create a component file with following code or add the code in your existing component file -
TOKEN: For steps to create a token refer Creating a Client Token
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="TOKEN" //required
domainServer="URL" //required
handleError={(e) => handleError(e)}
onPress={(data) => onPress(data)}
recentSearchData={recentSearchData}
textInputProps={{
placeholderTextColor: '#454545',
}}
/>
);
);
export default YourComponent;
Replace URL with URL and TOKEN with the token generated in Step 2
Step 3: Configuration
Initially library will be configured with default configurations. You can update these parameters as required
debounceTime : This option is used to delay the search API call when a user is typing the keyword in input box. For example, If the value is set to 700, the search API will get triggered after 700ms post last key stroke made within 700ms. By default this value is set to 700. It is recommended to keep this value at its default value to save the API calls.
apiKey : TOKEN in Step 2 . (It is required)
domainServer : URL in Step 2 . (It is required)
numberOfLines : This option is used to truncate the text with an ellipsis, if the total number of lines exceed this number. By default this value is set to 1
minLength : This option is used for minimum length of text to trigger a search. By default it is set to 2.
take: This option is used to set the number of results to be displayed when input is typed. By default it is set to 5.
showLoader: This option is used to show loader indicator when a user is typing the keyword in input box and the search API call in progress. By default it will be set as true. It can accept only boolean values.
showNoDataFound: This option is used to enable a notification for users when no results are found for the given string. By default it will be set as true. It can accept only boolean values.
noDataFoundText: This option is used to set the text to be shown when there are no results for the given input. By default it will set as No results found .
styles : 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) |
textInputProps : This option is used to define props for the textInput, or provide a custom input component. By default props set as
const textInputProps = {{
placeholderTextColor: Colors.gray,
}}
showRecentSearch: This option is used to show list of recent searches data. By default it will be set as false. It can accept only boolean values.
recentSearchesData : This parameter is used to set some pre-defined list of suggestions which can be displayed when user clicks on search input before any input is provided in the search box. This parameter should be set with array of suggestions as a key value pair as follows -
const recentSearchData = [
{
name: 'Bainbridge Drive, Naperville, IL, USA',
},
{ name: '900 Bainbridge Drive, Naperville, IL, USA',
}
];
handleError : The function provided in this parameter will be triggered when there an error in API.
onPress: The function provided in this parameter will be triggered when a suggestion is selected by user and return selected suggestion data.
Well done!! You can begin using React Native Batch Address Autocomplete component in your application by using it.
Now that your application has been integrated with Address Autocomplete, your users only have to type the first few letters of an address and your application will suggest addresses that begin with the letters they typed.
Clicking on any of the suggested addresses automatically pre populates the address bar.
