Not working when inside of panGestureHandler from 'react-native-gesture-handler'
emclab opened this issue · 1 comments
emclab commented
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.
SimonErich commented
Hey,
yeah, the problem might be, that the GestureHandler steals the GestureListener.
Can you try it with: captureEvent={true}