question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Autocomplete not working after upgrade to React Native 0.38

See original GitHub issue

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;

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:27

github_iconTop GitHub Comments

7reactions
jnrepocommented, Dec 7, 2016
<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!

4reactions
jnrepocommented, 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

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Native : There are some issues with autocomplete?
Refering your code, you can prevent the focus issue by calling function as function instead as component like below
Read more >
Upgrading to new versions - React Native
Some upgrades won't be done automatically with the React Native CLI and require manual work, e.g. 0.28 to 0.29 , or 0.56 to...
Read more >
Autocomplete - npm - Socket.dev
A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.
Read more >
react-search-autocomplete - npm
A <ReactSearchAutocomplete> is a fully customizable search box where the user can type text and filter the results. It relies on Fuse.js v6.5.3 ......
Read more >
Example of React Native AutoComplete Input
0 but it has some issue with latest version of 4.0.+. I downgraded the library and its working now. Reply. Gabriel.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found