@amazon-devices/react-native-safe-area-context 2.0.1759135970 → 8.0.9000000000-rn-83

package/src/NativeSafeAreaProvider.web.tsx

@@ -0,0 +1,127 @@
+/* eslint-env browser */
+
+import * as React from 'react';
+import { View } from 'react-native';
+import type { NativeSafeAreaProviderProps } from './SafeArea.types';
+
+/**
+ * TODO:
+ * Currently insets and frame are based on the window and are not
+ * relative to the provider view. This is inconsistent with iOS and Android.
+ * However in most cases if the provider view covers the screen this is not
+ * an issue.
+ */
+
+const CSSTransitions: Record<string, string> = {
+  WebkitTransition: 'webkitTransitionEnd',
+  Transition: 'transitionEnd',
+  MozTransition: 'transitionend',
+  MSTransition: 'msTransitionEnd',
+  OTransition: 'oTransitionEnd',
+};
+
+export function NativeSafeAreaProvider({
+  children,
+  style,
+  onInsetsChange,
+}: NativeSafeAreaProviderProps) {
+  React.useEffect(() => {
+    // Skip for SSR.
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    const element = createContextElement();
+    document.body.appendChild(element);
+    const onEnd = () => {
+      const { paddingTop, paddingBottom, paddingLeft, paddingRight } =
+        window.getComputedStyle(element);
+
+      const insets = {
+        top: paddingTop ? parseInt(paddingTop, 10) : 0,
+        bottom: paddingBottom ? parseInt(paddingBottom, 10) : 0,
+        left: paddingLeft ? parseInt(paddingLeft, 10) : 0,
+        right: paddingRight ? parseInt(paddingRight, 10) : 0,
+      };
+      const frame = {
+        x: 0,
+        y: 0,
+        width: document.documentElement.offsetWidth,
+        height: document.documentElement.offsetHeight,
+      };
+      // @ts-ignore: missing properties
+      onInsetsChange({ nativeEvent: { insets, frame } });
+    };
+    element.addEventListener(getSupportedTransitionEvent(), onEnd);
+    onEnd();
+    return () => {
+      document.body.removeChild(element);
+      element.removeEventListener(getSupportedTransitionEvent(), onEnd);
+    };
+  }, [onInsetsChange]);
+
+  return <View style={style}>{children}</View>;
+}
+
+let _supportedTransitionEvent: string | null | undefined = null;
+function getSupportedTransitionEvent(): string {
+  if (_supportedTransitionEvent != null) {
+    return _supportedTransitionEvent;
+  }
+  const element = document.createElement('invalidtype');
+
+  _supportedTransitionEvent = CSSTransitions.Transition;
+  for (const key in CSSTransitions) {
+    if (element.style[key as keyof CSSStyleDeclaration] !== undefined) {
+      _supportedTransitionEvent = CSSTransitions[key];
+      break;
+    }
+  }
+  return _supportedTransitionEvent as string;
+}
+
+type CssEnv = 'constant' | 'env';
+
+let _supportedEnv: CssEnv | null = null;
+function getSupportedEnv(): CssEnv {
+  if (_supportedEnv !== null) {
+    return _supportedEnv;
+  }
+  const { CSS } = window;
+  if (
+    CSS &&
+    CSS.supports &&
+    CSS.supports('top: constant(safe-area-inset-top)')
+  ) {
+    _supportedEnv = 'constant';
+  } else {
+    _supportedEnv = 'env';
+  }
+  return _supportedEnv;
+}
+
+function getInset(side: string): string {
+  return `${getSupportedEnv()}(safe-area-inset-${side})`;
+}
+
+function createContextElement(): HTMLElement {
+  const element = document.createElement('div');
+  const { style } = element;
+  style.position = 'fixed';
+  style.left = '0';
+  style.top = '0';
+  style.width = '0';
+  style.height = '0';
+  style.zIndex = '-1';
+  style.overflow = 'hidden';
+  style.visibility = 'hidden';
+  // Bacon: Anything faster than this and the callback will be invoked too early with the wrong insets
+  style.transitionDuration = '0.05s';
+  style.transitionProperty = 'padding';
+  style.transitionDelay = '0s';
+  style.paddingTop = getInset('top');
+  style.paddingBottom = getInset('bottom');
+  style.paddingLeft = getInset('left');
+  style.paddingRight = getInset('right');
+  return element;
+}

package/src/NativeSafeAreaProvider.windows.tsx

