react-native-google-places-autocomplete: Autocomplete not working after upgrade to React Native 0.38

Hi guys, This component stopped working on our app after we upgraded to React Native 0.38. Nothing else is changed. Is there any new setting we need to cater for after upgrade? Here’s our code if it helps, pretty standard:

import React, {Component} from 'react';
import {View, MapView, WebView, Text} from 'react-native'
//import WebViewBridge from 'react-native-webview-bridge';
var {GooglePlacesAutocomplete} = require('react-native-google-places-autocomplete');




const injectScript = `
  (function () {
    if (WebViewBridge) {
        WebViewBridge.onMessage = function (message) {                       
        };
    }
    }());
`;

var self;

class LocationSearch extends Component {
    constructor(props) {
        super(props);
        
    }
    componentDidMount() {
        self = this;
    }
    
    render() {
        var route = this.props.navigator.getCurrentRoutes(0);
        searchlocation = route[route.length - 1].positionToSearch;  
        var stringSearchLocation= searchlocation.coords.latitude +', ' + searchlocation.coords.longitude;        
        return (
            <View style={{marginTop:60}}>
                <GooglePlacesAutocomplete
                    placeholder='Search'
                    minLength={2}
                    autoFocus={false}
                    fetchDetails={true}
                    onPress={(data, details = null) => {                     
                        self.props.callBack(details);
                        self.props.navigator.pop();                     
                    } }                  
                    query={{
                        // available options: https://developers.google.com/places/web-service/autocomplete
                        key: 'AIzaSyCJzwLTQ4ADlEr2vftLexbX2xY81hO9yq0',
                        language: 'en', // language of the results   
                        location: stringSearchLocation,
                        radius:5000                     
                    }}
                    styles={{
                        description: {
                            fontWeight: 'bold',
                        },
                        predefinedPlacesDescription: {
                            color: '#1faadb',
                        },
                    }}

                    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={{
                        // 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']}
                    
                    />
            </View>
        );
    }
}

module.exports = LocationSearch;

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 27

Most upvoted comments

<GooglePlacesAutocomplete
        placeholder="Search"
        minLength={2}
        autoFocus={false}
        fetchDetails
        onPress={(data, details) => this.onPlaceSearch(data, details)}
        query={{
          types: '(cities)', // default: 'geocode'
          key: 'API_KEY',
          language: 'en' // language of the results
        }}
        styles={{
          textInputContainer: {
            backgroundColor: 'rgba(0,0,0,0)'
          },
          listView: {
            height: deviceHeight,
            width: deviceWidth,
            position: 'absolute',
          }
        }}
        nearbyPlacesAPI={'GooglePlacesSearch'}
        GoogleReverseGeocodingQuery={{
        }}
        GooglePlacesSearchQuery={{
        }}
        filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']}
      />

@saeed2402 this is how I used the style, let me know if this helps. Also my onPress gets called as well!

jnrepo on Dec 7, 2016

        styles={{
          listView: {
            position: 'absolute',
            height: deviceHeight,
            width: deviceWidth
          }
        }}

playing around with this property revealed the list for me, whoooot looks like some styling errors in the module

@saeed2402 @LoriKarikari

jnrepo on Dec 7, 2016

Hi guys, could you please point me out what I am doing wrong? My onPress handler is not being called. I don’t get any data nor details. Literally nothing. Thank you in advance!

Here is my code:

import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const windowSize = Dimensions.get('window');
const deviceWidth = windowSize.width;
const deviceHeight = windowSize.height;

class Example extends Component {

  constructor (props) {
    super (props);

    this.onPlaceSearch = this.onPlaceSearch.bind(this);
  }

  onPlaceSearch (data, details) {
    console.log('DATA', data);
    console.log('DETAILS', details);
  }

  render() {
    return (
      <View style={{ flex: 1, marginTop: 50}}>
        <GooglePlacesAutocomplete
          enablePoweredByContainer={false}
          placeholder="Search"
          minLength={2}
          autoFocus={false}
          fetchDetails={true}
          onPress={(data, details) => this.onPlaceSearch(data, details)}
          query={{
            types: '(regions)',
            key: 'AIzaSyBlXzW_f3mZD6bOVIsP6bsHhvcICbLD2PQ',
            language: 'en'
          }}
          styles={{
            textInputContainer: {
              backgroundColor: 'rgba(0,0,0,0)'
            },
            listView: {
              height: deviceHeight,
              width: deviceWidth,
              position: 'absolute',
              top: 40
            }
          }}
          nearbyPlacesAPI={'GooglePlacesSearch'}
          filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']}
        >
      </GooglePlacesAutocomplete>
    </View>
    );
  }
}

Dependencies:

"react": "15.4.2",
"react-native": "0.40.0",
"react-native-google-places-autocomplete": "^1.2.6"

heron2014 on Jan 18, 2017

Thanks a lot for your help @jnrepo again, really appreciate it.

saeed2402 on Dec 7, 2016