Cannot scroll smoothly on a page with a lot images (Android 9.0 only, fine for 8.x, 7.x)

gsunsnackv commented 5 years ago

Environment

Run react-native info in your terminal and paste its contents here. React Native Environment Info: System: OS: macOS 10.14.2 CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz Memory: 223.26 MB / 16.00 GB Shell: 4.4.23 - /usr/local/bin/bash Binaries: Node: 11.5.0 - /usr/local/bin/node Yarn: 1.12.3 - /usr/local/bin/yarn npm: 6.4.1 - ~/.npm-packages/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1 Android SDK: API Levels: 27, 28 Build Tools: 27.0.3, 28.0.3 System Images: android-24 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom IDEs: Android Studio: 3.2 AI-181.5540.7.32.5056338 Xcode: 10.1/10B61 - /usr/bin/xcodebuild npmPackages: react: 16.6.3 => 16.6.3 react-native: 0.57.8 => 0.57.8 npmGlobalPackages: create-react-native-app: 1.0.0 react-native-cli: 2.0.1

Description

Describe your issue in detail. Include screenshots if needed. If this is a regression, let us know. A simple page that has a ScrollView with 100 Image in it cannot scroll smoothly on emulator or device with Android 9.0 . It can scroll smoothly on Android 8.x or 7.x

Reproducible Demo

Reproduce project https://github.com/gsunsnackv/android-9.0-react-native-scroll-bug/tree/master

You should also be able to reproduce using the following simple steps:

react-native init AwesomeProject
Edit App.js .
Change View to ScrollView
Add 100 different images under the ScrollView for example https://github.com/gsunsnackv/android-9.0-react-native-scroll-bug/blob/master/App.js
Open an Android emulator with Android 9.0 (Pie) installed
react-native run-android

=== New information 2019-01-09 === FlatList does not work either. Here is the same project above changing ScrollView to FlatList https://github.com/gsunsnackv/android-9.0-react-native-scroll-bug/tree/flatlist

alexandrius commented 5 years ago

Is there any workaround for this issue?

gsunsnackv commented 5 years ago

@alexandrius I do not have any work around. Are you experiencing the same issue? Can you click on the thumb up to upvote this issue?

alexandrius commented 5 years ago

@gsunsnackv Yes fling stops working if it looses focus (navigating to another page and back)

vforvasile commented 5 years ago

I experience the same issue using Flatlist on a physical device running Android 9.0. No problems with android 8 and below. I cannot scroll once and see multiple items go up, it's just scroll and stop at the item.

alexandrius commented 5 years ago

@vforvasile Exactly me too. I have PixelExperience installed on my phone

danilobuerger commented 5 years ago

This only seems to happen (at least for me) if the images are loaded from remote. With local images everything works fine.

danilobuerger commented 5 years ago

@kelset is this related to the work done for #13413 ?

kelset commented 5 years ago

Uhm I'm not sure, he mentions ScrollView which has a different and less performant approach from FlatList.

That said, my comment there may help.

danilobuerger commented 5 years ago

@kelset The same happens with FlatList. I read through your comments, and non of them help as this is related to Android 9 only, other versions of Android are unaffected and work smoothly with the example provided.

alexandrius commented 5 years ago

@vforvasile what phone do you have. I think we are describing a different problem. I will open another issue with recorded video

alexandrius commented 5 years ago

@vforvasile https://github.com/facebook/react-native/issues/22925 I opened the issue we are experiencing

gsunsnackv commented 5 years ago

@kelset , I tried to use FlatList and it does not work. https://github.com/gsunsnackv/android-9.0-react-native-scroll-bug/tree/flatlist . It still brings down the fps to < 5 on Android 9.0 but never below 40 on Android 8.0

danilobuerger commented 5 years ago

Also interesting: If you repeat the same picture 100x it doesn't lag. It has to be 100 different pictures.

gsunsnackv commented 5 years ago

