React-native-google-places-autocomplete: Hide listView onBlur of the textInput.

[Vishal1419]

I have asked this same thing in #18 but that issue is already closed, I thought I need to open a new one, so....

@myaskevich @FaridSafi I have created a variable called shouldDisplayListView and set listViewDisplayed to that as shown in code below:

let shouldDisplayListView = false;
<GooglePlacesAutocomplete listViewDisplayed={shouldDisplayListView}
    textInputProps={{
        onFocus: () => shouldDisplayListView = true;
        onBlur: () => shouldDisplayListView = false;
    }} ............ />

But still I cannot see the listView. Instead if I set listViewDisplayed to "auto" then I can see the listView. But then onBlur of textInput I am unable to hide it.

[lmichailian]

Same here :(

[IrinaCodixis]

I suggest you use states. This worked in my case:

constructor(props) {
    super(props);   
    this.state = {
      showPlacesList: false
    };
  }

<GooglePlacesAutocomplete 
    listViewDisplayed={this.state.showPlacesList}
    textInputProps={{
       onFocus: () => this.setState({showPlacesList: true}),
       onBlur: () => this.setState({showPlacesList: false}),
    }}............ />

[dblackker]

There is a bug with approach where the listview displays again on re-render situations. I opened a PR #300

[Manoj002]

@IrinaCodixis
heyy, the code you mentioned is not working for me
i tried it and i cant see any changes in project though
+1

[IrinaCodixis]

@Manoj002 , what version of react-native-google-places-autocomplete are you using?
I am maintaining an old project and I have 1.2.8 installed there. The approach I mentioned above is working fine for me.

[Manoj002]

@IrinaCodixis
Im using RN: 0.55.2
and react-native-google-places-autocomplete: 1.3.6

Let me check if degrading it can work out

[Manoj002]

@IrinaCodixis, after degrading im getting some big messy errors

[IrinaCodixis]

@Manoj002 , probably it is not compatible with your RN version. I am sorry I couldn't help you with this. Hopefully dblackker's PR will be merged soon.

[Manoj002]

@IrinaCodixis, yeahh the last hope... waiting for it

[dblackker]

I'm not sure where the maintainers of this project are :( --- I'm tempted to fork it.

[guilhermepontes]

Fixed on #300

[nCheck]

`

<GooglePlacesAutocomplete
              placeholder='Search'
              minLength={2} 
              autoFocus={false}
              returnKeyType={'search'} 
              listViewDisplayed={this.state.hideList} 
              fetchDetails={true}
              renderDescription={row => row.description} 
              onPress={(data, details = null) => { 
                // console.warn(details)
                this.setState({uLang:details.geometry.location.lng,uLat:details.geometry.location.lat
                  ,pname:details.address_components[0].long_name})
                var hideList = ! this.state.hideList;
                this.setState({heighta:45 , heightb:'50%',hideList, placeSelected : true})
                console.log(this.state)

              }}

          textInputProps={{
            onFocus: () => this.setState({ hideList : false }),
            onBlur: () => this.setState({ hideList : true }),
          }}


          getDefaultValue={() => ''}


          styles={{ 

            textInputContainer: {
              width: '100%'
            },
            description: {
              fontWeight: 'bold'
            },
            predefinedPlacesDescription: {
              color: '#1faadb'
            }
          }}

          nearbyPlacesAPI='GooglePlacesSearch'  

          filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']} 
        //   predefinedPlaces={[CurrentPlace]}

          debounce={0} 

        />


        {
          this.state.placeSelected &&
          (
            <View style={{padding : 75}} >
                <Text> { this.state.uLang } </Text>
            </View>
          )
        }


      </View>
      </ScrollView>

`

I added switching option in onPress too. It works fine