expo/create-react-native-app

Create React Native apps that run on iOS, Android, and web

Create React Native App

The fastest way to create React Native apps

npx create-react-native-app

Once you're up and running with Create React Native App, visit the tutorial on reactnative.dev and the tutorial on expo.dev for more information on building mobile apps with React.

Usage

• npx create-react-native-app Create a new native React app.
• npx crna Alias for npx create-react-native-app.
• npm run ios -- (npx expo run:ios) Build the iOS App (requires a MacOS computer).
• npm run android -- (npx expo run:android) Build the Android App.
• npm run web -- (npx expo start --web) Run the website in your browser.

Templates

By default you create a bare workflow React project with support for iOS, Android, and web. The project comes preconfigured with support for Expo Modules, an API writing native modules using Swift and Kotlin, and this also makes it possible to use any library in the Expo SDK.

You can opt to use an example project instead by selecting the "Templates from ..." option. Custom templates can be used with --template <Example Name or GitHub URL> option.

• Use an example: npx create-react-native-app -t with-typescript
• Use a custom template: npx create-react-native-app --template https://github.com/someone/my-react-starter -- Only works with GitHub repos on the master branch.
• All examples can be modified in the expo/examples repo.

Sections

• Usage with Expo Go App
• Support and Contact
• FAQs
• Contributing

Usage with Expo Go App

Expo Go enables you to work with all of the Components and APIs in react-native, as well as the JavaScript APIs that the are bundled with the Expo app.

• Download the "Expo Go" app from the Play Store or App Store.
• Start your project with Expo CLI: npm start
• Open the project by scanning the QR code in the terminal.

Support and Contact

If you're having issues with Create React Native App, please make sure:

• The issue is not covered in the Expo Docs
• There is not already an open issue for your particular problem

If you've checked the documentation and currently open issues, please either open a new GitHub issue or ask a question on Expo Community Discord.

Contributing

Refer to the Contributing guide for more information.

Attribution

The examples feature was inspired by the templates system of create-next-app by the Vercel team.

Related

CRNA is focused on being the fastest way to bootstrap a React Native app without worrying about the native platforms or bundlers required for developing and shipping apps. Other tools provide both an init script (which is slower) and a suite of other tools that can be used for interacting with the project. CRNA is meant to be used with any of the following tools:

• Expo CLI by Expo team
• Ignite CLI by Infinite Red
• React Native Community CLI by members of the React Native community

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Evan Bacon 💻 📖 🎨 🚧 👀	Brent Vatne 💻 📖 👀	Hamza Halilovic 💻	Cedric van Putten 💻	Ville Immonen 💻 👀	Frieder Bluemle 💻	Kim Brandwijk 💻
Nirav 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

create-react-native-app's Issues

`yarnpkg add --dev --exact react-native-scripts` failed

I get this error when i want to create a new app.

Creating a new React Native app in /Users/williamschrauwen/ReactNative/willappreciate.

Installing packages. This might take a couple minutes.
Installing react-native-scripts...

yarn add v0.21.3
info No lockfile found.
[1/4] 🔍 Resolving packages...
warning react-native-scripts > xdl > [email protected]: use uuid module instead
warning react-native-scripts > xdl > @exponent/ngrok > [email protected]: use uuid module instead
warning react-native-scripts > xdl > auth0-js > xtend > [email protected]:
[2/4] 🚚 Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=6".
error Found incompatible module
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
yarnpkg add --dev --exact react-native-scripts failed

Remove/fix npm/yarn warnings on init

xdl:

warning react-native-scripts > xdl > [email protected]: use uuid module instead
warning react-native-scripts > xdl > ngrok > [email protected]: use uuid module instead

