Having problem adding value to TextinputProp value and clearing it?

[haridevks]

I am storing location obtained from an HTTP request in a state variable (city-state-country format) and have also provided this state variable in TextInputProps of the autocomplete, and have also provided OnChangeText property to type and get other locations and save it as well. The problem is that

1. Due to OnchangeText provided the value is not displayed.
2. Whenever we clear the autocomplete (by backspace / delete ) the cursor moves backwards, and the value is not cleared even though OnchangeText is provided. I dont know how to provide a snack for this but will upload a video.

<GooglePlacesAutocomplete placeholder="Point your location" minLength={2} // minimum length of text to search autoFocus={false} onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true var cityName = ""; var stateName = ""; var countryName = ""; var countryCode = ""; if(details.address_components != null && details.address_components.length > 0){ console.log(details.address_components); console.log(data.description); for(var x=0; x< details.address_components.length; x++){ var eachComponent = details.address_components[x]; var types = eachComponent.types; if(types[0] == "locality"){ //cityName = eachComponent.long_name; cityName = eachComponent.short_name; }else if(types[0] == "administrative_area_level_1"){ //stateName = eachComponent.short_name; stateName = eachComponent.short_name; }else if(types[0] == "country"){ countryCode = eachComponent.short_name; countryName = eachComponent.long_name; } }
}
// this.setState({cityStateCountry10: data.description,city:cityName,state:stateName,country:countryName,address:data.description}); this.onChangeGoogleautoComplete(cityName,stateName,countryName,countryCode); // console.log('city state country state variable',this.state.cityStateCountry10);

                                                            }}  getDefaultValue={() => ''}
                                                query={{
                                                    // available options: https://developers.google.com/places/web-service/autocomplete
                                                    key: 'MY_KEY',
                                                    language: 'en', // language of the results
                                                    types: '(cities)' // default: 'geocode'      ***** Uncomment this to get only cityStateCountry10
                                                }}
                                                textInputProps={{placeholderTextColor:'#96989b',
                                                value: this.state.cityStateCountry20,
                                                onChangeText:(text) =>this.setState({cityStateCountry20:text})
                                                }}

/>

• Library Version: [2.2.0]
• React Native Version: [0.64.0]
• Android

Add any other context about the problem here, screenshots etc

[haridevks]

Will upload the video soon, as i am having a network connectivity problem

[aman-technyx]

same issue facing -- found any solution ?@haridevks ?

[usmanabid94]

Hi,

I have just used it and it is working fine here with me when we click on onpress and set the state and then in text input props method add the value from state and in onchange text method set the state again and it will work fine. Screenshot attached

same issue facing -- found any solution ?@haridevks ?

Will upload the video soon, as i am having a network connectivity problem

[haridevks]

Hi,

I have just used it and it is working fine here with me when we click on onpress and set the state and then in text input props method add the value from state and in onchange text method set the state again and it will work fine. Screenshot attached

same issue facing -- found any solution ?@haridevks ?

Will upload the video soon, as i am having a network connectivity problem

Any way to implement this in a reusable functional component . Also what to do when we need to set the value in above setup as we get it from an api