React Native Support

[shethabhish]

Can I use this in a react native project to store keys for the android folder? If so how do I do it, when I do it how it's done in the android way, I get * What went wrong: A problem occurred evaluating project ':app'.

[arriolac]

I'm not familiar with the reactive native project structure. If you can share more details on that I may be able to help.

[jinliming2]

I'm new to gradle and I had some trouble getting secrets-gradle-plugin into my React Native project, but I eventually solved the problems after a bit of fiddling. I'm not sure if my approach was entirely correct, but it seems to be working fine now. I've documented my access process under this issue for others to use as a reference.

React Native has an official template, and there is a TypeScript version of it. I'm using the TypeScript version of the template, but I think the same steps should apply to the official template as well.

1. Edit android/build.gradle, add the following line to buildscript > dependencies:

    dependencies {
   +    classpath("com.google.android.libraries.mapsplatform.secrets-gradle-plugin:secrets-gradle-plugin:2.0.1")
        classpath("com.android.tools.build:gradle:7.0.4")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("de.undercouch:gradle-download-task:4.1.2")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
   

2. Edit android/app/build.gradle, add the following line to the beginning of the file, and it should be placed after apply plugin: "com.android.application":

    apply plugin: "com.android.application"
   +apply plugin: "com.google.android.libraries.mapsplatform.secrets-gradle-plugin"
   

3. Edit android/app/src/main/AndroidManifest.xml, add the API configuration:

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
   +  <meta-data
   +    android:name="com.google.android.geo.API_KEY"
   +    android:value="${MAPS_API_KEY}" />
      <activity
        android:name=".MainActivity"
   

4. Edit android/local.properties, add your API Key to the end of the file:

   +MAPS_API_KEY=YOUR_API_KEY
   

After performing the above steps, re-sync gradle and then npx react-native run-android to restart React Native (or run it directly from within Android Studio), the project should now compile properly.

---

In the second step, you can also use the plugins syntax mentioned in the documentation, I don't know if there is a difference in detail between the two syntaxes, but this will also work. The only thing to note is that com.google.android.libraries.mapsplatform.secrets-gradle-plugin needs to be placed after com.android.application (I got stuck on this one for a long time):

-apply plugin: "com.android.application"
+plugins {
+    id("com.android.application")
+    id("com.google.android.libraries.mapsplatform.secrets-gradle-plugin")
+}