I want to run my React Native app in the iOS emulator. Here is what I done so far:
I installed XCode, along with its command line tools, and can bring up the emulator without issue.
I created an empty React Native app using the Expo CLI, per the instructions here. https://facebook.github.io/react-native/docs/getting-started. I am running on Node v10.0.0 on a Mac.
Afterwards I install all the necessary dependencies.
I then run "sudo npm run ios". This fires up the Metro Bundler as well as the iOS simulator. The Simulator loads up after about 5 minutes of waiting, but my app does not start up.
What am I missing here?
I should note that I prefer to stick with Expo, so I'd prefer not to have to eject.
Related
After opening my React Native project in Expo, I get a "New update available, downloading..." infinite loading on the Android emulator.
I tried restarting the server and restarting the emulator, expecting to see the actual content of my React Native application.
I managed to solve this problem by following these steps:
Stop the server.
Uninstall Expo on Android emulator.
Run npm start.
Reopen the application on Android emulator.
I have created one react-native app using expo and atom editor. It's running fine in android device and iOS simulator but with the help of expo. What I want is to generate Apk(debug) so that I can directly run on device. How can I do it ? I followed this(Dmitry Mugtasimov's answer). should I run all those command inside project folder ? Also I don't find index.js file inside my project folder. Also if someone know how to run on iOS simulator by creating app like file(don't know what is that in Ios because from android background). Please help, thanks
Since you have used Expo to develop your react-native app you can build the android app by going to the project folder and running the bellow command in the terminal
expo build:android
The building process will take around 5-10 minutes. When your build is done, expo build:status will give you your .apk file url. If not, it will say your build is still in progress and to try again later.
Also to build the iOS app you can run,
expo build:ios
To build the iOS standalone app you will need to have an Apple Developer account, but for Android standalone app you don't need a Google Play Developer account.
For the above commands to work you need to have expo-cli installed, For this you can run the bellow command,
npm install -g expo-cli
More Info: https://docs.expo.io/versions/latest/distribution/building-standalone-apps/
If you don't have an Apple Developer Account. You can build the iOS
standalone simulator build using the command,
expo build:ios -t simulator
And then wait for build to finish then download and unpack YourAppName.tar.gz. Then, start the iOS simulator and run xcrun simctl install booted YourAppName.app to run the .ica file.
More info: Expo / React-Native, Is it there a way to test-run standalone iOS apps on a device/simulator?
I have been using react native for a couple months now. However, I really don't know the difference between the starting commands. Currently, I use npm on my project. However, I know yarn can be used. These are the commands I really don't understand the difference with:
exp start, exp ios, exp android
react-native run-ios, react-native run-android
npm start, npm ios, npm android
Which ones are better in what cases and why? Currently, I am using exp but others use react-native run-ios. I used to use npm ios.
Thank you in advance.
It might help to have an overview of the React Native architecture.
In react native, when you write, say, <View/>, it gets sent across the bridge to the native code and dynamically translated into UIView on iOS or android.view.View on Android. Every basic component in the react-native package has been implemented this way. If you want additional native functionality on both platforms, say a library which uses native map components, you will end up having to include the native libraries separately into your Android build.gradle and your iOS .xcodeproj.
The exp CLI is used to start apps built with the Expo SDK. Expo is essentially a prebuilt app with a certain set of native components already included for convenience; all you supply is your JSX; thus the recommendation to "eject" to a regular react native app if you need to use any other libraries.
react-native run-ios and run-android builds the native .app or .apk using the iOS or Android toolchains, starts the Metro Bundler, which minifies and serves the JSX and other assets such as images over to your device in debug mode (You might see something like Loading from localhost:8081).
On Android, it starts the adb server to push the APK with all the native libraries included onto your device, if you have USB debugging enabled. run-ios does the same with the .app; if you install to a simulator it has automatically configured AppDelegate.m to communicate with localhost:8081, whereas live reload over USB has to be configured manually on a physical device.
react-native start simply starts the Metro bundler, which is useful if you already have the app installed.
Commands that begin with npm are defined as scripts in your package.json file. As of RN 0.57, npm start simply calls node node_modules/react-native/local-cli/cli.js start; which is the same as running react-native start; according to the docs react-native-cli installed separately will call the locally installed version of the CLI in node_modules.
Env:
Mac OS X
nodejs 8.9.1
Xcode installed
using boilerplate generated by https://github.com/react-community/create-react-native-app
Symptom:
React Native stuck on Loading dependency graph, done and when go to localhost:8081, I see React Native packager is running.
Also the command line after I did npm start what I got is Loading dependency graph, done. and just stay there, even after I waited for almost 5min.
Actually I found the answer myself.
There is actually nothing wrong. I forgot to start the React Native in the simulator! lol Silly right?
So basically let say if you want to start the iOS simulator in a MacOS, you can just do react-native run-ios --simulator="iPhone 5s" in your project root. Then boom! your project started!
Note that React Native can't really run in the browser, it has to be running inside a phone simulator either iOS or Android.
See official doc for more https://facebook.github.io/react-native/docs/running-on-simulator-ios.html
Have fun!
I have a problem when running react-native run-ios on my project.
The IOS emulator launch well.
Then the application start (react-native white splash screen) and immediately after that, it return me to the Iphone home screen.
If I Cmd-Shift-H (with pressing H two times) I saw the app in the background (still with the react-native white splash screen).
When I click on it, it return me to the home screen again.
If I launch the Xcode project and run the app, it work fine and I can navigate in my application.
I've had some troubles with my app before, the IOS version was 'abandoned' and I've installed a lot of modules and changed the name of the project in the mean time, before trying to make it work on IOS.
Then I've decided to create a new project with react-native init myNewProject (because I couldn't figured out how to fix the IOS, something with a workspace not configured) and copy paste my old src and index.ios/android.js inside.
So now Android is still working and IOS is only working if I launch the app from Xcode.
I've tried to reset the emulator but it don't change anything.
I don't have any logs about app crash or something.
The Android app version is working fine.
Any idea ?
Logs
I've put the device logs after running react-native run-ios on a gist
https://gist.github.com/ansmonjol/f6fa1e71a20b944bf67429c57d081165
Additional Information
React Native version: 0.35
Platform: IOS
Operating System: macOS El capitan
Xcode: Version 8.0
I ran into this problem, and solve it:
In my case i install third-party native component in my project and link it using command react-native link <component-name>. Than i have a problem about you wrote:
Running project by Xcode - works fine. Bundling start, after loading dependency graph.
But runnig project by react-native run-ios app hide immediately and bundling not started after loading dependency graph. And not any errors happened.
I tried reinstall all, clean npm cache, react-native upgrade, delete build folder, delete derived data... nothing helped.
I found one way that helped me:
I remove that problem library not manyally from Xcode, but from terminal using command react-native unlink <component-name>. Its way to resolve this problem for me, maybe for you too.
Sorry for my english.