@danilobuerger Thank you! I forgot to mention that in the original post. It seems to be something related to memory management

gsunsnackv commented 5 years ago

HELP! This bug is killing us. Can someone save us? New information: even if you navigate away from a page that has a lot of images, those images are still impacting the performance of the new page. Here is an example https://github.com/gsunsnackv/expo-video-choppy-on-android-9.0/tree/new-choppy-issue

genogeno commented 5 years ago

I gave up using FlatList. I instead use this library.

https://github.com/Flipkart/recyclerlistview

gsunsnackv commented 5 years ago

Update: It seems that adding https://github.com/kmagiera/react-native-gesture-handler helps. So maybe the bug is in the area where react-native handles gesture . Code: https://github.com/gsunsnackv/android-9.0-react-native-scroll-bug/tree/gesture

gsunsnackv commented 5 years ago

Thank you @genogeno . I'll try

gsunsnackv commented 5 years ago

Update: I confirm https://github.com/Flipkart/recyclerlistview works . Code https://github.com/gsunsnackv/android-9.0-react-native-scroll-bug/tree/recyclerlistview

danilobuerger commented 5 years ago

Using react-native-gesture-handler in combination with FlatList does not solve the problem for me.

hejun041 commented 5 years ago

continuous concern

westlakestudent commented 5 years ago

is there any help?

isaac-ivins commented 5 years ago

Yeah pain is real on this one, going to give https://github.com/Flipkart/recyclerlistview a try later tonight and report back in the morning.

danilobuerger commented 5 years ago

Still reproducible with 0.59.1

davidcort commented 5 years ago

I start working in an app with 100 images per page (FlatList and Slider) in Android 8. All was working very well, i was impressed with RN :) .But everything changes when I updated mi Xiaomi to Android 9. My app currently show lag, in the emulator is worst.

Still reproducible with 0.59.1

Help, please.

tomhicks commented 5 years ago

Not a solution but a workaround that we have used: reduce the FlatList's windowSize on Android 9 to something small like 3.

It seems like this jank is caused by literally the total number of image pixels that RN is rendering. If you reduce the dimensions of your images, the problem goes away until you add more images.

sunshineo commented 5 years ago

This regression (since < Android 9 are working) is quite annoying for us. To a point that I'm willing to pay to get it fixed. If you are in the same situation, please join force and put down some rewards.

I just added a $10 reward for this issue. The total reward now is $10. Join me to add more reward to get this issue fixed faster. You can do it here: https://www.issuereward.com/issue/db5AZ54NR9 I suggest admin of this repo install the Issue Reward bot from https://github.com/apps/issue-reward-beta, so the bot can comment automatically without the need to copy paste.

alexandrius commented 5 years ago

Basically you shouldn't load many images in ScrollView anyway. I don't think this is React Native bug.

Loading many images should be done with List component but since FlatList doesn't recycle the items we need to use https://github.com/Flipkart/recyclerlistview or https://github.com/bolan9999/react-native-largelist

@sunshineo Here's the solution with RecyclerListView:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import { StyleSheet, Image, View } from 'react-native';
import { RecyclerListView, DataProvider, LayoutProvider } from 'recyclerlistview';

const dataProvider = new DataProvider(((r1, r2) => {
    return r1 !== r2;
}));

