The learning curve of publishing your React Native CLI App to Google Play Store

Hello everyone, this week I had the possibility to explore React Native CLI and the process of publishing it to Google Play Store.

Has someone who, when given the chance, goes for the most "bare" route to learn how to do something, let's just say this week was ...entertaining.

I've encountered a few roadblocks, and there are still a few to manage, but here are my mistakes so you won't have to deal will them.

Quick note: I've published the app only for internal testing, with no intention to release it for now since it's just a simple To Do app using React state management.

REACT NATIVE : Surprisingly easy to make an app in 10 minutes

If you have some experience with JavaScript/TypeScript and React, it's very easy to translate your knowledge to React Native. Not a lot to comment here, the documentation speaks for itself.

However,...

Setting up the development environment: A completely different story

If you love dark humour, I must say we should have coded along this week. Let's start with the basics: the documentation is not up to date (and it's not that explicit either, although it looks like it).

The real problem: Android SDK version and it's connection to your project.

If you're like me and you like to do things by the book when starting out, you will also install Android Studio. Above all, I just felt that my 2015 Android would not be able to deal with all of the week's shenanigans.

Forget the documentation and go straight to Android 14.0 ("UpsideDownCake), which is the Android SDK 34. Now the important part: if you want your react-native project to read the Android SDK, after you created your ANDROID_HOME environment variable, you'll go BACK to Android Studio > SDK Manager > SDK Tools. Please, but really, please, install the Android SDK Command-line Tools. Then, don't open your whole project, but only your android or your app folder.

After all of this, do yourself a favour and run:

npx react-native doctor  

Nothing is more beautiful than seeing all of the green check marks.

Creating your keys and adding them to build.gradle

Remember when I said that I was still dealing with some problems? Well here they are:

Generating a keyStore: Android Studio was really not that helpful, giving me always a vary bare error message. No information, no description, just a beautiful red exclamation mark followed by "Error". Well, thanks ( I guess).

Therefore I went with the command route because, honestly, it is always so much better. To create your xxx.keystore file you can either store it in your java_home, an approach that multiple seemed to use (thank you doctor Google), or you can generate it in your project. Either way, remember to add it to your /android/app directory.

Since I don't gatekeep, and you're already reading this:

keytool -genkeypair -v -keystore my-release-key.keystore -keyalg RSA -keysize 2048 -validity 10000 -alias my-key-alias

Quick note: first time I tried it, Google Play Console shrieked at me that the longevity of the key was too short. Second time worked like a charm.

But hey, now you need this variables to be added in android/gradle.properties or ~/.gradle/gradle.properties:

MYAPP_UPLOAD_STORE_FILE=xxx.keystore
MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
MYAPP_UPLOAD_STORE_PASSWORD=*****
MYAPP_UPLOAD_KEY_PASSWORD=*****

Then add them to your android/app/build.gradle file:

android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                storeFile file(MYAPP_UPLOAD_STORE_FILE)
                storePassword MYAPP_UPLOAD_STORE_PASSWORD
                keyAlias MYAPP_UPLOAD_KEY_ALIAS
                keyPassword MYAPP_UPLOAD_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}

And SURPRISE! Here is my problem without a solution. I've seen multiple devs stating this works, multiple videos of successful builds and bundles after this configuration, but there is not a gradle.properties or a .env that seem able to save my life.

I've tried importing the properties files, partially importing the environment variables, etc. However the only thing that really works for me is to directly add them (I'm crying in a week of missed commits).

(If you have any suggestion, I'm all ears).

The finish line:

If you were able bundle your app you'll be rewarded with the identity verification and the questionnaire before you can release your app for internal testing. If I can be of any help, just use Privacy Policies to save yourself some time.

All frustrations and jokes aside, this week of trying to understand the ins-and-outs of deployment to Google Play Console has given me so much knowledge about new tools (Android Studio, I kinda love you), bash commands and SDK management that yes, it's not shown on my GitHub profile, but it will be very difficult to forget.

Note to self: Next time just use boilerplate code or EXPO.

Documentation for installations:

https://developer.android.com/studio/publish/app-signing
https://reactnative.dev/docs/environment-setup