test run react native app on iphone - react-native

I've signed developer account in xcode.
I connected iphone to mac.
I pressed cmd+b and it show built successful
Then what? How to make the app appear on iphone?

You can always go the route of creating a dev server that is only accessed through your WiFi.
See the following:
https://facebook.github.io/react-native/docs/running-on-device.html

When you connect your device then xcode checks if it's version matches with the device and if it matches then you just need to run the application from xcode by clicking the play button or CTRL+b. Then npm package runs through terminal and finally if the build is successful, the application automatically start running on your device.
Please have a look at the documentation: https://reactnative.dev/docs/running-on-device

If you followed the steps on the React Native website, you will be able to do the following commands on the command line
first, cd to your project directory like this:
cd MyApp
then, once you are in the same directory as your app, start the app with the following command,:
react-native run-ios
This should do it, if not, it will tell you what you are missing.
UPDATE:
I didn't realize it was specific to a real device, in that case, just press the Play button on the top left, pressing Cmd + B just builds the app, press Cmd + R to run.

Related

Switching between Expo Apps Running on Android Emulator

I am sorry for the trivial question!
While testing an Expo (react-native) app on Android Emulator, I need to switch to other apps, e.g. to the Contacts Manager to add a contact. Then, I need to go back to the Expo app to test something. How can I do that?
I tried the following.
Start the Expo app and play with it
Press the Home button
Start Contacts Manager
I could NOT find a way to start the Expo app again. I found an Expo icon in the list of apps. When I clicked on it, a screen with everything disabled, except "Open from Clipboard" appeared. The "Open from Clipboard" option seems to be for switching between different Expo apps. Anyway, when I clicked on it, I got the following error message.
Something went wrong. Could not load exp://switching/%20between%20Expo%20apps%20running%20on%20Android%20Emulator.
Environment:
Expo: 32.0.0
Android Emulator: API: 25 - Android 7.1.1 x86 - Nexus S
Thank you for your effort and time to help...
Are you using a connection localhost? if yes, on the terminal, try to press 'a'.

React Native application deployment

