@amazon-devices/react-native-screens 3.0.9000000000 → 3.0.9000000003

package/src/native-stack/utils/SafeAreaProviderCompat.tsx

@@ -1,78 +0,0 @@
-/*
- * Portions of this file are copyright (c) 2023 Amazon.com, Inc. or its affiliates.  All rights reserved.
- *
- * PORTIONS OF THIS FILE ARE AMAZON PROPRIETARY/CONFIDENTIAL.  USE IS SUBJECT TO LICENSE TERMS.
- *
- * Amazon modifications are indicated by [amznmod_* comments].
- */
-
-/*
- * Changelog:
- * Set up react-native-screens package to build for Kepler
- */
-
-
-// code taken from
-// https://github.com/react-navigation/react-navigation/blob/ec0d113eb25c39ef9defb6c7215640f44e3569ae/packages/elements/src/SafeAreaProviderCompat.tsx
-import * as React from 'react';
-import {
-  Dimensions,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
-import {
-  initialWindowMetrics,
-  SafeAreaInsetsContext,
-  SafeAreaProvider,
-// amznmod_react - change imports to kepler packages
-} from '@amazon-devices/react-native-safe-area-context';
-
-type Props = {
-  children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-};
-
-const { width = 0, height = 0 } = Dimensions.get('window');
-
-// To support SSR on web, we need to have empty insets for initial values
-// Otherwise there can be mismatch between SSR and client output
-// We also need to specify empty values to support tests environments
-const initialMetrics =
-  Platform.OS === 'web' || initialWindowMetrics == null
-    ? {
-        frame: { x: 0, y: 0, width, height },
-        insets: { top: 0, left: 0, right: 0, bottom: 0 },
-      }
-    : initialWindowMetrics;
-
-export default function SafeAreaProviderCompat({ children, style }: Props) {
-  return (
-    <SafeAreaInsetsContext.Consumer>
-      {insets => {
-        if (insets) {
-          // If we already have insets, don't wrap the stack in another safe area provider
-          // This avoids an issue with updates at the cost of potentially incorrect values
-          // https://github.com/react-navigation/react-navigation/issues/174
-          return <View style={[styles.container, style]}>{children}</View>;
-        }
-
-        return (
-          <SafeAreaProvider initialMetrics={initialMetrics} style={style}>
-            {children}
-          </SafeAreaProvider>
-        );
-      }}
-    </SafeAreaInsetsContext.Consumer>
-  );
-}
-
-SafeAreaProviderCompat.initialMetrics = initialMetrics;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});

package/src/native-stack/utils/getDefaultHeaderHeight.tsx

@@ -1,41 +0,0 @@
-import { Platform } from 'react-native';
-import { StackPresentationTypes } from '../../types';
-type Layout = { width: number; height: number };
-
-const formSheetModalHeight = 56;
-
-export default function getDefaultHeaderHeight(
-  layout: Layout,
-  statusBarHeight: number,
-  stackPresentation: StackPresentationTypes,
-  isLargeHeader = false,
-): number {
-  // default header heights
-  let headerHeight = Platform.OS === 'android' ? 56 : 64;
-
-  if (Platform.OS === 'ios') {
-    const isLandscape = layout.width > layout.height;
-    const isFormSheetModal =
-      stackPresentation === 'modal' || stackPresentation === 'formSheet';
-    if (isFormSheetModal && !isLandscape) {
-      // `modal` and `formSheet` presentations do not take whole screen, so should not take the inset.
-      statusBarHeight = 0;
-    }
-
-    if (Platform.isPad || Platform.isTV) {
-      headerHeight = isFormSheetModal ? formSheetModalHeight : 50;
-    } else {
-      if (isLandscape) {
-        headerHeight = 32;
-      } else {
-        if (isFormSheetModal) {
-          headerHeight = formSheetModalHeight;
-        } else {
-          headerHeight = isLargeHeader ? 96 : 44;
-        }
-      }
-    }
-  }
-
-  return headerHeight + statusBarHeight;
-}

package/src/native-stack/utils/getStatusBarHeight.tsx