react-native (I think the second is also from RN transitively, but I haven't investigated):

warning react-native > xcode > [email protected]: use uuid module instead
warning "[email protected]" has incorrect peer dependency "react@^15.4.2".

Flesh out index.js to include live reloading info, dev menu, possibly other info

cc @mkonicek

Clean up exiting the start script

This is ugly in every way imaginable:

^C
Stopping packager...


130 adam@iceblade ~/testcrna
$ Packager stopped.

Need to return a 0 exit code if the user initiated the shutdown, and need to print 'Packager stopped.' before the new prompt is printed.

Support alternate project templates

It would be nice to eventually have an option to substitute a different project template. I don't think this should be in a first (or second even) release, but wanted to put the idea down somewhere.

Hot Reloading with multiple app instances

If I have both simulator and a device opened on the same app, it won't update both if at least one of them has "Hot Reloading" enabled.

1. Open app on simulator
2. Open app on device (scanning qrcode)
3. Disable hot reloading on all of them
4. Enable live reload on all of them
5. Make changes
6. All devices will update
7. Enable hot reloading on one of them
8. Make changes
9. Only this one will update

Infinite error loop when trying to open a non-existing app from clipboard

Not sure if this should go here or somewhere else but on the iOS mobile app when I try to open an app from clipboard that doesn't exist I get an error which is expected because it doesn't exist, but my only option is to Try Again. The only way to exit this screen is to close the app.

Flesh out READMEs for both packages

Right now the npm pages are incredibly non-descript.

Resolve non-react-native npm install warnings

warning react-native-scripts > xdl > [email protected]: use uuid module instead
warning react-native-scripts > match-require > [email protected]: use uuid module instead
warning react-native-scripts > xdl > @exponent/ngrok > [email protected]: use uuid module instead
warning react-native-scripts > xdl > auth0-js > xtend > [email protected]:

cc @jesseruder @skevy

Figure out Font.loadAsync for ejected projects

This is going to cause issues for people who build non-trivial things with CRNA.

Try to move upstream ejected HelloWorld template to a single index.js entry point

The HelloWorld template project in react-native/local-cli currently assumes that there will be two entry points: index.ios.js and index.android.js. CRNA projects start with a single main.js (although this is fungible and could easily be called index.js), which breaks on iOS (haven't tested Android) once ejected to a regular RN project.

For now I'm implementing some dirty hacks around this, but would like to make the upstream template project(s) compatible with CRNA's eject in the near term. I think this will just require a PR that I don't have bandwidth to write and push through right now.

EDIT: this wouldn't just require unifying the files, it looks like test and example code (and maybe docs?) assume that these files will be separate.

good first time issues

Hey new to this repo and the react native ecosystem. what's the best way to get started?

Decide on package names and procure npm names

How to get Debug in Chrome Developer tools?

I am able to get my app up and running but how to get the Debug in Chrome Developer tools?
The only option that seems to work on the device is two finger touch and then "reload" but there seems to be no option any more for remote debug....?

Fetch failed with status code 403

When create-react-native-app my-project, after a while, I get:
npm ERR! fetch failed https://github.com/exponent/react-native-maps/archive/v0.12.2-exp.1.tar.gz

Linux 4.4.0-66-generic
node v7.7.2
npm v4.1.2

I don't know if it's a npm problem or create-react-native-app issue.

Diagnose packager exit failure

Sometimes the port held by the manifest server or the React Native packager doesn't get released on exit. I suspect that this may be due to me being abusive in my dev environment, but it would be good for someone else to take a look at the exit hooks to see if there's a better way to do this.

https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/src/util/packager.js#L52:L69

The eject code rewriting is fragile

It breaks on this gist:

https://gist.github.com/anonymous/0e8ec441c797a03e5265c9fd1f53d1c6

Need to diagnose and do the AST traversal in a less fragile manner.

Warm packager cache on startup

If it's a fresh project, warm both.

Figure out a way to save which platform was last requested. On subsequent starts, only warm the cache with the last requested platform.

Create ISSUE_TEMPLATE.md

I cant' start npm run ios

I'am was very pleased at create react native-app
But I can't run npm run ios, instead got message like "osascript -e tell app "System Events" to count processes whose name is "Simulator"
IOS simulator was opened, But they didn't give me screen of react native app, but can see normal IOS Screen.
what's the problem?

No `npm run android`

The ability to run locally is super important. We already have npm run ios, but we need the equivalent for Android!

Setup CI?

let's see if @skevy's slack integration works

Support ejecting to root views (no exponent dependency)

Find way to disable warning about not using the Exponent fork of RN

2/9/2017, 9:24:18 PM: Warning: Not using the Exponent fork of react-native. See https://docs.getexponent.com/.

Needs a branch or some other change here:

https://github.com/exponent/xdl/blob/master/src/project/Doctor.js#L176

Environment variables

Is there support for adding in environment variables like create-react-app allows? I tried it the way I usually do and it didn't work, but not sure if there is something in expo that allows it.

QR code won't scan

After creating an app and running yarn start the QR code gives no feedback when scanning on my iPhone.

Support ejecting to an ExponentView

issue running on ubuntu 16.04 (watchman)

OS Info:

± lsb_release -a
No LSB modules are available.
Distributor ID: neon
Description:    KDE neon LTS User Edition 5.8
Release:        16.04
Codename:       xenial

Run:

$ create-react-native-app my-app
$ cd my-app/
$ yarn start

Output:

± yarn start
yarn start v0.21.3
$ react-native-scripts start
Starting packager...
***ERROR STARTING PACKAGER***
Starting React Native packager...
Scanning 777 folders for symlinks in /home/cj/apps/react-native/my-app/node_modules (4ms)

Running packager on port 19001

Looking for JS files in
   /home/cj/apps/react-native/my-app



React packager ready.



jest-haste-map: Watchman crawl failed. Retrying once with node crawler.
  Usually this happens when watchman isn't running. Create an empty `.watchmanconfig` file in your project's root folder or initialize a git or hg repository in your project.
  Error: A non-recoverable condition has triggered.  Watchman needs your help!
The triggering condition was at timestamp=1489464468: inotify-add-watch(/home/cj/apps/react-native/my-app) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl
All requests will continue to fail with this message until you resolve
the underlying problem.  You will find more information on fixing this at
https://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch


***ERROR STARTING PACKAGER***
 ERROR  A non-recoverable condition has triggered.  Watchman needs your help!
The triggering condition was at timestamp=1489464468: inotify-add-watch(/home/cj/apps/react-native/my-app) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl
All requests will continue to fail with this message until you resolve
the underlying problem.  You will find more information on fixing this at
https://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch



{"watchmanResponse":{"version":"4.7.0","error":"A non-recoverable condition has triggered.  Watchman needs your help!\nThe triggering condition was at timestamp=1489464468: inotify-add-watch(/home/cj/apps/react-native/my-app) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl\nAll requests will continue to fail with this message until you resolve\nthe underlying problem.  You will find more information on fixing this at\nhttps://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch\n"}}

***ERROR STARTING PACKAGER***

Error: A non-recoverable condition has triggered.  Watchman needs your help!
The triggering condition was at timestamp=1489464468: inotify-add-watch(/home/cj/apps/react-native/my-app) -> The user limit on the total number of inotify watches was reached; increase the fs.inotify.max_user_watches sysctl
All requests will continue to fail with this message until you resolve
the underlying problem.  You will find more information on fixing this at
https://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch

    at ChildProcess.<anonymous> (/home/cj/apps/react-native/my-app/node_modules/fb-watchman/index.js:207:21)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:877:16)
    at Socket.<anonymous> (internal/child_process.js:334:11)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Pipe._handle.close [as _onclose] (net.js:498:12)

Done in 12.14s.

Fix .babelrc on eject

per @brentvatne the Exponent preset will mess with some RN libs, so we need to change the preset (and corresponding dev dep I think) when we eject.

Allow template project to work with vanilla react native dependency

Currently the template project is init'd with the Exponent fork of react-native:

https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/src/scripts/init.js#L14

Ideally this would use the plain ol' react-native dependency from npm.

cc @ide

Document important items

I'm going to track a checklist here of documentation items for the README, template project README, and other places. By no means exhaustive.

• JavaScript vs. Native Code, how to get to native code
• Dependency upgrade steps
• Using ngrok or another tunneler for WAN live reloading
• Debugging a crna project (chrome devtools?)
• watchman troubleshooting steps, link to watchman docs
• Using --scripts-version & npm link for development

Write template project's README

Remove jest-preset-expo on eject

Idea: check for unstaged changes in project and warn before ejecting

Update xdl dependency to version with full offline & anonymous support

Suppress `yarnpkg is not a command` when only npm is installed

Inheriting stdout is how CRNA shows init status to the developer, but maybe it should be buffered until we're sure that yarn is installed for the "attempt installing with yarn first" version. Or maybe it's OK to just show this -- there's a lot of other output users see immediately after.

Warning error running install script for optional dependency

Hey, folks! I couldn't install it neither with Node v6.6.0 nor v7.7.1. Here's the log:

Creating a new React Native app in /home/vinicius/Documents/code/my-app.

Installing packages. This might take a couple minutes.
Installing react-native-scripts...

yarn add v0.20.3
info No lockfile found.
[1/4] Resolving packages...
warning react-native-scripts > xdl > [email protected]: use uuid module instead
warning react-native-scripts > xdl > @exponent/ngrok > [email protected]: use uuid module instead
warning react-native-scripts > xdl > auth0-js > xtend > [email protected]: 
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
[1/5] ⠄ @exponent/ngrok: ngrok - downloading binary https://bin.equinox.io/c/6raCnPaTf2c/ngrok-beta-linux-amd64.tgz ...
[-/5] ⠄ waiting...
[3/5] ⠄ ref: '-Goutput_dir=.' ]
[4/5] ⠄ runas: '-Goutput_dir=.' ]
warning Error running install script for optional dependency: "/home/vinicius/Documents/code/my-app/node_modules/runas: Command failed.\nExit code: 1\nCommand: sh\nArguments: -c node-gyp rebuild\nDirectory: /home/vinicius/Documents/code/my-app/node_modules/runas\nOutput:\ngyp info it worked if it ends with ok\ngyp info using [email protected]\ngyp info using [email protected] | linux | x64\ngyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR\ngyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR\ngyp info spawn /usr/bin/python2\ngyp info spawn args [ '/usr/share/yarn/node_modules/node-gyp/gyp/gyp_main.py',\ngyp info spawn args   'binding.gyp',\ngyp info spawn args   '-f',\ngyp info spawn args   'make',\ngyp info spawn args   '-I',\ngyp info spawn args   '/home/vinicius/Documents/code/my-app/node_modules/runas/build/config.gypi',\ngyp info spawn args   '-I',\ngyp info spawn args   '/usr/share/yarn/node_modules/node-gyp/addon.gypi',\ngyp info spawn args   '-I',\ngyp info spawn args   '/home/vinicius/.node-gyp/7.7.1/include/node/common.gypi',\ngyp info spawn args   '-Dlibrary=shared_library',\ngyp info spawn args   '-Dvisibility=default',\ngyp info spawn args   '-Dnode_root_dir=/home/vinicius/.node-gyp/7.7.1',\ngyp info spawn args   '-Dnode_gyp_dir=/usr/share/yarn/node_modules/node-gyp',\ngyp info spawn args   '-Dnode_lib_file=node.lib',\ngyp info spawn args   '-Dmodule_root_dir=/home/vinicius/Documents/code/my-app/node_modules/runas',\ngyp info spawn args   '--depth=.',\ngyp info spawn args   '--no-parallel',\ngyp info spawn args   '--generator-output',\ngyp info spawn args   'build',\ngyp info spawn args   '-Goutput_dir=.' ]\ngyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR\ngyp info spawn make\ngyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]\nmake: Entering directory '/home/vinicius/Documents/code/my-app/node_modules/runas/build'\n  CXX(target) Release/obj.target/runas/src/main.o\nmake: g++: Command not found\nmake: *** [Release/obj.target/runas/src/main.o] Error 127\nrunas.target.mk:96: recipe for target 'Release/obj.target/runas/src/main.o' failed\nmake: Leaving directory '/home/vinicius/Documents/code/my-app/node_modules/runas/build'\ngyp ERR! build error \ngyp ERR! stack Error: `make` failed with exit code: 2\ngyp ERR! stack     at ChildProcess.onExit (/usr/share/yarn/node_modules/node-gyp/lib/build.js:276:23)\ngyp ERR! stack     at emitTwo (event[1/5] ⡀ @exponent/ngrok: ngrok - downloading binary https://bin.equinox.io/c/6raCnPaTf2c/ngrok-beta-linux-amd64.tgz ...
[-/5] ⡀ waiting...
[3/5] ⡀ ref: '-Goutput_dir=.' ]
[4/5] ⡀ runas: ERR! not ok
error /home/vinicius/Documents/code/my-app/node_modules/ref: Command failed.
Exit code: 1
Command: sh
Arguments: -c node-gyp rebuild
Directory: /home/vinicius/Documents/code/my-app/node_modules/ref
Output:
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | linux | x64
gyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR
gyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR
gyp info spawn /usr/bin/python2
gyp info spawn args [ '/usr/share/yarn/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/home/vinicius/Documents/code/my-app/node_modules/ref/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/usr/share/yarn/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/home/vinicius/.node-gyp/7.7.1/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/home/vinicius/.node-gyp/7.7.1',
gyp info spawn args   '-Dnode_gyp_dir=/usr/share/yarn/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=node.lib',
gyp info spawn args   '-Dmodule_root_dir=/home/vinicius/Documents/code/my-app/node_modules/ref',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.' ]
gyp WARN download NVM_NODEJS_ORG_MIRROR is deprecated and will be removed in node-gyp v4, please use NODEJS_ORG_MIRROR
gyp info spawn make
gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
make: Entering directory '/home/vinicius/Documents/code/my-app/node_modules/ref/build'
  CXX(target) Release/obj.target/binding/src/binding.o
make: g++: Command not found
binding.target.mk:94: recipe for target 'Release/obj.target/binding/src/binding.o' failed
make: Leaving directory '/home/vinicius/Documents/code/my-app/node_modules/ref/build'
make: *** [Release/obj.target/binding/src/binding.o] Error 127
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/share/yarn/node_modules/node-gyp/lib/build.js:276:23)
gyp ERR! stack     at emitTwo (events.js:106:13)
gyp ERR! stack     at ChildProcess.emit (events.js:194:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12)
gyp ERR! System Linux 4.4.0-21-generic
gyp ERR! command "/home/vinicius/.nvm/versions/node/v7.7.1/bin/node" "/usr/share/yarn/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /home/vinicius/Documents/code/my-app/node_modules/ref
gyp ERR! node -v v7.7.1
gyp ERR! node-gyp -v v3.5.0
gyp ERR! not ok
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
`yarnpkg add --dev --exact react-native-scripts` failed

