how-to-create-a-react-native-project.md

How to Create a React Native Project

This page will help you install and build your first React Native app. First of all you have to complete these two steps.

• How to install Xcode?
• How to install Android Studio?

The React Native CLI

Node comes with npm, which lets you install the React Native command line interface.

Run the following command in a Command Prompt or shell:

npm install -g react-native-cli

If you get an error like Cannot find module 'npmlog', try installing npm directly: curl -0 -L https://npmjs.org/install.sh | sudo sh.

Creating a new application

Use the React Native command line interface to generate a new React Native project called "AwesomeProject":

react-native init AwesomeProject

This is not necessary if you are integrating React Native into an existing application, if you "ejected" from Create React Native App, or if you're adding Android support to an existing React Native project (see Platform Specific Code). You can also use a third-party CLI to init your React Native app, such as Ignite CLI.

[Optional] Using a specific version

If you want to start a new project with a specific React Native version, you can use the --version argument:

react-native init AwesomeProject --version X.XX.X

react-native init AwesomeProject --version react-native@next

Running your React Native application - iOS

Run react-native run-ios inside your React Native project folder:

cd AwesomeProject
react-native run-ios

You should see your new app running in the iOS Simulator shortly.

react-native run-ios is just one way to run your app. You can also run it directly from within Xcode.

If you can't get this to work, see the Troubleshooting page.

Running on a device

The above command will automatically run your app on the iOS Simulator by default. If you want to run the app on an actual physical iOS device, please follow the instructions here.

Modifying your app

Now that you have successfully run the app, let's modify it.

• Open App.js in your text editor of choice and edit some lines.
• Hit ⌘R in your iOS Simulator to reload the app and see your changes!

Running your React Native application - Android

Run react-native run-android inside your React Native project folder:

cd AwesomeProject
react-native run-android

If everything is set up correctly, you should see your new app running in your Android emulator shortly.

react-native run-android is just one way to run your app - you can also run it directly from within Android Studio.

If you can't get this to work, see the Troubleshooting page.

Modifying your app

Now that you have successfully run the app, let's modify it.

• Open App.js in your text editor of choice and edit some lines.
• Press the R key twice or select Reload from the Developer Menu (⌘M) to see your changes!

That's it!

Congratulations! You've successfully run and modified your first React Native app.