Should we expect an poor animation performance during debugging

Question

Sorry if this question is too trival, I just couldn't really find a better community of React Native experts to ask..

While debugging my app on Android (running via "react-native run-android") I have noticed that animations have a choppy feel. It isn't awful but definitely a slight lag. This happens for things like switching tabs, floating action button and changing views..

Is part of this because I am running in a debug mode with things like hot reloading? Or should I be concerned? is there anything I can do to enhance performance..

Answer 1

JS is a single threaded environment, and the operations you've stated usually result in heavy load on the Js thread. Since most of the animations in react-native are still not native - you'll see choppy animations when performing some tasks. This issue is much more visible in debug mode.

None native animations perform badly since they interpolate the animated value in Js, and call a native method (over the bridge) to update the animated view.

two things are likely hogging your app.

1. Logs are enabled in debug and each console.log calls a native Log method over the bridge. The more console.log you have, the busier the bridge will be. This drastically reduces performance in debug.

2. Js animations are just not performant. I know the good folks at Facebook are investing a lot in offloading animations to native side. I think NavigatorExperimental is doing that.

You might want to look into react-native-navigation which provides you a fully native navigation solution to avoid these issues completely. Just a disclaimer, I'm one of the developers working on the project.

Answer 2

During debugging additional tasks, such as creating warnings and validating propTypes, are being performed. Those tasks take their toll on performance. You will see automatic performance improvements when you run your app in production.

In order to see how your app will perform in production, you can disable JS Dev Mode by

1. opening the developer menu in the emulator (Command ⌘ + M) or on your physical device (shake the device or run adb shell input keyevent 82 (with -dfor device or -e for emulator)),
2. choosing Dev Settings and unchecking JS Dev Mode.
3. Finally reload the js bundle by pressing R twice.

Disabling dev mode is often necessary e.g. when developing animations. Disabling JS Dev Mode is also a prequisite for Profiling Android UI Performance.

An interesting read is React Native's documentation on Performance in which this issue is partly addressed.