react-native-screen-transitions 3.7.0-alpha.0 → 3.7.0-beta.1

package/src/shared/types/screen.types.ts

@@ -46,27 +46,28 @@ export type BackdropBehavior = "block" | "passthrough" | "dismiss" | "collapse";
 /**
  * Controls how an inactive screen is retained after it is no longer active.
  *
- * - `keep`
- *   keep inactive screen mounted, attached, visible, not interactive
- *   RNS: activityState=1, visible=true
- *   React Activity: mode="visible"
+ * - `hide`
+ *   keep inactive screen mounted, pause/freeze inactive work where supported,
+ *   and hide inactive paint/native presentation after safe paint
+ *   RNS: activityState=0, visible=false, shouldFreeze=true
+ *   React Activity: mode="hidden" with paint hidden
  *
- * - `freeze`
- *   keep last painted UI visible but stop/suspend inactive work where platform allows
- *   RNS: activityState=1, visible=true, maybe freezeOnBlur/shouldFreeze later
+ * - `pause`
+ *   keep last painted UI visible but pause/freeze inactive work where supported
+ *   RNS: activityState=1, visible=true, shouldFreeze=true
  *   React Activity: mode="hidden" with paint preserved
  *
- * - `detach`
- *   remove inactive screen from native/view presentation after safe paint
- *   RNS: activityState=0, visible=false
- *   React Activity: mode="hidden" + display none, or equivalent
- *
  * - `unmount`
- *   actually remove React subtree when the inactive screen is safe to remove
+ *   remove React subtree when the inactive screen is safe to remove
  *   RNS native: only after safe paint for non-nested screens
  *   web: return null
+ *
+ * - `keep`
+ *   keep inactive screen mounted, attached, visible, not interactive, and running
+ *   RNS: activityState=1, visible=true
+ *   React Activity: mode="visible"
  */
-export type InactiveBehavior = "keep" | "freeze" | "detach" | "unmount";
+export type InactiveBehavior = "hide" | "pause" | "unmount" | "keep";
 
 export type TransitionAwareProps<T extends object> = AnimatedProps<T> & {
 	/**

package/src/shared/utils/bounds/navigation/reveal/build.ts

@@ -13,6 +13,7 @@ import {
 	DRAG_MASK_HEIGHT_COLLAPSE_END,
 	HORIZONTAL_DRAG_MASK_COLLAPSE_SCALE,
 	IDENTITY_DRAG_SCALE_OUTPUT,
+	REVEAL_BACKGROUND_SCALE,
 	REVEAL_BORDER_RADIUS,
 	REVEAL_SHADOW_OFFSET,
 	REVEAL_USES_TRANSFORM_MASK,
@@ -65,6 +66,10 @@ export function buildRevealStyles({
 	const disablePointerEventsTillElementTransition =
 		revealOptions?.disablePointerEventsTillElementTransition ?? true;
 	const maskSizingMode = revealOptions?.maskSizingMode ?? "auto";
+	const backgroundScale =
+		revealOptions?.backgroundScale ?? REVEAL_BACKGROUND_SCALE;
+	const shouldBackgroundScaleResetOnSettled =
+		revealOptions?.shouldBackgroundScaleResetOnSettled ?? true;
 	const usesTransformMask =
 		maskSizingMode === "auto"
 			? REVEAL_USES_TRANSFORM_MASK
@@ -366,8 +371,6 @@ export function buildRevealStyles({
 			},
 			[link.id]: {
 				style: {
-					position: "relative",
-					zIndex: 999,
 					transform: [{ translateX: elementTX }, { translateY: elementY }],
 				},
 			},
@@ -376,10 +379,11 @@ export function buildRevealStyles({
 
 	/* ---------------------------- Unfocused Screen ---------------------------- */
 
-	const unfocusedScale = mixUnit(1, 0.9375, props.active.progress);
-	const unfocusedContentScale = props.active.logicallySettled
-		? 1
-		: unfocusedScale;
+	const unfocusedScale = mixUnit(1, backgroundScale, props.active.progress);
+	const unfocusedContentScale =
+		props.active.logicallySettled && shouldBackgroundScaleResetOnSettled
+			? 1
+			: unfocusedScale;
 
 	const trackingContentTarget =
 		initialDestinationTarget ?? link.destination.bounds;

package/src/shared/utils/bounds/navigation/reveal/config.ts

@@ -15,6 +15,7 @@ export const DRAG_MASK_HEIGHT_COLLAPSE_END = 0.7;
 export const HORIZONTAL_DRAG_MASK_COLLAPSE_SCALE = 0.5;
 export const DISMISS_SCALE_ORBIT_DEPTH = 0.5;
 export const CLOSE_SOURCE_HANDOFF_PROGRESS = 0.25;
+export const REVEAL_BACKGROUND_SCALE = 0.9375;
 
 export const IDENTITY_DRAG_SCALE_OUTPUT = [1, 1] as const;
 export const ZERO_TO_ONE_RANGE = [0, 1] as const;