@@ -1,22 +0,0 @@
-import { Rect } from 'react-native-safe-area-context';
-import { Platform } from 'react-native';
-
-export default function getStatusBarHeight(
-  topInset: number,
-  dimensions: Rect,
-  isStatusBarTranslucent: boolean,
-) {
-  if (Platform.OS === 'ios') {
-    // It looks like some iOS devices don't have strictly set status bar height to 44.
-    // Thus, if the top inset is higher than 50, then the device should have a dynamic island.
-    // On models with Dynamic Island the status bar height is smaller than the safe area top inset by 5 pixels.
-    // See https://developer.apple.com/forums/thread/662466 for more details about status bar height.
-    const hasDynamicIsland = topInset > 50;
-    return hasDynamicIsland ? topInset - 5 : topInset;
-  } else if (Platform.OS === 'android') {
-    // On Android we should also rely on frame's y-axis position, as topInset is 0 on visible status bar.
-    return isStatusBarTranslucent ? topInset : dimensions.y;
-  }
-
-  return topInset;
-}

package/src/native-stack/utils/useAnimatedHeaderHeight.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-
-import AnimatedHeaderHeightContext from './AnimatedHeaderHeightContext';
-
-export default function useAnimatedHeaderHeight() {
-  const animatedValue = React.useContext(AnimatedHeaderHeightContext);
-
-  if (animatedValue === undefined) {
-    throw new Error(
-      "Couldn't find the header height. Are you inside a screen in a navigator with a header?",
-    );
-  }
-
-  return animatedValue;
-}

package/src/native-stack/utils/useBackPressSubscription.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import { BackHandler, NativeEventSubscription } from 'react-native';
-
-interface Args {
-  onBackPress: () => boolean;
-  isDisabled: boolean;
-}
-
-interface UseBackPressSubscription {
-  handleAttached: () => void;
-  handleDetached: () => void;
-  createSubscription: () => void;
-  clearSubscription: () => void;
-}
-
-/**
- * This hook is an abstraction for keeping back press subscription
- * logic in one place.
- */
-export function useBackPressSubscription({
-  onBackPress,
-  isDisabled,
-}: Args): UseBackPressSubscription {
-  const [isActive, setIsActive] = React.useState(false);
-  const subscription = React.useRef<NativeEventSubscription | undefined>();
-
-  const clearSubscription = React.useCallback((shouldSetActive = true) => {
-    subscription.current?.remove();
-    subscription.current = undefined;
-    if (shouldSetActive) setIsActive(false);
-  }, []);
-
-  const createSubscription = React.useCallback(() => {
-    if (!isDisabled) {
-      subscription.current?.remove();
-      subscription.current = BackHandler.addEventListener(
-        'hardwareBackPress',
-        onBackPress,
-      );
-      setIsActive(true);
-    }
-  }, [isDisabled, onBackPress]);
-
-  const handleAttached = React.useCallback(() => {
-    if (isActive) {
-      createSubscription();
-    }
-  }, [createSubscription, isActive]);
-
-  const handleDetached = React.useCallback(() => {
-    clearSubscription(false);
-  }, [clearSubscription]);
-
-  React.useEffect(() => {
-    if (isDisabled) {
-      clearSubscription();
-    }
-  }, [isDisabled, clearSubscription]);
-
-  return {
-    handleAttached,
-    handleDetached,
-    createSubscription,
-    clearSubscription,
-  };
-}

package/src/native-stack/utils/useHeaderHeight.tsx

@@ -1,15 +0,0 @@
-import * as React from 'react';
-
-import HeaderHeightContext from './HeaderHeightContext';
-
-export default function useHeaderHeight() {
-  const height = React.useContext(HeaderHeightContext);
-
-  if (height === undefined) {
-    throw new Error(
-      "Couldn't find the header height. Are you inside a screen in a navigator with a header?",
-    );
-  }
-
-  return height;
-}

package/src/native-stack/views/FontProcessor.tsx

@@ -1,14 +0,0 @@
-// @ts-ignore: No declaration available
-
-import ReactNativeStyleAttributes from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
-
-export function processFonts(
-  fontFamilies: (string | undefined)[],
-): (string | undefined)[] {
-  // @ts-ignore: React Native types are incorrect here and don't consider fontFamily a style value
-  const fontFamilyProcessor = ReactNativeStyleAttributes.fontFamily?.process;
-  if (typeof fontFamilyProcessor === 'function') {
-    return fontFamilies.map(fontFamilyProcessor);
-  }
-  return fontFamilies;
-}