const images = [
    "https://d301468hdcm00e.cloudfront.net/cce71941eb82ac08759e0f0cd1052eaf_video-file.png",
    "https://d301468hdcm00e.cloudfront.net/eb037f1ffa2d70c821793962ae7f3893_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/fe61fae487d9bb1abb672e390c137f0a_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/21d59ee6577782b0f9fce2254d3fa321_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/4d316b9ea2e682b2e9d5f6dbff074fe7_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/bb17d6dd014a91d67a4c11529874b25e_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/4ea7e227c477b7c40063b16fc52c4047_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/b575f7c440732c55f785059bd428a769_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/d07949ec72a3a0351c0047b4f74420d8_thumbnail.png",
    "https://d301468hdcm00e.cloudfront.net/be68a2cd2fbe5ff4e5ccb741ec5cfb0f_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/655b99b40128f9b40e511cd0f84f097f_thumbnail.png",
    "https://d301468hdcm00e.cloudfront.net/b57edfe042a5bb8366672ffbb0783539_thumbnail.png",
    "https://d301468hdcm00e.cloudfront.net/6e65fe0fffbbfeaf700f5e067cf412dd_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/9b8edc114fd1472ef1177a19d13e6218_thumbnail.png",
    "https://d301468hdcm00e.cloudfront.net/f1b9287971cc07642329bc759b380446_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/18dc3dd9e430ba1575aebaf72307978d_thumbnail.png",
    "https://d301468hdcm00e.cloudfront.net/a0e3fff4956145b1a9b3f90ab4502a33_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/be3f5e12a86a7119d9aa3cef9e6e551f_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/e777dadd4ec4925084148635a8da84cd_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/ee143260ed53ccbf09eb1ddf9d07f241_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/fd8ee73a45d931ba11b5da5b192ec2bb_thumbnail.png",
    "https://d301468hdcm00e.cloudfront.net/bd99df637237267580b8c9034d5f557f_thumbnail.png",
    "https://d301468hdcm00e.cloudfront.net/2b4a793325ca76a72e47dcbd93697a65_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/eee1f2a2009db27c846940eb86137bb4_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/6508a56e24f9341f08dbfc4f8d22b919_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/03a02d7cfe272d807d731da00710a357_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/6a657afc87434eacc603b49de7fe5fba_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/b3edfbdf7276c3560dc3e293976986c5_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/0a7840e058b5aa96db969081284a8c05_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/761d107b61fd9fbaca4dfe11cce0d040_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/bcd109db9e652208487c8dd5df61bce0_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/26ef17691c4860096a3e5dfaf74dfd59_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/9a2775589197620fe356bdc413260eba_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/79846b9dfdd3a2d7e537b690759f3a86_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/c7acbb527984ce81145267690ed2c892_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/4cea72399d9de87ce7bbc885842bd26e_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/ff12987c6ddb0dba0b86335544e2819e_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/01dc15ddee11ddaf533b0f3b4234ab7e_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/41d223a280ee93e17204b104341e9008_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/b82bb3a8d8b80b624960cb91efa93ef3_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/4bfc2219b0d73142ca2b7157a7c6fc31_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/91dcbf268ecdca69925ecb49b8e373e6_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/7cca7994d36b31688da162fd86dc9bd5_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/2bf2e39e0c58a0b1b8a5fc2516242611_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/a7d59857fb34b56bbe13b1d5812629f0_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/27b5ecc3f96e3f2356d88071aa6c1bdd_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/620467c8d92609182361d148345c260f_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/9575cf5cf355de2e6ef2f23f02c8bae2_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/cb2eca2d89b229aff05c0ddbd866749e_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/15d3a4ddb75caa365d37938ee67b68be_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/7ec5bb3cf108c4ed7a6c4ef9011d71e2_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/872625c27acad9f54fb0143bd6a24d85_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/8b45155e982fe1dd274b2c34055b425e_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/b4ca85a41ac9437fdbb5e5e9919bc9d3_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/e67299c6d8f5a2e4236409038d067320_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/53c17bc4ef51c5a88af5b9348fbd9699_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/29c5a29d54788ce6766c79e2faf53998_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/86117df5913b17e728ae94a441163cab_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/063aace8eff8ec68ff2fa8fab1b2e350_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/b1f8e3a2d4fdf6c6e03569f56c602686_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/6b0156491539e9a72b0eccb9d80685b1_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/c162ab8b459fa9da12261e9fae5c3f80_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/985e4c4676be7c1b1d02ded514994b19_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/d2a2c462da0da55bcb26ce775ed95891_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/7333448ad4a8c98efd0e03eda924df58_thumbnail.png",
    "https://d301468hdcm00e.cloudfront.net/8b7b9894fee44b15acb8917fbb48f2eb_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/820b21733ca6091b61fa0bb9d33b9e79_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/70a09ada579de824b1c81be13c0ebdb1_thumbnail.png",
    "https://d301468hdcm00e.cloudfront.net/e14c4192198a99ac1ab39975f512e56c_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/6be306af38dde84d258801d630758fe8_thumbnail.png",
    "https://d301468hdcm00e.cloudfront.net/240af802d4e6627ceba2eb3020ed1ec9_thumbnail.png",
    "https://d301468hdcm00e.cloudfront.net/2d26f3d8b1e390d9d5682164fe2d5094_thumbnail.png",
    "https://d301468hdcm00e.cloudfront.net/b1b10ea73b6113623d62531b536246da_thumbnail.png",
    "https://d301468hdcm00e.cloudfront.net/daa8948da075ffffad40d7256e05c089_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/3d9f60626d358d68f95d1be19209fc45_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/83188ab064ef764c9a9a0cb643b9a3e7_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/c401c0bfedfe6a0b4515dea53eeb7d4c_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/3f94434a8ad72dba4156962132bafe44_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/d1488736aced7845f621443f9b2b8f0e_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/9da2b7a4987582ac4259db0c23876b17_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/7618ef478fa9bf25a56844a73b5f92c8_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/6c0e0db86d94fe1d8b8fc1e18c384042_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/54ba9807386dcb48fdef4af278bd6e87_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/2090c6b6aae9346d62dfbff8fd1ca15d_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/b9e54c60e0ef10dca356265f68f1a680_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/93579efc6b4f7b82edf74df370948e09_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/d7564e1a1c34ebb287096ad92ca0728e_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/efe1244f004cb89d4e8b7a897dbe96e6_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/34adbb23d057a8b76406f43a32b7781f_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/4f8745469c320ae20dc1075c4b2b35ba_video-thumbnail-file.jpeg",
    "https://d301468hdcm00e.cloudfront.net/05656ccec7c7fa2949fb860171fccee7_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/746d4d577fb965573d440210ce4dda13_thumbnail.png",
    "https://d301468hdcm00e.cloudfront.net/e4786fb6bca5f3d1d01c862feb94eefa_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/aa71d06f69daddd4e9bc3ca003231caf_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/6dd015aabbecbf93ea7628a63b544b94_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/1ded32bbdd5f6f371cf32ee6ae31b399_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/27caff6c79562c5160d7f44728b370cd_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/048dd65f42d6f61f69a482f7c3c9ac6e_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/d5e870a4e713d759fd436a5dbf9db925_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/7958c8af4cf94e93ca9887bef3f775cb_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/c13ec61ef5abc3bf26cea3c8197d9709_4811a3440a1c04c60ad9c5eddc7bcf8d_thumbnail.png",
    "https://d301468hdcm00e.cloudfront.net/4421bb27e3aeecf74f65f6b9269ff78d_Screen%20Shot%202018-08-29%20at%202.26.19%20PM.png",
    "https://d301468hdcm00e.cloudfront.net/40bbf507120de434fb53711998220c5c_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/2e1e0c4f7a302472cb46afb074b21e0a_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/ed25957da9549d57b924a9a792db2963_thumbnail.png",
    "https://d301468hdcm00e.cloudfront.net/dd231e317bbf38aa0425f4cf9b597f64_thumbnail.png",
    "https://d301468hdcm00e.cloudfront.net/f78e67058417c73c92534cab47131c1a_thumbnail.png",
    "https://d301468hdcm00e.cloudfront.net/342245b72d9a9bcc8b70e250c82b9919_thumbnail-file",
    "https://d301468hdcm00e.cloudfront.net/e37326aa90fbe10dc5e27df510a7f980_thumbnail-file"
]

