@estuary-solutions/rn-core-ui 0.0.4 → 0.1.0

package/lib/module/hooks/DraggableFlatList/useNestedAutoScroll.js

@@ -0,0 +1,87 @@
+"use strict";
+
+import { runOnJS, useAnimatedReaction, useDerivedValue, useSharedValue } from 'react-native-reanimated';
+import { SCROLL_POSITION_TOLERANCE } from '../../constants/DraggableFlatList/constants';
+import { useSafeNestableScrollContainerContext } from '../../context/DraggableFlatList/nestableScrollContainerContext';
+
+// This is mostly copied over from the main react-native-draggable-flatlist
+// useAutoScroll hook with a few notable exceptions:
+// - Since animated values are now coming in via a callback,
+//   we won't guarantee they exist (and default them if not).
+// - Outer scrollable is a ScrollView, not a FlatList
+// TODO: see if we can combine into a single shared `useAutoScroll()` hook
+
+export function useNestedAutoScroll(params) {
+  const {
+    outerScrollOffset,
+    containerSize,
+    scrollableRef,
+    scrollViewSize
+  } = useSafeNestableScrollContainerContext();
+  const DUMMY_VAL = useSharedValue(0);
+  const {
+    hoverOffset = DUMMY_VAL,
+    activeCellSize = DUMMY_VAL,
+    autoscrollSpeed = 100,
+    autoscrollThreshold = 30,
+    isDraggingCell = DUMMY_VAL,
+    isTouchActiveNative = DUMMY_VAL
+  } = params;
+  const hoverScreenOffset = useDerivedValue(() => {
+    return hoverOffset.value - outerScrollOffset.value;
+  }, []);
+  const isScrolledUp = useDerivedValue(() => {
+    return outerScrollOffset.value - SCROLL_POSITION_TOLERANCE <= 0;
+  }, []);
+  const isScrolledDown = useDerivedValue(() => {
+    return outerScrollOffset.value + containerSize.value + SCROLL_POSITION_TOLERANCE >= scrollViewSize.value;
+  }, []);
+  const distToTopEdge = useDerivedValue(() => {
+    return Math.max(0, hoverScreenOffset.value);
+  }, [hoverScreenOffset]);
+  const distToBottomEdge = useDerivedValue(() => {
+    const dist = containerSize.value - (hoverScreenOffset.value + activeCellSize.value);
+    return Math.max(0, dist);
+  }, [hoverScreenOffset, activeCellSize, containerSize]);
+  const isAtTopEdge = useDerivedValue(() => {
+    return distToTopEdge.value <= autoscrollThreshold;
+  }, []);
+  const isAtBottomEdge = useDerivedValue(() => {
+    return distToBottomEdge.value <= autoscrollThreshold;
+  });
+  const scrollTarget = useSharedValue(0);
+  useAnimatedReaction(() => {
+    return isDraggingCell.value;
+  }, (cur, prev) => {
+    if (cur && !prev) {
+      scrollTarget.value = outerScrollOffset.value;
+    }
+  }, [activeCellSize]);
+  function scrollToInternal(y) {
+    scrollableRef.current?.scrollTo({
+      y,
+      animated: true
+    });
+  }
+  useDerivedValue(() => {
+    const isAtEdge = isAtTopEdge.value || isAtBottomEdge.value;
+    const topDisabled = isAtTopEdge.value && isScrolledUp.value;
+    const bottomDisabled = isAtBottomEdge.value && isScrolledDown.value;
+    const isEdgeDisabled = topDisabled || bottomDisabled;
+    const scrollTargetDiff = Math.abs(scrollTarget.value - outerScrollOffset.value);
+    const scrollInProgress = scrollTargetDiff > SCROLL_POSITION_TOLERANCE;
+    const shouldScroll = isAtEdge && !isEdgeDisabled && isDraggingCell.value && isTouchActiveNative.value && !scrollInProgress;
+    const distFromEdge = isAtTopEdge.value ? distToTopEdge.value : distToBottomEdge.value;
+    const speedPct = 1 - distFromEdge / autoscrollThreshold;
+    const offset = speedPct * autoscrollSpeed;
+    const targetOffset = isAtTopEdge.value ? Math.max(0, outerScrollOffset.value - offset) : outerScrollOffset.value + offset;
+    if (shouldScroll) {
+      scrollTarget.value = targetOffset;
+      // Reanimated scrollTo is crashing on android. use 'regular' scrollTo until figured out.
+      // scrollTo(scrollViewRef, 0, scrollTarget.value, true)
+      runOnJS(scrollToInternal)(targetOffset);
+    }
+  }, [autoscrollSpeed, autoscrollThreshold, isDraggingCell]);
+  return null;
+}
+//# sourceMappingURL=useNestedAutoScroll.js.map