package/src/native-stack/views/FooterComponent.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import ScreenFooter from '../../components/ScreenFooter';
-
-type FooterProps = {
-  children?: React.ReactNode;
-};
-
-export default function FooterComponent({ children }: FooterProps) {
-  return <ScreenFooter collapsable={false}>{children}</ScreenFooter>;
-}

package/src/native-stack/views/HeaderConfig.tsx

@@ -1,202 +0,0 @@
-/*
- * Portions of this file are copyright (c) 2023 Amazon.com, Inc. or its affiliates.  All rights reserved.
- *
- * PORTIONS OF THIS FILE ARE AMAZON PROPRIETARY/CONFIDENTIAL.  USE IS SUBJECT TO LICENSE TERMS.
- *
- * Amazon modifications are indicated by [amznmod_* comments].
- */
-
-/*
- * Changelog:
- * Set up react-native-screens package to build for Kepler
- */
-
-// amznmod_react - change imports to kepler packages
-import { Route, useTheme } from '@amazon-devices/react-navigation__native';
-import * as React from 'react';
-import { Platform } from 'react-native';
-import { SearchBarProps } from '../../types';
-import {
-  isSearchBarAvailableForCurrentPlatform,
-  executeNativeBackPress,
-} from '../../utils';
-import {
-  ScreenStackHeaderBackButtonImage,
-  ScreenStackHeaderCenterView,
-  ScreenStackHeaderConfig,
-  ScreenStackHeaderLeftView,
-  ScreenStackHeaderRightView,
-  ScreenStackHeaderSearchBarView,
-} from '../../components/ScreenStackHeaderConfig';
-import SearchBar from '../../components/SearchBar';
-import { NativeStackNavigationOptions } from '../types';
-import { useBackPressSubscription } from '../utils/useBackPressSubscription';
-import { processFonts } from './FontProcessor';
-import warnOnce from 'warn-once';
-
-type Props = NativeStackNavigationOptions & {
-  route: Route<string>;
-};
-
-export default function HeaderConfig({
-  backButtonImage,
-  backButtonInCustomView,
-  direction,
-  disableBackButtonMenu,
-  backButtonDisplayMode = 'default',
-  headerBackTitle,
-  headerBackTitleStyle = {},
-  headerBackTitleVisible = true,
-  headerCenter,
-  headerHideBackButton,
-  headerHideShadow,
-  headerLargeStyle = {},
-  headerLargeTitle,
-  headerLargeTitleHideShadow,
-  headerLargeTitleStyle = {},
-  headerLeft,
-  headerRight,
-  headerShown,
-  headerStyle = {},
-  headerTintColor,
-  headerTitle,
-  headerTitleStyle = {},
-  headerTopInsetEnabled = true,
-  headerTranslucent,
-  route,
-  searchBar,
-  title,
-}: Props): JSX.Element {
-  const { colors } = useTheme();
-  const tintColor = headerTintColor ?? colors.primary;
-
-  // We need to use back press subscription here to override back button behavior on JS side.
-  // Because screens are usually used with react-navigation and this library overrides back button
-  // we need to handle it first in case when search bar is open
-  const {
-    handleAttached,
-    handleDetached,
-    clearSubscription,
-    createSubscription,
-  } = useBackPressSubscription({
-    onBackPress: executeNativeBackPress,
-    isDisabled: !searchBar || !!searchBar.disableBackButtonOverride,
-  });
-
-  const [backTitleFontFamily, largeTitleFontFamily, titleFontFamily] =
-    processFonts([
-      headerBackTitleStyle.fontFamily,
-      headerLargeTitleStyle.fontFamily,
-      headerTitleStyle.fontFamily,
-    ]);
-
-  // We want to clear clearSubscription only when components unmounts or search bar changes
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  React.useEffect(() => clearSubscription, [searchBar]);
-
-  const processedSearchBarOptions = React.useMemo(() => {
-    if (
-      Platform.OS === 'android' &&
-      searchBar &&
-      !searchBar.disableBackButtonOverride
-    ) {
-      const onFocus: SearchBarProps['onFocus'] = (...args) => {
-        createSubscription();
-        searchBar.onFocus?.(...args);
-      };
-      const onClose: SearchBarProps['onClose'] = (...args) => {
-        clearSubscription();
-        searchBar.onClose?.(...args);
-      };
-
-      return { ...searchBar, onFocus, onClose };
-    }
-    return searchBar;
-  }, [searchBar, createSubscription, clearSubscription]);
-
-  // @ts-ignore isVision is not yet in the type definitions (RN 0.74+)
-  const isVisionOS = Platform?.isVision;
-
-  warnOnce(
-    isVisionOS &&
-      (headerTitleStyle.color !== undefined || headerTintColor !== undefined),
-    'headerTitleStyle.color and headerTintColor are not supported on visionOS.',
-  );
-
-  return (
-    <ScreenStackHeaderConfig
-      backButtonInCustomView={backButtonInCustomView}
-      backgroundColor={
-        headerStyle.backgroundColor ? headerStyle.backgroundColor : colors.card
-      }
-      backTitle={headerBackTitle}
-      backTitleFontFamily={backTitleFontFamily}
-      backTitleFontSize={headerBackTitleStyle.fontSize}
-      backTitleVisible={headerBackTitleVisible}
-      blurEffect={headerStyle.blurEffect}
-      color={tintColor}
-      direction={direction}
-      disableBackButtonMenu={disableBackButtonMenu}
-      backButtonDisplayMode={backButtonDisplayMode}
-      hidden={headerShown === false}
-      hideBackButton={headerHideBackButton}
-      hideShadow={headerHideShadow}
-      largeTitle={headerLargeTitle}
-      largeTitleBackgroundColor={headerLargeStyle.backgroundColor}
-      largeTitleColor={headerLargeTitleStyle.color}
-      largeTitleFontFamily={largeTitleFontFamily}
-      largeTitleFontSize={headerLargeTitleStyle.fontSize}
-      largeTitleFontWeight={headerLargeTitleStyle.fontWeight}
-      largeTitleHideShadow={headerLargeTitleHideShadow}
-      title={
-        headerTitle !== undefined
-          ? headerTitle
-          : title !== undefined
-          ? title
-          : route.name
-      }
-      titleColor={
-        headerTitleStyle.color !== undefined
-          ? headerTitleStyle.color
-          : headerTintColor !== undefined
-          ? headerTintColor
-          : colors.text
-      }
-      titleFontFamily={titleFontFamily}
-      titleFontSize={headerTitleStyle.fontSize}
-      titleFontWeight={headerTitleStyle.fontWeight}
-      topInsetEnabled={headerTopInsetEnabled}
-      translucent={headerTranslucent === true}
-      onAttached={handleAttached}
-      onDetached={handleDetached}>
-      {headerRight !== undefined ? (
-        <ScreenStackHeaderRightView>
-          {headerRight({ tintColor })}
-        </ScreenStackHeaderRightView>
-      ) : null}
-      {backButtonImage !== undefined ? (
-        <ScreenStackHeaderBackButtonImage
-          key="backImage"
-          source={backButtonImage}
-        />
-      ) : null}
-      {headerLeft !== undefined ? (
-        <ScreenStackHeaderLeftView>
-          {headerLeft({ tintColor })}
-        </ScreenStackHeaderLeftView>
-      ) : null}
-      {headerCenter !== undefined ? (
-        <ScreenStackHeaderCenterView>
-          {headerCenter({ tintColor })}
-        </ScreenStackHeaderCenterView>
-      ) : null}
-      {isSearchBarAvailableForCurrentPlatform &&
-      processedSearchBarOptions !== undefined ? (
-        <ScreenStackHeaderSearchBarView>
-          {/* @ts-ignore Skip incorrect error about incompatible ref types */}
-          <SearchBar {...processedSearchBarOptions} />
-        </ScreenStackHeaderSearchBarView>
-      ) : null}
-    </ScreenStackHeaderConfig>
-  );
-}