DuDigital/react-native-zoomable-view

Not working when inside of panGestureHandler from 'react-native-gesture-handler'

emclab opened this issue · 1 comments

In my RN 0.62.2 app, on top of swipe, the zoomable-view does not zoom. here is the code:

import { PanGestureHandler, State, TouchableOpacity, PinchGestureHandler } from "react-native-gesture-handler";  //ver 1.7
import FastImage from 'react-native-fast-image';
import {Button, Left, Right,  Icon, Input, Text, Header, Container, Content } from 'native-base';
import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView'; //ver 1.0.15

 return (
    <Container style={styles.container}>
        
        <Header>
            <Left>
                <Button transparent onPress={() => navigation.goBack()}>
                <Icon name="arrow-back-sharp" />
                </Button>
            </Left>
            
            <Right>
    
            </Right>
        </Header>
   
    <TouchableOpacity onPress={()=>navigation.goBack()}>  //<<==go back when click
        
    <PanGestureHandler {...gestureHandler}>  //<<==allow swipe the image horizontally left and right.
        <Animated.View style={styles.pan}>
        <Animated.View
            style={[{width: width * images.length, height, flexDirection: "row",}, { transform: [{ translateX }] }]}  //<<==animation over X
        >
            {images.map((img_source) => (  //<<==images is an array holding image data
            <View key={img_source.fileName} style={styles.picture}>
                <ReactNativeZoomableView  //<<==
                        maxZoom={3}
                        minZoom={1}
                        zoomStep={0.5}
                        initialZoom={1}
                        bindToBorders={true}
                        captureEvent={true}
                    >
                <FastImage 
                        source={{uri:img_source.path}} 
                        resizeMode={FastImage.resizeMode.contain} 
                        style={styles.image}
                    />
                    </ReactNativeZoomableView>
            </View>
            ))}
        </Animated.View>
        </Animated.View>
    </PanGestureHandler>

    </PinchGestureHandler> */}
    </TouchableOpacity>
    </Container>
  );
};

const styles = StyleSheet.create({
container: {
    ...StyleSheet.absoluteFillObject,  //<<==fill up all space under header
    backgroundColor: "black",
},
pan:{
    flexGrow:1,
},
picture: {
    flexGrow:1,
    overflow: "hidden",
},
image: {
    ...StyleSheet.absoluteFillObject,  //image noshow without this line
    width: undefined,
    height: undefined,
},
});

Swipe stops working as well.

Hey,
yeah, the problem might be, that the GestureHandler steals the GestureListener.
Can you try it with: captureEvent={true}