title: How to get the address from google maps autocomplete in React Native
body: <p>I am using <strong>react-native-google-places-autocomplete</strong> to select a location. I want to extract the location selected and use it in other component.</p>
  
  <p>How can I save the address </p>
  
  <p>This is my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, {Component} from 'react';
  import { View, Image, Text, StyleSheet } from 'react-native';
  import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
  
  const homePlace = { description: 'Home', geometry: { location: { lat: 48.8152937, lng: 2.4597668 } }};
  const workPlace = { description: 'Work', geometry: { location: { lat: 48.8496818, lng: 2.2940881 } }};
  
  export default class google extends Component {
    render(){
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;View style={styles.top}&gt;
      &lt;GooglePlacesAutocomplete
        placeholder='Search'
        minLength={2} // minimum length of text to search
        autoFocus={false}
        returnKeyType={'search'} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
        listViewDisplayed='auto'    // true/false/undefined
        fetchDetails={true}
        renderDescription={row =&gt; row.description} // custom description render
        onPress={(data, details = null) =&gt; { // 'details' is provided when fetchDetails = true
          console.log(data, details);
          this.setState(
                    {
                      address: data.description, // selected address
                      coordinates: `${details.geometry.location.lat},${details.geometry.location.lng}` // selected coordinates
                    }
                  );
        }}
  
        getDefaultValue={() =&gt; ''}
  
        query={{
          // available options: https://developers.google.com/places/web-service/autocomplete
          key: 'AIzaS#################',
          language: 'es', // language of the results
  
        }}
  
        styles={{
          textInputContainer: {
            width: '100%'
          },
          description: {
            fontWeight: 'bold'
          },
          predefinedPlacesDescription: {
            color: '#1faadb'
          }
        }}
  
        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.
        renderRightButton={() =&gt; &lt;Text&gt;Custom text after the input&lt;/Text&gt;}
      /&gt;
      &lt;/View&gt;
      &lt;View style={styles.container2}&gt;
        &lt;Text&gt;
          hola {this.setState.address}
        &lt;/Text&gt;
      &lt;/View&gt;
      &lt;/View&gt;
  
    );
  }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
    width: '100%',
  height: '100%',
  
    },
    welcome: {
      fontSize: 40,
      textAlign: 'center',
      margin: 10,
  color:'black',
    },
    instructions: {
      textAlign: 'center',
      color: 'black',
      marginBottom: 5,
    },
  top: {
  height: '50%',
  justifyContent: 'center',
      alignItems: 'center',
    },
  
  container2: {
     height:'75%',
     justifyContent: 'center',
    },
  buttonContainer: {
  alignItems: 'center',
      backgroundColor: 'rgba(255, 255,255, 0.5)',
      padding: 1,
      margin: 50,
      borderRadius: 25,
      borderWidth: 2,
      borderColor: '#0B0B3B'
  
       },
  textoboton: {
      textAlign: 'center',
      color: 'black',
      marginBottom: 5,
      fontSize: 12
  
    },
  
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've been also using another library with some differences</p>
  
  <p>app.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React,{Component} from 'react';
  import { Constants } from 'expo';
  import Icon from 'react-native-vector-icons/FontAwesome';
  import { View, Image, Text, StyleSheet, AsyncStorage, Button,ScrollView, TextInput, ActivityIndicator } from 'react-native';
  import {
    NavigationActions
  } from 'react-navigation';
  import { GoogleAutoComplete } from 'react-native-google-autocomplete';
  import {Card, Input} from "react-native-elements";
  
  import LocationItem from './locationItem';
  
  
  export default class App extends React.Component {
  
    state={
      datos:[],
    }
    componentDidMount(){
      this._loadedinitialstate().done();
    }
    _loadedinitialstate =async() =&gt; {
      AsyncStorage.getItem('datos');
    }
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;GoogleAutoComplete apiKey={'AIzaSyB2HyNTBm1sQJYJkwOOUA1LXRHAKh4gmjU'} debounce={20} minLength={2} getDefaultValue={() =&gt; ''}  onPress={(data, details = null) =&gt; { // 'details' is provided when fetchDetails = true
          console.log(data, details);}}   returnKeyType={'default'} fetchDetails={true}
  &gt;
            {({
              locationResults,
              isSearching,
              clearSearchs,
              datos,
              handleTextChange
            }) =&gt; (
              &lt;React.Fragment&gt;
                &lt;View style={styles.inputWrapper}&gt;
                  &lt;Input
                    style={styles.textInput}
                    placeholder="Ingresa tu direccion"
                    onChangeText={(datos) =&gt; this.setState({datos})}
                    value={datos}
                  /&gt;
  
                &lt;/View&gt;
                {isSearching &amp;&amp; &lt;ActivityIndicator size="large" color="red" /&gt;}
               &lt;ScrollView&gt;
                 {locationResults.map(el =&gt; (
                   &lt;LocationItem
                     {...el}
                     key={el.id}
                   /&gt;
                 ))}
               &lt;/ScrollView&gt;
              &lt;/React.Fragment&gt;
            )}
          &lt;/GoogleAutoComplete&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    textInput: {
      height: 40,
      width: 300,
      borderWidth: 1,
      paddingHorizontal: 16,
    },
    inputWrapper: {
      marginTop: 80,
      flexDirection: 'row'
    },
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>locationitem.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { PureComponent } from 'react';
  import { View, Alert, Text, StyleSheet, TouchableOpacity, AsyncStorage} from 'react-native';
  
  class LocationItem extends PureComponent {
  
    constructor(props) {
      super(props);
      this.state = {datos:''};
    }
  
    _handlePress = () =&gt; {
      AsyncStorage.setItem('datos',datos)
    }
  
  
  
    render() {
      return (
        &lt;TouchableOpacity style={styles.root} onPress={this._handlePress}  &gt;
          &lt;Text value={this.state.datos}&gt; {this.props.description} &lt;/Text&gt;
        &lt;/TouchableOpacity&gt;
      );
    }
  }
  
  const styles = StyleSheet.create({
    root: {
      height: 40,
      borderBottomWidth: StyleSheet.hairlineWidth,
      justifyContent: 'center'
    }
  })
  
  export default LocationItem;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The source of both codes is here <a href="https://github.com/FaridSafi/react-native-google-places-autocomplete" rel="noreferrer">react-native-google-places-autocomplete</a> <a href="https://github.com/EQuimper/react-screencast/tree/master/places-search-with-react-native-google-autocomplete" rel="noreferrer">enter link description here</a></p>
  
  <p>Which code will be easy to use, and How can I solve my Issue (get the address) ??</p>
  
  <p>Any Answer will be Helpful</p>