react-native-screen-transitions 4.1.0-beta.0 → 4.1.0-beta.1

package/src/components/screen/container/layers/maybe-masked-navigation-container.tsx

@@ -1,113 +0,0 @@
-import { memo, useCallback } from "react";
-import { I18nManager, StyleSheet, View, type ViewProps } from "react-native";
-import Animated from "react-native-reanimated";
-import {
-	NAVIGATION_MASK_CONTAINER_STYLE_ID,
-	NAVIGATION_MASK_ELEMENT_STYLE_ID,
-} from "../../../../constants";
-import { useSlotStyles } from "../../../../providers/screen/orchestrator/styles";
-import { logger } from "../../../../utils/logger";
-
-type Props = {
-	enabled: boolean;
-	children: React.ReactNode;
-	pointerEvents: ViewProps["pointerEvents"];
-};
-
-let LazyMaskedView = View;
-
-try {
-	LazyMaskedView = require("@react-native-masked-view/masked-view").default;
-} catch (_) {
-	// optional peer dependency
-}
-
-let hasWarnedMissingMaskedView = false;
-
-export const MaybeMaskedNavigationContainer = memo(
-	({ enabled, children, pointerEvents }: Props) => {
-		if (!enabled || LazyMaskedView === View) {
-			return children;
-		}
-
-		return (
-			<MaskedNavigationContainer pointerEvents={pointerEvents}>
-				{children}
-			</MaskedNavigationContainer>
-		);
-	},
-);
-
-const MaskedNavigationContainer = memo(
-	({
-		children,
-		pointerEvents,
-	}: {
-		children: React.ReactNode;
-		pointerEvents: ViewProps["pointerEvents"];
-	}) => {
-		const maybeLogWarning = useCallback(() => {
-			if (LazyMaskedView !== View) return;
-			if (hasWarnedMissingMaskedView) return;
-
-			hasWarnedMissingMaskedView = true;
-			logger.warn(
-				"navigationMaskEnabled requires @react-native-masked-view/masked-view. Install it to enable navigation bounds masking.",
-			);
-		}, []);
-
-		const animatedNavigationMaskStyle = useSlotStyles(
-			NAVIGATION_MASK_ELEMENT_STYLE_ID,
-		);
-		const animatedNavigationMaskContainerStyle = useSlotStyles(
-			NAVIGATION_MASK_CONTAINER_STYLE_ID,
-		);
-
-		return (
-			<LazyMaskedView
-				style={styles.navigationMaskedRoot}
-				// @ts-expect-error masked-view package types are too strict here
-				maskElement={
-					<Animated.View
-						style={[styles.navigationMaskElement, animatedNavigationMaskStyle]}
-						pointerEvents="none"
-					/>
-				}
-				pointerEvents={pointerEvents}
-				onLayout={maybeLogWarning}
-			>
-				<Animated.View
-					style={[
-						styles.navigationContainer,
-						animatedNavigationMaskContainerStyle,
-					]}
-					collapsable={false}
-				>
-					{children}
-				</Animated.View>
-			</LazyMaskedView>
-		);
-	},
-);
-
-const styles = StyleSheet.create({
-	navigationMaskedRoot: {
-		flex: 1,
-	},
-	navigationContainer: {
-		flex: 1,
-	},
-	// The mask rect's translate math assumes a physical top-left base. Under
-	// native RTL a fixed-width flex child anchors to the right edge, so pin it
-	// to the physical left (`end` = left edge in RTL).
-	navigationMaskElement: I18nManager.isRTL
-		? {
-				backgroundColor: "white",
-				end: 0,
-				position: "absolute",
-				top: 0,
-			}
-		: {
-				backgroundColor: "white",
-			},
-});