CODEWITHSUNDEEP
react-nativeautocomplete
Shayanth Sinnarajah
Shayanth Sinnarajah

Reputation: 11

React Native react-native-google-places-autocomplete implementation

I am trying to implement the react-native-google-places-autocomplete module, but the following codebit does not produce any results in the list view. I put breakpoints and console logs within the package and found that the request is successful and the API is returning values, but none of the places are being populated in a list view. I have also attached screen shots to show what my issue is.

<!-- language: lang-js -->

<GooglePlacesAutocomplete
                placeholder='Search'
                minLength={2} // minimum length of text to search
                autoFocus={true}
                listViewDisplayed='auto'    // true/false/undefined
                fetchDetails={true}
                renderDescription={(row) => row.description} // custom description render
                onPress={(data, details = null) => { // 'details' is provided when fetchDetails = true
                    console.log(data);
                    console.log(details);
                }}
                getDefaultValue={() => {
                    return ''; // text input default value
                }}
                query={{
                    // available options: https://developers.google.com/places/web-service/autocomplete
                    key: 'AIzaSyCj2w25IckuLttTxl1MMhhQ0D8aG-tnSZc',
                    language: 'en', // language of the results
                    types: '(cities)', // default: 'geocode'
                }}
                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']} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities

                predefinedPlaces={[homePlace, workPlace]}

                debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
            />

Upvotes: 0

Views: 8008

Answers (5)

Dewalkar Agarwal
Dewalkar Agarwal

Reputation: 161

just wrap the component in a ScrollView, you will see the search results

Upvotes: 0

cyberwebdev
cyberwebdev

Reputation: 69

use this. it will remove warning and your code will work perfectly.

   <ScrollView keyboardShouldPersistTaps={'handled'}>
      <GooglePlacesAutocomplete...../>
   </ScrollView>

Upvotes: 0

anwaar
anwaar

Reputation: 26

Actually your billing info is required on google. So please add and enjoy the autocomplete textbox.

https://console.cloud.google.com/home/dashboard?project=fblog-1534417095749

Upvotes: 0

bpsourav21
bpsourav21

Reputation: 873

use this way. I guess this might work with your code.

   render() {
        return (
            <View style={styles.searchBox}>
                <GooglePlacesAutocomplete
                    placeholder='Where to Go'
                    minLength={2} // minimum length of text to search
                    autoFocus={false}
                    returnKeyType={'search'} 
                    renderDescription={(row) => row.description} // custom description render

                    styles={searchInputStyle}

                />

            </View>
        );
    }
}

const searchInputStyle={
        container: {
            backgroundColor: '#fff',
            width: width,
            marginLeft: 20,
            marginRight: 20,
            marginTop: 20,
            marginBottom: 0,
            opacity: 0.9,
            borderRadius: 8
        },
        description: {
            fontWeight: 'bold',
            color: "#007",
            borderTopWidth: 0,
            borderBottomWidth: 0,
            opacity: 0.9,
        },
        predefinedPlacesDescription: {
            color: '#355',
        },
        textInputContainer: {
            height: 50,

        },
            textInput: {
            height: 33,
            fontSize: 16
        }
    }

const styles = StyleSheet.create({
    searchBox: {
        top: 0,
        position: "absolute",
        flex: 1,
        justifyContent: 'center',
    }
 });

Upvotes: 1

Codesingh
Codesingh

Reputation: 3384

It seems the Listview is hiding behind all other views.

styles={{
          description: {
                        fontWeight: 'bold',
                       },
          predefinedPlacesDescription: {
                          color: '#1faadb',
                       },
          listView: { color: 'black', //To see where exactly the list is
                      zIndex: 16, //To popover the component outwards
                      position: 'absolute',   
       }}

Upvotes: 1

Related Questions