Autocomplete Service Issue with Restricted Google API Key in React Native Android App

[RafikMk]

Autocomplete Service Issue with Restricted Google API Key in React Native Android App

I've encountered a bug with the Autocomplete service of the Place API in my React Native Android app after applying a Google API key restriction using Android Restricted Key. When the key restriction is enabled, I expect the Autocomplete service to function correctly, just as it does when the key restriction is not in place.
However, when the key restriction is enabled, the Autocomplete service doesn't function correctly. Strangely, the map displays without any issues. On the other hand, as soon as I remove the key restriction, the Autocomplete service starts working normally for all queries. I would greatly appreciate any insights or guidance on resolving this issue. It's critical for the functionality of my React Native Android app. Thank you in advance for your assistance.

[imiguez]

I was facing exactly the same issue as you and after a few days struggling with this I figured out what's going on.

It turns out that the Autocomplete component uses the 'https://maps.googleapis.com/maps/api' endpoint under the hood, so what is the problem? As google documentation says, you have to put the app package name and SHA-1 on their respective HTTP header. But even trying to do http request with the headers I couldn't succeed. Why? Because I was putting my SHA-1 in this format: '4C:E2:F5', and apparently you have to put it without semicolons like this stackoverflow answer says. And finally, I reached the solution to get my Autocomplete component working, you have to use the requestUrl property to redifine the url and set the headers there like this:

      requestUrl={{
        useOnPlatform: 'all',
        url:
          'https://maps.googleapis.com/maps/api',
        headers: {
          "X-Android-Package": "YOUR.PACKAGE.NAME",
          "X-Android-Cert": "YOUR-SHA-1"
        },
      }}

[nguyendinhdoan]

I was facing exactly the same issue as you and after a few days struggling with this I figured out what's going on.

It turns out that the Autocomplete component uses the 'https://maps.googleapis.com/maps/api' endpoint under the hood, so what is the problem? As google documentation says, you have to put the app package name and SHA-1 on their respective HTTP header. But even trying to do http request with the headers I couldn't succeed. Why? Because I was putting my SHA-1 in this format: '4C:E2:F5', and apparently you have to put it without semicolons like this stackoverflow answer says. And finally, I reached the solution to get my Autocomplete component working, you have to use the requestUrl property to redifine the url and set the headers there like this:

      requestUrl={{
        useOnPlatform: 'all',
        url:
          'https://maps.googleapis.com/maps/api',
        headers: {
          "X-Android-Package": "YOUR.PACKAGE.NAME",
          "X-Android-Cert": "YOUR-SHA-1"
        },
      }}

Thanks! It works for me.

Here is my settings:

<GooglePlacesAutocomplete
  ...
  requestUrl={{
    useOnPlatform: 'all',
    url: 'https://maps.googleapis.com/maps/api',
    headers: {
      "X-Ios-Bundle-Identifier": "YOUR_BUNDLE_ID",
      "X-Ios-Cert": "YOUR_IOS_CERT",
      "X-Android-Package": "YOUR_PACKAGE",
      "X-Android-Cert": "YOUR_ANDROID_CERT"
    }
  }}
/>

For someone wants to get the SHA-1 for X-Ios-Cert and X-Android-Cert:

// cd to ios
security find-identity -v -p codesigning

// cd to android
./gradlew signingReport

For Android, we have to remove the colon. Thanks for this comment