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

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>;

package/src/specs/NativeSafeAreaView.ts

@@ -0,0 +1,17 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+import type { ViewProps, HostComponent } from 'react-native';
+
+export interface NativeProps extends ViewProps {
+  mode?: WithDefault<'padding' | 'margin', 'padding'>;
+  edges?: Readonly<{
+    top: string;
+    right: string;
+    bottom: string;
+    left: string;
+  }>;
+}
+
+export default codegenNativeComponent<NativeProps>('RNCSafeAreaView', {
+  interfaceOnly: true,
+}) as HostComponent<NativeProps>;