I have already developed a React native application on my mac book, this is myfirst application. I want to deploy it to iPhone so that I can test it. I don't want to put it on appstore yet. I am not sure how to compile the application and get it ready to put it on iPhone. I tried this web site
https://www.diawi.com/, but not sure which .ipa or a.pk file, I need to upload. I can also try using expo, but not sure how to use it. Can anyone give me step by step instruction on how to upload this application on iPhone.
any help will be greatly appreciated.
For iPhone
For react-native-init you will probably need Apple developer account to test your app on your phone
Since you are using react-native-init, You should checkout this article by Facebook
https://facebook.github.io/react-native/docs/running-on-device
In the second point, it says Register for an Apple developer account if you don't have one yet
For create-react-native-app you need to do following
Download expo client from App store
Scan the QR code expo generate when you run your app using terminal (npm run start in terminal )
Note: Both Laptop and your phone should be on the same network
According to this thread, You can't use expo with react-native-init but alternatively you can create an expo project using create-react-native-app and then copy, paste files from your init project
For Android
For running your App on Android, You can directly generate/build an apk, send it to your device and just open it to see how it works (In Android you don't need a console or developer account to run your app)
Again, Open this link https://facebook.github.io/react-native/docs/running-on-device
And click on Android Tab to see how you can generate an Apk

Expo: Change default IOS simulator

I am new in expo and react-native
Whenever i run the app from IOS simulator (inside expo) it always boots up the IphoneX. If i need to change the simulator,I have to open it through Xcode, is there any way we can change the default simulator ?
expo included an option in recent commits regarding this issue.
now you can tap shift+i on terminal which expo server is running.It will list all simulators and you need to select your choice.
https://github.com/expo/expo-cli/pull/2541
Currently there is no way of changing the simulator from Expo. Expo just uses the last opened simulator in Xcode.
If that doesn't work, try this (updated here from my comment) :
When the simulator is open click on Hardware>Device> Select the other iphone.
Now both will be open. Next exit the simulator from the dock.
Now try and open your project in the ios simulator from expo. It should open in the Simulator you selected from the hardware menu.
This worked for me on Feb 2021
on Mac OS with Big sur, expo v4.1.6
Clean your EXPO cache with expo start -c (on your project location)
In the expo terminal press shift + i (see screenshot below)
Then press shift + i and you should be able to select the Simulator by pressing enter on the one you need (see screnshot)
lastly Just wanted to share all the available options if you just press i in the metro terminal window.
It is possible, but you can't target it from the command line.
Expo will just target the last opened simulator.
Click on Hardware > Device and choose the device you desire
You now have two simulators open, make sure the one you want is active.
Now quit the simulator app with Command + Q
Now in your command line, when running the expo server, just click i
The simulator will open with your targeted device.
(As of December 3, 2020)
Open Simulator
Click on File ... (in the top-left menu bar)
Click on Open Device ... (in the drop down list)
Select your desired device and let it launch completely
Quit Simulator ... (command + Q)
Done
Running your app on iOS Simulator will automatically launch to this desired device now =)
Change the open iOS simulator device(s), and Expo will use it.
Expo directs its output to the open iOS simulator, so this must be done in the simulator itself rather than in Expo. It is simple to do.
You can direct expo output to different devices. Here's how. BTW, other approaches described here didn't work when I tried them.
Open a second simulator in iOS Simulator by:
1) select eg Simulator->Hardware->Device->iOS12.1->iPhone 8
2) Select the simulator that you don't want to use (eg the current default as of writing, iPhone XR). Press Command-W to close the simulator window, leaving the iPhone 8 simulator still running.
3) In Expo, deploy the code to simulator as usual, either using the i at the command line, or selecting 'run on iOS Simulator' from the browser version of Expo.
4) It is possible to get expo to display to more than one simulator that is running at once (eg to test rendering on multiple screen sizes). Once you get expo running on one device (steps 1-3), you can repeat on an additional device (or presumably more). Expo will then be running on multiple simulators. They will simultaneously display the output. When I change my code, it immediately updates to multiple simulators/screen sizes without requiring any additional steps. Haven't re-tested exactly the order of steps to do this most easily, but it's working.
Hope this works for you!
You just need to open the desirable simulator through Xcode, and then just run:
npm run ios
from your project directory or a similar command to start your app
I believe that yarn passes unrecognized arguments through to react-native run-ios, so you should be able to pass --simulator="foo" as described here: https://facebook.github.io/react-native/docs/running-on-simulator-ios.
I know the exact answer
Once you open the Simulator from the Expo, go to Help menu and Search for "iphone11", "iphoneX" ....
Then you should be fine
Go to /Users/username/.expo/ios-simulator-app-cache/ and remove all files in there.
Run the ios simulator you want and run your expo project.
Restarting the computer was the only thing that worked for me. Without it pressing "Shift+i" had no effect. Neither Expo client would be installed on new simulator instance.
This was on macOS and M1 MacBook Pro for me.
Just launch simulator on which you want to run app and then run command i.e. "yarn run ios" or "npm run ios" to run on simulator. App will run on both simulator.
If it doesn't work then quit all simulator and then run the command i.e. "yarn run ios" or "npm run ios", then app automatically run on simulator which was latter launched.
Hope this may help you!

The android emulator does't show the changes that occur in the code

I am knew in react native and I need to run a project. I used the following command in the folder of my project:
1- npm start
2- react-native run-android
However, I have a strange problem. Whenever I change any thing in the code, nothing happen in emulator and the emulator show me the previous thing!
I have done it with cell phone connected to the PC and see the same result!
I even stop the emulator and start it again but, I see the same problem. The emulator do not show any changes in the code and show a constant project. Can you help me?
Update:
As I shake the cell phone and reload it, I see the following red screen error:
Could not connect to development server.
You need to enable either Live Reload or Hot Reloading. Within the simulator, you can access the menu with the Cmd+M combination or click the icon (see screenshot) then just choose the option you want.

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.