React Native Run Ios leads to black screen - react-native

Hi I'm trying to use the react-native run-ios command, this opens up the Simulator with the tab on the top reading "iphone 6 10.3 (14E8301)" but the screen is completely black.
So far the only commands that I have run are:
react-native init myapp
cd myapp
react-native run-ios
Am I missing something? I'm following a udemy tutorial and this is what the instructor has done but it is working for him

It is usually happens when the first time you run the Simulator. You need to manually click the device type.
Hardware => Device => iOS 10.3 => iPhone 6
You can change iPhone 6 to the device you want.

Related

"npx react-native run-ios" is picking non existing simulator

As per https://reactnative.dev/docs/environment-setup, I'm trying to run sample project on iOS simulator
When I ran command npx react-native run-ios getting error
info Found Xcode workspace "AwesomeProject.xcworkspace"
error No simulator available with name "iPhone 12".
From where does it picking iPhone 12, I don't have that simulator in first place
Open Xcode and check which simulators are installed or list available simulators in terminal with xcrun simctl list devices.
Then define a simulator you wanna use:
npx react-native run-ios --simulator="iPhone 13"
If you're coming from React Native, follow these:
Accept XCode licence aggreement:
sudo xcodebuild -license
Run simulator using iPhone 14, if you haven't added old iPhones:
npx react-native run-ios --simulator="iPhone 14"
Make sure you have chosen command line tools on XCode:
Xcode => Preferences => Locations
React Native will pick a particular device by default, depending on its version.
As of version 0.67.2, for example, it'll try to boot an iPhone 13 by default regardless of it existing locally or not.
You can open Xcode select ios folder.
Choose the simulator here

react-native run-ios doesn't run the app, but building it from xcode works

I'm making a react-native app and have a problem.
When I run the command: react-native run-ios, the build succeeds, and simulator starts, but the app won't start and my console does not build js bundle.
but when I build the sourc /ios/[projectName].xcodeproj from XCode, It works fine.
Can anyone help figure out why and how to fix this?
In my case, making sure I didn't have any simulators with the same name helped.
I recently updated to Xcode 10.2 and have simulators for iOS 12.1 and 12.2 but they have the same name in Xcode > Window > Devices and Simulators.
UPDATE: You can specify the iOS version for the simulator
react-native run-ios --simulator 'iPhone 6s (10.2)' and it will attempt to find the correct simulator if there are multiple found.
https://github.com/facebook/react-native/issues/19069#issuecomment-385545599
OR rename your simulators in xcode to whatever you want
Right click and rename one of them so the names are unique, then react-native run-ios started working.
Environment:
Xcode: 10.2.1
React Native: 0.59.9

Create React Native App Change iOS Device

I am trying to launch a react native app, created with create-react-native-app, however I do not want it to launch in the iPhone 6.
How can I change the device? All docs I can find give advice on apps created with react-native init.
npm run ios -- --simulator="iPhone X" does not seem to work
You can specify a device by using
react-native run-ios --simulator="iPhone 5s"
Just enter the device ID you want and all should be merry. Worth noting there is no way to currently set/change the default.

Running multiple iOS simulators with React Native?

