Setting up a React-Native Cross-Platform App

Including a universal .env file for your project

This is not a tutorial but a recipe, or workflow if you like, mainly for my own future use.
If you find any typo’s or errors I appreciate the comment.

Est. Implementation Time: 15 Mins.

Setting up React-Native on OSX

Update homebrew or install if you don’t have it

brew update

Most of you probably have node.js installed (if you dont: brew install node), so let’s make sure it’s updated:
(`node -v` in terminal will show the version installed)

brew upgrade node

Install watchman (watching hard drive for file changes)

brew install watchman

Install the react-native-cli

npm install -g react-native-cli

If you get a Error: Cannot find module ‘semver’ type these in terminal:
sudo rm -rf /usr/local/lib/node_modules
sudo rm -rf ~/.npm
brew uninstall --force node
brew install node

Woohoo! we’re ready to create a react-native project

Create a new react-native app

react-native init APPNAME

One of the most important libraries I use for development is eslint. The best code linting solution I’ve found so far. Let’s install it:

Install eslint globally

npm install -g eslint

Install the best rule-set config file for react-native by rallycoding

yarn add eslint-config-rallycoding --dev

After that we need to create a .eslintrc file in our project dir with this content, so that eslint knows what file to use:

{
    "extends": "rallycoding"
}

We’re done setting up, let’s start coding

I’m always building my react-native app as cross-platform for both Android and iOS. So let’s create a new app.js file with one single app component to be called from both index.XXX.js platform files:

One app.js file to rule them all

Create a new src directory.

Create a new app.js file in it

Add this content:

Now we need to make both platform specific files to read the app.js, so we import the app.js App component in both files. Note that adding a .js extension to imports in React is not needed

Change the APPNAME string to the app name you’ve used to init the react-native app

One more thing before we’re done, if you’re familiar with Laravel or other .env supporting frameworks, you’re going to enjoy react-native-config. In a nutsheel, you write your config vars like API location on a single file and import it to your js files when needed.

yarn add react-native-config
react-native link react-native-config

Create a new file .env in the root of your React Native app:

API_URL=https://myapi.com
GOOGLE_MAPS_API_KEY=abcdefgh

Then access variables defined there from your app:

import Config from 'react-native-config'
Config.API_URL  // 'https://myapi.com'
Config.GOOGLE_MAPS_API_KEY  // 'abcdefgh'

That’s it! You’re ready to move on to React-Native email authentication with Firebase

This article is constantly updating to meet best practices and libraries. Got something to add? Hit that comment button.

Follow me on Twitter to stay updated:

Ben Novak (@novakben) | Twitter

Was this helpful? Hit that heart!