Autocomplete not working after upgrade to React Native 0.38
See original GitHub issueHi 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:
- Created 7 years ago
- Comments:27
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@saeed2402 this is how I used the style, let me know if this helps. Also my
onPress
gets called as well!playing around with this property revealed the list for me, whoooot looks like some styling errors in the module
@saeed2402 @LoriKarikari