The same project runs 60FPS on iOS emulator, but in android emulator everything is slow. I do nothing but there are hops in frame rate from 53 to 56. JS FPS and UI FPS are always identical. I created animated component and when I click on it everything runs smoothly on iOS (~60FPS), but android's JS FPS and UI FPS fall to 10FPS. Is it normal? I've read the link. Debug mode is turned off, there is no any console.log() in code. I plug Android phone, interface becomes smoother, but JS FPS falls to ~14 when I start animation. Animations in React Native uses native thread. How is that possible? There are some tweaks I should apply?
P.S. Mac Mini Late 2012, Quad Core i7, 16Gb RAM, SSD. AVD: Pixel XL, Android 6, x86, API 23, 2048Mb RAM, Graphics - Hardware GLES 2.0, Multi-core CPU 4. HAXM is used, as I understand...
Slow app launch is another issue of React Native apps. If your app opens too slowly, you probably have too many dependencies in your app and you're using slow components. Try to use fast, high-performance components and decrease the number of dependencies in your app.
The Android Emulator is very slow. The main reason is because it is emulating the ARM CPU & GPU, unlike the iOS Simulator, which runs x86 code instead of the ARM code that runs on the actual hardware.
React Native recommends the Genymotion emulator out of the box. For many developers (and corporations), the price tag on Genymotion is not worth the expense. We'll be using the free Android Studio emulator for this walkthrough.
Instead here are the reasons why your React Native application is slow. 1. Reduce Re-rendering This case major issue in declining the frame rates. Most of the time updating a global context will re-render the deepest descendant using this context.
The best way to measure React Native application performance by understanding the JS threads and their frames per second using Perf monitor. React Native depends on a native bridge to talk the native layer of android and ios software. Every single conversation between JS bridge and native software is considered as a single frame.
The emulator is very slow in general. And we usually try to improve the performance of the Android emulator by using special x86 virtual device images in conjunction with the virtualization features of your computer. For more details, we can check Accelerating Android emulators on Windows.
npx react-native run-android (takes 3 minutes) npx react-native run-android --variant=release (takes 7 minutes) Describe what you expected to happen: Expect to takes around 1-2 minutes at most
Another tip - there is an option to run without debugging etc for performance testing:
Open the menu by 'shaking' the device (cmd+m on Mac, ctrl+m on Windows) and open settings. Then set JS Dev Mode to false and you'll see the app operate at much closer performance to what it would on a real device. The only downside is you don't get your debug logs, but useful to see how the app is likely to behave on real devices.
UPDATE If you still want to see console logs and other debug information, you can access these in Logcat inside Android Studio without sacrificing performance.
UPDATE 2 I have switched the an M1 Mac which runs on ARM architecture and the emulator is incredibly fast now. If you're going to be doing a lot of React Native development on a Mac I'd recommend getting an M1 Mac!
It would help if you posted something about your hardware and setup, or at least, what emulator API are we talking about. Android 5? 8? 9? What's your hardware? RAM? Where's the screenshot showing your emulator settings?
To begin with, Android emulator has different optimization methods depending on the processor used. If you have installed the emulator using Android SDK tools v24, update the SDK tools to v27 as shown here.
Things to consider first:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With