React-native: Poor performance in Android production build

[BG687]

Is 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:)

1. Improve react native performance in line with docs
2. Change build gradle files and build variant to prepare for production build
3. Generate signed APK
4. 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.

[jamsch]

Here's some tips I picked up from building a few apps.

1. Try to use React Native's FlatList/SectionList/VirtualizedList where you can and not array.map() as it allows for asynchronous rendering of components in your viewport which is important for mobile devices.
2. With the nature of React, any component that has updates to it's state/props will re-render all of it's child components, and likely the children of those components as well. It's up to you to make sure that your components should update or not by using 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.
3. React Navigation will typically have any screen you have in your navigation state rendered. State-heavy screens may suffer in performance especially when there's background state updates. It's also easy to add more routes to your navigation state and more difficult to take them off.
4. Make sure that the screen you're trying to navigate to isn't heavy on it's initial render. Your components should preferably be light on the first render and accumulate with data later from interaction and server responses. react-navigation will only transition to the screen once it's typically fully rendered. One thing that could help is configuring initialNumToRender on your FlatList/SectionList component. Otherwise this may take seconds to render new screens using react-navigation.
5. The 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.
6. Unusual things may start happening if you render more than one FlatList/SectionList/VirtualizedList in one component (e.g. rendering only the current render batch and no more).
7. Avoid wrapping your FlatList inside a ScrollView, as it will render all child components. FlatLists implement on top of ScrollView's so you can use most ScrollView props on FlatLists.
8. Develop Android-first. iOS performance is guaranteed and you will notice performance issues sooner before having to rebuild much of your code base. React-Native was built first with iOS-only support.
9. Using remote debugging will execute JavaScript on the host computer and not on the phone, and instead use the RN bridge to send native calls to the phone. This will likely be very slow in some situations and very fast in others. Try building the app with the release variant -- react-native run android --variant=release so you can get a more accurate feel of the app's performance.
10. Remove any console.log() statements from your app when releasing it to production with babel-plugin-transform-remove-console.
11. Generally as a guideline, the less JavaScript and more native code, the better performance you'll get. React Native allows us to build user interfaces with great productivity and a shared code base but there may be times that you'll need to go native on both platforms to get better 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.

[zhy8023]

FlatList 'pull-up load more' Sometimes do not trigger, sometimes trigger, do not trigger, you need to roll back a roll。My onEndReachedThreshold is already set to 0.1。Is there any way to fix this problem?

[bolan9999]

FlatList and SectionList is bad performance. Try this,please. may be it is a surprise for you

https://github.com/bolan9999/react-native-largelist

[barghi]

+1
same issue here

[calvinkei]

same issue, it is not about flatlist, it is the whole app being crazily slow. even takes more than 5 seconds for simple navigation. and the app works perfect on ios

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[salmanwaheed]

This message was created automatically by mail delivery software.

A message that you sent could not be delivered to one or more of its
recipients. This is a temporary error. The following address(es) deferred:

[email protected]
Domain salmanwaheed.info has exceeded the max emails per hour (185/150 (123%)) allowed. Message will be reattempted later

