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

[saeed2402]

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;

[mayask]

Hi @saeed2402

Do you experience an error? If so, please paste it in here please.

[saeed2402]

Hi @myaskevich . There is no error, it just doesn't work: I don't get the autocomplete list I used to get.

[LoriKarikari]

Same here. Just started using it today and was thinking I did something wrong. Then copied the example but it only shows the search bar and doesn't return any results. No errors are shown.

[jnrepo]

same here

symptoms

• onPress function will not get called
• no list of places will render

[jnrepo]

        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

[saeed2402]

@jnrepo How do you use this style? Are you saying your onPress function is actually called?

[jnrepo]

<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!

[saeed2402]

Thanks heaps @jnrepo , I actually realized it looks better if you move it to "GooglePlacesAutocomplete.js"
How you get deviceWidth and deviceHeight?

[LoriKarikari]

Thanks @jnrepo it's working! Do you also get a lot of warnings?
Edit: nvm about the warnings. Had a small typo.

[jnrepo]

@saeed2402

currently wrote it this way (technically you should get Dimensions from React, but haven't had much time to change it yet)

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

@LoriKarikari cool! I'm not seeings a lot of warnings though

[saeed2402]

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

[jnrepo]

@saeed2402 no worries!

[mayask]

@jnrepo Does this issue has anything to do with React Native 0.38 upgrade?

[jnrepo]

@myaskevich The issue did occur after the upgrade, however, I didn't look too deep into the issue :/

[Jaafar-abusair]

It's working for me with react-native 39,

[mayask]

@Jaafar-abusair Did you have to apply a workaround or it just worked without it?

[Jaafar-abusair]

No it just working fine, have you did upgrade react-native and link after you increase the version?

[Jaafar-abusair]

@myaskevich I found that it's not working on iOS while it's working on Android, any idea?

[Jaafar-abusair]

If you have it inside a view, make sure it has the style flex:1

[heron2014]

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]

Sorry guys! I got a nice data back! I had to close my project completely and run it again!

[mayask]

Hi Anita,
Please consider closing this issue then ;)
Sincerely,
Maxim Yaskevich

On Wed, Jan 18, 2017 at 11:32 PM +0300, "Anita" [e-mail] wrote:

Sorry guys! I got nice data back! I had to restart my project completely and run it again!

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[heron2014]

Hi @myaskevich
It looks like I can't close the issue which I didn't create. I don't have a close button :)

[mayask]

Ah, sorry about that 

Sincerely,
Maxim Yaskevich

On Thu, Jan 19, 2017 at 12:33 AM +0300, "Anita" [e-mail] wrote:

Hi @myaskevich

It looks like I can't close the issue which I didn't create. I don't have a close button :)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[avs30390]

hello Guys,

OnPress Not working even not getting simple alert, when we type in the text field Country List are shown but click not working

"react-native": "0.46.0",

[abbasashraf]

what's the main purpose of this line
nearbyPlacesAPI={'GooglePlacesSearch'}

[systemguy]

it didn't work for me