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: