Photo by Adi Goldstein on Unsplash

In part two of our blog series on building a production react-native app and publishing to an application market, we looked at how we can distribute a pre-release version of our app to a group of testers to Firebase App Distribution from the Firebase console.

Even though using Firebase console to distribute your app is simple and straightforward, the steps involved are very repetitive. As programmers, we like to automate repetitive tasks right?😀 …

Photo by Thomas Renaud on Unsplash

Releasing your React Native app to trusted testers has been much easier and less of a pain with the help of Firebase App Distribution. In this blog tutorial series, we are going to look at how to distribute your Android apps to Firebase App Distribution for free.

Firebase App Distribution makes distributing your apps to trusted testers painless by getting your pre-release version of your app to testers quickly. This makes it possible for you as a developer or team to get early access to feedback quickly before releasing your application to the Google Playstore or Appstore.

Below are some of the benefit of using Firebase App Distribution:

  • Cross-platform: helps you…

Photo by Bill Jelen on Unsplash

If you have ever wondered how to build the production or release version of your React Native app, then you have come to the right place. Before proceeding, this tutorial is targeted only at the android version of our React Native app.

Table of Content 📖

  1. Create a React Native App from Scratch
  2. Develop version 0.0.1 of our app
  3. Build a production-ready version of our app for android


You would not be here if you do not have an app already. You can feel free and jump to topic three(3) of the table content. Due to educational purposes, I will start from scratch. …

Photo by Clayton Robbins on Unsplash

1. Create a react native project

npx react-native-cli rn-firebase

2. Create a Firebase project on firebase

  • Head over to to create a new project.
  • Add a new application for either android or iOS (or both)

3. Installing React Native Firebase App library

Install the React Native Firebase “app” module to the root of your React Native project with NPM or Yarn(I will be using NPM throughout, hence find the Yarn equivalent to installing these libraries):

npm install --save @react-native-firebase/app

Firebase Android Setup

To allow the Android app to securely connect to your Firebase project, a configuration file must be downloaded and added to your project. …

Photo by Fotis Fotopoulos on Unsplash

Install react-native-dotenv library/package by running the command

npm i react-native-dotenv

For iOS,

  1. cd /ios
  2. pod install

Configure your babel.configure.js to allow you to inject your environment variables into your react-native environment using dotenv for multiple environments.

Basic Setup:

Inside your babel.configure.js file, add the code below:

module.exports = {
"plugins": [
["module:react-native-dotenv", {
"moduleName": "@env",
"path": ".env",
"blacklist": null,
"whitelist": null,
"safe": false,
"allowUndefined": true


Create a .env file in the root of your project folder and add your environment variables.

Photo by Caspar Camille Rubin on Unsplash

Installing vector icons in a bare React Native application requires some few steps to follow in order to set it up correctly for both android and ios platforms.

If you’re using expo, react-native-vector-icons is installed by default on the template project that get through expo init. It is part of the expo project.

For a bare React Native project, some additional steps need to be followed after running the command npm install react-native-vector-icons depending on the platform you are running.

Android Devices

If you want to properly install react-native-vector-icons on an android platform, follow the steps below:

  1. Open and Edit build.gradle file:

day 4 of #ReactNativeIn30Days

Modals are one of the most widely used components in mobile apps. React Native modals allows you to present content above an enclosing view.

The Modal

Surprisingly, using modals in React Native is quite easy and straight forward. Maybe it might be due to how well the documentation is written. To use modals in a react-native project, simply import the Modal component from the react-native library:

import {Modal} from 'react-native'

The next most important step is to trigger the modal to either open or close when an event happens. …

Day 3 of #ReactNativeIn30Days

Still exploring and experimenting with React Natives’ components as of day 3. I added an important feature that is very common with lists on mobile apps, the RefreshControl component.

RefreshControl Component

The RefreshControl component allows users to fetch new data on their screen when they pull the list down. In simple terms, it adds pull to refresh functionality inside of a ScrollView or ListView().

What I Built for Day 3

As I mentioned on day 2, I had some challenges styling the course card whiles using the FlatList component and had to fall back on…

cover image for day 2 of #ReactNativeIn30Days

On day 2, I explored React native ListView components. The ListView component renders a list of scrollable elements on the screen. Below is a list of ListView components that are provided out of the box by the framework.


ScrollView is a generic component that renders all its child elements at once. Hence, it is not advisable to use the ScrollView component for a long list of data or dynamic data.


FlatList is a component for rendering a performant scrollable list.


The SectionList works the same as the FlatList. …

Day 1 of #reactNativeIn30


I started today by creating a new project and reading most parts of the basics section of react-native documentation. The link to the Github repository at the end of the blog. Since I already had my development environment setup(installed android studio, Xcode, java-SDK, cocoapods, watchman, etc) I went ahead to run the default code to test if everything was working fine.

What is React Native?

React Native is an open-source framework for building Android and iOS applications using React and the app platform’s native capabilities.

As the slogan reads write once; run anywhere(Android, iOS, and Web), React Native allows you to write javascript code…

Victor Bruce-Crabbe

A Software Engineer who loves to share his knowledge through writing

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store