Readme

You have been contributing to open source by hosting your projects on Github for some time now. That’s great! 👍 But my question is, do you take some time to describe what your project does?🤔 Or even how to run or install the project to guide anyone who interested in the project? No! I have been there before.🤫 I almost always ignored the readme file if present or forgot to add it at all to the projects I build on the side.

The importance of having a well-structured Readme file

It is important to note that writing a readme for each project helps:


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:


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 📖

TLDR;

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

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

Note: The @react-native-firebase/app module must be installed before using any other Firebase service.

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,

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

Usage:

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:


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.

Find out more about modals in React Native from their official documentation

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.

You can read more about this component from the official documentation

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(FlatList and SectionList).

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

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

FlatList is a component for rendering a performant scrollable list.

SectionList

The SectionList works the same as the FlatList. …

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