Como publicar um projeto em React Native na Play Store

Olá pessoal! Depois de várias semanas, meses ou mesmo anos desenvolvendo e testando o novo aplicativo, finalmente chega o momento de publicá-lo na PlayStore! Quem utiliza o Expo CLI para o desenvolvimento em React Native consegue se beneficiar das muitas facilidades que ele proporciona durante o processo de publicação, sendo uma alternativa excelente para quem, assim como eu, está começando. Mas e no React Native CLI, como fazemos para gerar o famoso APK e o AAB para publicar na PlayStore ou em qualquer outra loja compatível? É isso que eu gostaria de mostrar a vocês, pois apesar de não ser tão simples como no Expo, ainda sim é menos difícil do que parece. Vamos lá?

Primeiro passo

A primeira coisa a se fazer é criar uma chave privada. Para isso, podemos utilizar a ferramenta Keytool, disponível no próprio Java Development Kit (JDK). Então acessamos a pasta raíz do projeto, navegamos até a pasta Android/app e abrimos um terminal que aponte para este diretório:

Em seguida, executamos o código abaixo:

keytool -genkeypair -v -storetype PKCS12 -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

Este comando gera uma chave privada dentro do diretório "NomeDoProjeto/android/app" chamada my-upload-key.keystore, com alias my-key-alias, criptografia RSA de 2048 bits e é válida por até 10 mil dias (aproximadamente 27 anos).

Segundo passo

Com a chave gerada no devido local, agora precisamos editar o arquivo gradle.properties, localizado em "NomeDoProjeto"/android. Então adicionamos as linhas a seguir ao final do arquivo:

MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore

MYAPP_UPLOAD_KEY_ALIAS=my-key-alias

MYAPP_UPLOAD_STORE_PASSWORD=*****

MYAPP_UPLOAD_KEY_PASSWORD=*****

onde em MYAPP_UPLOAD_STORE_PASSWORD e MYAPP_UPLOAD_KEY_PASSWORD substituímos os asteriscos pela senha da área de armazenamento de chaves definida:

Terceiro Passo

Em seguida, precisamos adicionar as configurações de assinatura. Para isso, acessamos o arquivo build.gradle, localizado em "NomeDoProjeto"/android/app/ e buscamos pelas linhas abaixo:

Arquivo build.gradle antes da modificação

Essas linhas (signingConfigs e buildTypes) normalmente estão dentro de Android {...}. Então substituímos elas da seguinte forma:

 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
        }
    }
 }

Em signingConfigs, podemos substituir a chave debug pela chave release e tudo que a contém. Já em buildTypes, simplesmente adicionamos a linha signingConfig signingConfigs.release. Por fim, teremos algo desse tipo:

Arquivo build.gradle após a modificação

Quarto Passo

Basicamente chegamos ao fim do processo. Agora já temos condições de gerar os nossos arquivos APK e AAB. Para isso, dentro do terminal, navegamos para a pasta android novamente e executamos os comandos abaixo:

Gerando o AAB

Em sistemas Windows:

gradlew bundleRelease

Em sistemas Linux e MacOS:

./gradlew bundleRelease

Gerando o APK

Em sistemas Windows:

gradlew assembleRelease

Em sistemas Linux e MacOS:

./gradlew assembleRelease

Geralmente o processo é demorado, a depender das especificações de Hardware da máquina e do nível de complexidade do projeto. Portanto seja paciente, prepare um café e cruze os dedos para que tudo dê certo! Os artefatos gerados ficarão disponíveis em:

"NomeDoProjeto"/android/app/build/outputs/bundle/release para o arquivo AAB gerado (app-release.aab).

"NomeDoProjeto"/android/app/build/outputs/apk/release para o APK gerado (app-release.apk).

Se tudo correu bem até aqui, meus parabéns! Agora é possível publicar seu aplicativo na PlayStore.

Espero que eu tenha ajudado e até a próxima!

Fonte: React Native.