export default class Temp extends Component {

    constructor(props) {
        super(props);
        this._layoutProvider = new LayoutProvider(
            () => 0,
            (_, dim) => {
                dim.height = 300;
                dim.width = 300;
            }
        );

        let provider = dataProvider.cloneWithRows(images);

        this.state = {
            dataProvider: provider
        }
    }

    render() {
        return (
            <View style={{ flex: 1 }}>
                <RecyclerListView
                    layoutProvider={this._layoutProvider}
                    dataProvider={this.state.dataProvider}
                    style={{ flex: 1 }}
                    rowRenderer={this._renderItem.bind(this)} />
            </View>
        );
    }

    _renderItem(_, item) {
        return <Image style={{ height: 300, width: 300 }} source={{ uri: item }} />
    }
}

danilobuerger commented 5 years ago

@alexandrius Thats not a solution, but a workaround. It should just work with ScrollView, FlatList and SectionList too.

alexandrius commented 5 years ago

@danilobuerger Try loading 100 images with Native Android code. You will get same result. And as I've said ScrollView, FlatList and SectionList doesn't recycle the items!

There probably was some memory optimizations done with latest Android 9. So there's good chance memory just got more constrained.

I bet you would get the same issue loaded 1000 images on Android <9.

However RN team should consider adding recycling functionality to FlatList.

