@amazon-devices/react-native-safe-area-context 2.0.1758683737

package/lib/typescript/src/useWindowDimensions.d.ts

@@ -0,0 +1,8 @@
+type DisplayMetrics = {
+    width: number;
+    height: number;
+    scale: number;
+    fontScale: number;
+};
+export default function useWindowDimensions(): DisplayMetrics;
+export {};

package/package.json

@@ -0,0 +1 @@
+{"name": "@amazon-devices/react-native-safe-area-context", "version": "2.0.1758683737+3.2.0", "description": "A flexible way to handle safe area, also works on Android and web.", "main": "lib/commonjs/index.js", "module": "lib/module/index.js", "react-native": "src/index.tsx", "types": "lib/typescript/src/index.d.ts", "sideEffects": false, "files": ["src", "lib", "android", "ios", "*.podspec", "react-native.config.js", "!**/__tests__", "kepler-compatibility.json", "!example", "SystemModules", "SystemBundles", "THIRD_PARTY_NOTICES.txt", "kepler-transformed-package-info.json"], "author": "Janic Duplessis <janicduplessis@gmail.com>", "contributors": ["Evan Bacon <bacon@expo.io> (https://github.com/evanbacon)"], "homepage": "https://github.com/th3rdwave/react-native-safe-area-context#readme", "license": "See license in LICENSE", "scripts": {"start": "react-native start", "test": "yarn validate:prettier && yarn validate:eslint && yarn validate:typescript && yarn validate:jest", "validate:eslint": "eslint \"src/**/*.{js,ts,tsx}\" \"example/**/*.{js,ts,tsx}\"", "validate:typescript": "tsc --project ./ --noEmit", "validate:prettier": "prettier \"src/**/*.{js,ts,tsx}\" \"example/**/*.{js,ts,tsx}\" --check", "validate:jest": "jest", "example:ios": "cd ./example && react-native run-ios", "example:android": "cd ./example && react-native run-android --no-jetifier", "example:expo": "expo start --config example/app.json"}, "keywords": ["react-native", "react native", "react-native-web", "expo-web", "safe area", "view"], "kepler": {"temporary-alias-for-package": {"name": "react-native-safe-area-context", "version": "3.2.0"}}, "peerDependencies": {"react": "*", "react-native": "*"}, "dependencies": {}, "devDependencies": {"@react-native-community/async-storage": "1.11.0", "@react-native-community/bob": "0.14.5", "@react-native-community/eslint-config": "2.0.0", "@react-native-community/masked-view": "0.1.10", "@react-navigation/bottom-tabs": "5.5.2", "@react-navigation/native": "5.5.1", "@react-navigation/stack": "5.5.1", "@types/jest": "^27.0.3", "@types/react": "17.0.2", "@types/react-dom": "~17.0.2", "@types/react-test-renderer": "^16.9.2", "@typescript-eslint/eslint-plugin": "^4.33.0", "@typescript-eslint/parser": "^4.33.0", "babel-plugin-module-resolver": "4.0.0", "eslint": "7.2.0", "eslint-config-prettier": "6.11.0", "eslint-plugin-prettier": "3.1.3", "jest": "26.0.1", "metro-react-native-babel-preset": "0.59.0", "prettier": "2.0.5", "react": "17.0.2", "react-dom": "17.0.2", "react-native": "0.72.0", "react-native-gesture-handler": "~2.13.0", "@amazon-devices/keplerscript-react-native-reanimated": "^2.0.0+2.1.0", "react-native-safe-area-view": "1.1.1", "react-native-screens": "~3.20.0", "react-native-web": "0.12.3", "react-navigation": "4.3.9", "react-navigation-stack": "2.7.0", "react-navigation-tabs": "2.8.13", "react-test-renderer": "16.13.1", "typescript": "^4.9.4"}, "repository": {"type": "git", "url": "https://github.com/th3rdwave/react-native-safe-area-context.git"}, "jest": {"preset": "react-native", "testEnvironment": "node", "clearMocks": true, "modulePathIgnorePatterns": ["<rootDir>/lib/"]}, "@react-native-community/bob": {"source": "src", "output": "lib", "targets": ["commonjs", "module", "typescript"]}}

