Joe Caraccio Joe Caraccio - 1 year ago 107
Android Question

Should we expect an poor animation performance during debugging

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download