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.
Service Workers are one of the core features of modern web applications, offering powerful capabilities…
A database-driven website is a dynamic site that utilizes a database to store and manage…
Toasts are user interface elements commonly used in software applications, especially in mobile app development…
JavaScript has long been synonymous with frontend web development, powering interactive and dynamic user interfaces…
Introduction: In the world of web development, CSS (Cascading Style Sheets) plays a crucial role…
JavaScript has emerged as a ubiquitous programming language, powering the modern web and extending its…