alexandrius commented 5 years ago

To be 100% sure, I actually created simple Android application with the same images. My assumptions were correct this is not React Native bug neither it is Android bug.

The code I posted above IS actual solution and not a workaround. FlatList doesn't reuse already drawn views it only unmounts them to reduce CPU overhead, though views are still in memory. Loading many images in ScrollView should never be done, since you don't have huge amounts of resources on phones like you have on computers.

The issue will also be reproducible on iOS as well if you load many more than 100 images. I bet it even will crash the app.

Look at the memory usage: https://imgur.com/a/jyRB3ZM

Here's the result https://youtu.be/XgxCzdo7H9I

Here's the source code:

package com.alexandrius.hundredimages;

import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.bumptech.glide.Glide;

public class MainActivity extends AppCompatActivity {

    String[] images = {"https://d301468hdcm00e.cloudfront.net/cce71941eb82ac08759e0f0cd1052eaf_video-file.png",
            "https://d301468hdcm00e.cloudfront.net/eb037f1ffa2d70c821793962ae7f3893_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/fe61fae487d9bb1abb672e390c137f0a_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/21d59ee6577782b0f9fce2254d3fa321_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/4d316b9ea2e682b2e9d5f6dbff074fe7_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/bb17d6dd014a91d67a4c11529874b25e_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/4ea7e227c477b7c40063b16fc52c4047_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/b575f7c440732c55f785059bd428a769_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/d07949ec72a3a0351c0047b4f74420d8_thumbnail.png",
            "https://d301468hdcm00e.cloudfront.net/be68a2cd2fbe5ff4e5ccb741ec5cfb0f_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/655b99b40128f9b40e511cd0f84f097f_thumbnail.png",
            "https://d301468hdcm00e.cloudfront.net/b57edfe042a5bb8366672ffbb0783539_thumbnail.png",
            "https://d301468hdcm00e.cloudfront.net/6e65fe0fffbbfeaf700f5e067cf412dd_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/9b8edc114fd1472ef1177a19d13e6218_thumbnail.png",
            "https://d301468hdcm00e.cloudfront.net/f1b9287971cc07642329bc759b380446_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/18dc3dd9e430ba1575aebaf72307978d_thumbnail.png",
            "https://d301468hdcm00e.cloudfront.net/a0e3fff4956145b1a9b3f90ab4502a33_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/be3f5e12a86a7119d9aa3cef9e6e551f_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/e777dadd4ec4925084148635a8da84cd_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/ee143260ed53ccbf09eb1ddf9d07f241_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/fd8ee73a45d931ba11b5da5b192ec2bb_thumbnail.png",
            "https://d301468hdcm00e.cloudfront.net/bd99df637237267580b8c9034d5f557f_thumbnail.png",
            "https://d301468hdcm00e.cloudfront.net/2b4a793325ca76a72e47dcbd93697a65_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/eee1f2a2009db27c846940eb86137bb4_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/6508a56e24f9341f08dbfc4f8d22b919_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/03a02d7cfe272d807d731da00710a357_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/6a657afc87434eacc603b49de7fe5fba_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/b3edfbdf7276c3560dc3e293976986c5_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/0a7840e058b5aa96db969081284a8c05_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/761d107b61fd9fbaca4dfe11cce0d040_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/bcd109db9e652208487c8dd5df61bce0_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/26ef17691c4860096a3e5dfaf74dfd59_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/9a2775589197620fe356bdc413260eba_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/79846b9dfdd3a2d7e537b690759f3a86_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/c7acbb527984ce81145267690ed2c892_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/4cea72399d9de87ce7bbc885842bd26e_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/ff12987c6ddb0dba0b86335544e2819e_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/01dc15ddee11ddaf533b0f3b4234ab7e_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/41d223a280ee93e17204b104341e9008_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/b82bb3a8d8b80b624960cb91efa93ef3_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/4bfc2219b0d73142ca2b7157a7c6fc31_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/91dcbf268ecdca69925ecb49b8e373e6_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/7cca7994d36b31688da162fd86dc9bd5_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/2bf2e39e0c58a0b1b8a5fc2516242611_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/a7d59857fb34b56bbe13b1d5812629f0_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/27b5ecc3f96e3f2356d88071aa6c1bdd_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/620467c8d92609182361d148345c260f_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/9575cf5cf355de2e6ef2f23f02c8bae2_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/cb2eca2d89b229aff05c0ddbd866749e_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/15d3a4ddb75caa365d37938ee67b68be_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/7ec5bb3cf108c4ed7a6c4ef9011d71e2_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/872625c27acad9f54fb0143bd6a24d85_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/8b45155e982fe1dd274b2c34055b425e_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/b4ca85a41ac9437fdbb5e5e9919bc9d3_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/e67299c6d8f5a2e4236409038d067320_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/53c17bc4ef51c5a88af5b9348fbd9699_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/29c5a29d54788ce6766c79e2faf53998_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/86117df5913b17e728ae94a441163cab_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/063aace8eff8ec68ff2fa8fab1b2e350_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/b1f8e3a2d4fdf6c6e03569f56c602686_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/6b0156491539e9a72b0eccb9d80685b1_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/c162ab8b459fa9da12261e9fae5c3f80_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/985e4c4676be7c1b1d02ded514994b19_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/d2a2c462da0da55bcb26ce775ed95891_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/7333448ad4a8c98efd0e03eda924df58_thumbnail.png",
            "https://d301468hdcm00e.cloudfront.net/8b7b9894fee44b15acb8917fbb48f2eb_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/820b21733ca6091b61fa0bb9d33b9e79_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/70a09ada579de824b1c81be13c0ebdb1_thumbnail.png",
            "https://d301468hdcm00e.cloudfront.net/e14c4192198a99ac1ab39975f512e56c_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/6be306af38dde84d258801d630758fe8_thumbnail.png",
            "https://d301468hdcm00e.cloudfront.net/240af802d4e6627ceba2eb3020ed1ec9_thumbnail.png",
            "https://d301468hdcm00e.cloudfront.net/2d26f3d8b1e390d9d5682164fe2d5094_thumbnail.png",
            "https://d301468hdcm00e.cloudfront.net/b1b10ea73b6113623d62531b536246da_thumbnail.png",
            "https://d301468hdcm00e.cloudfront.net/daa8948da075ffffad40d7256e05c089_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/3d9f60626d358d68f95d1be19209fc45_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/83188ab064ef764c9a9a0cb643b9a3e7_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/c401c0bfedfe6a0b4515dea53eeb7d4c_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/3f94434a8ad72dba4156962132bafe44_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/d1488736aced7845f621443f9b2b8f0e_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/9da2b7a4987582ac4259db0c23876b17_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/7618ef478fa9bf25a56844a73b5f92c8_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/6c0e0db86d94fe1d8b8fc1e18c384042_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/54ba9807386dcb48fdef4af278bd6e87_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/2090c6b6aae9346d62dfbff8fd1ca15d_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/b9e54c60e0ef10dca356265f68f1a680_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/93579efc6b4f7b82edf74df370948e09_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/d7564e1a1c34ebb287096ad92ca0728e_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/efe1244f004cb89d4e8b7a897dbe96e6_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/34adbb23d057a8b76406f43a32b7781f_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/4f8745469c320ae20dc1075c4b2b35ba_video-thumbnail-file.jpeg",
            "https://d301468hdcm00e.cloudfront.net/05656ccec7c7fa2949fb860171fccee7_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/746d4d577fb965573d440210ce4dda13_thumbnail.png",
            "https://d301468hdcm00e.cloudfront.net/e4786fb6bca5f3d1d01c862feb94eefa_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/aa71d06f69daddd4e9bc3ca003231caf_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/6dd015aabbecbf93ea7628a63b544b94_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/1ded32bbdd5f6f371cf32ee6ae31b399_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/27caff6c79562c5160d7f44728b370cd_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/048dd65f42d6f61f69a482f7c3c9ac6e_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/d5e870a4e713d759fd436a5dbf9db925_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/7958c8af4cf94e93ca9887bef3f775cb_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/c13ec61ef5abc3bf26cea3c8197d9709_4811a3440a1c04c60ad9c5eddc7bcf8d_thumbnail.png",
            "https://d301468hdcm00e.cloudfront.net/4421bb27e3aeecf74f65f6b9269ff78d_Screen%20Shot%202018-08-29%20at%202.26.19%20PM.png",
            "https://d301468hdcm00e.cloudfront.net/40bbf507120de434fb53711998220c5c_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/2e1e0c4f7a302472cb46afb074b21e0a_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/ed25957da9549d57b924a9a792db2963_thumbnail.png",
            "https://d301468hdcm00e.cloudfront.net/dd231e317bbf38aa0425f4cf9b597f64_thumbnail.png",
            "https://d301468hdcm00e.cloudfront.net/f78e67058417c73c92534cab47131c1a_thumbnail.png",
            "https://d301468hdcm00e.cloudfront.net/342245b72d9a9bcc8b70e250c82b9919_thumbnail-file",
            "https://d301468hdcm00e.cloudfront.net/e37326aa90fbe10dc5e27df510a7f980_thumbnail-file"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        LinearLayout linearLayout = findViewById(R.id.content);
        int size = getResources().getDimensionPixelSize(R.dimen.size);

        for (String url : images) {
            LayoutInflater vi = (LayoutInflater) getApplicationContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View v = vi.inflate(R.layout.imageview, null);
            ImageView imageView = v.findViewById(R.id.imageview);
            linearLayout.addView(v, 0, new ViewGroup.LayoutParams(size, size));
            Glide.with(this).load(url).into(imageView);
        }
    }
}