package/lib/module/hooks/DraggableFlatList/useNestedAutoScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["runOnJS","useAnimatedReaction","useDerivedValue","useSharedValue","SCROLL_POSITION_TOLERANCE","useSafeNestableScrollContainerContext","useNestedAutoScroll","params","outerScrollOffset","containerSize","scrollableRef","scrollViewSize","DUMMY_VAL","hoverOffset","activeCellSize","autoscrollSpeed","autoscrollThreshold","isDraggingCell","isTouchActiveNative","hoverScreenOffset","value","isScrolledUp","isScrolledDown","distToTopEdge","Math","max","distToBottomEdge","dist","isAtTopEdge","isAtBottomEdge","scrollTarget","cur","prev","scrollToInternal","y","current","scrollTo","animated","isAtEdge","topDisabled","bottomDisabled","isEdgeDisabled","scrollTargetDiff","abs","scrollInProgress","shouldScroll","distFromEdge","speedPct","offset","targetOffset"],"sourceRoot":"../../../../src","sources":["hooks/DraggableFlatList/useNestedAutoScroll.tsx"],"mappings":";;AAAA,SACEA,OAAO,EACPC,mBAAmB,EACnBC,eAAe,EACfC,cAAc,QACT,yBAAyB;AAGhC,SAASC,yBAAyB,QAAQ,6CAA6C;AACvF,SAASC,qCAAqC,QAAQ,gEAAgE;;AAEtH;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,SAASC,mBAAmBA,CAACC,MAQnC,EAAE;EACD,MAAM;IAAEC,iBAAiB;IAAEC,aAAa;IAAEC,aAAa;IAAEC;EAAe,CAAC,GACvEN,qCAAqC,CAAC,CAAC;EAEzC,MAAMO,SAAS,GAAGT,cAAc,CAAC,CAAC,CAAC;EAEnC,MAAM;IACJU,WAAW,GAAGD,SAAS;IACvBE,cAAc,GAAGF,SAAS;IAC1BG,eAAe,GAAG,GAAG;IACrBC,mBAAmB,GAAG,EAAE;IACxBC,cAAc,GAAGL,SAAS;IAC1BM,mBAAmB,GAAGN;EACxB,CAAC,GAAGL,MAAM;EAEV,MAAMY,iBAAiB,GAAGjB,eAAe,CAAC,MAAM;IAC9C,OAAOW,WAAW,CAACO,KAAK,GAAGZ,iBAAiB,CAACY,KAAK;EACpD,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,YAAY,GAAGnB,eAAe,CAAC,MAAM;IACzC,OAAOM,iBAAiB,CAACY,KAAK,GAAGhB,yBAAyB,IAAI,CAAC;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMkB,cAAc,GAAGpB,eAAe,CAAC,MAAM;IAC3C,OACEM,iBAAiB,CAACY,KAAK,GACrBX,aAAa,CAACW,KAAK,GACnBhB,yBAAyB,IAC3BO,cAAc,CAACS,KAAK;EAExB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,aAAa,GAAGrB,eAAe,CAAC,MAAM;IAC1C,OAAOsB,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEN,iBAAiB,CAACC,KAAK,CAAC;EAC7C,CAAC,EAAE,CAACD,iBAAiB,CAAC,CAAC;EAEvB,MAAMO,gBAAgB,GAAGxB,eAAe,CAAC,MAAM;IAC7C,MAAMyB,IAAI,GACRlB,aAAa,CAACW,KAAK,IAAID,iBAAiB,CAACC,KAAK,GAAGN,cAAc,CAACM,KAAK,CAAC;IACxE,OAAOI,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEE,IAAI,CAAC;EAC1B,CAAC,EAAE,CAACR,iBAAiB,EAAEL,cAAc,EAAEL,aAAa,CAAC,CAAC;EAEtD,MAAMmB,WAAW,GAAG1B,eAAe,CAAC,MAAM;IACxC,OAAOqB,aAAa,CAACH,KAAK,IAAIJ,mBAAmB;EACnD,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMa,cAAc,GAAG3B,eAAe,CAAC,MAAM;IAC3C,OAAOwB,gBAAgB,CAACN,KAAK,IAAIJ,mBAAmB;EACtD,CAAC,CAAC;EAEF,MAAMc,YAAY,GAAG3B,cAAc,CAAC,CAAC,CAAC;EAEtCF,mBAAmB,CACjB,MAAM;IACJ,OAAOgB,cAAc,CAACG,KAAK;EAC7B,CAAC,EACD,CAACW,GAAG,EAAEC,IAAI,KAAK;IACb,IAAID,GAAG,IAAI,CAACC,IAAI,EAAE;MAChBF,YAAY,CAACV,KAAK,GAAGZ,iBAAiB,CAACY,KAAK;IAC9C;EACF,CAAC,EACD,CAACN,cAAc,CACjB,CAAC;EAED,SAASmB,gBAAgBA,CAACC,CAAS,EAAE;IACnCxB,aAAa,CAACyB,OAAO,EAAEC,QAAQ,CAAC;MAAEF,CAAC;MAAEG,QAAQ,EAAE;IAAK,CAAC,CAAC;EACxD;EAEAnC,eAAe,CAAC,MAAM;IACpB,MAAMoC,QAAQ,GAAGV,WAAW,CAACR,KAAK,IAAIS,cAAc,CAACT,KAAK;IAC1D,MAAMmB,WAAW,GAAGX,WAAW,CAACR,KAAK,IAAIC,YAAY,CAACD,KAAK;IAC3D,MAAMoB,cAAc,GAAGX,cAAc,CAACT,KAAK,IAAIE,cAAc,CAACF,KAAK;IACnE,MAAMqB,cAAc,GAAGF,WAAW,IAAIC,cAAc;IAEpD,MAAME,gBAAgB,GAAGlB,IAAI,CAACmB,GAAG,CAC/Bb,YAAY,CAACV,KAAK,GAAGZ,iBAAiB,CAACY,KACzC,CAAC;IACD,MAAMwB,gBAAgB,GAAGF,gBAAgB,GAAGtC,yBAAyB;IAErE,MAAMyC,YAAY,GAChBP,QAAQ,IACR,CAACG,cAAc,IACfxB,cAAc,CAACG,KAAK,IACpBF,mBAAmB,CAACE,KAAK,IACzB,CAACwB,gBAAgB;IAEnB,MAAME,YAAY,GAAGlB,WAAW,CAACR,KAAK,GAClCG,aAAa,CAACH,KAAK,GACnBM,gBAAgB,CAACN,KAAK;IAC1B,MAAM2B,QAAQ,GAAG,CAAC,GAAGD,YAAY,GAAG9B,mBAAmB;IACvD,MAAMgC,MAAM,GAAGD,QAAQ,GAAGhC,eAAe;IACzC,MAAMkC,YAAY,GAAGrB,WAAW,CAACR,KAAK,GAClCI,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEjB,iBAAiB,CAACY,KAAK,GAAG4B,MAAM,CAAC,GAC7CxC,iBAAiB,CAACY,KAAK,GAAG4B,MAAM;IACpC,IAAIH,YAAY,EAAE;MAChBf,YAAY,CAACV,KAAK,GAAG6B,YAAY;MACjC;MACA;MACAjD,OAAO,CAACiC,gBAAgB,CAAC,CAACgB,YAAY,CAAC;IACzC;EACF,CAAC,EAAE,CAAClC,eAAe,EAAEC,mBAAmB,EAAEC,cAAc,CAAC,CAAC;EAE1D,OAAO,IAAI;AACb","ignoreList":[]}