I want to run the app in multiple IOS simulators with React Native so will be able to compare the iPhone version vs the iPad version
I see there is some one already did it
https://ashleyd.ws/running-multiple-ios-simulators-with-react-native/
but unfortunate he did not mention how he did it
Using MacOs Terminal, launch first simulator:
cd /Applications/Xcode.app/Contents/Developer/Applications
open -n Simulator.app
cd <your react native project>
react-native run-ios
Now, launch 2nd simulator:
cd /Applications/Xcode.app/Contents/Developer/Applications
open -n Simulator.app
Click "Ok" when you get "Unable to boot device in current state"
Change simulator to be different than first simulator (e.g. Hardware -> Device -> iPhone 6s)
cd <react-native project>
react-native run-ios --simulator "iPhone 6s" (or whatever simulator you chose in step 8).
Note: In the last step, you can disregard the terminal output since it indicates that it is launching using the 1st simulator hardware. In fact, it is launching into the 2nd simulator (as desired).
I got two separate react native apps running at the same time doing this
I entered the following in one terminal for the first app
react-native run-ios --simulator="iPhone X"
After that finished building I opened another terminal and ran for the second app
react-native run-ios --simulator="iPhone XS" --port=8088
Then that built the second app on the new simulator and using a different port for the metro bundler. However after the second one built the first app changed its screen from the first app to the second app. I hit the home button and just re-opened the first app. One observation is that the first app seems to have both apps installed in the simulator while the second one does not.
This isn't the direct answer to your question, but I think it gives a better solution than running different simulators.
You can check the following lib called ScreenSwitcher.
It basically use the same simulator, in our case iPhone 6 plus only and you can check and inspect any other smaller screen on it directly.
I find that approach more efficient and faster.
Opening multiple simulators from the command-line did not work for me. With some manual interaction I got this to work with simulator 10.0 and react-native 0.47.2 - its based on the fact that react native always opens the app in the last opened simulator:
manually open simulator
start app: react-native run-ios
manually do: Hardware -> Device -> select iOS -> select Device (different then before !)
that will open a second simulator
start app again: react-native run-ios
this opens the app in the second simulator
I have Used more than 2 Simulator at a one time by using different terminals and they works well
react-native run-ios --simulator="iPhone 11 Pro Max" //write like this.
react-native run-ios --simulator="iPhone 6". //write like this.
react-native run-ios --simulator="iPhone 12 Pro Max" //write like this.
react-native run-ios --simulator="iPhone 8 Plus".
Another option is to run the app from xcode plus open another one from react-native commandline. Each normally opens their own simulator (I wonder why). And if I run an end-to-end test with Detox then it also opens its own simulator.
Some of the answers above helped me, but I think they are incomplete.
I have been using this technique to test a two player game (halfchess.com) on iOS simulators. My goal is to run two instances of halfchess at the same time.
To have my app running on two simulators, I first need to install Expo app on multiple simulators. Below steps are for the first time only.
react-native-scripts start to run the package manager. Copy the
expo URL for the app, for ex., exp://172.20.10.2:19000 to clipboard.
Run ios simulator from within above (press i). This opens a default simulator and runs the app. Lets call the default device X.
Goto menu Hardware -> Device -> iOS -> select a different device
Close the current device from File -> Close Window. Now we have only one window open.
Install expo app on this device by restarting package manger and pressing i again for install.
Now we can open the earlier closed device X again. Open simulator and open the expo app.
The expo URL from step 1 should be in clipboard textarea for the expo app. Launch the app by clicking the URL.
For next time onwards, the picked devices already have an expo app installed.
Do step 1 as above.
Open the default X and the other device Y.
Open e
xpo apps on devices and follow step 7 to run the app on both simulators.
So its much faster the second time onwards.
The downside with this is that logs from both simulators appear in the same terminal. Right now, I have cloned the project in a different directory, and do react-native-scrips start from a different terminal; and use the second expo URL generated in one of the simulators. The logs from both simulators now appear in different terminals. There should be better ways to do this.
PS - I am currently on version 10+ of xcode.

How to choose which iPhone model simulator to run my react native app?

I am working on react native app, and I do testing on iOS Simulator.
However, it always runs on iPhone 6, and i don't know how I can switch to other iPhone models like iPhone 6 Plus or 5.
I can start a different device manually by going to Simulator -> Hardware -> Device -> iOS -> iPhone 6 Plus.
But the app is installed only on iPhone 6, and it always starts iPhone 6 when I run react-native run ios.
How can I change it so that I can run the app on different iOS Simulator devices?
react-native run-ios --simulator="iPhone 6s Plus"
As far as I can tell there is currently no way to specify the OS.
you could open your project in Xcode on mac and choose build target, then build.