How to implement firebase remote config in React native

Hi Guys, In this article, we are going to learn about How to implement firebase remote config in React native. This is Firebase’s one of the important feature which used to transfer data dynamically in published Application. you can transfer the base URL in the Application through the Firebase Remote Config. you don’t have to upload a new build version to the Play store & App store. also, you can use Remote config for force update app bypassing new version in Application and display a popup to users for update your application. So in this article will implement remote config in React Native application. let’s start with an example.

1. Create a new project on Firebase console

Goto this link and create a new project on the firebase console

Follow steps, add project name, SHA key complete set of project. to generate SHA-1 use the following commands

  • Get SHA key from Windows machine

  • Get SHA key from Linux or Mac OS

After successfully project setup, goto dashboard left navigation Remote config option and add key & default values in it like follow

After adding all keys and values you need to publish changes as follows

In my case, I have added four keys as follows

  • base_url: This is the main base URL on which Webservices will points.
  • is_force_update: This is a boolean value that decides whether the app should popup force update alert to users.
  • build_version: This will be the latest update build version of the application
  • playstore_url: This is the play store identifier URL

2. Config Remote config in React native application

Firstly, set up the firebase app module in your project using the following commands

If you are using an older version of react-native then you have to link Firebase manually. check this post for Android & iOS

3. Create RemoteConfig.js

Create RemoteConfig.js file in your project and add the following code to it.

As you can see in the above code there are two different ways to get parameter data from Firebase remote config, one with forEach loop and another is with getValue key. then save these data in AsyncStorage.setItem. now the important thing is How to trigger this remote config class in your project to do this you can trigger this class at the very first time in App.js as follows

4. How to Trigger remote config in App.js

Check the following App.js code

This will start remote config at the time of Application start. you can see results in console.log()

Hope you will like this article, Please comment out your queries, Thank you 🙂




Leave a Reply

Your email address will not be published. Required fields are marked *