React Native

How to use google-places-autocomplete in react native

Posted On
Posted By Neha Dwivedi

Why We Use Google Places Autocomplete:

Google places autocomplete is used for showing the suggestions when you type any place name, as I all know in today’s era we are trying to provide minimum effort for users and the google places suggestions are one of them it shows the list of all related places name.

Output of Google-places-autocomplete–

How to use google-places-autocomplete in react-native:

For implementing google-places-autocomplete we are going to use third party npm plugin, so let’s start the implementation.

Step 1: install the npm plugin for google-places-autocomplete.

npm i react-native-google-places-autocomplete

Step 2: now need to link google-places-autocomplete plugin(if your version is below 0.61).

react-native link react-native-google-places-autocomplete

Step 3: create your google developer account and find the map key then use it into your project.

Step 4: import the plugin where you want to use the google map plugin and
declare a variable for the map key.
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete'
const googleKey = 'AIz.......................CxIU' //this key is generated by your google developer account.

Step 5: now we are going to design the view and call it.
render( ) {
return(
{this.GooglePlacesInput()}
)}

Step 6: Here we provide the definition of GooglePlacesInput().
//handling location autofill using google map API
GooglePlacesInput = () => {
return (
{ this.placesRef = ref }}
placeholderTextColor='black'
placeholder={'Location\Zipcode'}
minLength={2} // minimum length of text to search
autoFocus={false}
returnKeyType={'search'} // Can be left out for default return key
listViewDisplayed={false} // true/false/undefined
fetchDetails={false} textInputProps={{
onBlur: () => this.onBlurTextCalled(),
}}

renderDescription={row => row.description} // custom description
render
onChangeText={(setLocation) => this.setUserLocation(setLocation)}
onPress={(data, details = null) => { // 'details' is provided when
fetchDetails = true
if (det4ils["description"]) {
console.log("--->", details, data),
this.setState({ user_locationOrZipcode: details["description"] })
}
}}

getDefaultValue={() => ''}
query={{
// available options: https://developers.google.com/places/webservice/
autocomplete
key: googleKey,
language: 'en', // language of the results
types: '(regions)'//'(cities)' // default: 'geocode'
}}

styles={{ container: {
marginTop: 45,
zIndex: 9999,
width: '100%',
borderWidth: 1,
margin: 0,
padding: 0,
position: 'absolute',
backgroundColor: 'white'
},

textInput: {
color: 'balck',
paddingTop: 0,
paddingBottom: 0,
paddingLeft: 0,
paddingRight: 0,
marginTop: 0,
marginLeft: 0,
marginRight: 0,
borderWidth: 0,
height: 44,
},

textInputContainer: {
backgroundColor: 'rgba(0,0,0,0)',
borderTopWidth: 0,
borderBottomWidth: 0
},
listView: {
position: 'absolute',
b4ckgroundColor: "white",
borderWidth: 1,
width: '100%',
zIndex: 9999,
},
}}

currentLocation={true} // Will add a 'Current location' button at the
top of the predefined places list

currentLocationLabel='Current location'
nearbyPlacesAPI='GooglePlacesSearch' // Which API to use:
//GoogleReverseGeocoding or GooglePlacesSearch
GoogleReverseGeocodingQuery={{
// available options for GoogleReverseGeocoding API : https://
developers.google.com/maps/documentation/geocoding/intro
}}
GooglePlacesSearchQuery={{
//available options for GooglePlacesSearch API : https://
//developers.google.com/places/web-service/search
rankby: 'distance',
// types: 'food'
}}

// filterReverseGeocodingByTypes={['locality',
'administrative_area_level_3']} // filter the reverse geocoding results by types -
['locality', 'administrative_area_level_3'] if you want to display only cities
// predefinedPlaces={[homePlace, workPlace]}
debounce={200} // debounce the requests in ms. Set to 0 to remove
debounce. By default 0ms.
/>
)}}

That’s it guyz, I hope you find this post helpful.

And if any other query/issue then please comment.

Happy Coding Guyz.

Related Post

Latest Post

Tech NewsWhat's Arround

Google Meet is officially getting blur backgrounds in next version

Read More
Posted On
Tech NewsWhat's Arround

Is Really, You Secure With Your Smart Voice Assistant Device ?

Read More
Posted On
Magento

Create Custom Admin Menu in Magento 2

Read More
Posted On
React Native

How to show loader on the image in react-native:

Read More
Posted On
React Native

How to use google-places-autocomplete in react native

Read More
Posted On