sunshineo commented 5 years ago

@alexandrius Thank you very much for digging into this. For your Android project, is it working smoothly on < Android 9.0 ? If so, does it mean it is a regression on the Android system at OS level?

alexandrius commented 5 years ago

I haven't tried running it on <9 but I suppose yes. I don't think this is regression. Android dev team probably changed memory handling and gave preference not to crash app when low memory. I honestly don't know.

You should never load many images in ScrollView. OTOH FlatList support of view recycling would be great. Anyway you need to use recyclerlistview or largelist.

sunshineo commented 5 years ago

Thank you @alexandrius , but recyclerlistview is much harder to use than ScrollView. You need to setup this provider, that provider, worry about size of things ...

Would you like to claim the reward I put up? https://www.issuereward.com/issue/db5AZ54NR9 Could you run your Java code on Android < 9 to confirm if it is a change on Android side?

tomhicks commented 5 years ago

Have you tried a smaller windowSize? We have Android specific config for our app to reduce all our windowSizes to something like 3. It works absolutely fine. It’s a workaround, but it does work.

Sent from my iPhone

On 25 Apr 2019, at 17:51, Gordon Sun notifications@github.com wrote:

Thank you @alexandrius , but recyclerlistview is much harder to use than ScrollView. You need to setup this provider, that provider, worry about size of things ...

