Search code examples
react-nativescrollviewzooming

React Native - Scrollview - Apply a zoom using a method/function not pinch


As the zoomScale parameter does not seem to affect the initial zoom level, I would like to set a zoom on my ScrollView using a method/function.

I found that via the ScrollView reference, I can get the responder and then apply scrollResponderZoomTo but it's iOS only.

Is there a way to manipulate the zoom of a ScrollView by another way than the pinch gesture?


Solution

  • Answering my own question, it's possible to use the function scrollResponderZoomTo on the responder of the ScrollView via the reference of the component :

    ...
    <ScrollView
       ref={this.scrollViewRef}
    ...
    

    And a call like this :

    this.scrollViewRef.current?.getScrollResponder().scrollResponderZoomTo({
        x: viewContentOffsetX || 0,
        y: viewContentOffsetY || 0,
        width: widthOfTheVisiblePart,
        height: heightOfTheVisiblePart,
        animated: false})
    

    Up to a function to calculate the visible part based on the expected zoom value