Adding a snap to zoom

[yarivShamash]

Hey DuDigital, I started using your great library and it's super intuitive and easy to use. I would like to ad a "snap" experiance to my project, meaning that if the zoom level is between 0.9 to 1.1 I want it to be set to one. I tried to modify the zoomableViewEventObject.zoomLevel but it's read only :/

[SimonErich]

@yarivShamash thank you for your feedback. Unfortunately that's not a feature, we have right now.

I will mark it as a feature request. If you manage to dig into it and take care of it (or anybody else) I would really appreciate it.

[yarivShamash]

Thanks for your reply Simon, unfortunately I am caught up with a lot of work at the moment. All the best :)

On Mon, 23 Nov 2020 at 15:02, Simon Auer notifications@github.com wrote:

@yarivShamash https://github.com/yarivShamash thank you for your feedback. Unfortunately that's not a feature, we have right now.

I will mark it as a feature request. If you manage to dig into it and take care of it (or anybody else) I would really appreciate it.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/DuDigital/react-native-zoomable-view/issues/44#issuecomment-732147769, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJ72X2W2QO3WFEWSQNYXKKDSRJMO7ANCNFSM4PFRGNXA .

[italomlp]

I don't know if helps, but if you use a state to keep initialZoom value, you can change the zoom programattically by keeping zoomEnabled as a state too, and update it always when the zoom is updated. E.g:

// ... component
const [zoom, setZoom] = useState(1);
const [zoomEnabled, setZoomEnabled] = useState(true);

useEffect(() => {
  setZoomEnabled(false);
  setTimeout(() => {
    setZoomEnabled(true);
  }, 100);
}, [zoom]);

const functionThatChangesZoom = useCallback((newZoomValue: number) => {
  // do something
  setZoom(newZoomValue);
}, []);

return (
  <>
    <ReactNativeZoomableView
      maxZoom={1.6}
      minZoom={0.8}
      zoomStep={0.2}
      initialZoom={zoom}
      zoomEnabled={zoomEnabled}
      bindToBorders
      captureEvent
      onZoomEnd={(event, gestureState, zoomableViewEventObject) => {
        if (
          zoomableViewEventObject &&
          zoomableViewEventObject.zoomLevel !== zoom
        ) {
          setZoom(zoomableViewEventObject.zoomLevel);
        }
      }}
      onDoubleTapAfter={(event, gestureState, zoomableViewEventObject) => {
        if (
          zoomableViewEventObject &&
          zoomableViewEventObject.zoomLevel !== zoom
        ) {
          setZoom(zoomableViewEventObject.zoomLevel);
        }
      }}
    >
      {/* children */}
    </ReactNativeZoomableView>

    <TouchableOpacity onPress={() => functionThatChangesZoom(1)}>
      <Text>Reset zoom</Text>
    </TouchableOpacity>
  </>
)

[yarivShamash]

Thanks alot!

On Tue, 8 Dec 2020 at 20:56, Italo Menezes notifications@github.com wrote:

I don't know if helps, but if you use a state to keep initialZoom value, you can change the zoom programattically by keeping zoomEnabled as a state too, and update it always when the zoom is updated. E.g:

// ... componentconst [zoom, setZoom] = useState(1);const [zoomEnabled, setZoomEnabled] = useState(true); useEffect(() => { setZoomEnabled(false); setTimeout(() => { setZoomEnabled(true); }, 100); }, [zoom]); const functionThatChangesZoom = useCallback((newZoomValue: number) => { // do something setZoom(newZoomValue); }, []); return ( <> <ReactNativeZoomableView maxZoom={1.6} minZoom={0.8} zoomStep={0.2} initialZoom={zoom} zoomEnabled={zoomEnabled} bindToBorders captureEvent onZoomEnd={(event, gestureState, zoomableViewEventObject) => { if ( zoomableViewEventObject && zoomableViewEventObject.zoomLevel !== zoom ) { setZoom(zoomableViewEventObject.zoomLevel); } }} onDoubleTapAfter={(event, gestureState, zoomableViewEventObject) => { if ( zoomableViewEventObject && zoomableViewEventObject.zoomLevel !== zoom ) { setZoom(zoomableViewEventObject.zoomLevel); } }}

{/ children /}

<TouchableOpacity onPress={() => functionThatChangesZoom(1)}>
  <Text>Reset zoom</Text>
</TouchableOpacity>

</>)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/DuDigital/react-native-zoomable-view/issues/44#issuecomment-740850730, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJ72X2X2UHVOTHLI2JHVXGLSTZZETANCNFSM4PFRGNXA .

[SimonErich]

If that did not solve it for you, we now also have events available. Maybe you can work with these better.

Here are the details: https://github.com/DuDigital/react-native-zoomable-view/releases/tag/v1.1.0

Please make sure to install the latest version. (1.1.3 or up for a working version) You can also check out the example repo for an examples: https://github.com/DuDigital/react-native-zoomable-view