Response-native-google-places-autocomplete gives it a value, not just the default value (initial)

Question

I have a working one <TextInput>:

<TextInput
      placeholder="Location"
      value={props.locationInput.toString()}
      onChangeText={location => props.updateLocationInput(location)}
    />

Initially props.locationInput '', but as soon as the application starts, several asynchronous functions start and get the current location of users who fill in props.locationInput (in the redux store). This means that the <TextInput>above displays the current location of users when it arrives. I want to basically do the same as above, but with react-native-google-places-autocomplete

react-native-google-places-autocompleteinitializes the value of props.locationInput. It has a property getDefaultValue, for example getDefaultValue={() => props.locationInput.toString()}, however, it does not change when the propos.locationInput parameter changes, so it never displays the current location of users, because it was not set when it was initialized. How to get react-native-google-places-autocompleteto update when changing props.locationInput?

Perhaps it seems to me that I do not need to display it until the current location of the users appears, but it is really dirty.

EDIT: Also consider not using the plugin and make google places API calls instead.

Answer 1

GooglePlaceAutocomplete onPress . :

<GooglePlacesAutocomplete
                placeholder='Event Location'
                minLength={2} // minimum length of text to search
                autoFocus={false}
                // Can be left out for default return key https://facebook.imtqy.com/react-native/docs/textinput.html#returnkeytype
                listViewDisplayed='auto'    // true/false/undefined
                fetchDetails={true}
                renderDescription={row => row.description} // custom description render
                onPress={(data, details = null) => {
            // 'details' is provided when fetchDetails = true
            this.setState(
              {
                address: data.description, // selected address
                coordinates: `${details.geometry.location.lat},${details.geometry.location.lng}` // selected coordinates
              }
            );
          }}
                textInputProps={{
                  onChangeText: (text) => { console.warn(text) }
                }}
                getDefaultValue={() => ''}

                query={{
                  // available options: https://developers.google.com/places/web-service/autocomplete
                  key: 'XXXXXXXXXXXXXXZXZXXXXXXX',
                  language: 'en', // language of the results
                  types: 'geocode' // default: 'geocode'
                }}

                styles={{
                  textInputContainer: {
                    backgroundColor: 'rgba(0,0,0,0)',
                    borderTopWidth: 0,
                    borderBottomWidth:0,
                  },
                  description: {
                    fontWeight: 'bold',
                  },
                  textInput: {
                  marginLeft: 22,
                  marginRight: 0,
                  height: 38,
                  color: '#5d5d5d',
                  fontSize: 16,
                },
                  predefinedPlacesDescription: {
                    color: '#1faadb'
                  }
                }}
                value={props.location}
                onChangeText={props.onLocationChange}
                renderLeftButton={()  => <Text style={{ marginTop: 12, marginLeft:16, fontSize: 18 }}> Location </Text>}
                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
                debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.

              />