React Native Batch Autocomplete Lib

React native component for easily use React native Batch Autocomplete

Getting started

Use the component!

``js

import AutoComplete from 'blsautocomplete';

const Component = () => (

// Recent search data should be in below format
const suggetions = [
{
created_at: '2021-03-06 12:19:25',
id: 915,
is_deleted: 0,
last_searched_at: '2022-02-12 05:12:51',
search_text: 'New York, NY, USA',
user_id: 100000239,
},
{
created_at: '2022-02-10 12:24:41',
id: 3257,
is_deleted: 0,
last_searched_at: '2022-02-12 04:54:16',
search_text: '3510 Shallowford Rd, Atlanta, GA 30341, USA',
user_id: 100000239,
},
];

const handleError = (e) => {
// Handle error as you want
console.log('Error while searching: ',e);
}

const onFocus = () => {
// handle data on focus
console.log('on focus: ');
}

const onBlur = () => {
// handle data on blur
console.log('on blur: ');
}

const onSelect = (data) => {
// Do Your Execution with data
console.log('Seleted item: ', data)
}

return(
inputContainer={} // Input container style
notFoundText = 'No Data Found!'
debounceTime = {700}
container = {} // container style
textInputStyle = {} // text input style
isShowRecentSearch = {false} // show recent search
handleError={handleError}
onSelect={onSelect}
domainServer="DOMAIN_SERVER" //required
apiKey="API_KEY" //required
recentSearchData={suggetions}
suggestionIcon={renderSuggestionIcon}
clearIcon={renderClearIcon}
clearIconContainer={} // clear icon button container style
suggestionContainer={} // suggestion container style
suggestionText={} //suggestion text style
suggestionHighlightedText={} //suggestion text matched with input text (style)
suggestionContentContainer={} //suggestion main content container style
onFocus={onFocus}
onBlur={onBlur}
textInputProps={{ //control text input
maxLength: 5,
placeholder: 'Enter text here...!',
placeholderTextColor: 'gray',
}}
take={5} // It is optional and the default value is 5. e.g. => If the user passes take=10 then it will display 10 records for auto-complete address list.
displayData='name' // display data in text input | This option will take only 5 values which is 'state', 'address' , 'name' , 'zip' , 'city' and default value is name
/>
showNotFound={false} //It takes two values true and false default value is true
notFoundTextStyle={{
fontWeight: 'bold'
}}
);
);

export default Component;
``

- Here recentSearch and styles are fully optional.