Google Auto Complete Places not setting state to empty when Input are cleared

Question

I am using react-native-google-places-autocomplete for auto completion of places. I get the result there is no problem in input and getting the Autocomplete searched places.

But, when I click on certain result and then again I clear the GooglePlacesAutocomplete input text, the value still remains the previous clicked result item.

Whenever I select a location and I click on Set Camp button below is console log.

Here is other screen shot whenever I clear the input text and again click on button I wish to get console log of undefined or empty string but I get the previous result. Here is screenshot.

Below is the code I am working on:

SetCampScreen.js

  import React, { Component } from 'react';
  import { View,
    Text,
    ScrollView,
    TextInput
  } from 'react-native';
  import * as actions from '../../actions';
  import { connect } from 'react-redux';
  import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

  class SetCampScreen extends Component {
    static navigationOptions = {
            header: null,
          };
    gotoPatientRegistrationScreen = () => {
      console.log('At Patient Registration method.', this.props.description);

    }
    sendData = (data) => {
      console.log('From send Data: ',data);
      this.props.setLocation(data);
    }
    render() {
      return (
        <ScrollView contentContainerStyle={{flexGrow : 1, justifyContent : 'center'}}>
            <View style={styles.container}>

              <GooglePlacesAutocomplete
              placeholder="Where are you?"
              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}
              enablePoweredByContainer={false}
              renderDescription={row => row.description}
              styles={{
              textInputContainer: {
                height: 50,
              },
              textInput: {
                borderRadius: 0,
                marginLeft: 0,
                marginRight: 0,
                marginTop: 0,
                height: 50,
                borderWidth: 1,
                borderColor: '#000',
              },
              predefinedPlacesDescription: {
                color: '#1faadb',
              },
              }} // custom description render
              onPress={(data, details = null) => {
              // 'details' is provided when fetchDetails = true
              this.sendData(data);

              }}
              getDefaultValue={() => {
              return ''; // text input default value
              }}
              query={{
              // available options: https://developers.google.com/places/web-service/autocomplete
              key: 'API_KEY',
              language: 'en', // language of the results
              }}

              currentLocation={false} // 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={{

              }}
              debounce={200}
              />
              <Button
                title="Set Camp"
                onPress={this.gotoPatientRegistrationScreen}
              />
            </View>
        </ScrollView>
      );
    }
  }
  const styles = {
    container: {
        flex: 1,
        backgroundColor: '#fff',
        justifyContent: 'center'
    },
    textInputStyle: {
      fontSize: 16,
      paddingLeft: 8,
      paddingBottom: 3,
      paddingRight: 8,
      height: 60,
    },
  };
  const mapStateToProps = state => {
    return {
         description: state.location.locationResponse
       };
  }
  export default connect(mapStateToProps, actions)(SetCampScreen);

actions/location_action.js

  import axios from 'axios';
  import { NO_INTERNET, SET_LOCATION } from './types';
  import { NetInfo } from 'react-native';

  export const setLocation = (place) => async dispatch => {
    const { description } = place;
    console.log('Description from setLocation: ',description);
    let netState = await NetInfo.isConnected.fetch();
    console.log('Net state', netState);
    if(!netState) {
      return dispatch({ type: NO_INTERNET });
    }
    try {
      dispatch ({ type: SET_LOCATION, payload: description });
    } catch(exp) {
      console.log(exp);
    }
  };

actions/index.js

export * from './location_action';

actions/types.js

export const NO_INTERNET = 'no_internet';
export const SET_LOCATION = 'set_location';

reducers/location_reducers.js

import { NO_INTERNET, SET_LOCATION } from '../actions/types';

export default function(state = {}, action) {
  switch(action.type) {
    case SET_LOCATION:
      return { locationResponse: action.payload };

    default:
      return state;
  }
}

reducers/index.js

import { combineReducers } from 'redux';
import locationResponse from './location_reducer';

export default combineReducers({
  location: locationResponse,
});

I expect whenever I clear the InputText the props value of description should also be cleared. Someone please point me out to achieve this. Thank you.

Answer 1

The GooglePlacesAutocomplete has a textInputProps props which accepts an onChangeText handler

Usage:

textInputProps={{
 onChangeText: (text) => { console.log(text) }
}}