Would you like to claim the reward I put up? https://www.issuereward.com/issue/db5AZ54NR9 Could you run your Java code on Android < 9 to confirm if it is a change on Android side?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

alexandrius commented 5 years ago

@sunshineo No worries about reward. I had fun digging into the issue.

Yeah it's harder but it's single time setup so... You can also try react-native-largelist it doesn't work with expo though.

alexandrius commented 5 years ago

Can confirm that windowSize={3} also fixes the issue. Scroll feels a little slower though

JohannesKlauss commented 5 years ago

@alexandrius Did you run the Java Code on a device with Android < 9?

JohannesKlauss commented 5 years ago

I can confirm, that this is an internal Android problem. Running the Java code provided by @alexandrius works fine on Android < 9, but lags hard on Android 9.

The windowSize workaround sadly didn't apply for our project. It helped a bit, but it is still occuring. Are there any other suggestions to work around this issue?

alexandrius commented 5 years ago

@johannes-scharlach I'm not trying to advocate Android but this isn't a problem at all. You should never load many images in ScrollView neither on Android nor on iOS. Reminds me of this xkcd https://xkcd.com/1172/

gsunsnackv commented 5 years ago

@alexandrius I wonder what was happening for Android < 9 when you load many images in ScrollView. I wonder if something were overheating