package/react-native-safe-area-context.podspec

@@ -0,0 +1,19 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name         = "@amazon-devices/react-native-safe-area-context"
+  s.version      = package['version']
+  s.summary      = package['description']
+  s.license      = package['license']
+
+  s.authors      = package['author']
+  s.homepage     = package['homepage']
+  s.platforms    = { :ios => "9.0", :tvos => "9.2" }
+
+  s.source       = { :git => "https://github.com/th3rdwave/react-native-safe-area-context.git", :tag => "v#{s.version}" }
+  s.source_files  = "ios/**/*.{h,m}"
+
+  s.dependency 'React-Core'
+end

package/react-native.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      macos: null,
+      windows: null,
+    },
+  },
+};

package/src/CompatNativeSafeAreaProvider.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { NativeSafeAreaProviderProps } from './SafeArea.types';
+import useWindowDimensions from './useWindowDimensions';
+
+export function CompatNativeSafeAreaProvider({
+  children,
+  style,
+  onInsetsChange,
+}: NativeSafeAreaProviderProps) {
+  const window = useWindowDimensions();
+  React.useEffect(() => {
+    const insets = {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+    };
+    const frame = {
+      x: 0,
+      y: 0,
+      width: window.width,
+      height: window.height,
+    };
+    // @ts-ignore: missing properties
+    onInsetsChange({ nativeEvent: { insets, frame } });
+  }, [onInsetsChange, window.height, window.width]);
+  return <View style={style}>{children}</View>;
+}

package/src/InitialWindow.kepler.ts

@@ -0,0 +1,10 @@
+import { Metrics } from './SafeArea.types';
+
+// amznmod_react for kepler, `initialWindowMetrics` is always null
+// so assigning null directly, 
+// and only calling getViewManagerConfig() for non-kepler platforms
+export const initialWindowMetrics = null as Metrics | null;
+/**
+ * @deprecated
+ */
+export const initialWindowSafeAreaInsets = initialWindowMetrics?.insets;

package/src/InitialWindow.native.ts

@@ -0,0 +1,16 @@
+import { UIManager } from 'react-native';
+import { Metrics } from './SafeArea.types';
+
+const RNCSafeAreaProviderConfig = UIManager.getViewManagerConfig(
+    'RNCSafeAreaProvider',
+) as any;
+
+export const initialWindowMetrics = (RNCSafeAreaProviderConfig != null &&
+    RNCSafeAreaProviderConfig.Constants != null
+    ? RNCSafeAreaProviderConfig.Constants.initialWindowMetrics
+    : null) as Metrics | null;
+
+/**
+ * @deprecated
+ */
+export const initialWindowSafeAreaInsets = initialWindowMetrics?.insets;

package/src/InitialWindow.ts

@@ -0,0 +1,8 @@
+import { EdgeInsets, Metrics } from './SafeArea.types';
+
+export const initialWindowMetrics: Metrics | null = null;
+
+/**
+ * @deprecated
+ */
+export const initialWindowSafeAreaInsets: EdgeInsets | null = null;

package/src/NativeSafeAreaProvider.kepler.tsx

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

package/src/NativeSafeAreaProvider.macos.tsx

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

package/src/NativeSafeAreaProvider.native.tsx

@@ -0,0 +1,6 @@
+import { requireNativeComponent } from 'react-native';
+import { NativeSafeAreaProviderProps } from './SafeArea.types';
+
+export default requireNativeComponent<NativeSafeAreaProviderProps>(
+    'RNCSafeAreaProvider',
+);

