Start a React Native Project

Why build iOS and Android apps with React Native?

This article describes a macOS setup and Vim configuration for React Native with Expo and Prettier.

Set up

Install dependencies using Homebrew and NPM:

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

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

Develop

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

Create a new project from their dropdown menu. This will download the appropriate files and build the project.

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!

Edit a file such as screens/HomeScreen.js in Vim. Save the file. Prettier re-formats it on save (no linting necessary) and Expo Client reloads the app on your phone.