The "are you using Exponent" check picks up Exponent.registerRootComponent

Probably need to rewrite this check using the AST and excluding any imports that are only used for registerRootComponent. I'm guessing that it will be possible to cargo cult some of the jscodeshift work I already did.

react-native-elements - vector icons

It seems like create-react-native app has some issues with "react-native-elements". I've tried 2 scenarios which both produces the same error:

Test 1

• created a new project with create-react-native-app
• npm i react-native-elements --save
• Added a react-native-elements button in App.js
• npm run ios

Test 2

• created a new project with create-react-native-app
• npm i react-native-vector-icons --save && react-native link react-native-vector-icons
• npm i react-native-elements --save
• Added a react-native-elements button in App.js
• npm run ios

In both test the simulator throws this warning. I've tried to run the commands described in the error message, but with no luck :(

Fix short cd output

I broke the shortened cd your-project output at some point recently. Need to fix.

Fix live reloading for multiple devices at the same time

Right now, only the last device to connect to the packager will live reload in most cases. Because live reloading uses polling (IIRC), this doesn't make that much sense. Needs investigation, an RCA, and a fix.

Create page specifying which Exponent APIs are available to CRNA apps

cc @nikki93

Write CONTRIBUTING, add LICENSE

Print regular `start` info when running `run ios` as well

We should still display a QR code and URL, along with information about downloading the app to a physical device.

Test and improve Windows support

In theory, everything has been set up to work cross platform, but I haven't run it on Windows yet and support may be flaky or problematic.

Using AppVeyor or something similar would probably be good too (cc #2).

Update/remove the `npm run build` text

Scripts should be rewritten after ejecting to ExponentView

Currently the scripts will continue to use react-native-scripts, which won't work correctly with the detached client.

Support running on a connected Android device

Setup template project's tests to actually test something

It might be good to improve tests in the template project so that they actually serve as an example to a new user how to test their app/components/etc. Right now there's just a no-op test.