Bad Android Scrolling Performance

[Pipo93]

Describe the bug When we have a high amount of images displayed in a ScrollVIew or FlatList, scrolling does not really work when we use FastImage on Android. The same code works very well on iOS Devices.

To Reproduce I tested this example code in a plain react-native app and the same behavior was recognized:

import { FlatList, View, ScrollView } from 'react-native'
import FastImage from 'react-native-fast-image'
const data = Array(100).fill(1)

const App = () => {
    return (
        <View style={{ flex: 1 }}>
            <ScrollView style={{ backgroundColor: '#000' }}>
                {data.map((element, index) => {
                    return (
                        <FastImage
                            onError={() => console.log('error', index)}
                            source={{ uri: `https://picsum.photos/id/${index}/450/253` }}
                            style={{ width: '100%', aspectRatio: 16 / 9 }}
                        />
                    )
                })}
            </ScrollView>
        </View>
    )
}

Expected behavior Smooth scrolling also on android devices

Dependency versions

• React Native version: 0.61.4
• React version: 16.11.0
• React Native Fast Image version: 7.0.2

[pbfrias17]

In general, Android list performance takes more effort than it does on iOS. You could try using FlatList instead and follow these performance tips.

But in my case, replacing Image with FastImage in my flatlists causes severe scrolling-performance issues on Android (choppy scrolling, unresponsive touches, etc).

[yaronlevi]

Same here [email protected] Many horizontal Flatlists and on Android it sluggish and feels slow. On iOS, it works fine.

[auseika]

Same here, unable to get desired performance without switching to standart rn image component. No solutions yet?

[JungHsuan]

Same here RN: 0.61.5 Vertical FlatList on Android

I found out that only setting removeClippedSubviews to false would cause the performance issue

[klaaz0r]

I don't seem to have any problems in a FlatList but when I use a scrollview the performance is very poor. Maybe it is because I am using images with different sizes? it's weird that scrollview works worst compared to the flatlist. Will experiment a little today.

[hjhimanshu01]

@klaaz0r , did u made it working with scrollView? UPDATE: made it working using removeClippedSubviews={true} for ScrollView

[lumberman]

Very slow on Android. No FlatList and ScrollView with removeClippedSubviews={true}. Having about 10 images on the screen slows UI and JS frame rate to bellow 10.

[ez-tech-global]

@klaaz0r , did u made it working with scrollView? UPDATE: made it working using removeClippedSubviews={true} for ScrollView

it's working, thanks very much

[tomcheung1208]

RN 0.70.6 removeClippedSubviews={true} can't solve my issue

[vmsilva]

tnks

[novirusallowed]

RN 0.70.6 removeClippedSubviews={true} can't solve my issue

Same here with an infinite Masonry Feed that must be created using a ScrollView. Tried everything and ended up replacing it with the Image component from 'react-native'. Also had to set the resizeMethod to 'resize' for better performance

[k0502s]

@novirusallowed It works very well. Thank you.

[novirusallowed]

@novirusallowed It works very well. Thank you.

Yes, it fixes this problem but other problems arise if you are trying to render large/infinite lists unfortunately.. Really hope they're going to fix this issue soon.

[fukemy]

@novirusallowed Image component does not have resizeMethod to 'resize'