react-native-screen-transitions 3.4.0-alpha.3 → 3.4.0-alpha.5

package/lib/commonjs/shared/utils/bounds/zoom/build.js

@@ -7,308 +7,51 @@ exports.buildZoomStyles = void 0;
 var _reactNativeReanimated = require("react-native-reanimated");
 var _constants = require("../../../constants");
 var _bounds = require("../../../stores/bounds");
+var _computeBoundsStyles = require("../helpers/compute-bounds-styles");
 var _config = require("./config");
+var _math = require("./math");
 const IDENTITY_DRAG_SCALE_OUTPUT = [1, 1];
-const clamp = (value, min, max) => {
+const getSourceBorderRadius = resolvedPair => {
   "worklet";
 
-  const lower = min < max ? min : max;
-  const upper = max > min ? max : min;
-  if (value < lower) return lower;
-  if (value > upper) return upper;
-  return value;
-};
-const clamp01 = value => {
-  "worklet";
-
-  return clamp(value, 0, 1);
-};
-const lerp = (from, to, t) => {
-  "worklet";
-
-  return from + (to - from) * t;
-};
-const safeDivide = (numerator, denominator, fallback = 0) => {
-  "worklet";
-
-  if (denominator === 0) return fallback;
-  return numerator / denominator;
-};
-const inverseLerp = (value, inMin, inMax) => {
-  "worklet";
-
-  return safeDivide(value - inMin, inMax - inMin, 0);
-};
-const mapRangeClamped = (value, inMin, inMax, outMin, outMax) => {
-  "worklet";
-
-  const t = clamp01(inverseLerp(value, inMin, inMax));
-  return lerp(outMin, outMax, t);
-};
-const applyPowerCurve = (value, exponent) => {
-  "worklet";
-
-  const safeExponent = exponent > 0 ? exponent : 1;
-  const magnitude = Math.abs(value) ** safeExponent;
-  return value < 0 ? -magnitude : magnitude;
-};
-const normalizedToTranslation = ({
-  normalized,
-  dimension,
-  resistance
-}) => {
-  "worklet";
-
-  const distance = Math.max(0, dimension) * resistance;
-  return mapRangeClamped(normalized, -1, 1, -distance, distance);
-};
-const normalizedToScale = ({
-  normalized,
-  outputRange,
-  exponent = 1,
-  positiveOnly = true
-}) => {
-  "worklet";
-
-  const [outputStart, outputEnd] = outputRange;
-  const raw = positiveOnly ? mapRangeClamped(normalized, 0, 1, outputStart, outputEnd) : mapRangeClamped(normalized, -1, 1, outputStart, outputEnd);
-  return applyPowerCurve(raw, exponent);
-};
-const combineScales = (scaleX, scaleY, mode = "multiply") => {
-  "worklet";
-
-  switch (mode) {
-    case "average":
-      return (scaleX + scaleY) / 2;
-    case "max":
-      return Math.max(scaleX, scaleY);
-    case "min":
-      return Math.min(scaleX, scaleY);
-    default:
-      return scaleX * scaleY;
-  }
-};
-const computeCenterScaleShift = ({
-  center,
-  containerCenter,
-  scale
-}) => {
-  "worklet";
-
-  return (center - containerCenter) * (scale - 1);
-};
-const compensateTranslationForParentScale = ({
-  translation,
-  parentScale,
-  epsilon
-}) => {
-  "worklet";
-
-  const safeParentScale = Math.max(parentScale, epsilon);
-  return safeDivide(translation, safeParentScale, translation);
-};
-const composeCompensatedTranslation = ({
-  gesture,
-  parentScale,
-  centerShift = 0,
-  epsilon
-}) => {
-  "worklet";
-
-  return compensateTranslationForParentScale({
-    translation: gesture,
-    parentScale,
-    epsilon
-  }) + centerShift;
-};
-const resolveDirectionalDragScale = ({
-  normalized,
-  dismissDirection,
-  shrinkMin,
-  growMax,
-  exponent
-}) => {
-  "worklet";
-
-  const dismissalRelative = dismissDirection === "negative" ? -normalized : normalized;
-  if (dismissalRelative >= 0) {
-    return normalizedToScale({
-      normalized: dismissalRelative,
-      outputRange: [1, shrinkMin],
-      exponent
-    });
-  }
-  const oppositeDrag = Math.min(1, Math.abs(dismissalRelative));
-  return (0, _reactNativeReanimated.interpolate)(oppositeDrag, [0, 1], [1, growMax], "clamp");
+  return typeof resolvedPair.sourceStyles?.borderRadius === "number" ? resolvedPair.sourceStyles.borderRadius : 0;
 };
 const getZoomContentTarget = ({
   explicitTarget,
-  resolvedTag,
-  currentRouteKey,
-  previousRouteKey,
-  nextRouteKey,
-  entering,
   screenLayout,
   anchor,
   resolvedPair
 }) => {
   "worklet";
 
-  if (explicitTarget !== undefined) return explicitTarget;
-  const pair = resolvedPair ?? _bounds.BoundStore.resolveTransitionPair(resolvedTag, {
-    currentScreenKey: currentRouteKey,
-    previousScreenKey: previousRouteKey,
-    nextScreenKey: nextRouteKey,
-    entering
-  });
-  const sourceBounds = pair.sourceBounds;
+  if (explicitTarget) return explicitTarget;
+  const sourceBounds = resolvedPair.sourceBounds;
   const screenWidth = screenLayout.width;
   if (!sourceBounds || sourceBounds.width <= 0 || screenWidth <= 0) {
     return "fullscreen";
   }
   const height = sourceBounds.height / sourceBounds.width * screenWidth;
-  let horizontalAnchor;
-  switch (anchor) {
-    case "topLeading":
-    case "leading":
-    case "bottomLeading":
-      horizontalAnchor = "leading";
-      break;
-    case "topTrailing":
-    case "trailing":
-    case "bottomTrailing":
-      horizontalAnchor = "trailing";
-      break;
-    default:
-      horizontalAnchor = "center";
-      break;
-  }
-  let verticalAnchor;
-  switch (anchor) {
-    case "topLeading":
-    case "top":
-    case "topTrailing":
-      verticalAnchor = "top";
-      break;
-    case "bottomLeading":
-    case "bottom":
-    case "bottomTrailing":
-      verticalAnchor = "bottom";
-      break;
-    default:
-      verticalAnchor = "center";
-      break;
-  }
-  const x = horizontalAnchor === "leading" ? 0 : horizontalAnchor === "trailing" ? screenLayout.width - screenWidth : (screenLayout.width - screenWidth) / 2;
+  const verticalAnchor = anchor === "bottomLeading" || anchor === "bottom" || anchor === "bottomTrailing" ? "bottom" : anchor === "center" || anchor === "leading" || anchor === "trailing" ? "center" : "top";
   const y = verticalAnchor === "top" ? 0 : verticalAnchor === "bottom" ? screenLayout.height - height : (screenLayout.height - height) / 2;
   return {
-    x,
+    x: 0,
     y,
-    pageX: x,
+    pageX: 0,
     pageY: y,
     width: screenWidth,
     height
   };
 };
-const getStyleRadius = (styles, property) => {
-  "worklet";
-
-  if (!styles || typeof styles !== "object") return undefined;
-  const styleRecord = styles;
-  const direct = styleRecord[property];
-  if (typeof direct === "number") return direct;
-  if (property !== "borderRadius") {
-    const fallback = styleRecord.borderRadius;
-    if (typeof fallback === "number") return fallback;
-  }
-  return undefined;
-};
-const resolveRadiusRange = ({
-  value,
-  progress,
-  sourceRadius,
-  destinationRadius,
-  fallback
-}) => {
-  "worklet";
-
-  if (typeof value === "number") return value;
-  if (value === "auto") {
-    const from = sourceRadius ?? fallback;
-    const to = destinationRadius ?? fallback;
-    return (0, _reactNativeReanimated.interpolate)(progress, [0, 1], [from, to], "clamp");
-  }
-  if (value && typeof value === "object") {
-    const from = typeof value.from === "number" ? value.from : fallback;
-    const to = typeof value.to === "number" ? value.to : fallback;
-    return (0, _reactNativeReanimated.interpolate)(progress, [0, 1], [from, to], "clamp");
-  }
-  const from = sourceRadius ?? fallback;
-  const to = destinationRadius ?? fallback;
-  return (0, _reactNativeReanimated.interpolate)(progress, [0, 1], [from, to], "clamp");
-};
-const resolveMaskRadii = ({
-  progress,
-  zoomOptions,
-  resolvedPair
-}) => {
-  "worklet";
-
-  const sourceStyles = resolvedPair.sourceStyles;
-  const destinationStyles = resolvedPair.destinationStyles;
-  const defaultRadius = resolveRadiusRange({
-    value: zoomOptions.mask.borderRadius,
-    progress,
-    sourceRadius: getStyleRadius(sourceStyles, "borderRadius"),
-    destinationRadius: getStyleRadius(destinationStyles, "borderRadius"),
-    fallback: 12
-  });
-  const topLeftValue = zoomOptions.mask.borderTopLeftRadius ?? zoomOptions.mask.borderRadius;
-  const topRightValue = zoomOptions.mask.borderTopRightRadius ?? zoomOptions.mask.borderRadius;
-  const bottomLeftValue = zoomOptions.mask.borderBottomLeftRadius ?? zoomOptions.mask.borderRadius;
-  const bottomRightValue = zoomOptions.mask.borderBottomRightRadius ?? zoomOptions.mask.borderRadius;
-  return {
-    borderRadius: defaultRadius,
-    borderTopLeftRadius: resolveRadiusRange({
-      value: topLeftValue,
-      progress,
-      sourceRadius: getStyleRadius(sourceStyles, "borderTopLeftRadius"),
-      destinationRadius: getStyleRadius(destinationStyles, "borderTopLeftRadius"),
-      fallback: defaultRadius
-    }),
-    borderTopRightRadius: resolveRadiusRange({
-      value: topRightValue,
-      progress,
-      sourceRadius: getStyleRadius(sourceStyles, "borderTopRightRadius"),
-      destinationRadius: getStyleRadius(destinationStyles, "borderTopRightRadius"),
-      fallback: defaultRadius
-    }),
-    borderBottomLeftRadius: resolveRadiusRange({
-      value: bottomLeftValue,
-      progress,
-      sourceRadius: getStyleRadius(sourceStyles, "borderBottomLeftRadius"),
-      destinationRadius: getStyleRadius(destinationStyles, "borderBottomLeftRadius"),
-      fallback: defaultRadius
-    }),
-    borderBottomRightRadius: resolveRadiusRange({
-      value: bottomRightValue,
-      progress,
-      sourceRadius: getStyleRadius(sourceStyles, "borderBottomRightRadius"),
-      destinationRadius: getStyleRadius(destinationStyles, "borderBottomRightRadius"),
-      fallback: defaultRadius
-    })
-  };
-};
 const buildZoomStyles = ({
-  id,
-  group,
+  resolvedTag,
   zoomOptions,
-  props,
-  resolveTag,
-  computeRaw
+  props
 }) => {
   "worklet";
 
+  if (!resolvedTag) return {};
+  const explicitTarget = zoomOptions?.target;
+  const debug = zoomOptions?.DEBUG === true;
   const focused = props.focused;
   const progress = props.progress;
   const currentRouteKey = props.current?.route.key;
@@ -316,94 +59,103 @@ const buildZoomStyles = ({
   const nextRouteKey = props.next?.route.key;
   const entering = !props.next;
   const screenLayout = props.layouts.screen;
-  const transitionContext = {
+  const resolvedZoomAnchor = (0, _config.getZoomAnchor)(explicitTarget);
+  const zoomComputeParams = {
+    id: resolvedTag,
+    previous: props.previous,
+    current: props.current,
+    next: props.next,
+    progress,
+    dimensions: screenLayout
+  };
+  const baseRawOptions = {
+    id: resolvedTag,
+    raw: true,
+    scaleMode: _config.ZOOM_SHARED_OPTIONS.scaleMode
+  };
+  const resolvedPair = _bounds.BoundStore.resolveTransitionPair(resolvedTag, {
     currentScreenKey: currentRouteKey,
     previousScreenKey: previousRouteKey,
     nextScreenKey: nextRouteKey,
     entering
-  };
-  const resolvedConfig = (0, _config.resolveZoomConfig)({
-    id,
-    group,
-    zoomOptions,
-    currentRouteKey,
-    resolveTag,
-    defaultAnchor: "top"
   });
-  if (!resolvedConfig) return null;
-  const {
-    resolvedTag,
-    sharedOptions,
-    explicitTarget,
-    zoomOptions: resolvedZoomOptions
-  } = resolvedConfig;
-  const resolvedPair = _bounds.BoundStore.resolveTransitionPair(resolvedTag, transitionContext);
+  const sourceBorderRadius = getSourceBorderRadius(resolvedPair);
+  const targetBorderRadius = zoomOptions?.borderRadius ?? sourceBorderRadius;
   const focusedVisibilityStyles = {
     [resolvedTag]: _constants.VISIBLE_STYLE
   };
-  if (!resolvedPair.sourceBounds) {
+  const focusedContainerStyleId = props.navigationMaskEnabled ? _constants.NAVIGATION_MASK_CONTAINER_STYLE_ID : "content";
+
+  // To avoid initial flickering, we'll want to hide if there are no source bounds
+  // But to also avoid scenarios where activeId changes in dst and theres a failed measurement,
+  // we should only hide if entering and there is no source bounds.
+  if (!resolvedPair.sourceBounds && props.active.entering) {
     return {
-      [_constants.NAVIGATION_MASK_CONTAINER_STYLE_ID]: _constants.HIDDEN_STYLE
+      [focusedContainerStyleId]: _constants.HIDDEN_STYLE
     };
   }
   const normX = props.active.gesture.normX;
   const normY = props.active.gesture.normY;
   const initialDirection = props.active.gesture.direction;
-  const dragX = normalizedToTranslation({
+  const dragX = (0, _math.normalizedToTranslation)({
     normalized: normX,
     dimension: screenLayout.width,
-    resistance: resolvedZoomOptions.motion.dragResistance
+    resistance: _config.ZOOM_DRAG_RESISTANCE
   });
-  const dragY = normalizedToTranslation({
+  const dragY = (0, _math.normalizedToTranslation)({
     normalized: normY,
     dimension: screenLayout.height,
-    resistance: resolvedZoomOptions.motion.dragResistance
+    resistance: _config.ZOOM_DRAG_RESISTANCE
   });
-  const dragXScale = initialDirection === "horizontal" || initialDirection === "horizontal-inverted" ? resolveDirectionalDragScale({
+  const dragXScale = initialDirection === "horizontal" || initialDirection === "horizontal-inverted" ? (0, _math.resolveDirectionalDragScale)({
     normalized: normX,
     dismissDirection: initialDirection === "horizontal-inverted" ? "negative" : "positive",
-    shrinkMin: resolvedZoomOptions.motion.dragDirectionalScaleMin,
-    growMax: resolvedZoomOptions.motion.dragDirectionalScaleMax,
+    shrinkMin: _config.ZOOM_DRAG_DIRECTIONAL_SCALE_MIN,
+    growMax: _config.ZOOM_DRAG_DIRECTIONAL_SCALE_MAX,
     exponent: 2
   }) : IDENTITY_DRAG_SCALE_OUTPUT[0];
-  const dragYScale = initialDirection === "vertical" || initialDirection === "vertical-inverted" ? resolveDirectionalDragScale({
+  const dragYScale = initialDirection === "vertical" || initialDirection === "vertical-inverted" ? (0, _math.resolveDirectionalDragScale)({
     normalized: normY,
     dismissDirection: initialDirection === "vertical-inverted" ? "negative" : "positive",
-    shrinkMin: resolvedZoomOptions.motion.dragDirectionalScaleMin,
-    growMax: resolvedZoomOptions.motion.dragDirectionalScaleMax,
+    shrinkMin: _config.ZOOM_DRAG_DIRECTIONAL_SCALE_MIN,
+    growMax: _config.ZOOM_DRAG_DIRECTIONAL_SCALE_MAX,
     exponent: 2
   }) : IDENTITY_DRAG_SCALE_OUTPUT[1];
-  const dragScale = combineScales(dragXScale, dragYScale);
+  const dragScale = (0, _math.combineScales)(dragXScale, dragYScale);
   if (focused) {
     const contentTarget = getZoomContentTarget({
       explicitTarget,
-      resolvedTag,
-      currentRouteKey,
-      previousRouteKey,
-      nextRouteKey,
-      entering,
       screenLayout,
-      anchor: sharedOptions.anchor,
+      anchor: _config.ZOOM_SHARED_OPTIONS.anchor,
       resolvedPair
     });
-    const contentRaw = computeRaw({
-      ...sharedOptions,
+    const contentRaw = (0, _computeBoundsStyles.computeBoundStyles)(zoomComputeParams, {
+      ...baseRawOptions,
+      anchor: resolvedZoomAnchor,
       method: "content",
       target: contentTarget
-    });
-    const maskRaw = computeRaw({
-      ...sharedOptions,
+    }, resolvedPair);
+    const maskRaw = (0, _computeBoundsStyles.computeBoundStyles)(zoomComputeParams, {
+      ...baseRawOptions,
+      anchor: _config.ZOOM_SHARED_OPTIONS.anchor,
       method: "size",
       space: "absolute",
       target: "fullscreen"
-    });
-    const focusedFade = props.active?.closing ? (0, _reactNativeReanimated.interpolate)(progress, [0.6, 1], [0, 1], "clamp") : (0, _reactNativeReanimated.interpolate)(progress, [0, 0.5], [0, 1], "clamp");
+    }, resolvedPair);
+    const focusedFade = props.active?.closing ? (0, _reactNativeReanimated.interpolate)(progress, [0.6, 1], [0, debug ? 0.5 : 1], "clamp") : (0, _reactNativeReanimated.interpolate)(progress, [0, 0.5], [0, debug ? 0.5 : 1], "clamp");
+
+    /**
+     * This is also how swiftui handles their navigation zoom.
+     * They remove clipping as soon as the screen stops animating
+     */
+    const shouldRemoveClipping = !props.active.animating;
+    const focusedMaskBorderRadius = (0, _reactNativeReanimated.interpolate)(progress, [0, 1], [sourceBorderRadius, shouldRemoveClipping ? 0 : targetBorderRadius], "clamp");
     const {
       top,
       right,
       bottom,
       left
-    } = resolvedZoomOptions.mask.outset;
+    } = _config.ZOOM_MASK_OUTSET;
     const maskWidth = Math.max(1, (0, _config.toNumber)(maskRaw.width) + left + right);
     const maskHeight = Math.max(1, (0, _config.toNumber)(maskRaw.height) + top + bottom);
     const contentTranslateX = (0, _config.toNumber)(contentRaw.translateX) + dragX;
@@ -411,11 +163,6 @@ const buildZoomStyles = ({
     const contentScale = (0, _config.toNumber)(contentRaw.scale, 1) * dragScale;
     const maskTranslateX = (0, _config.toNumber)(maskRaw.translateX) + dragX - left;
     const maskTranslateY = (0, _config.toNumber)(maskRaw.translateY) + dragY - top;
-    const maskRadii = resolveMaskRadii({
-      progress,
-      zoomOptions: resolvedZoomOptions,
-      resolvedPair
-    });
     const focusedContentStyle = {
       opacity: focusedFade,
       transform: [{
@@ -424,73 +171,72 @@ const buildZoomStyles = ({
         translateY: contentTranslateY
       }, {
         scale: contentScale
-      }]
+      }],
+      borderRadius: focusedMaskBorderRadius,
+      overflow: "hidden"
     };
-    return {
-      [_constants.NAVIGATION_MASK_CONTAINER_STYLE_ID]: {
+    const focusedStyles = {
+      [focusedContainerStyleId]: {
         style: focusedContentStyle
       },
-      [_constants.NAVIGATION_MASK_ELEMENT_STYLE_ID]: {
+      ...focusedVisibilityStyles
+    };
+    if (props.navigationMaskEnabled) {
+      focusedStyles[_constants.NAVIGATION_MASK_ELEMENT_STYLE_ID] = {
         style: {
           width: maskWidth,
           height: maskHeight,
+          borderRadius: focusedMaskBorderRadius,
           transform: [{
             translateX: maskTranslateX
           }, {
             translateY: maskTranslateY
           }, {
             scale: dragScale
-          }],
-          borderRadius: maskRadii.borderRadius,
-          borderTopLeftRadius: maskRadii.borderTopLeftRadius,
-          borderTopRightRadius: maskRadii.borderTopRightRadius,
-          borderBottomLeftRadius: maskRadii.borderBottomLeftRadius,
-          borderBottomRightRadius: maskRadii.borderBottomRightRadius,
-          ...(resolvedZoomOptions.mask.borderCurve ? {
-            borderCurve: resolvedZoomOptions.mask.borderCurve
-          } : {})
+          }]
         }
-      },
-      ...focusedVisibilityStyles
-    };
+      };
+    }
+    return focusedStyles;
   }
-  const unfocusedFade = props.active?.closing ? (0, _reactNativeReanimated.interpolate)(progress, [1.6, 2], [1, 0], "clamp") : (0, _reactNativeReanimated.interpolate)(progress, [1, 1.5], [1, 0], "clamp");
+  const unfocusedFade = props.active?.closing ? (0, _reactNativeReanimated.interpolate)(progress, [1.6, 2], [1, debug ? 1 : 0], "clamp") : (0, _reactNativeReanimated.interpolate)(progress, [1, 1.5], [1, debug ? 1 : 0], "clamp");
   const unfocusedScale = (0, _reactNativeReanimated.interpolate)(progress, [1, 2], [1, 0.95], "clamp");
   const isUnfocusedIdle = props.active.settled === 1;
-  const elementTarget = sharedOptions.scaleMode === "match" ? "fullscreen" : getZoomContentTarget({
+  const shouldHideUnfocusedIdle = isUnfocusedIdle && !debug;
+  const elementTarget = explicitTarget !== undefined || resolvedPair.destinationBounds ? getZoomContentTarget({
     explicitTarget,
-    resolvedTag,
-    currentRouteKey,
-    previousRouteKey,
-    nextRouteKey,
-    entering,
     screenLayout,
-    anchor: sharedOptions.anchor,
+    anchor: _config.ZOOM_SHARED_OPTIONS.anchor,
     resolvedPair
-  });
-  const elementRaw = computeRaw({
-    ...sharedOptions,
+  }) : "fullscreen";
+  const elementRaw = (0, _computeBoundsStyles.computeBoundStyles)(zoomComputeParams, {
+    ...baseRawOptions,
+    anchor: resolvedZoomAnchor,
     method: "transform",
     space: "relative",
     target: elementTarget
+  }, resolvedPair);
+  const boundTargetCenterX = explicitTarget === "bound" && resolvedPair.destinationBounds ? resolvedPair.destinationBounds.pageX + resolvedPair.destinationBounds.width / 2 : undefined;
+  const boundTargetCenterY = explicitTarget === "bound" && resolvedPair.destinationBounds ? resolvedPair.destinationBounds.pageY + resolvedPair.destinationBounds.height / 2 : undefined;
+  const elementCenterX = boundTargetCenterX ?? (typeof elementTarget === "object" ? elementTarget.pageX + elementTarget.width / 2 : screenLayout.width / 2);
+  const elementCenterY = boundTargetCenterY ?? (typeof elementTarget === "object" ? elementTarget.pageY + elementTarget.height / 2 : screenLayout.height / 2);
+  const scaleShiftX = (0, _math.computeCenterScaleShift)({
+    center: elementCenterX,
+    containerCenter: screenLayout.width / 2,
+    scale: dragScale
   });
-
-  // Keep compensation tied to the element target's center. In `scaleMode: "match"`
-  // this target is fullscreen, so the center offset should resolve to zero.
-  const elementCenterY = typeof elementTarget === "object" ? elementTarget.pageY + elementTarget.height / 2 : screenLayout.height / 2;
-  const scaleShiftY = computeCenterScaleShift({
+  const scaleShiftY = (0, _math.computeCenterScaleShift)({
     center: elementCenterY,
     containerCenter: screenLayout.height / 2,
     scale: dragScale
   });
-  const compensatedGestureX = composeCompensatedTranslation({
+  const compensatedGestureX = (0, _math.composeCompensatedTranslation)({
     gesture: dragX,
     parentScale: unfocusedScale,
+    centerShift: scaleShiftX,
     epsilon: _constants.EPSILON
   });
-  // dragY is measured in screen space and must be unscaled by the parent
-  // content shrink, while scaleShiftY is already in the parent's local space.
-  const compensatedGestureY = composeCompensatedTranslation({
+  const compensatedGestureY = (0, _math.composeCompensatedTranslation)({
     gesture: dragY,
     parentScale: unfocusedScale,
     centerShift: scaleShiftY,
@@ -500,7 +246,7 @@ const buildZoomStyles = ({
   const elementTranslateY = (0, _config.toNumber)(elementRaw.translateY) + compensatedGestureY;
   const elementScaleX = (0, _config.toNumber)(elementRaw.scaleX, 1) * dragScale;
   const elementScaleY = (0, _config.toNumber)(elementRaw.scaleY, 1) * dragScale;
-  const resolvedElementStyle = isUnfocusedIdle ? {
+  const resolvedElementStyle = shouldHideUnfocusedIdle ? {
     transform: [{
       translateX: 0
     }, {
@@ -515,15 +261,15 @@ const buildZoomStyles = ({
     elevation: 0
   } : {
     transform: [{
-      translateX: elementTranslateX
+      translateX: props.active.settled ? 0 : elementTranslateX
     }, {
-      translateY: elementTranslateY
+      translateY: props.active.settled ? 0 : elementTranslateY
     }, {
-      scaleX: elementScaleX
+      scaleX: props.active.settled ? 1 : elementScaleX
     }, {
-      scaleY: elementScaleY
+      scaleY: props.active.settled ? 1 : elementScaleY
     }],
-    opacity: unfocusedFade,
+    opacity: debug ? 1 : unfocusedFade,
     zIndex: 9999,
     elevation: 9999
   };