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

package/src/NativeSafeAreaProvider.web.tsx

@@ -1,127 +0,0 @@
-/* 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 +0,0 @@
-export { CompatNativeSafeAreaProvider as NativeSafeAreaProvider } from './CompatNativeSafeAreaProvider';

package/src/SafeArea.types.ts

@@ -1,47 +0,0 @@
-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;
-  right: number;
-  bottom: number;
-  left: number;
-}
-
-export interface Rect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export interface Metrics {
-  insets: EdgeInsets;
-  frame: Rect;
-}
-
-export type InsetChangedEvent = NativeSyntheticEvent<Metrics>;
-
-export type InsetChangeNativeCallback = (event: InsetChangedEvent) => void;
-
-export interface NativeSafeAreaProviderProps extends ViewProps {
-  children?: React.ReactNode;
-  onInsetsChange: InsetChangeNativeCallback;
-}
-
-export interface NativeSafeAreaViewProps extends ViewProps {
-  children?: React.ReactNode;
-  mode?: 'padding' | 'margin';
-  edges?: Edges;
-}
-
-export type NativeSafeAreaViewInstance = InstanceType<
-  typeof NativeSafeAreaView
->;

package/src/SafeAreaContext.tsx

@@ -1,171 +0,0 @@
-import * as React from 'react';
-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,
-);
-if (isDev) {
-  SafeAreaInsetsContext.displayName = 'SafeAreaInsetsContext';
-}
-
-export const SafeAreaFrameContext = React.createContext<Rect | null>(null);
-if (isDev) {
-  SafeAreaFrameContext.displayName = 'SafeAreaFrameContext';
-}
-
-export interface SafeAreaProviderProps extends ViewProps {
-  children?: React.ReactNode;
-  initialMetrics?: Metrics | null;
-  /**
-   * @deprecated
-   */
-  initialSafeAreaInsets?: EdgeInsets | null;
-}
-
-export function SafeAreaProvider({
-  children,
-  initialMetrics,
-  initialSafeAreaInsets,
-  style,
-  ...others
-}: SafeAreaProviderProps) {
-  const parentInsets = useParentSafeAreaInsets();
-  const parentFrame = useParentSafeAreaFrame();
-  const [insets, setInsets] = React.useState<EdgeInsets | null>(
-    initialMetrics?.insets ?? initialSafeAreaInsets ?? parentInsets ?? null,
-  );
-  const [frame, setFrame] = React.useState<Rect>(
-    initialMetrics?.frame ??
-      parentFrame ?? {
-        // Backwards compat so we render anyway if we don't have frame.
-        x: 0,
-        y: 0,
-        width: Dimensions.get('window').width,
-        height: Dimensions.get('window').height,
-      },
-  );
-  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 !== curFrame.height ||
-          nextFrame.width !== curFrame.width ||
-          nextFrame.x !== curFrame.x ||
-          nextFrame.y !== curFrame.y)
-      ) {
-        return nextFrame;
-      } else {
-        return curFrame;
-      }
-    });
-
-    setInsets((curInsets) => {
-      if (
-        !curInsets ||
-        nextInsets.bottom !== curInsets.bottom ||
-        nextInsets.left !== curInsets.left ||
-        nextInsets.right !== curInsets.right ||
-        nextInsets.top !== curInsets.top
-      ) {
-        return nextInsets;
-      } else {
-        return curInsets;
-      }
-    });
-  }, []);
-
-  return (
-    <NativeSafeAreaProvider
-      style={[styles.fill, style]}
-      onInsetsChange={onInsetsChange}
-      {...others}
-    >
-      {insets != null ? (
-        <SafeAreaFrameContext.Provider value={frame}>
-          <SafeAreaInsetsContext.Provider value={insets}>
-            {children}
-          </SafeAreaInsetsContext.Provider>
-        </SafeAreaFrameContext.Provider>
-      ) : null}
-    </NativeSafeAreaProvider>
-  );
-}
-
-const styles = StyleSheet.create({
-  fill: { flex: 1 },
-});
-
-function useParentSafeAreaInsets(): EdgeInsets | null {
-  return React.useContext(SafeAreaInsetsContext);
-}
-
-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 insets = React.useContext(SafeAreaInsetsContext);
-  if (insets == null) {
-    throw new Error(NO_INSETS_ERROR);
-  }
-  return insets;
-}
-
-export function useSafeAreaFrame(): Rect {
-  const frame = React.useContext(SafeAreaFrameContext);
-  if (frame == null) {
-    throw new Error(NO_INSETS_ERROR);
-  }
-  return frame;
-}
-
-export type WithSafeAreaInsetsProps = {
-  insets: EdgeInsets;
-};
-
-export function withSafeAreaInsets<T>(
-  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} />;
-  });
-}
-
-/**
- * @deprecated
- */
-export function useSafeArea(): EdgeInsets {
-  return useSafeAreaInsets();
-}
-
-/**
- * @deprecated
- */
-export const SafeAreaConsumer = SafeAreaInsetsContext.Consumer;
-
-/**
- * @deprecated
- */
-export const SafeAreaContext = SafeAreaInsetsContext;

package/src/SafeAreaView.kepler.tsx

@@ -1,3 +0,0 @@
-import { View } from 'react-native';
-
-export const SafeAreaView = View;

package/src/SafeAreaView.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react';
-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 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

@@ -1,123 +0,0 @@
-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,4 +0,0 @@
-import { View } from 'react-native';
-import type { NativeSafeAreaViewInstance } from './SafeArea.types';
-
-export const SafeAreaView = View as unknown as NativeSafeAreaViewInstance;

package/src/specs/NativeSafeAreaContext.ts

@@ -1,23 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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>;