CODEWITHSUNDEEP
iosfacebookreactjsreact-native
HelpMeStackOverflowMyOnlyHope
HelpMeStackOverflowMyOnlyHope

Reputation: 5012

How to run React-Native Examples?

I can't find any instructions on how to install and run one of the other Examples provided in 'https://github.com/facebook/react-native/tree/master/Examples' such as 'https://github.com/facebook/react-native/tree/master/Examples/Movies'.

The tutorial only tells you to do

react-native init AwesomeProject

which grabs 'https://github.com/facebook/react-native/tree/master/Examples/SampleApp'.

If I clone the entire 'react-native' repository, and then run

npm install
npm start

From the root folder (i.e. '/react-native'), and then open '/react-native/Examples/Movies/Movies.xcodeproj' in Xcode, and Run the project, it seems to build fine. The Simulator comes up, shows a "Movies" intro screen for the app, but then the red screen of death appears with a print out of:

:0

and Terminal, where 'npm start' is running at the root folder, prints out:

Error: EISDIR, read
    at Error (native)
[02:35:02] <START> request:/Examples/Movies/MoviesApp.includeRequire.runModule.bundle

Upvotes: 14

Views: 40013

Answers (9)

itsmcgh
itsmcgh

Reputation: 923

Just wanted to update this for people just trying to run an existing react-native project/app like me:

In Terminal:

  1. npm install
  2. npm start (should open a separate window to run react package manager or it may use the existing terminal window, if that is the case you will need to open a new terminal window to type the command for step 3)
  3. react-native run-ios/react-native run-android

**you may want to run npm update -g (while in the react native folder) to ensure all the npm packages are up to date before running npm install

Upvotes: 0

Kazuki Kimoto
Kazuki Kimoto

Reputation: 79

  1. brew update
  2. brew install node
  3. brew upgrade node (if u already installed)
  4. brew install watchman
  5. npm install -g react-native-cli
  6. react-native init [name ur app] --version 0.24.0(depends on which version u want to use, if it didn't work use below) (6). react-native init [name ur app] --verbose
  7. cd [name ur app]
  8. open .
  9. npm start
  10. atom . (if u installed atom)

Upvotes: 1

Timo
Timo

Reputation: 1

On Windows 10 I had to do adb shell am start -n com.facebook.react.movies/.MoviesActivity to get the examples running. (make sure ANDROID_SDK\platform-tools is in path or run command with absolute path)

So step by step I had to do:

cd react-native

./gradlew :Examples:Movies:android:app:installDebug

adb shell am start -n com.facebook.react.movies/.MoviesActivity

./packager/packager.sh

or

./gradlew :Examples:UIExplorer:android:app:installDebug

adb shell am start -n com.facebook.react.uiapp/.UIExplorerActivity

./packager/packager.sh

Upvotes: -1

Rohit Goyal
Rohit Goyal

Reputation: 1539

1) Open your terminal and cd to the specific example you want to run cd home/XYZ/react-native-master/Examples/UIExplorer

2) run npm install

3) run npm start

4) Open the example in Xcode and run it from there It should work fine.

PS: It was so simple but a lot of answers mislead me too.

Upvotes: 2

azibi
azibi

Reputation: 4407

Also, you can run the android version of the UIExplorer app by running the command:

./gradlew :Examples:UIExplorer:android:app:installDebug
./packager/packager.sh

or this:

./gradlew :Examples:Movies:android:app:installDebug
./packager/packager.sh

for the movies example (should be run on the react-native folder).

Also, you could run the gradle daemon to speed up the build time for Android.

Upvotes: 4

TGH
TGH

Reputation: 39258

Here is a step by step tutorial for creating a simple application.

1) First download the cli tool

2) npm run start

3) start the app in the xcode IOS simulator.

Tutorial here: http://www.syntaxsuccess.com/viewarticle/553844b55bbbb6000031f0f9

Upvotes: 0

Eric Vicenti
Eric Vicenti

Reputation: 1988

First, meet the requirements on the getting started guide

Then, check out the React Native repository and run the following inside it:

  1. npm install
  2. open Examples/Movies/Movies.xcodeproj

If you have errors compiling due to linking errors, removing the derived data may help. Quit Xcode, delete /Users/{you}/Library/Developer/Xcode/DerivedData, and re-open Xcode.

Upvotes: 6

Arnaud Babol
Arnaud Babol

Reputation: 326

It should work just by following the Getting Started Tutorial, except that you have to run npm install inside your react-native directory.

Then just run for example the Movie Project with Xcode.

If you want to "isolate" the MovieProject or another react-native example project, the easy way is to init a new react native app (react-native init MyAppName) and just copy the JS files from the example project (in the example below the Movie Project) into the new app folder.

And then don't forget to edit your iOS/AppDelegate.m file.

You have to edit 2 lines:

jsCodeLocation = [NSURL URLWithString:@"http:/localhost:8081/index.ios.bundle"];

By:

jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/MoviesApp.bundle"];

AND

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                  moduleName:@"MyAppName"
                                               launchOptions:launchOptions];

By:

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                  moduleName:@"MoviesApp"
                                               launchOptions:launchOptions];

Upvotes: 21

Niccol&#242; Passolunghi
Niccol&#242; Passolunghi

Reputation: 6024

You have to install node.js in your Terminal with

brew install node

ReactNative use Node.js to build the Javascript code inside the project.

Then you need Watchman, a file watcher from Facebook with

brew install watchman

React Native use Watchman to rebuild your code when there's a change in it.

The final thing is to install and run node with a Terminal window in the react-native folder.

npm install
npm start

Now you can open a project from the react-native/Examples folder in Xcode, then build and run it.

Upvotes: 3

Related Questions