Laptop Setup and Vim Configuration for React Native

React Native is a fast and efficient way to build iOS and Android apps.

Even so, React Native has many parts to be learned, some optional. Reducing the early decisions to make can help build momentum and confidence. This article describes a MacOS laptop setup and Vim configuration for React Native to help folks get to working software faster.

Follow these decisions

Yes, from the beginning:

Soon, very soon:

Not now, maybe later:

Not necessary:

Install dependencies

Install dependencies using Homebrew and NPM:

brew update
brew install node
brew install watchman
brew cask install expo-xde
brew upgrade
brew cleanup
brew cask cleanup
npm install prettier --global

Develop using Expo XDE

Expo is a set of free tools that allows us to work on JavaScript-only React Native apps without installing XCode or Android Studio.

Expo XDE was previously installed via Homebrew Cask. Open it now.

Create an account or sign in. Create a new project from their dropdown menu. This will download the appropriate files and build the project.

Test the app on your phone

Download the Expo Client iPhone app. Open it.

From within the Expo Client app, scan the project's QR code in the Expo XDE.

Expo Client reloads the app on your phone!

Configure your text editor

For Vim, install these plugins:

Plug 'mxw/vim-jsx'
Plug 'pangloss/vim-javascript'
Plug 'sbdchd/neoformat'

Configure Neoformat and Prettier:

" Auto-format on save
augroup fmt
  autocmd!
  autocmd BufWritePre *.js,*.jsx Neoformat prettier
augroup END

Edit the codebase in a text editor

Edit a file such as screens/HomeScreen.js in Vim. Save the file.

Prettier re-formats it on save! (no linting necessary)

Expo Client reloads the app on your phone!