Scroll is broken after zoom minimumZoomScale
ch3rn1k opened this issue · 4 comments
ch3rn1k commented
Hello! Can't scroll inside ScrollView after zooming to minimum with value < 1
. Any idea how to fix that?
intergalacticspacehighway commented
ch3rn1k commented
Well, it looks like ScrollView stops working after I zoom in and after zoom out when minimumZoomScale < 1
...
...
import { Zoom, createZoomListComponent } from 'react-native-reanimated-zoom';
const ZoomScrollView = createZoomListComponent(ScrollView);
const Gallery = () => {
return (
<View style={styles.container}>
<ZoomScrollView
directionalLockEnabled={true}
horizontal={true}
showsHorizontalScrollIndicator={false}
decelerationRate={0}
pagingEnabled={true}
disableIntervalMomentum={true}
snapToEnd={true}
snapToInterval={Dimensions.get('window').width + defaultMargin / 2}
contentOffset={{ x: getContentOffset(route.params.index), y: 0 }}
contentContainerStyle={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
>
<Zoom
minimumZoomScale={0.5}
maximumZoomScale={2.5}
style={[styles.slide, getAspectSize(v.width, v.height), i === 0 && { marginLeft: 0 }]}
key={i}
>
<Image
style={[styles.slide, getAspectSize(v.width, v.height), i === 0 && { marginLeft: 0 }]}
source={{ uri: v.value }}
onLoadEnd={handleOnLoad}
/>
</Zoom>
</ZoomScrollView>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'black'
},
slide: {
position: 'relative',
width: Dimensions.get('window').width,
marginLeft: defaultMargin / 2,
backgroundColor: 'black',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
},
slideHash: {
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
zIndex: 5
}
});
intergalacticspacehighway commented
Thanks for repro! @ch3rn1k. Should be fixed in 0.3.1. Let me know if it doesn't work!