package/lib/module/hooks/DraggableFlatList/useOnCellActiveAnimation.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import React from 'react';
+import { useDerivedValue, useSharedValue, withSpring } from 'react-native-reanimated';
+import { DEFAULT_ANIMATION_CONFIG } from '../../constants/DraggableFlatList/constants';
+import { useAnimatedValues } from '../../context/DraggableFlatList/animatedValueContext';
+import { useIsActive } from '../../context/DraggableFlatList/cellContext';
+export function useOnCellActiveAnimation({
+  animationConfig
+} = {
+  animationConfig: {}
+}) {
+  const animationConfigRef = useSharedValue(animationConfig);
+  React.useEffect(() => {
+    animationConfigRef.value = animationConfig;
+  }, [animationConfig]);
+  const isActive = useIsActive();
+  const {
+    isTouchActiveNative
+  } = useAnimatedValues();
+  const onActiveAnim = useDerivedValue(() => {
+    const toVal = isActive && isTouchActiveNative.value ? 1 : 0;
+    return withSpring(toVal, {
+      ...DEFAULT_ANIMATION_CONFIG,
+      ...animationConfigRef.value
+    });
+  }, [isActive]);
+  return {
+    isActive,
+    onActiveAnim
+  };
+}
+//# sourceMappingURL=useOnCellActiveAnimation.js.map

