GooglePlacesAutocomplete not working in react-native apk file for android

Question

I implemented Google Places API in my react native project and I'm trying to query places search with the GooglePlacesAutocomplete but for android it only works while testing with expo and when I build a test apk and install on a real device no result is returned and GooglePlacesAutocomplete does not work. it is difficult for me to trace this error because in development environment everything works perfectly. please I really need help. below is how I query google places

 return (
<SafeAreaView style= {{backgroundColor: 'white', height: "100%"}}>
  <View >
  <Text style ={{ color: 'black', 
  fontWeight:'bold', 
  fontSize: 25, 
  padding: 10}}>Lets Move it!</Text>

  <GooglePlacesAutocomplete
  placeholder='Move from?'
  styles={{
    container: {
      flex: 0,
      
    },
    textInput: {
      fontSize: 18,
      backgroundColor: 'white',
      borderWidth: 1,
      padding: 8,
      margin: 8,
      borderColor: '#a29e9e11'

    }
  }}
  onPress={(data, details = null) => {
    dispatch(setOrigin({
      location: details.geometry.location,
      description: data.description
    }))
    dispatch(setDestination(null))
  }}
  fetchDetails ={true}
  enablePoweredByContainer={false}
  
  query={{ key: GOOGLE_MAPS_APIKEY, language: 'en'}}

  nearbyPlacesAPI='GooglePlacesSearch' debounce={400}
   />

  
  </View>
  <View style ={{flex:1}}>
          <BottomView />
  </View>
</SafeAreaView>
)
}

Hope you have created API key for your project and enabled billing account for it, because when your free limit ends it will check it for billing account. — Anil Ravsaheb Ghodake
– Anil Ravsaheb Ghodake, Commented Nov 6, 2023 at 10:24
when testing with expo app everything works fine but when I build app and install on a real device it does not work — Eric
– Eric, Commented Nov 6, 2023 at 14:22
Try to implement renderRow method and add alert in it. So might be you will get error in alert for release apk — Anil Ravsaheb Ghodake
– Anil Ravsaheb Ghodake, Commented Nov 7, 2023 at 12:44

Anil Ravsaheb Ghodake · Accepted Answer · 2023-11-08 13:00:01Z

Can you try with below component I have implemented, its working on both mode debug and release, (You can change some styles w.r.t. your application styles and need to handle images added)

return (
    <SafeAreaView style={{flex: 1}}>
      <TouchableOpacity style={{flexDirection: 'row', alignItems: 'center', top : 37,width:40,height:40, paddingLeft : 15, zIndex:10}}
        onPress={()=>{
          navigation.goBack();
        }}>
        <Image
          source={require('../assets/images/backIcon.png')}
          style={{height: 35, width: 35}}
        />

      </TouchableOpacity>

        <GooglePlacesAutocomplete
          placeholder="Enter your search query"
          placeholderTextColor="#8189B0"
          query={{
            key: YOUR_API_KEY,
            language: 'en',
          }}
          textInputProps={{
            ref: textInput => {
              textInput && textInput.focus();
            },
          }}
          returnKeyType={'Search in Google'}
          listViewDisplayed={'auto'}
          fetchDetails={true}
          onPress={(data, details) => {
            console.log('Data=>', JSON.stringify(data));
            console.log('Details=>', JSON.stringify(details));
            navigation.goBack();
          }}
          renderRow={rowData => {
            const title = rowData.structured_formatting.main_text;
            const address = rowData.structured_formatting.secondary_text;
            return (
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  width: width - 80,
                  paddingBottom: 10,
                  paddingTop: 10,
                }}>
                <Image
                  source={require('../assets/images/Location.png')}
                  style={{width: 35, height: 35}}
                  resizeMode={'contain'}
                />
                <View style={{height: 40, marginLeft: 8}}>
                  <Text
                    style={{color: '#0D1A59', fontSize: 16, paddingRight: 10}}
                    numberOfLines={1}>
                    {title}
                  </Text>
                  <Text style={{fontSize: 12, color: 'rgba(13, 26, 89, 0.65)'}}>
                    {address}
                  </Text>
                </View>
              </View>
            );
          }}
          nearbyPlacesAPI="GoogleReverseGeocoding"
          debounce={300}
          autoFocus={true}
          enablePoweredByContainer={false}
          keyboardShouldPersistTaps="always"
          suppressDefaultStyles={true}
          styles={{
            container: {
              flex: 1,
            },
            textInput: {
              height: 40,
              color: '#2E3E5C',
              width: 300,
              fontSize: 14,
              alignSelf: 'center',
              borderRadius: 8,
              paddingHorizontal: 15,
              marginLeft : 30,
              backgroundColor: '#EFEFEF',
            },

            listView: {
              display: 'flex',
              top: 50,
              width: '93%',
              alignSelf: 'center',
              borderRadius: 8,
              height: height * 0.7,
            },
            row: {
              paddingLeft: 13,
              height: 60,
              flexDirection: 'row',
            },
            poweredContainer: {
              justifyContent: 'flex-end',
              alignItems: 'center',
              borderBottomRightRadius: 5,
              borderBottomLeftRadius: 5,
              borderColor: '#c8c7cc',
              borderTopWidth: 0.5,
            },
          }}
        />
      {/* </View> */}
    </SafeAreaView>
  );

I think there's an issue with my Google API or something. because I just copied your code and it works while testing just like mine but when I build api with expo and install on my android devices it does not produce any result when I type — Eric
– Eric, Commented Nov 9, 2023 at 12:56
Nope, no need to restrict API key. But Make sure API key is enabled for Android platform and connected with billing account. — Anil Ravsaheb Ghodake
– Anil Ravsaheb Ghodake, Commented Nov 13, 2023 at 6:39

Collectives™ on Stack Overflow

GooglePlacesAutocomplete not working in react-native apk file for android

1 Answer 1

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related