React-native-fast-image: 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.