package/lib/module/hooks/DraggableFlatList/useOnCellActiveAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useDerivedValue","useSharedValue","withSpring","DEFAULT_ANIMATION_CONFIG","useAnimatedValues","useIsActive","useOnCellActiveAnimation","animationConfig","animationConfigRef","useEffect","value","isActive","isTouchActiveNative","onActiveAnim","toVal"],"sourceRoot":"../../../../src","sources":["hooks/DraggableFlatList/useOnCellActiveAnimation.ts"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SACEC,eAAe,EACfC,cAAc,EACdC,UAAU,QAEL,yBAAyB;AAEhC,SAASC,wBAAwB,QAAQ,6CAA6C;AACtF,SAASC,iBAAiB,QAAQ,sDAAsD;AACxF,SAASC,WAAW,QAAQ,6CAA6C;AAMzE,OAAO,SAASC,wBAAwBA,CACtC;EAAEC;AAAwB,CAAC,GAAG;EAAEA,eAAe,EAAE,CAAC;AAAE,CAAC,EACrD;EACA,MAAMC,kBAAkB,GAAGP,cAAc,CAACM,eAAe,CAAC;EAE1DR,KAAK,CAACU,SAAS,CAAC,MAAM;IACpBD,kBAAkB,CAACE,KAAK,GAAGH,eAAe;EAC5C,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC;EAErB,MAAMI,QAAQ,GAAGN,WAAW,CAAC,CAAC;EAE9B,MAAM;IAAEO;EAAoB,CAAC,GAAGR,iBAAiB,CAAC,CAAC;EAEnD,MAAMS,YAAY,GAAGb,eAAe,CAAC,MAAM;IACzC,MAAMc,KAAK,GAAGH,QAAQ,IAAIC,mBAAmB,CAACF,KAAK,GAAG,CAAC,GAAG,CAAC;IAC3D,OAAOR,UAAU,CAACY,KAAK,EAAE;MACvB,GAAGX,wBAAwB;MAC3B,GAAGK,kBAAkB,CAACE;IACxB,CAAqB,CAAC;EACxB,CAAC,EAAE,CAACC,QAAQ,CAAC,CAAC;EAEd,OAAO;IACLA,QAAQ;IACRE;EACF,CAAC;AACH","ignoreList":[]}

package/lib/module/hooks/DraggableFlatList/useOnCellActiveAnimation.web.js

@@ -0,0 +1,16 @@
+"use strict";
+
+import { useIsActive } from '../../context/DraggableFlatList/cellContext';
+// Web counterpart of useOnCellActiveAnimation.ts: no reanimated, the decorators animate with CSS.
+export function useOnCellActiveAnimation(_params = {
+  animationConfig: {}
+}) {
+  const isActive = useIsActive();
+  return {
+    isActive,
+    onActiveAnim: {
+      value: isActive ? 1 : 0
+    }
+  };
+}
+//# sourceMappingURL=useOnCellActiveAnimation.web.js.map

package/lib/module/hooks/DraggableFlatList/useOnCellActiveAnimation.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useIsActive","useOnCellActiveAnimation","_params","animationConfig","isActive","onActiveAnim","value"],"sourceRoot":"../../../../src","sources":["hooks/DraggableFlatList/useOnCellActiveAnimation.web.ts"],"mappings":";;AAEA,SAASA,WAAW,QAAQ,6CAA6C;AAMzE;AACA,OAAO,SAASC,wBAAwBA,CACtCC,OAAe,GAAG;EAAEC,eAAe,EAAE,CAAC;AAAE,CAAC,EACzC;EACA,MAAMC,QAAQ,GAAGJ,WAAW,CAAC,CAAC;EAE9B,OAAO;IACLI,QAAQ;IACRC,YAAY,EAAE;MAAEC,KAAK,EAAEF,QAAQ,GAAG,CAAC,GAAG;IAAE;EAC1C,CAAC;AACH","ignoreList":[]}

package/lib/module/hooks/DraggableFlatList/useStableCallback.js

@@ -0,0 +1,16 @@
+"use strict";
+
+import React from 'react';
+
+// Utility hook that returns a function that never has stale dependencies, but
+// without changing identity, as a useCallback with dep array would.
+// Useful for functions that depend on external state, but
+// should not trigger effects when that external state changes.
+
+export function useStableCallback(cb) {
+  const cbRef = React.useRef(cb);
+  cbRef.current = cb;
+  const identityRetainingCb = React.useCallback((...args) => cbRef.current(...args), []);
+  return identityRetainingCb;
+}
+//# sourceMappingURL=useStableCallback.js.map

