Zoomable ScrollView

[oofavor]

Is there any way to use ReactNativeZoomableView with ScrollView and/or FlatList?

[mazenchami]

+1

[Huailun]

I was able to use ReactNativeZoomableView with FlatList in renderItem without any problem.

[andhikanovandi]

@Huailun hi there, do you mind to share some example code for that? thanks!

[putuoka]

i think i need this too for react native pager view https://github.com/callstack/react-native-pager-view looks like they using flatlist. currenty zoomable view isn't working with it. i use this lib to replace https://github.com/intergalacticspacehighway/react-native-reanimated-zoom working very good pinch zoom, pan, and double tap zoom

[asterginete]

I was able to use ReactNativeZoomableView with ScrollView Refer to this old comment

  const zoomableViewRef = useRef(null);
  const scrollViewRef = useRef(null);
  const [scrollEnabled, setScrollEnabled] = useState(true);

  const execAfterZoom = () =>
    scrollViewRef &&
    zoomableViewRef &&
    setScrollEnabled(zoomableViewRef.current?.zoomLevel < 1.01);

  const yourComponent = (
    <ScrollView scrollEnabled={scrollEnabled}>
      <ReactNativeZoomableView
        ref={zoomableViewRef}
        onZoomAfter={execAfterZoom}
        onShiftingEnd={execAfterZoom}
        disablePanOnInitialZoom={true}>
        <Text>Zoomable Text</Text>
      </ReactNativeZoomableView>
    </ScrollView>
  );

Toggle the ScrollView's scrollEnabled prop on onZoomAfter and onShiftingEnd callbacks of the ReactNativeZoomableView so that the scrolling won't conflict with the zoomable view's panresponders.

[budwol]

i got issue in flatlist - swiping is not working when zoomableview is used as child.

[ywanhzy]

I have a problem. scrolllview cannot slide normally when multiple ReactNativeZoomableViews are called in ScrollView. Is there any way to solve this problem? please help me @thomasttvo

[NxsHbb]

I was able to use ReactNativeZoomableView with ScrollView Refer to this old comment

  const zoomableViewRef = useRef(null);
  const scrollViewRef = useRef(null);
  const [scrollEnabled, setScrollEnabled] = useState(true);

  const execAfterZoom = () =>
    scrollViewRef &&
    zoomableViewRef &&
    setScrollEnabled(zoomableViewRef.current?.zoomLevel < 1.01);

  const yourComponent = (
    <ScrollView scrollEnabled={scrollEnabled}>
      <ReactNativeZoomableView
        ref={zoomableViewRef}
        onZoomAfter={execAfterZoom}
        onShiftingEnd={execAfterZoom}
        disablePanOnInitialZoom={true}>
        <Text>Zoomable Text</Text>
      </ReactNativeZoomableView>
    </ScrollView>
  );

Toggle the ScrollView's scrollEnabled prop on onZoomAfter and onShiftingEnd callbacks of the ReactNativeZoomableView so that the scrolling won't conflict with the zoomable view's panresponders.

I am using it in expo SDK 50 managed project. It works on development build, but in production build it does not work. Any idea?