hejun041 commented 5 years ago

@ johannes-scharlach我不是想提倡Android，但这根本不是问题。在Android和iOS上都不应该在ScrollView中加载很多图像。让我想起这个xkcd https://xkcd.com/1172/

In some cases, you do need to put a lot of images in the ScrollView, which belong to different modules, but are not applicable to the List. And this page belongs to the Main page of Main Tab and will not unmount, Use the Android Profiler to find that memory is always at a high value

And I found some pages after unmounted ,memory does not decrease, so the more page click memory footprint has been increased I hope it helps

JohannesKlauss commented 5 years ago

I tried using the Android Profiler, but it unfortunately crashes the app every time. Since Android < 9 did work, there has to be done something wrong with Android 9. I am trying to show a Image Gallery you can swipe through, so there is not much room for not loading many images in a ScrollView.

JohannesKlauss commented 5 years ago

The same thing also happens in a virtualized FlatList and this shouldn't happen at all.

smeekmeister commented 5 years ago

If it helps, I encountered the same problem with Flatlist and when setting removeClippedSubviews to true the scrolling becomes smooth.

mhirst commented 5 years ago

@smeekmeister thanks! we tried this in our app and helped on Android 9.

wkmcyz commented 5 years ago

I tried it on Android 9 with v0.57.0 of react-native, and it works, the FlatList could scroll normally but seems slower when pagingEnabled is set than on OS versions <9 .

stale[bot] commented 5 years ago

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

kunwarshivam commented 5 years ago

still a problem

chitswe commented 5 years ago

@smeekmeister thanks! it works on Android 9.

facebook / react-native