package/src/NativeSafeAreaProvider.tsx

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { 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 default function NativeSafeAreaView({
+       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 = 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;
+}
+
+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

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

package/src/SafeArea.types.ts

@@ -0,0 +1,43 @@
+import {
+  NativeSyntheticEvent,
+  StyleProp,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+
+export type Edge = 'top' | 'right' | 'bottom' | 'left';
+
+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 {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  onInsetsChange: InsetChangeNativeCallback;
+}
+
+export type NativeSafeAreaViewProps = ViewProps & {
+  children?: React.ReactNode;
+  mode?: 'padding' | 'margin';
+  edges?: ReadonlyArray<Edge>;
+};

package/src/SafeAreaContext.tsx

@@ -0,0 +1,148 @@
+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';
+
+export const SafeAreaInsetsContext = React.createContext<EdgeInsets | null>(
+  null,
+);
+SafeAreaInsetsContext.displayName = 'SafeAreaInsetsContext';
+
+export const SafeAreaFrameContext = React.createContext<Rect | null>(null);
+SafeAreaFrameContext.displayName = 'SafeAreaFrameContext';
+
+export interface SafeAreaViewProps {
+  children?: React.ReactNode;
+  initialMetrics?: Metrics | null;
+  /**
+   * @deprecated
+   */
+  initialSafeAreaInsets?: EdgeInsets | null;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function SafeAreaProvider({
+  children,
+  initialMetrics,
+  initialSafeAreaInsets,
+  style,
+}: SafeAreaViewProps) {
+  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;
+
+      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)
+      ) {
+        setFrame(nextFrame);
+      }
+
+      if (
+        !insets ||
+        nextInsets.bottom !== insets.bottom ||
+        nextInsets.left !== insets.left ||
+        nextInsets.right !== insets.right ||
+        nextInsets.top !== insets.top
+      ) {
+        setInsets(nextInsets);
+      }
+    },
+    [frame, insets],
+  );
+
+  return (
+    <NativeSafeAreaProvider
+      style={[styles.fill, style]}
+      onInsetsChange={onInsetsChange}
+    >
+      {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);
+}
+
+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.',
+    );
+  }
+  return safeArea;
+}
+
+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.',
+    );
+  }
+  return frame;
+}
+
+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>
+  ));
+}
+
+/**
+ * @deprecated
+ */
+export function useSafeArea(): EdgeInsets {
+  return useSafeAreaInsets();
+}
+
+/**
+ * @deprecated
+ */
+export const SafeAreaConsumer = SafeAreaInsetsContext.Consumer;
+
+/**
+ * @deprecated
+ */
+export const SafeAreaContext = SafeAreaInsetsContext;

package/src/SafeAreaView.kepler.tsx

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

package/src/SafeAreaView.macos.tsx

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

package/src/SafeAreaView.native.tsx

@@ -0,0 +1,6 @@
+import { requireNativeComponent } from 'react-native';
+import { NativeSafeAreaViewProps } from './SafeArea.types';
+
+export const SafeAreaView = requireNativeComponent<NativeSafeAreaViewProps>(
+    'RNCSafeAreaView',
+);

package/src/SafeAreaView.tsx

@@ -0,0 +1,85 @@
+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,
+};
+
+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} />;
+}

package/src/SafeAreaView.windows.tsx

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

package/src/index.tsx

@@ -0,0 +1,4 @@
+export * from './SafeAreaContext';
+export * from './SafeAreaView';
+export * from './InitialWindow';
+export * from './SafeArea.types';

package/src/useWindowDimensions.tsx

@@ -0,0 +1,35 @@
+import { Dimensions } from 'react-native';
+import { useEffect, useState } from 'react';
+
+type DisplayMetrics = {
+  width: number;
+  height: number;
+  scale: number;
+  fontScale: number;
+};
+
+// Copied from https://github.com/facebook/react-native/blob/8d57691a/Libraries/Utilities/useWindowDimensions.js
+// for compatibility with React Native < 0.61.
+export default function useWindowDimensions(): DisplayMetrics {
+  const [dimensions, setDimensions] = useState(() => Dimensions.get('window'));
+  useEffect(() => {
+    function handleChange({ window }: { window: DisplayMetrics }) {
+      if (
+        dimensions.width !== window.width ||
+        dimensions.height !== window.height ||
+        dimensions.scale !== window.scale ||
+        dimensions.fontScale !== window.fontScale
+      ) {
+        setDimensions(window);
+      }
+    }
+    const subscription = Dimensions.addEventListener('change', handleChange);
+    // We might have missed an update between calling `get` in render and
+    // `addEventListener` in this handler, so we set it here. If there was
+    // no change, React will filter out this update as a no-op.
+    handleChange({ window: Dimensions.get('window') });
+
+    return () => subscription.remove();
+  }, [dimensions]);
+  return dimensions;
+}