The Google Places Autocomplete feature in mobile software development is useful for searching for verified locations that are available on Google Maps.
In this tutorial, we are going to see how we can use the Google Places Autocomplete feature in our React Native application.
Let’s get started!
First you need to add billing to your Google Cloud Console account and enable Geocoding.
Read more about the Google AutoComplete dependency
yarn add react-native-google-places-autocomplete
<GooglePlacesAutocomplete
placeholder='Search location'
returnKeyType={'default'}
fetchDetails={true}
currentLocation = {true}
isRowScrollable={true}
keepResultsAfterBlur={false}
enablePoweredByContainer = { false }
styles={{
textInputContainer: {
marginTop: 0,
},
textInput: {
height: 45,
color: 'black',
fontSize: 16,
backgroundColor: '#ddd'
},
predefinedPlacesDescription: {
color: '#1faadb',
},
listView: {
position: 'relative',
zIndex: 3,
marginTop: 0,
padding: 0
},
row: {
backgroundColor: '#FFFFFF',
height: 100,
flexDirection: 'row',
},
separator: {
height: 0.5,
backgroundColor: '#c8c7cc',
},
description: {},
loader: {
flexDirection: 'row',
justifyContent: 'flex-end',
height: 20,
},
}}
onPress={(data, details) => {
// 'details' is provided when fetchDetails = true
// console.warn(details);
}}
query={{
key: API_KEY,
language: 'en',
components: 'country:us'
}}
/>
Did it work out for you? Let me know in the comments.
One of the most common errors in JavaScript is the dreaded TypeError: Cannot read property…
When debugging JavaScript, you’ll often encounter ReferenceError and TypeError. While both indicate something went wrong,…
When selecting DOM elements in JavaScript, two common methods are document.querySelector() and document.getElementById(). But which…
When starting a JavaScript project, one of the first decisions you’ll face is: Should I…
Software development is one of the most valuable skills you can learn. From building websites…
In JavaScript, arrays are used to store multiple values in a single variable. While JavaScript…