openspacelabs / react-native-zoomable-view

A view component for react-native with pinch to zoom, tap to move and double tap to zoom capability.
MIT License
205 stars 57 forks source link

ReactNativeZoomableViewWithGestures does not support .zoomTo() and .moveBy() methods #94

Closed jaredbothwell closed 6 months ago

jaredbothwell commented 6 months ago

I'm using ReactNativeZoomableViewWithGestures and I'd like to be able to call .zoomTo() and .moveBy(). However, there isn't a way to use a ref with the inner ReactNativeZoomableView currently. Here's a simple example of how I'd expect this to work:

const MyComponent = () => {
  const zoomableViewRef = useRef<ReactNativeZoomableView | null>(null);
  const handleSingleTap = () => {
    zoomableViewRef.current?.zoomTo(2);
  }

  return (
    <ReactNativeZoomableViewWithGestures ref={zoomableViewRef} onSingleTap={handleSingleTap}>
      {children}
    </ReactNativeZoomableViewWithGestures>
  )
}

I'd be happy to make a PR with the following additions to ReactNativeZoomableViewWithGestures.tsx if this makes sense:

class ReactNativeZoomableViewWithGestures extends React.Component<...> {

  // ...

  render() {
    return (
      <ReactNativeZoomableView
        ref={this.props.innerRef} // add a ref to ReactNativeZoomableView
        {...this.props}
        onShiftingEnd={this._onShiftingEnd}
      />
    );
  }
}

// Forward a ref as a prop since this is a class component
export default React.forwardRef<ReactNativeZoomableView | null>((props, ref) => (
  <ReactNativeZoomableViewWithGestures innerRef={ref} {...props} />
));
mrbrentkelly commented 6 months ago

FYI I have put up a PR that exposes the ref of the underlying ReactNativeZoomableView https://github.com/openspacelabs/react-native-zoomable-view/pull/95 👍