🤫 My React-Native little secrets to speed up a project </>

This article groups all awesome (🔥) resources I found on the web while creating my first projects using the React-Native mobile dev framework.

My setup:

  • MacBook Pro 13" 2017
  • OS: OSX
  • Node : v10.16.0
  • NPM : v6.9.0
  • XCode : 11.2.1 (11B53)

💻 Useful commands

🚧 Create a new project

react-native init ProjectName
cd ProjectName
react-native run-ios

Here if you get the simulator which is loading, you are on the good path (for the moment).

🔥 Run the starter kit

git clone https://github.com/joeybronner/rn-starter-kit
npm install
react-native link
react-native run-ios

🛣 Add the navigation

One of the most important plugin in a @reactnative project is the navigation between screens. I highly recommend to get the react-navigation plugin.

npm install —-save react-navigation
npm install —-save react-native-gesture-handler
react-native link react-native-gesture-handler

The perfect example of @react-navigation implementation is done by Zeb Girouard and the full article is available here: Tutorial

📱 Wrap the app into a SafeAreaView

With the new borderless screens like the iPhone X, you have to wrap the app into a SafeAreaView to be sure the components into your view will not be cut.
It’s very easy to add this to your app, but there is some screenshot of the result in an article from Nader Dabit: React Native & iPhone X.

📲 Add menu bar (bottom)

The react-navigation plugin provides a good bottom bar navigation and we will use it because it allows you to be easily mapped with the routes defined for the app.

The documentation is well done and this example is easy to implement. You can fully customize the bottom bar as well.

If you want to use drawer menu or a top bar, they provide this too.

One of the important part here is the logos for the bottom bar. If you want to use icons instead of labels, you have to add a third party icons library (like Ionicons) or use png files.

Below the example of the home screen which is one of the tab.

Home: {
screen: Home,
navigationOptions: {
title: ‘Accueil’,
showLabel: true,
tabBarIcon: (
<Image style={{ width: 24, height: 24 }} source={require(‘./assets/icons/home.png’)} />
showIcon: true

🤕 Custom header for views

You can customize headers of your views with react-navigate but I experienced this possibility and it’s not as easy as you can find on the tutorials.
I finally fall for an external library: react-native-parallax-scroll-view. Very nice and easy to implement, it’s my first choice in term of headers.

✍️ Add custom fonts

Another thing which is important about custom fonts for your app is to apply globally a default font. I searched a solution to do this without an external library but I didn’t found a good solution. I also recommend this external library which works with less than 5 lines: https://www.npmjs.com/package/react-native-global-font.

🔗 Firebase

🔓 Authentication (email)

// Todo…

📚 Database (documents)

Interesting article from Medium: Get Google Firestore working with React

Another very well detailed tutorial for Firestore and CRUD: React-Native Firebase tutorial build CRUD firestore app

🌁 Storage (Img, videos & co)

// Todo…

️️✏️ Rename an existing project

Sometimes you are using some starter kits to speed the development of your app. No problem, it’s normal. But at a moment you need to rename the project and if you want to do it manually it’s complicated, you ever miss a file and the project doesn’t compile anymore.

The best library that renames your project like a charm is react-native-rename.

Easy to use and formidably effective.

react-native-rename “App Name” -b com.yourname.appname

*Note: Bundle is only renamed for Android, not for iOS (please do the manip with Xcode)*

To rename bundle / app name, follow this article

💰 Payment system

I have not yet done a clear integration of payment but below I bookmarked some articles about in-app libraries:

🔥 Push to “production” with cable

Once you have an advanced version of your app, you want to push it to kind of production at least on your phone. Facebook wrote a step-by-step tutorial to explain this : building your app to production

🍭 Icons for both platforms

You can easily generate your logo assets for both platforms on IconCutter. Just replace the auto-generated ones with what you get from IconCutter.

Really easy: 5 minutes chrono ⏱

📱 Lock screen orientation

All is explained in this article but in short:

  • For Android, you just have to modify the AndroidManifest.xml and add
android:screenOrientation=”portrait” to the activity.
  • For iOS, you have to open Xcode and go to the project targets, select the app and uncheck the unwanted orientations.

That’s it ✌️

🌍 Multilangage

The best external libraries I found (yes, there is two libraries to merge) are:
- [react-native-localize](https://github.com/react-native-community/react-native-localize)
- [i18n-js](https://github.com/fnando/i18n-js)

All is explained with a step by step tutorial in [this blog post](https://medium.com/@nicolas.kovacs/react-native-localize-and-i18n-js-117f09428017).

You app is multilanguages! 😄

📹 Videos

THE channel you cannot pass through is the channel from William Candill (Cc @wcandill). Awesome quality for videos and tutorials and if you don’t want to start from scratch, he provides some starter projects (not free): https://react-native.shop/

His @youtube channel : https://www.youtube.com/user/wcandill

🚀 Starter Kits

📄 Publish to App Store

First, you can follow the first steps here: https://readybytes.in/blog/how-to-deploy-a-react-native-ios-app-on-the-app-store

Now, you can complete with the official Apple step-by-step but from my point of view, this tutorial was not “complete”…

🤖 Publish to Google Play

Follow this tutorial from developer.android and generate signed APK from Android Studio

🔗 Other articles from Medium




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React Learning Path The Definitive Guide

Ethereum Solidity + Vue.js Tutorial Simple Auction Dapp within 10 minutes.

Life and Times of a React Component

Avoid unnecessary function indirection

How to use Chart.JS in Phoenix | Elixir Advanced

Learning Hash Tables

How to create a module in Adobe Commerce

Introduction to Directives | Learn Angular

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
Joey Bronner

Joey Bronner

More from Medium

How to add a React app to a GitHub repository

How to set up a React Native app environment on macOS

5 reasons why React Native Development is perfect for startups

MVP Blog — Display an Activity Route On A Map