React native 큰 이미지 스와이프하면서(?) 보기

// In App.js in a new project

import React, { useEffect, useRef, useState, useCallback } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import { View, Text, Image, StyleSheet, Dimensions, ScrollView } from 'react-native';
import { PanGestureHandler, PinchGestureHandler, State, GestureHandlerRootView } from 'react-native-gesture-handler';
import Animated, {
    useAnimatedGestureHandler,
    useSharedValue,
    useAnimatedStyle,
    withSpring,
} from 'react-native-reanimated';

/* App Style  */
import { convertFontSize, convertHeight, convertWidth } from '../../Assets/AppStyles/ConvertSize'


let data = {
    w: 800,
    h: 1200,
    offset_x: -10,
    offset_y: -4,
    positionX: 20,
    positionY: 15,
    scale: 1.43,
    dummyImage: require('../../Assets/Image/bigimage.png')
}


function Test_DrawMap(props) {
    const [size, setSize] = useState({ width: 0, height : 0 });
    const translationX = useSharedValue(0);
    const translationY = useSharedValue(0);
  
    
    const onParentLayout = event => {
        let mSize = {
            width: event.nativeEvent.layout.width,
            height: event.nativeEvent.layout.height,
        }
        console.log(mSize)
        setSize(mSize);
      };
 
    const _onPanGestureEvent = useAnimatedGestureHandler({
        onStart: (_, ctx) => {
            ctx.startX = translationX.value;
            ctx.startY = translationY.value;
        },
        onActive: (event, ctx) => {
            let xv = ctx.startX + event.translationX
            let yv = ctx.startY + event.translationY;

            translationX.value = ctx.startX + event.translationX
            if(xv < -(data.w - size.width) ){
                translationX.value = -( data.w - size.width );
            }
            if( xv > 0 ){
                translationX.value = 0;
            }

            translationY.value = ctx.startY + event.translationY;
            if( yv > 0){
                translationY.value = 0
            }
            if( yv < - (data.h - size.height) ){
                translationY.value =  - (data.h - size.height)
            }

             
        },
        onEnd: () => {
            // translationX.value = withSpring(0);
            // translationY.value = withSpring(0);
        },
    })

    const _onHandlerStateChange = ({ nativeEvent }) => {

        if (nativeEvent.state == State.BEGAN) {
            //console.log('BEGAN : ',nativeEvent)
            // console.log('BEGAN',nativeEvent.translationX + "  /  "+nativeEvent.translationY)
            // static_x = nativeEvent.absoluteX
            // static_y = nativeEvent.absoluteY
            //  setSt_x(nativeEvent.translationX)
            //setSt_y(nativeEvent.translationY)
        }

        if (nativeEvent.state == State.ACTIVE) {
            //console.log('ACTIVE',nativeEvent.translationX + "  /  "+nativeEvent.translationY)
            // setSt_x(nativeEvent.absoluteX)
            // setSt_y(nativeEvent.absoluteY)
            // setSt_x(nativeEvent.translationX)
            //  setSt_y(nativeEvent.translationY)
            // static_x = nativeEvent.x
            // static_y = nativeEvent.y
        }

        if (nativeEvent.state == State.END) {
            //  console.log('END',nativeEvent)
            // console.log('END',nativeEvent.translationX + "  /  "+nativeEvent.translationY)
            // setSt_x(nativeEvent.x)
            // setSt_y(nativeEvent.y)
        }
    }

    const imageStyle = useAnimatedStyle(() => {
        return {
            transform: [
                { translateX: translationX.value },
                { translateY: translationY.value },
            ],
        };
    });

    return (
        <View style={{ flex: 1, backgroundColor: 'black' }}>
            <View 
                style={{ marginTop:100, height:500 , overflow:'hidden',backgroundColor:'red' }}
                onLayout={onParentLayout}
            >
                <GestureHandlerRootView style={{
                    width: data.w,
                    height: data.h
                }}>
                    <PanGestureHandler
                        onGestureEvent={_onPanGestureEvent}
                        onHandlerStateChange={data => _onHandlerStateChange(data)}
                    >
                        <Animated.Image
                            source={require('../../Assets/Image/bigimage.png')}
                            style={{
                                width: data.w,
                                height: data.h,
                                ...imageStyle
                            }}
                        />
                    </PanGestureHandler>
                </GestureHandlerRootView>

            </View>

            <View  style={{ flex: 1 ,backgroundColor:'black'  }} >

            </View>

        </View>
    )
}


const styles = StyleSheet.create({
    // styles.image_logo
    layout_back: {
        flex: 1,
        backgroundColor: 'black',
        justifyContent: 'center',
        alignItems: 'center'
    },
    image_logo: {
        width: convertWidth(171),
        height: convertHeight(138),
        resizeMode: 'contain',
        bottom: convertHeight(50)
    },
});


export default Test_DrawMap;