booyeu / react-native-reanimated-viewer

A high performance image viewer in react-native created from react-native-reanimated.
130 stars 12 forks source link

[iOS, Android] - Swipe down to close moves image to the left side #10

Closed crank-chips closed 1 year ago

crank-chips commented 1 year ago

On swiping down to close the image viewer it moves the image to the left, instead ao following the gesture

https://github.com/BooYeu/react-native-reanimated-viewer/assets/17419029/d90aa3c5-1277-43fe-9449-6331ddead13c

llr101 commented 1 year ago

Could you show me your code ? I couldn't recurrent this issue

crank-chips commented 1 year ago

The code is the same as I used to reproduce this issue: https://github.com/BooYeu/react-native-reanimated-viewer/issues/12#issuecomment-1568903930 Try not to let the finger/cursor off the screen when you drag the image down.


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}
                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>

        </>
    );
}
llr101 commented 1 year ago

I fixed it in v1.2.4. If there is still a problem, you can reopen this issue any time