Poor performance in Android production build
See original GitHub issueIs this a bug report?
Yes
Have you read the Contributing Guidelines?
Yes
Environment
Environment: npm: 4.2.0 Watchman: 4.6.0 Android Studio: 2.3.3
Packages: (wanted => installed) react: 15.6.1 => 15.6.1 react-native 0.50.3 => 0.50.3 react-redux: 5.0.6 => 5.0.6 redux: 3.7.2 => 3.7.2,
Steps to Reproduce
So, my react-native app’s performance is good in production mode in iOS – native-feeling transitions, smooth animations, etc. However, on Android, we have serious performance issues – multi-second delays for simple transitions, choppy animations, etc. The app is basically great in iOS and not usable in Android.
We have tried to follow the react native performance docs. We have taken out all the console logs, swapped ListViews with FlatViews and SectionViews, made animations useNativeDriver, etc.
We have also followed the guides for building in production mode – turn debuggable to false in the app’s build.gradle, set the build-variant to release, generate a signed APK with a keystore .jks file, etc. etc.
We have tested Android performance on the emulator and on two devices – on a new Galaxy S8 and a 2013 Nexus 7 tablet. The performance is poor on both devices. We have deleted the cache, uninstalled the app, cleaned the build folder, and rebuilt many times.
Any ideas on how to fix this? It is odd that there is such a big performance hit in Android, and we are thinking there could be something easily remedied that we are missing.
(Write your steps here:)
- Improve react native performance in line with docs
- Change build gradle files and build variant to prepare for production build
- Generate signed APK
- Test on device
Expected Behavior
We thought performance in Android would be similar to the performance of production builds in iOS
Actual Behavior
Performance is very slow, as described two sections above.
Reproducible Demo
Since this is an issue related to building in Android Studio, a demo may not be very useful here. Just note that ALL transitions are very slow in Android but normal / fast in iOS. We have tried using different navigation libraries, including react-navigation, but that has not helped with this issue.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:11
- Comments:8 (1 by maintainers)
Top GitHub Comments
Here’s some tips I picked up from building a few apps.
array.map()
as it allows for asynchronous rendering of components in your viewport which is important for mobile devices.shouldComponentUpdate
or changing the components to a PureComponent. There’s often times where you don’t even know that components are re-rendering when they shouldn’t be. Start by checking the app root component and going down from there.initialNumToRender
on your FlatList/SectionList component. Otherwise this may take seconds to render new screens using react-navigation.renderItem
function should render stateless list item components. If it needs state context (e.g. whether the list item is expanded or selected), it should be using the parent’s state as seen in the documentation.react-native run android --variant=release
so you can get a more accurate feel of the app’s performance.react-navigation is a not very performant library especially for Android. It solely uses React Native’s library as a basis for all it’s navigation logic which means any additional screens/views are all loaded on to the one activity/viewcontroller which gives ‘native-like’ navigation but not true navigation. If you went to inspect the app on iOS while the app was running you’d see that the screens in your navigation state are essentially rendered and layered on top of each other. react-native-navigation (v1) is a suitable alternative if you’d rather want to use the native navigation controllers.
@BG687 did you find a solution for this at all?