When enabling "Debugging" in the ios simulator and open chrome for debugging.
The first time works perfectly but when change code and refresh automatically.
After that Debugging points somewhere else. I understand there is a mapping issue while debugging.
Any solution for this?
Debugging mapping attached to the project when we start project or reload but at the time of hot reloading (auto refresh) will not update that mapping correctly.
For update the mapping correctly you have to reload it.
In physical devices: Shake the device it will open a window choose 'reload' option.
For simulator: by pressing command+R or command+control+z and choose 'reload' option.
For emulator mac OS: by pressing r+r (2 times).
In chrome developer tools, try switching to network tab, and check "Disable cache". It might help
I have changed my code a lot of times. Is there any command like "npm run watch" for watching real time changes and compile the code and design preview in react-native for android?
I assuming you are wanting to use 'Live Reload' or Hot Reload.
Every time you update your Javascript code, the app will automatically update without the need to reload manually. Here's how to enable and also some notes on what the differences are.
Docs: http://facebook.github.io/react-native/docs/debugging
Accessing the In-App Developer Menu
You can access the developer menu by shaking your device or by
selecting "Shake Gesture" inside the Hardware menu in the iOS
Simulator. You can also use the ⌘ + D keyboard shortcut when your
app is running in the iOS Simulator, or ⌘ + M when running in an
Android emulator on Mac OS and Ctrl+M on Windows and Linux.
Alternatively for Android, you can run the command adb shell input
keyevent 82 to open the dev menu (82 being the Menu key code).
Reloading JavaScript
Instead of recompiling your app every time you make a change, you can reload your app's JavaScript code instantly. To do so, select "Reload" from the Developer Menu. You can also press ⌘R in the iOS Simulator, or tap R twice on Android emulators.
Automatic reloading
You can speed up your development times by having your app reload
automatically any time your code changes. Automatic reloading can be
enabled by selecting "Enable Live Reload" from the Developer Menu.
You may even go a step further and keep your app running as new
versions of your files are injected into the JavaScript bundle
automatically by enabling Hot Reloading from the Developer Menu. This
will allow you to persist the app's state through reloads.
There are some instances where hot reloading cannot be implemented perfectly. If you run into any issues, use a full reload to reset your app.
You will need to rebuild your app for changes to take effect in certain situations:
You have added new resources to your native app's bundle, such as an
image in Images.xcassets on iOS or the res/drawable folder on Android.
You have modified native code (Objective-C/Swift on iOS or Java/C++ on
Android).
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!
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.
I've hooked up my brand new Kindle Fire 7 to my Mac and I've run react-native run-android successfully on it with Hot Reload and Remote JS Debugging enabled.
Everything seems to work fine for about 30 minutes or so, before the app completely freezes (no console.log statements show up, no UI updates, etc). When I shake my Fire, the debug menu does pop up (Reload, Stop Remote JS Debugging, Enable Live Reload, etc.), but tapping on any option is just as unresponsive.
If I run adb devices at this point on my Mac, I see that the Kindle Fire has disconnected. If then unplug the USB connection to my Fire, reconnect, and run react-native run-android again, everything works again for about 30 minutes and then it is unresponsive once more.
Has anyone else run into this issue? Thanks!
Note: I also highly doubt that my code is crashing the app... I'm just displaying the time on there with a single setInterval that grabs the current time. But just to be sure, I tried running with just a button that prints to the console on tap. That also stops working after running on the tablet for awhile.