package/lib/module/hooks/DraggableFlatList/useStableCallback.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useStableCallback","cb","cbRef","useRef","current","identityRetainingCb","useCallback","args"],"sourceRoot":"../../../../src","sources":["hooks/DraggableFlatList/useStableCallback.ts"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA;;AAEA,OAAO,SAASC,iBAAiBA,CAE/BC,EAAK,EAAE;EACP,MAAMC,KAAK,GAAGH,KAAK,CAACI,MAAM,CAACF,EAAE,CAAC;EAC9BC,KAAK,CAACE,OAAO,GAAGH,EAAE;EAClB,MAAMI,mBAAmB,GAAGN,KAAK,CAACO,WAAW,CAC3C,CAAC,GAAGC,IAAmB,KAAKL,KAAK,CAACE,OAAO,CAAC,GAAGG,IAAI,CAAC,EAClD,EACF,CAAC;EACD,OAAOF,mBAAmB;AAC5B","ignoreList":[]}

package/lib/module/hooks/ImageView/useAnimatedComponents.js

@@ -0,0 +1,39 @@
+"use strict";
+
+import { Animated } from 'react-native';
+const INITIAL_POSITION = {
+  x: 0,
+  y: 0
+};
+const ANIMATION_CONFIG = {
+  duration: 200,
+  useNativeDriver: true
+};
+const useAnimatedComponents = () => {
+  const headerTranslate = new Animated.ValueXY(INITIAL_POSITION);
+  const footerTranslate = new Animated.ValueXY(INITIAL_POSITION);
+  const toggleVisible = isVisible => {
+    if (isVisible) {
+      Animated.parallel([Animated.timing(headerTranslate.y, {
+        ...ANIMATION_CONFIG,
+        toValue: 0
+      }), Animated.timing(footerTranslate.y, {
+        ...ANIMATION_CONFIG,
+        toValue: 0
+      })]).start();
+    } else {
+      Animated.parallel([Animated.timing(headerTranslate.y, {
+        ...ANIMATION_CONFIG,
+        toValue: -300
+      }), Animated.timing(footerTranslate.y, {
+        ...ANIMATION_CONFIG,
+        toValue: 300
+      })]).start();
+    }
+  };
+  const headerTransform = headerTranslate.getTranslateTransform();
+  const footerTransform = footerTranslate.getTranslateTransform();
+  return [headerTransform, footerTransform, toggleVisible];
+};
+export default useAnimatedComponents;
+//# sourceMappingURL=useAnimatedComponents.js.map

package/lib/module/hooks/ImageView/useAnimatedComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Animated","INITIAL_POSITION","x","y","ANIMATION_CONFIG","duration","useNativeDriver","useAnimatedComponents","headerTranslate","ValueXY","footerTranslate","toggleVisible","isVisible","parallel","timing","toValue","start","headerTransform","getTranslateTransform","footerTransform"],"sourceRoot":"../../../../src","sources":["hooks/ImageView/useAnimatedComponents.ts"],"mappings":";;AAAA,SAASA,QAAQ,QAAQ,cAAc;AAEvC,MAAMC,gBAAgB,GAAG;EAAEC,CAAC,EAAE,CAAC;EAAEC,CAAC,EAAE;AAAE,CAAC;AACvC,MAAMC,gBAAgB,GAAG;EACvBC,QAAQ,EAAE,GAAG;EACbC,eAAe,EAAE;AACnB,CAAC;AAED,MAAMC,qBAAqB,GAAGA,CAAA,KAAM;EAClC,MAAMC,eAAe,GAAG,IAAIR,QAAQ,CAACS,OAAO,CAACR,gBAAgB,CAAC;EAC9D,MAAMS,eAAe,GAAG,IAAIV,QAAQ,CAACS,OAAO,CAACR,gBAAgB,CAAC;EAE9D,MAAMU,aAAa,GAAIC,SAAkB,IAAK;IAC5C,IAAIA,SAAS,EAAE;MACbZ,QAAQ,CAACa,QAAQ,CAAC,CAChBb,QAAQ,CAACc,MAAM,CAACN,eAAe,CAACL,CAAC,EAAE;QAAE,GAAGC,gBAAgB;QAAEW,OAAO,EAAE;MAAE,CAAC,CAAC,EACvEf,QAAQ,CAACc,MAAM,CAACJ,eAAe,CAACP,CAAC,EAAE;QAAE,GAAGC,gBAAgB;QAAEW,OAAO,EAAE;MAAE,CAAC,CAAC,CACxE,CAAC,CAACC,KAAK,CAAC,CAAC;IACZ,CAAC,MAAM;MACLhB,QAAQ,CAACa,QAAQ,CAAC,CAChBb,QAAQ,CAACc,MAAM,CAACN,eAAe,CAACL,CAAC,EAAE;QACjC,GAAGC,gBAAgB;QACnBW,OAAO,EAAE,CAAC;MACZ,CAAC,CAAC,EACFf,QAAQ,CAACc,MAAM,CAACJ,eAAe,CAACP,CAAC,EAAE;QACjC,GAAGC,gBAAgB;QACnBW,OAAO,EAAE;MACX,CAAC,CAAC,CACH,CAAC,CAACC,KAAK,CAAC,CAAC;IACZ;EACF,CAAC;EAED,MAAMC,eAAe,GAAGT,eAAe,CAACU,qBAAqB,CAAC,CAAC;EAC/D,MAAMC,eAAe,GAAGT,eAAe,CAACQ,qBAAqB,CAAC,CAAC;EAE/D,OAAO,CAACD,eAAe,EAAEE,eAAe,EAAER,aAAa,CAAC;AAC1D,CAAC;AAED,eAAeJ,qBAAqB","ignoreList":[]}

