intergalacticspacehighway / react-native-reanimated-zoom

Component for zooming react native views. 🔎
MIT License
315 stars 19 forks source link

Scroll is broken after zoom minimumZoomScale #13

Closed ch3rn1k closed 1 year ago

ch3rn1k commented 1 year ago

Hello! Can't scroll inside ScrollView after zooming to minimum with value < 1. Any idea how to fix that?

intergalacticspacehighway commented 1 year ago

Hi @ch3rn1k Can you share a code snippet? Also, a screen record would be helpful to debug!

Ideally, zoom should reset to 1 if you scroll below 1. Reset is being done here

ch3rn1k commented 1 year ago

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 1 year ago

Thanks for repro! @ch3rn1k. Should be fixed in 0.3.1. Let me know if it doesn't work!

ch3rn1k commented 1 year ago

Thanks for repro! @ch3rn1k. Should be fixed in 0.3.1. Let me know if it doesn't work!

Yeah, works fine now, thanks