create-native-app

A basic React Native application boilerplate with Exponent.

3 years after

What you get out of the box with this package

  • React Native (0.41), lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
  • Exponent (SDK 14), a mobile app development tool that enables you to build high quality native iOS and Android applications using JavaScript and deploy them effortlessly.
  • Flow, adds static typing to JavaScript to improve developer productivity and code quality.
  • Airbnb JavaScript Style Guide, a mostly reasonable approach to JavaScript.
  • ESLint, provides a pluggable linting utility for JavaScript. Pre-configured to work with React and Airbnb JavaScript Style Guide.
  • Prettier, an opinionated JavaScript formatter.
  • Babel, a compiler for writing next generation JavaScript. Pre-configured to work with the Stage 0 preset + Decorators, Flow and ESLint.

Installation

Download the repository and yarn in the root directory.

Setup (if needed)

  • Homebrew, a package manager for macOS.
  • Node.js, a server-side JavaScript environment based on V8 engine.
  • Watchman, a file watching service.
  • Yarn (recommended), a dependency manager.
  • Exponent CLI, a command line interface for Exponent.
  • Flow and Prettier CLIs.

All of these packages are to be installed globally.

brew: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

node, watchman, yarn and flow: brew install node watchman yarn flow

exp and prettier: yarn global add exp prettier

Update

This repository is maintained and updated regularly with every new SDK release.

create-react-native-app

Consider using create-react-native-app for a better support.

Usage

Initialize (one-time)

  • exp signup if you don't have an Exponent account.
  • exp login sign in to your Exponent account.

Develop

  • yarn start starts a local server for your app. This command is always needed.
  • yarn run ios runs your app in the IOS simulator.
  • yarn start:android starts the Android simulator. Modify your simulator ID in package.json, which you can retrieve through VBoxManage list vms.
  • yarn run android runs your app in the Android simulator.

Debug

  • yarn run lint starts ESLint error checking.
  • yarn run flow starts Flow type checking.
  • yarn run format starts Prettier JavaScript formatting (Note: this will overwrite your existing files).

Testing

Refer to earlier commits for integration with Jest and Enzyme.

Deploy

  • exp build:ios builds a standalone IPA for your project, signed and ready for store submission.
  • exp build:android builds a standalone APK for your project, signed and ready for store submission.
  • exp publish publishes your app to the Exponent platform.

Common commands

  • yarn run outdated, checks and lists dependencies updates, for your project "and" globally.
  • yarn run brew, checks and installs Brew, Node, Watchman and Yarn updates.
  • yarn run clean, kills all DS_Stores.

Writing native code

Refer to the documentation.

Getting started

  • Go through the installation/setup process.
  • Update package.json with your project information (detailed configuration here).
  • Update exp.json with your project information (detailed configuration here).
  • Start working on your app in ./src.
  • Run your app with yarn start followed by yarn run ios.

GUI

As an alternative to the Exponent CLI, you can use the XDE. The XDE doesn't provide access to the build, lint, flow and format commands.

Running on simulators

GenyMotion configuration

Running on mobile devices

Back-end

Working with SublimeText

Install the following packages through Package Control:

Additional SublimeText packages for a better workspace

Working with Atom

Install the following packages:

Additional Atom packages for a better workspace

Related Repositories

create-react-app

create-react-app

Create React apps with no build configuration. ...

create-react-native-app

create-react-native-app

Create a React Native app on any OS with no build config. ...

react-native-webpack-starter-kit

react-native-webpack-starter-kit

:herb: Build your React Native app with Webpack and Babel ...

react-native-app-intro

react-native-app-intro

react-native-app-intro is a react native component implementing a parallax effec ...

react-native-node

react-native-node

Run a separate Node.js process behind a React Native app ...