package/lib/module/hooks/ImageView/useDoubleTapToZoom.js

@@ -0,0 +1,50 @@
+"use strict";
+
+import React from 'react';
+import { windowHeight as height, windowWidth as width } from '../../utils/ImageView/window';
+const DOUBLE_TAP_DELAY = 300;
+let lastTapTS = null;
+
+/**
+ * This is iOS only.
+ * Same functionality for Android implemented inside usePanResponder hook.
+ */
+function useDoubleTapToZoom(scrollViewRef, scaled) {
+  const handleDoubleTap = React.useCallback(event => {
+    const nowTS = new Date().getTime();
+    const scrollResponderRef = scrollViewRef?.current?.getScrollResponder();
+    if (lastTapTS && nowTS - lastTapTS < DOUBLE_TAP_DELAY) {
+      const {
+        pageX,
+        pageY
+      } = event.nativeEvent;
+      let targetX = 0;
+      let targetY = 0;
+      let targetWidth = width;
+      let targetHeight = height;
+
+      // Zooming in
+      // TODO: Add more precise calculation of targetX, targetY based on touch
+      if (!scaled) {
+        targetX = pageX / 2;
+        targetY = pageY / 2;
+        targetWidth = width / 2;
+        targetHeight = height / 2;
+      }
+
+      // @ts-ignore
+      scrollResponderRef?.scrollResponderZoomTo({
+        x: targetX,
+        y: targetY,
+        width: targetWidth,
+        height: targetHeight,
+        animated: true
+      });
+    } else {
+      lastTapTS = nowTS;
+    }
+  }, [scaled]);
+  return handleDoubleTap;
+}
+export default useDoubleTapToZoom;
+//# sourceMappingURL=useDoubleTapToZoom.js.map

package/lib/module/hooks/ImageView/useDoubleTapToZoom.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","windowHeight","height","windowWidth","width","DOUBLE_TAP_DELAY","lastTapTS","useDoubleTapToZoom","scrollViewRef","scaled","handleDoubleTap","useCallback","event","nowTS","Date","getTime","scrollResponderRef","current","getScrollResponder","pageX","pageY","nativeEvent","targetX","targetY","targetWidth","targetHeight","scrollResponderZoomTo","x","y","animated"],"sourceRoot":"../../../../src","sources":["hooks/ImageView/useDoubleTapToZoom.ts"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAOzB,SACEC,YAAY,IAAIC,MAAM,EACtBC,WAAW,IAAIC,KAAK,QACf,8BAA8B;AAErC,MAAMC,gBAAgB,GAAG,GAAG;AAC5B,IAAIC,SAAwB,GAAG,IAAI;;AAEnC;AACA;AACA;AACA;AACA,SAASC,kBAAkBA,CACzBC,aAA0C,EAC1CC,MAAe,EACf;EACA,MAAMC,eAAe,GAAGV,KAAK,CAACW,WAAW,CACtCC,KAA6C,IAAK;IACjD,MAAMC,KAAK,GAAG,IAAIC,IAAI,CAAC,CAAC,CAACC,OAAO,CAAC,CAAC;IAClC,MAAMC,kBAAkB,GAAGR,aAAa,EAAES,OAAO,EAAEC,kBAAkB,CAAC,CAAC;IAEvE,IAAIZ,SAAS,IAAIO,KAAK,GAAGP,SAAS,GAAGD,gBAAgB,EAAE;MACrD,MAAM;QAAEc,KAAK;QAAEC;MAAM,CAAC,GAAGR,KAAK,CAACS,WAAW;MAC1C,IAAIC,OAAO,GAAG,CAAC;MACf,IAAIC,OAAO,GAAG,CAAC;MACf,IAAIC,WAAW,GAAGpB,KAAK;MACvB,IAAIqB,YAAY,GAAGvB,MAAM;;MAEzB;MACA;MACA,IAAI,CAACO,MAAM,EAAE;QACXa,OAAO,GAAGH,KAAK,GAAG,CAAC;QACnBI,OAAO,GAAGH,KAAK,GAAG,CAAC;QACnBI,WAAW,GAAGpB,KAAK,GAAG,CAAC;QACvBqB,YAAY,GAAGvB,MAAM,GAAG,CAAC;MAC3B;;MAEA;MACAc,kBAAkB,EAAEU,qBAAqB,CAAC;QACxCC,CAAC,EAAEL,OAAO;QACVM,CAAC,EAAEL,OAAO;QACVnB,KAAK,EAAEoB,WAAW;QAClBtB,MAAM,EAAEuB,YAAY;QACpBI,QAAQ,EAAE;MACZ,CAAC,CAAC;IACJ,CAAC,MAAM;MACLvB,SAAS,GAAGO,KAAK;IACnB;EACF,CAAC,EACD,CAACJ,MAAM,CACT,CAAC;EAED,OAAOC,eAAe;AACxB;AAEA,eAAeH,kBAAkB","ignoreList":[]}