------- This is a copy of the message, including all the headers. ------
Received: from github-smtp2-ext6.iad.github.net ([192.30.252.197]:40637 helo=github-smtp2b-ext-cp1-prd.iad.github.net)
by box1177.bluehost.com with esmtps (TLSv1.2:ECDHE-RSA-AES256-GCM-SHA384:256)
(Exim 4.89_1)
(envelope-from [e-mail])
id 1epQW5-003Jhv-2c
for [email protected]; Fri, 23 Feb 2018 20:28:53 -0700
Date: Fri, 23 Feb 2018 19:25:18 -0800
DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=github.com;
s=pf2014; t=1519442906;
bh=LzFYFH+3k7hLm7JXOwWq4Odf3GwjRCGc0ncHmsvFSVE=;
h=From:Reply-To:To:Cc:In-Reply-To:References:Subject:List-ID:
List-Archive:List-Post:List-Unsubscribe:From;
b=dGunmr8C10bahbM24Qtaxvx8x+GA5o7LehV8yGJeSWdtPLEObtVuTUlFTYcYE2Sha
96vBXDmzpcIgvCy8mcab9aRtLPAsxrB90Vb95NvculLBqTLh0uPHlI6DFe8+vubHJW
BkfpAIBETCBDQe7jqQfN8hp/mmUDCsipfqaIQNNA=
From: React Native Bot [e-mail]
Reply-To: facebook/react-native [e-mail]
To: facebook/react-native [e-mail]
Cc: Subscribed [e-mail]
Message-ID:
In-Reply-To:
References:
Subject: Re: [facebook/react-native] Poor performance in Android production
build (#17033)
Mime-Version: 1.0
Content-Type: multipart/alternative;
boundary="--==_mimepart_5a90db1e167ec_56012ad304abaed01866a3";
charset=UTF-8
Content-Transfer-Encoding: 7bit
Precedence: list
X-GitHub-Sender: react-native-bot
X-GitHub-Recipient: salmanwaheed
X-GitHub-Reason: subscribed
List-ID: facebook/react-native
List-Archive: https://github.com/facebook/react-native
List-Post: [e-mail]
List-Unsubscribe: ,
https://github.com/notifications/unsubscribe/AO8bOCTJp8-Bv6okaXMRt9uagMlkLX-5ks5tX4EegaJpZM4QxFOm
X-Auto-Response-Suppress: All
X-GitHub-Recipient-Address: [email protected]
X-Spam-Status: No, score=-1.0
X-Spam-Score: -9
X-Spam-Bar: -
X-Ham-Report: Spam detection software, running on the system "box1177.bluehost.com",
has NOT identified this incoming email as spam. The original
message has been attached to this so you can view it or label
similar future email. If you have any questions, see
root\@localhost for details.

Content preview: Thanks for posting this! It looks like you may not be using
the latest version of React Native, v0.53.0, released on January 2018. Can
you make sure this issue can still be reproduced in the latest version? [...]

Content analysis details: (-1.0 points, 5.0 required)

pts rule name description

---

0.0 URIBL_BLOCKED ADMINISTRATOR NOTICE: The query to URIBL was blocked.
See
http://wiki.apache.org/spamassassin/DnsBlocklists#dnsbl-block
for more information.
[URIs: github.io]
-0.5 SPF_PASS SPF: sender matches SPF record
0.0 HTML_IMAGE_ONLY_32 BODY: HTML: images with 2800-3200 bytes of words
0.0 HTML_MESSAGE BODY: HTML included in message
-0.1 DKIM_VALID_AU Message has a valid DKIM or DK signature from author's
domain
-0.1 DKIM_VALID Message has at least one valid DKIM or DK signature
0.1 DKIM_SIGNED Message has a DKIM or DK signature, not necessarily valid
-0.4 AWL AWL: Adjusted score from AWL reputation of From: address
X-Spam-Flag: NO

----==_mimepart_5a90db1e167ec_56012ad304abaed01866a3
Content-Type: text/plain;
charset=UTF-8
Content-Transfer-Encoding: quoted-printable

Thanks for posting this! It looks like you may not be using the latest ve=
rsion of React Native, v0.53.0, released on January 2018. Can you make su=
re this issue can still be reproduced in the latest version? =

I am going to close this, but please feel free to open a new issue if you=
are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute =E2=80=A2 What to Expect from Maintainers ub>}

-- =

You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/facebook/react-native/issues/17033#issuecomment-368195=
187=

----==_mimepart_5a90db1e167ec_56012ad304abaed01866a3
Content-Type: text/html;
charset=UTF-8
Content-Transfer-Encoding: quoted-printable

Thanks for posting this! It looks like you may not be using the latest= version of React Native, v0.53.0, released on January 2018. Can you make= sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if = you are able to confirm that this is still a problem in v0.53.0 or newer.=

_{How to Contribute =E2=80=A2 What to Expect from Maintainers}

&m=
dash;
You are receiving this because you are subscribed to this thre=
ad.
Reply to this email directly, book/react-native/issues/17033#issuecomment-368195187">view it on GitHub<=
/a>, or ONhVpffFTi4xE_NSCyCnOFt7BV67ks5tX4EegaJpZM4QxFOm">mute the thread. g alt=3D"" height=3D"1" src=3D"https://github.com/notifications/beacon/AO=
8bOCuJ0MeP9BdQfEt0urLDMktR4iOBks5tX4EegaJpZM4QxFOm.gif" width=3D"1" /> >

ta>

=

----==_mimepart_5a90db1e167ec_56012ad304abaed01866a3--

[gislitg]

@BG687 did you find a solution for this at all?