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.
If you've played Fortnite, watched a live ESPN match, or used Slack or Microsoft Teams,…
A custom hook in React is a JavaScript function that leverages React’s built-in hooks—like useState,…
The South Korean government announced on Monday that it had temporarily halted new downloads of…
As a software developer, choosing the right programming language for software development can be a…
A server farm, also known as a server cluster or data center, is a collection…
Pakistan's mobile and broadband internet speeds rank in the bottom 10 percent globally, according to…