Home / Android App Building / Base Setup for Web - React Native - Android Ap

Published on 09/20/2024 Published by Pratik Takle

Base Setup for Web - React Native - Android Ap

Here’s a step-by-step guide on how to create and publish an Android app on the Google Play Store using React Native, incorporating Firebase, Google Cloud, Keystore creation, Node.js, and setting up a Play Store account.

—

1. Create a Google Play Developer Account –

https://awxdocs.com/tutorials/step-by-step-guide-to-creating-a-google-play-developer-account/

—

2. Set Up Development Environment

Before starting with React Native, you need to install and configure the development environment.
Install Node.js
- Node.js is required for the React Native CLI to run. Install it from [Node.js official site](https://nodejs.org/).
Install React Native CLI
- After Node.js is installed, you can install React Native CLI globally by running:
- XHTML
  
  npm install -g react-native-cli
  
  1
  
  npm install -g react-native-cli
Install Java Development Kit (JDK)
- Download and install the [JDK](https://www.oracle.com/java/technologies/javase-jdk11-downloads.html) as it’s necessary for building Android apps.
Install Android Studio
- Download and install Android Studio, which includes the Android SDK and Emulator:
- [Download Android Studio](https://developer.android.com/studio)
- During the installation, ensure you install Android SDK, Android Virtual Device (AVD), and the Android command-line tools.

Set Up Environment Variables for Android

Add these to your environment variables (on Windows, via System Properties > Environment Variables; on macOS, via .bashrc or .zshrc):

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

export ANDROID_HOME=$HOME/Library/Android/sdk

export PATH=$PATH:$ANDROID_HOME/emulator

export PATH=$PATH:$ANDROID_HOME/tools

export PATH=$PATH:$ANDROID_HOME/tools/bin

export PATH=$PATH:$ANDROID_HOME/platform-tools

—

3. Configure Firebase in React Native

Step by step tutorial – https://awxdocs.com/tutorials/set-up-a-firebase/
Firebase provides backend services for mobile apps like authentication, databases, analytics, and crash reporting.
Create a Firebase Project
- Go to the [Firebase Console](https://console.firebase.google.com/), create a project, and register your Android app.
Add Firebase SDK to React Native
- In the Firebase console, download the google-services.json file for your Android app and place it in the android/app directory of your React Native project.
Install Firebase dependencies for React Native:

XHTML

npm install @react-native-firebase/app

1

npm install @react-native-firebase/app
Enable Firebase Features
- Install additional Firebase modules based on the features you need:
  - Authentication:
    
    XHTML
    
    npm install @react-native-firebase/auth
    
    1
    
    npm install @react-native-firebase/auth
  - Firestore:
    
    XHTML
    
    npm install @react-native-firebase/firestore
    
    1
    
    npm install @react-native-firebase/firestore
  - Analytics:
    
    XHTML
    
    npm install @react-native-firebase/analytics
    
    1
    
    npm install @react-native-firebase/analytics
  - Add Firebase dependencies to android/build.gradle:
    
    XHTML
    
    classpath 'com.google.gms:google-services:4.3.10'
    
    1
    
    classpath 'com.google.gms:google-services:4.3.10'
  - And to android/app/build.gradle:
    
    XHTML
    
    apply plugin: 'com.google.gms.google-services'
    
    1
    
    apply plugin: 'com.google.gms.google-services'

—

4. Connect Google Cloud (Optional)

If your app needs server-side logic or features like cloud storage, you’ll need to set up Google Cloud.
Create a Google Cloud Project
- Go to the [Google Cloud Console](https://console.cloud.google.com/) and create a new project.
- Enable the necessary services like Cloud Functions, Cloud Storage, or Maps API depending on your app’s requirements.
Use Google Cloud in React Native
1. Install Google Cloud dependencies:
  
  XHTML
  
  npm install @google-cloud/storage
  
  1
  
  npm install @google-cloud/storage
Use the Google Cloud SDK to connect to Google Cloud services as needed.

—

5. Develop Your React Native App

Now it’s time to build the actual app.
- UI/UX Design
- Follow the processes given in the videos
  - https://www.youtube.com/watch?v=1-MyCrCyDyE&list=PLdL2ulPMb51cDtXaX8RCB-z5N_q8DYoQ6
- Integrate Firebase Features
  - Integrate Firebase Authentication for user login.
  - Connect Firestore or Realtime Database to store and retrieve data.
  - Enable Firebase Analytics to track app usage.
- Test the App
  - Run your app on an Android Emulator or a physical Android device:
    
    XHTML
    
    npx react-native run-android
    
    1
    
    npx react-native run-android

—

6. Generate a Signed APK (Keystore Creation)

To publish your app on the Google Play Store, you need to generate a signed APK.
Create a Keystore
Open a terminal and run the following command to generate a keystore file:

XHTML

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

1

keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
Save the keystore file in a secure location and remember the password.
Configure Keystore in React Native Project
- Add the keystore information to android/app/build.gradle:

android {
...
signingConfigs {
release {
storeFile file('my-release-key.keystore')
storePassword 'your-store-password'
keyAlias 'your-key-alias'
keyPassword 'your-key-password'
}
}
buildTypes {
release {
signingConfig signingConfigs.release
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
}

android {

...

signingConfigs {

release {

storeFile file('my-release-key.keystore')

storePassword 'your-store-password'

keyAlias 'your-key-alias'

keyPassword 'your-key-password'

}

buildTypes {

release {

signingConfig signingConfigs.release

minifyEnabled false

proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'

}

Generate a Release APK
- Build the APK:
  
  XHTML
  
  cd android && ./gradlew assembleRelease
  
  1
  
  cd android && ./gradlew assembleRelease

—

7. Upload App to the Play Store

Create a New App:
In the Play Console, create a new app by filling out details like app name, language, and category.
App Information
- Add App Description: Provide the app’s description, tagline, screenshots, and logos.
- Set Content Rating: Complete the content rating questionnaire.
- App Category: Select the appropriate app category (e.g., Education, Health, Games).
- Privacy Policy: Include a privacy policy URL if your app collects user data.
Upload APK
- Go to Release > Production, create a new release, and upload your signed APK or AAB file.

—

8. Pre-Launch Testing

You can perform internal or beta testing before the public release:
Internal Testing: Add testers and distribute the app within a small group for initial feedback.
Beta Testing: Launch a closed or open beta test to gather broader feedback.

—

9. Publish the App

Once everything is set up:
- Submit for Review: Submit your app for Google’s review process. This may take a few days.
- Once approved, your app will be available for download on the Play Store.

—

10. Monitor and Maintain Your App

Use Firebase Analytics to track app performance.
Use Crashlytics to monitor crashes and issues in real-time.
Update the app regularly with new features, bug fixes, and improvements through Play Console > Releases.

—

Conclusion

Following this guide will help you build and publish a React Native Android app on the Play Store. Integrating Firebase and Google Cloud can give your app powerful backend capabilities, and creating a signed APK ensures you meet Play Store requirements.

Updated on Sep 20, 2024