[iOS, Android] - Image flickers when dragging on zoomed image

After fixing this issue https://github.com/BooYeu/react-native-reanimated-viewer/issues/14 the new issue was discovered.

When dragging/paning on zoomed image there is a noticeable image flickering going on (see the screen recording) It's more noticeable on Android than on iOS but still happens on both platforms.

https://github.com/BooYeu/react-native-reanimated-viewer/assets/17419029/0e67e1f3-28be-4488-907f-b8c3047e480d

https://github.com/BooYeu/react-native-reanimated-viewer/assets/17419029/6ee91d0e-537b-4416-b0dc-8a22541b9fd3

Here is a code from the implementation:



import {Dimensions, Image, View} from "react-native";
import * as React from "react";
import {ImageViewer, ImageWrapper} from "react-native-reanimated-viewer";
import {useRef} from "react";
import {FlatList} from "react-native-gesture-handler";

const images = Array.from({length: 50}, (_, index) => {
    return {
        uri: `https://picsum.photos/id/${index + 10}/1280/720`,
        thumbNailUri: `https://picsum.photos/id/${index + 10}/980/551`
    };
});

export const TestRNViewer = () => {
    const imageRef = useRef(null);

    return (
        <>
            <ImageViewer
                ref={imageRef}
                dragUpToCloseEnabled={true}
                data={images.map((el) => ({key: `key-${el.thumbNailUri}`, source: {uri: el.uri}}))}
            />
            <View style={{backgroundColor: "rgb(15, 15, 15)"}}>
                <FlatList
                    data={images}
                    keyExtractor={(item) => item.thumbNailUri}
                    initialNumToRender={5}
                    renderItem={({item, index}) => (
                        <ImageWrapper
                            key={item.thumbNailUri}
                            viewerRef={imageRef}
                            index={index}
                            source={{
                                uri: item.thumbNailUri,
                            }}
                        >
                            <Image source={{uri: item.thumbNailUri,}}
                                   style={{width: Dimensions.get("screen").width, height: 250, marginBottom: 10}}/>
                        </ImageWrapper>
                    )}
                    showsVerticalScrollIndicator={false}
                />
            </View>

        </>
    );
}

booyeu / react-native-reanimated-viewer

[iOS, Android] - Image flickers when dragging on zoomed image #16