@@ -1,3 +1 @@
-import { CompatNativeSafeAreaProvider } from './CompatNativeSafeAreaProvider';
-
-export default CompatNativeSafeAreaProvider;
+export { CompatNativeSafeAreaProvider as NativeSafeAreaProvider } from './CompatNativeSafeAreaProvider';

package/src/SafeArea.types.ts

@@ -1,11 +1,12 @@
-import {
-  NativeSyntheticEvent,
-  StyleProp,
-  ViewProps,
-  ViewStyle,
-} from 'react-native';
+import type * as React from 'react';
+import type { NativeSyntheticEvent, ViewProps } from 'react-native';
+import NativeSafeAreaView from './specs/NativeSafeAreaView';
 
 export type Edge = 'top' | 'right' | 'bottom' | 'left';
+export type EdgeMode = 'off' | 'additive' | 'maximum';
+
+export type EdgeRecord = Partial<Record<Edge, EdgeMode>>;
+export type Edges = readonly Edge[] | Readonly<EdgeRecord>;
 
 export interface EdgeInsets {
   top: number;
@@ -30,14 +31,17 @@ export type InsetChangedEvent = NativeSyntheticEvent<Metrics>;
 
 export type InsetChangeNativeCallback = (event: InsetChangedEvent) => void;
 
-export interface NativeSafeAreaProviderProps {
+export interface NativeSafeAreaProviderProps extends ViewProps {
   children?: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
   onInsetsChange: InsetChangeNativeCallback;
 }
 
-export type NativeSafeAreaViewProps = ViewProps & {
+export interface NativeSafeAreaViewProps extends ViewProps {
   children?: React.ReactNode;
   mode?: 'padding' | 'margin';
-  edges?: ReadonlyArray<Edge>;
-};
+  edges?: Edges;
+}
+
+export type NativeSafeAreaViewInstance = InstanceType<
+  typeof NativeSafeAreaView
+>;

package/src/SafeAreaContext.tsx

@@ -1,24 +1,34 @@
 import * as React from 'react';
-import { Dimensions, StyleProp, StyleSheet, ViewStyle } from 'react-native';
-import NativeSafeAreaProvider from './NativeSafeAreaProvider';
-import { EdgeInsets, InsetChangedEvent, Metrics, Rect } from './SafeArea.types';
+import { Dimensions, StyleSheet, type ViewProps } from 'react-native';
+import { NativeSafeAreaProvider } from './NativeSafeAreaProvider';
+import type {
+  EdgeInsets,
+  InsetChangedEvent,
+  Metrics,
+  Rect,
+} from './SafeArea.types';
+
+const isDev = process.env.NODE_ENV !== 'production';
 
 export const SafeAreaInsetsContext = React.createContext<EdgeInsets | null>(
   null,
 );
-SafeAreaInsetsContext.displayName = 'SafeAreaInsetsContext';
+if (isDev) {
+  SafeAreaInsetsContext.displayName = 'SafeAreaInsetsContext';
+}
 
 export const SafeAreaFrameContext = React.createContext<Rect | null>(null);
-SafeAreaFrameContext.displayName = 'SafeAreaFrameContext';
+if (isDev) {
+  SafeAreaFrameContext.displayName = 'SafeAreaFrameContext';
+}
 
-export interface SafeAreaViewProps {
+export interface SafeAreaProviderProps extends ViewProps {
   children?: React.ReactNode;
   initialMetrics?: Metrics | null;
   /**
    * @deprecated
    */
   initialSafeAreaInsets?: EdgeInsets | null;
-  style?: StyleProp<ViewStyle>;
 }
 
 export function SafeAreaProvider({
@@ -26,7 +36,8 @@ export function SafeAreaProvider({
   initialMetrics,
   initialSafeAreaInsets,
   style,
-}: SafeAreaViewProps) {
+  ...others
+}: SafeAreaProviderProps) {
   const parentInsets = useParentSafeAreaInsets();
   const parentFrame = useParentSafeAreaFrame();
   const [insets, setInsets] = React.useState<EdgeInsets | null>(
@@ -42,40 +53,46 @@ export function SafeAreaProvider({
         height: Dimensions.get('window').height,
       },
   );
-  const onInsetsChange = React.useCallback(
-    (event: InsetChangedEvent) => {
-      const {
-        nativeEvent: { frame: nextFrame, insets: nextInsets },
-      } = event;
+  const onInsetsChange = React.useCallback((event: InsetChangedEvent) => {
+    const {
+      nativeEvent: { frame: nextFrame, insets: nextInsets },
+    } = event;
 
+    setFrame((curFrame) => {
       if (
         // Backwards compat with old native code that won't send frame.
         nextFrame &&
-        (nextFrame.height !== frame.height ||
-          nextFrame.width !== frame.width ||
-          nextFrame.x !== frame.x ||
-          nextFrame.y !== frame.y)
+        (nextFrame.height !== curFrame.height ||
+          nextFrame.width !== curFrame.width ||
+          nextFrame.x !== curFrame.x ||
+          nextFrame.y !== curFrame.y)
       ) {
-        setFrame(nextFrame);
+        return nextFrame;
+      } else {
+        return curFrame;
       }
+    });
 
+    setInsets((curInsets) => {
       if (
-        !insets ||
-        nextInsets.bottom !== insets.bottom ||
-        nextInsets.left !== insets.left ||
-        nextInsets.right !== insets.right ||
-        nextInsets.top !== insets.top
+        !curInsets ||
+        nextInsets.bottom !== curInsets.bottom ||
+        nextInsets.left !== curInsets.left ||
+        nextInsets.right !== curInsets.right ||
+        nextInsets.top !== curInsets.top
       ) {
-        setInsets(nextInsets);
+        return nextInsets;
+      } else {
+        return curInsets;
       }
-    },
-    [frame, insets],
-  );
+    });
+  }, []);
 
   return (
     <NativeSafeAreaProvider
       style={[styles.fill, style]}
       onInsetsChange={onInsetsChange}
+      {...others}
     >
       {insets != null ? (
         <SafeAreaFrameContext.Provider value={frame}>
@@ -100,34 +117,40 @@ function useParentSafeAreaFrame(): Rect | null {
   return React.useContext(SafeAreaFrameContext);
 }
 
+const NO_INSETS_ERROR =
+  'No safe area value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app.';
+
 export function useSafeAreaInsets(): EdgeInsets {
-  const safeArea = React.useContext(SafeAreaInsetsContext);
-  if (safeArea == null) {
-    throw new Error(
-      'No safe area insets value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app.',
-    );
+  const insets = React.useContext(SafeAreaInsetsContext);
+  if (insets == null) {
+    throw new Error(NO_INSETS_ERROR);
   }
-  return safeArea;
+  return insets;
 }
 
 export function useSafeAreaFrame(): Rect {
   const frame = React.useContext(SafeAreaFrameContext);
   if (frame == null) {
-    throw new Error(
-      'No safe area frame value available. Make sure you are rendering `<SafeAreaProvider>` at the top of your app.',
-    );
+    throw new Error(NO_INSETS_ERROR);
   }
   return frame;
 }
 
+export type WithSafeAreaInsetsProps = {
+  insets: EdgeInsets;
+};
+
 export function withSafeAreaInsets<T>(
-  WrappedComponent: React.ComponentType<T>,
-) {
-  return React.forwardRef((props: T, ref: React.Ref<T>) => (
-    <SafeAreaConsumer>
-      {(insets) => <WrappedComponent {...props} insets={insets} ref={ref} />}
-    </SafeAreaConsumer>
-  ));
+  WrappedComponent: React.ComponentType<
+    (React.PropsWithoutRef<T> | T) & WithSafeAreaInsetsProps
+  >,
+): React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<T> & React.RefAttributes<unknown>
+> {
+  return React.forwardRef<unknown, T>((props, ref) => {
+    const insets = useSafeAreaInsets();
+    return <WrappedComponent {...props} insets={insets} ref={ref} />;
+  });
 }
 
 /**

package/src/SafeAreaView.tsx

@@ -1,85 +1,50 @@
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { useSafeAreaInsets } from './SafeAreaContext';
-import { Edge, NativeSafeAreaViewProps } from './SafeArea.types';
-
-// prettier-ignore
-const TOP    = 0b1000,
-    RIGHT  = 0b0100,
-    BOTTOM = 0b0010,
-    LEFT   = 0b0001,
-    ALL    = 0b1111;
-
-/* eslint-disable no-bitwise */
-
-const edgeBitmaskMap: Record<Edge, number> = {
-    top: TOP,
-    right: RIGHT,
-    bottom: BOTTOM,
-    left: LEFT,
+import type {
+  Edge,
+  EdgeMode,
+  EdgeRecord,
+  NativeSafeAreaViewInstance,
+  NativeSafeAreaViewProps,
+} from './SafeArea.types';
+import NativeSafeAreaView from './specs/NativeSafeAreaView';
+import { useMemo } from 'react';
+
+const defaultEdges: Record<Edge, EdgeMode> = {
+  top: 'additive',
+  left: 'additive',
+  bottom: 'additive',
+  right: 'additive',
 };
 
-export function SafeAreaView({
-                                 style = {},
-                                 mode,
-                                 edges,
-                                 ...rest
-                             }: NativeSafeAreaViewProps) {
-    const insets = useSafeAreaInsets();
-
-    const edgeBitmask =
-        edges != null
-            ? edges.reduce((accum, edge) => accum | edgeBitmaskMap[edge], 0)
-            : ALL;
-
-    const appliedStyle = React.useMemo(() => {
-        const insetTop = edgeBitmask & TOP ? insets.top : 0;
-        const insetRight = edgeBitmask & RIGHT ? insets.right : 0;
-        const insetBottom = edgeBitmask & BOTTOM ? insets.bottom : 0;
-        const insetLeft = edgeBitmask & LEFT ? insets.left : 0;
-
-        const flatStyle = StyleSheet.flatten(style) as Record<string, number>;
-
-        if (mode === 'margin') {
-            const {
-                margin = 0,
-                marginVertical = margin,
-                marginHorizontal = margin,
-                marginTop = marginVertical,
-                marginRight = marginHorizontal,
-                marginBottom = marginVertical,
-                marginLeft = marginHorizontal,
-            } = flatStyle;
-
-            const marginStyle = {
-                marginTop: marginTop + insetTop,
-                marginRight: marginRight + insetRight,
-                marginBottom: marginBottom + insetBottom,
-                marginLeft: marginLeft + insetLeft,
-            };
-
-            return [style, marginStyle];
-        } else {
-            const {
-                padding = 0,
-                paddingVertical = padding,
-                paddingHorizontal = padding,
-                paddingTop = paddingVertical,
-                paddingRight = paddingHorizontal,
-                paddingBottom = paddingVertical,
-                paddingLeft = paddingHorizontal,
-            } = flatStyle;
-
-            const paddingStyle = {
-                paddingTop: paddingTop + insetTop,
-                paddingRight: paddingRight + insetRight,
-                paddingBottom: paddingBottom + insetBottom,
-                paddingLeft: paddingLeft + insetLeft,
-            };
-
-            return [style, paddingStyle];
-        }
-    }, [style, insets, mode, edgeBitmask]);
-
-    return <View style={appliedStyle} {...rest} />;
-}
+export type SafeAreaViewProps = NativeSafeAreaViewProps;
+
+export const SafeAreaView = React.forwardRef<
+  NativeSafeAreaViewInstance,
+  SafeAreaViewProps
+>(({ edges, ...props }, ref) => {
+  const nativeEdges = useMemo(() => {
+    if (edges == null) {
+      return defaultEdges;
+    }
+
+    const edgesObj = Array.isArray(edges)
+      ? edges.reduce<EdgeRecord>((acc, edge: Edge) => {
+          acc[edge] = 'additive';
+          return acc;
+        }, {})
+      : // ts has trouble with refining readonly arrays.
+        (edges as EdgeRecord);
+
+    // make sure that we always pass all edges, required for fabric
+    const requiredEdges: Record<Edge, EdgeMode> = {
+      top: edgesObj.top ?? 'off',
+      right: edgesObj.right ?? 'off',
+      bottom: edgesObj.bottom ?? 'off',
+      left: edgesObj.left ?? 'off',
+    };
+
+    return requiredEdges;
+  }, [edges]);
+
+  return <NativeSafeAreaView {...props} edges={nativeEdges} ref={ref} />;
+});

package/src/SafeAreaView.web.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  Edge,
+  EdgeMode,
+  EdgeRecord,
+  NativeSafeAreaViewInstance,
+  NativeSafeAreaViewProps,
+} from './SafeArea.types';
+import { useSafeAreaInsets } from './SafeAreaContext';
+
+const defaultEdges: Record<Edge, EdgeMode> = {
+  top: 'additive',
+  left: 'additive',
+  bottom: 'additive',
+  right: 'additive',
+};
+
+function getEdgeValue(
+  inset: number,
+  current: number,
+  mode: EdgeMode | undefined,
+) {
+  switch (mode) {
+    case 'off':
+      return current;
+    case 'maximum':
+      return Math.max(current, inset);
+    case 'additive':
+    default:
+      return current + inset;
+  }
+}
+
+export const SafeAreaView = React.forwardRef<
+  NativeSafeAreaViewInstance,
+  NativeSafeAreaViewProps
+>(({ style = {}, mode, edges, ...rest }, ref) => {
+  const insets = useSafeAreaInsets();
+
+  const edgesRecord = React.useMemo(() => {
+    if (edges == null) {
+      return defaultEdges;
+    }
+
+    return Array.isArray(edges)
+      ? edges.reduce<EdgeRecord>((acc, edge: Edge) => {
+          acc[edge] = 'additive';
+          return acc;
+        }, {})
+      : // ts has trouble with refining readonly arrays.
+        (edges as EdgeRecord);
+  }, [edges]);
+
+  const appliedStyle = React.useMemo(() => {
+    const flatStyle = StyleSheet.flatten(style) as Record<string, number>;
+
+    if (mode === 'margin') {
+      const {
+        margin = 0,
+        marginVertical = margin,
+        marginHorizontal = margin,
+        marginTop = marginVertical,
+        marginRight = marginHorizontal,
+        marginBottom = marginVertical,
+        marginLeft = marginHorizontal,
+      } = flatStyle;
+
+      const marginStyle = {
+        marginTop: getEdgeValue(insets.top, marginTop, edgesRecord.top),
+        marginRight: getEdgeValue(insets.right, marginRight, edgesRecord.right),
+        marginBottom: getEdgeValue(
+          insets.bottom,
+          marginBottom,
+          edgesRecord.bottom,
+        ),
+        marginLeft: getEdgeValue(insets.left, marginLeft, edgesRecord.left),
+      };
+
+      return [style, marginStyle];
+    } else {
+      const {
+        padding = 0,
+        paddingVertical = padding,
+        paddingHorizontal = padding,
+        paddingTop = paddingVertical,
+        paddingRight = paddingHorizontal,
+        paddingBottom = paddingVertical,
+        paddingLeft = paddingHorizontal,
+      } = flatStyle;
+
+      const paddingStyle = {
+        paddingTop: getEdgeValue(insets.top, paddingTop, edgesRecord.top),
+        paddingRight: getEdgeValue(
+          insets.right,
+          paddingRight,
+          edgesRecord.right,
+        ),
+        paddingBottom: getEdgeValue(
+          insets.bottom,
+          paddingBottom,
+          edgesRecord.bottom,
+        ),
+        paddingLeft: getEdgeValue(insets.left, paddingLeft, edgesRecord.left),
+      };
+
+      return [style, paddingStyle];
+    }
+  }, [
+    edgesRecord.bottom,
+    edgesRecord.left,
+    edgesRecord.right,
+    edgesRecord.top,
+    insets.bottom,
+    insets.left,
+    insets.right,
+    insets.top,
+    mode,
+    style,
+  ]);
+
+  return <View style={appliedStyle} {...rest} ref={ref} />;
+});

package/src/SafeAreaView.windows.tsx

@@ -1,3 +1,4 @@
 import { View } from 'react-native';
+import type { NativeSafeAreaViewInstance } from './SafeArea.types';
 
-export const SafeAreaView = View;
+export const SafeAreaView = View as unknown as NativeSafeAreaViewInstance;

package/src/index.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 export * from './SafeAreaContext';
 export * from './SafeAreaView';
 export * from './InitialWindow';

package/src/specs/NativeSafeAreaContext.ts

@@ -0,0 +1,23 @@
+import { TurboModule, TurboModuleRegistry } from 'react-native';
+import type { Double } from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface Spec extends TurboModule {
+  getConstants: () => {
+    initialWindowMetrics?: {
+      insets: {
+        top: Double;
+        right: Double;
+        bottom: Double;
+        left: Double;
+      };
+      frame: {
+        x: Double;
+        y: Double;
+        width: Double;
+        height: Double;
+      };
+    };
+  };
+}
+
+export default TurboModuleRegistry.get<Spec>('RNCSafeAreaContext');

package/src/specs/NativeSafeAreaProvider.ts

@@ -0,0 +1,29 @@
+import type {
+  DirectEventHandler,
+  Double,
+} from 'react-native/Libraries/Types/CodegenTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps, HostComponent } from 'react-native';
+
+export type Event = Readonly<{
+  insets: Readonly<{
+    top: Double;
+    right: Double;
+    bottom: Double;
+    left: Double;
+  }>;
+  frame: Readonly<{
+    x: Double;
+    y: Double;
+    width: Double;
+    height: Double;
+  }>;
+}>;
+
+export interface NativeProps extends ViewProps {
+  onInsetsChange?: DirectEventHandler<Event>;
+}
+
+export default codegenNativeComponent<NativeProps>(
+  'RNCSafeAreaProvider',
+) as HostComponent<NativeProps>;