Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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
like image 683
HelpMeStackOverflowMyOnlyHope Avatar asked Mar 29 '15 08:03

HelpMeStackOverflowMyOnlyHope


People also ask

How do I run React Native program?

Running your React Native application Install the Expo Go app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo Go app to scan the QR code from your terminal to open your project. On iOS, use the built-in QR code scanner of the default iOS Camera app.

Can I run React Native in browser?

Can React Native be used for web and mobile? Yes! With React Native for Web, developers can write a single React Native application that can run natively on Android and iOS, as well as on a web browser using standard web technologies.

How do I run React Native iOS app?

If you wish to run your app on an iPhone SE (2nd generation), run npx react-native run-ios --simulator='iPhone SE (2nd generation)' . The device names correspond to the list of devices available in Xcode. You can check your available devices by running xcrun simctl list devices from the console.


4 Answers

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];

like image 161
Arnaud Babol Avatar answered Oct 14 '22 21:10

Arnaud Babol


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.

like image 25
Eric Vicenti Avatar answered Oct 14 '22 21:10

Eric Vicenti


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.

like image 4
azibi Avatar answered Oct 14 '22 22:10

azibi


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.

like image 3
Niccolò Passolunghi Avatar answered Oct 14 '22 22:10

Niccolò Passolunghi