package/lib/module/hooks/ImageView/useImageDimensions.js

@@ -0,0 +1,114 @@
+"use strict";
+
+import React from 'react';
+import { Image as RNImage } from 'react-native';
+import { createCache } from '../../utils/ImageView';
+import { WEB } from '../../utils';
+const CACHE_SIZE = 50;
+const imageDimensionsCache = createCache(CACHE_SIZE);
+const useImageDimensions = image => {
+  const [dimensions, setDimensions] = React.useState(null);
+  const getImageDimensions = image => {
+    return new Promise(resolve => {
+      if (typeof image === 'number') {
+        const cacheKey = `${image}`;
+        let imageDimensions = imageDimensionsCache.get(cacheKey);
+        if (!imageDimensions) {
+          const {
+            width,
+            height
+          } = RNImage.resolveAssetSource(image);
+          imageDimensions = {
+            width,
+            height
+          };
+          imageDimensionsCache.set(cacheKey, imageDimensions);
+        }
+        resolve(imageDimensions);
+        return;
+      }
+
+      // @ts-ignore
+      if (image.uri) {
+        const source = image;
+        const cacheKey = source.uri;
+        const imageDimensions = imageDimensionsCache.get(cacheKey);
+        if (imageDimensions) {
+          resolve(imageDimensions);
+        } else {
+          if (WEB) {
+            // const img = new window.Image();
+            // // @ts-ignore
+            // img.src = source.uri;
+            // img.onload = () => {
+            //   imageDimensionsCache.set(cacheKey, {
+            //     width: img.naturalWidth,
+            //     height: img.naturalHeight,
+            //   });
+            //   console.log('check img', img.naturalWidth, img.naturalHeight);
+
+            //   resolve({ width: img.naturalWidth, height: img.naturalHeight });
+            // };
+            // img.onerror = () => resolve({ width: 0, height: 0 });
+            const img = new Image();
+            img.crossOrigin = 'anonymous'; // needed for remote images
+            img.onload = () => {
+              // Draw to canvas to get exact width/height
+              const canvas = document.createElement('canvas');
+              canvas.width = img.width;
+              canvas.height = img.height;
+              const ctx = canvas.getContext('2d');
+              ctx?.drawImage(img, 0, 0);
+              resolve({
+                width: canvas.width,
+                height: canvas.height
+              });
+            };
+            img.onerror = () => resolve({
+              width: 0,
+              height: 0
+            });
+            img.src = source.uri || '';
+          } else {
+            RNImage.getSizeWithHeaders(
+            // @ts-ignore
+            source.uri, source.headers, (width, height) => {
+              imageDimensionsCache.set(cacheKey, {
+                width,
+                height
+              });
+              resolve({
+                width,
+                height
+              });
+            }, () => {
+              resolve({
+                width: 0,
+                height: 0
+              });
+            });
+          }
+        }
+      } else {
+        resolve({
+          width: 0,
+          height: 0
+        });
+      }
+    });
+  };
+  let isImageUnmounted = false;
+  React.useEffect(() => {
+    getImageDimensions(image).then(dimensions => {
+      if (!isImageUnmounted) {
+        setDimensions(dimensions);
+      }
+    });
+    return () => {
+      isImageUnmounted = true;
+    };
+  }, [image]);
+  return dimensions;
+};
+export default useImageDimensions;
+//# sourceMappingURL=useImageDimensions.js.map

