I want to use my app on my phone with smooth animation and production-like performance, but i want it to show red screen whenever error happens and to be possible to debug this app with remote-chrome-debugging. How do i do that?
For Android, you can just open the developer menu by shaking the device or emulator, and in Dev Settings, uncheck 'JS Dev Mode'. Also you can tweak other options if you are interested. As for iOS, I am not entirely sure how you can do it.
Related
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 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 am running a react-native Expo project on both ios simulator, which uses XCode, and android emulator, which uses genymotion.
There is a crash sometimes when using the app on real android phone.
I am hoping to find out the reason debugging it on the emulator.
So far, I searched for tools for this, but did not encounter any.
Could anyone tell me available tools for debugging memory leaks on genymotion emulator?
I also welcome any other advices to fix my problem.
Thanks in advance!
You can gain a ton of insight using Infinite Red's Reactitron
You might also want to check out Perf Monitor which you can access from the Debug menu.
There's a whole page on profiling and troubleshooting perf issues in the react native documentation.
https://reactnative.dev/docs/debugging
With Expo you'll need to detach.
For Android you can find tutorial here.
For iOS:
Make sure you have Release Schema
Go to XCode → Product → Profile (⌘ + i) and you'll find:
It should open your leaks profiler on the screen and then click on the red dot.
Restart the app in simulator.
You should see your memory allocations in the leaks profiler window.
I’m doing a React Native project. It has a bug.
The bug make the APP just exit(it can functional run a while, but suddenly...just gone). So it dose not report error. How can I find out where the problem is?
My APP used react-native-bluetooth-serial.
My code on Github
Are you running it on you simulator.
If that is so you have to use real device for testing it as simulators do not have access to bluetooth peripherals.
Hope this helps.
You can use Genymotion or real device to use bluetooth enabled app. To test your bug you can also use "Debug JS remotely" feature of react native dev tools.
To enable dev tools in your real device, shake your device and dev menu will appear. In emulator you can press Ctrl + M to enable dev menu. then you can choose "Debug JS remotely" which will open in chrome. If you are familiar with web development then you might have used "Inspect element" feature which will open dev tools.
The answers are right. You might be using a simulator which doesn't support bluetooth.
To know more about the crash you can check the logs natively. For android just run this inside your android folder
adb logcat
Or you can use
react-native log-ios
react-native log-android
I'm developing an app in react-native for Android. I recently added a barcode scanning component. Whenever the scanner reads a barcode, the camera does a subtle click noise. It seems that this clicking is enough to trigger the "shake" required to open the developer menu.
Is there any way I can disable this shortcut programmatically? I would like to disable the shortcut when the barcode scanner is running and then enable it again later.
This is currently not possible. A PR allowing this was recently (may/2017) merged, but only adds support for this on ios: https://github.com/facebook/react-native/pull/13563
You can't. You could try disabling the camera shutter sound though.
Try to run release version of an app. Run react-native run-android --variant=release for more details to generate signed apk follow guide here
You can put the phone on silent mode, hope this helps!