package/lib/module/hooks/ImageView/useImageDimensions.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Image","RNImage","createCache","WEB","CACHE_SIZE","imageDimensionsCache","useImageDimensions","image","dimensions","setDimensions","useState","getImageDimensions","Promise","resolve","cacheKey","imageDimensions","get","width","height","resolveAssetSource","set","uri","source","img","crossOrigin","onload","canvas","document","createElement","ctx","getContext","drawImage","onerror","src","getSizeWithHeaders","headers","isImageUnmounted","useEffect","then"],"sourceRoot":"../../../../src","sources":["hooks/ImageView/useImageDimensions.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/hooks/ImageView/useImageIndexChange.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import React from 'react';
+import { windowWidth as width } from '../../utils/ImageView/window';
+const useImageIndexChange = imageIndex => {
+  const [currentImageIndex, setImageIndex] = React.useState(imageIndex);
+  const onScroll = event => {
+    const {
+      nativeEvent: {
+        contentOffset: {
+          x: scrollX
+        }
+      }
+    } = event;
+    if (width) {
+      const nextIndex = Math.round(scrollX / width);
+      setImageIndex(nextIndex < 0 ? 0 : nextIndex);
+    }
+  };
+  return [currentImageIndex, onScroll];
+};
+export default useImageIndexChange;
+//# sourceMappingURL=useImageIndexChange.js.map

package/lib/module/hooks/ImageView/useImageIndexChange.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","windowWidth","width","useImageIndexChange","imageIndex","currentImageIndex","setImageIndex","useState","onScroll","event","nativeEvent","contentOffset","x","scrollX","nextIndex","Math","round"],"sourceRoot":"../../../../src","sources":["hooks/ImageView/useImageIndexChange.ts"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAASC,WAAW,IAAIC,KAAK,QAAQ,8BAA8B;AAEnE,MAAMC,mBAAmB,GAAIC,UAAkB,IAAK;EAClD,MAAM,CAACC,iBAAiB,EAAEC,aAAa,CAAC,GAAGN,KAAK,CAACO,QAAQ,CAACH,UAAU,CAAC;EACrE,MAAMI,QAAQ,GAAIC,KAA8C,IAAK;IACnE,MAAM;MACJC,WAAW,EAAE;QACXC,aAAa,EAAE;UAAEC,CAAC,EAAEC;QAAQ;MAC9B;IACF,CAAC,GAAGJ,KAAK;IAET,IAAIP,KAAK,EAAE;MACT,MAAMY,SAAS,GAAGC,IAAI,CAACC,KAAK,CAACH,OAAO,GAAGX,KAAK,CAAC;MAC7CI,aAAa,CAACQ,SAAS,GAAG,CAAC,GAAG,CAAC,GAAGA,SAAS,CAAC;IAC9C;EACF,CAAC;EAED,OAAO,CAACT,iBAAiB,EAAEG,QAAQ,CAAC;AACtC,CAAC;AAED,eAAeL,mBAAmB","ignoreList":[]}

package/lib/module/hooks/ImageView/useImagePrefetch.js

@@ -0,0 +1,17 @@
+"use strict";
+
+import React from 'react';
+import { Image } from 'react-native';
+const useImagePrefetch = images => {
+  React.useEffect(() => {
+    images.forEach(image => {
+      //@ts-ignore
+      if (image.uri) {
+        //@ts-ignore
+        return Image.prefetch(image.uri);
+      }
+    });
+  }, []);
+};
+export default useImagePrefetch;
+//# sourceMappingURL=useImagePrefetch.js.map

package/lib/module/hooks/ImageView/useImagePrefetch.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Image","useImagePrefetch","images","useEffect","forEach","image","uri","prefetch"],"sourceRoot":"../../../../src","sources":["hooks/ImageView/useImagePrefetch.ts"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,KAAK,QAAQ,cAAc;AAIpC,MAAMC,gBAAgB,GAAIC,MAAqB,IAAK;EAClDH,KAAK,CAACI,SAAS,CAAC,MAAM;IACpBD,MAAM,CAACE,OAAO,CAACC,KAAK,IAAI;MACtB;MACA,IAAIA,KAAK,CAACC,GAAG,EAAE;QACb;QACA,OAAON,KAAK,CAACO,QAAQ,CAACF,KAAK,CAACC,GAAG,CAAC;MAClC;IACF,CAAC,CAAC;EACJ,CAAC,EAAE,EAAE,CAAC;AACR,CAAC;AAED,eAAeL,gBAAgB","ignoreList":[]}