@amazon-devices/react-native-screens 2.0.1758683737

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

@@ -0,0 +1,78 @@
+/*
+ * 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

@@ -0,0 +1,41 @@
+import { Platform } from 'react-native';
+import { StackPresentationTypes } from '@amazon-devices/react-native-screens';
+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/useAnimatedHeaderHeight.tsx

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

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

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

@@ -0,0 +1,14 @@
+// @ts-ignore: No declaration available
+// eslint-disable-next-line import/no-named-as-default, import/default, import/no-named-as-default-member, import/namespace
+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/HeaderConfig.tsx

@@ -0,0 +1,187 @@
+/*
+ * 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 {
+  ScreenStackHeaderBackButtonImage,
+  ScreenStackHeaderCenterView,
+  ScreenStackHeaderConfig,
+  ScreenStackHeaderLeftView,
+  ScreenStackHeaderRightView,
+  ScreenStackHeaderSearchBarView,
+  SearchBar,
+  SearchBarProps,
+  isSearchBarAvailableForCurrentPlatform,
+  executeNativeBackPress,
+} from '@amazon-devices/react-native-screens';
+import { NativeStackNavigationOptions } from '../types';
+import { useBackPressSubscription } from '../utils/useBackPressSubscription';
+import { processFonts } from './FontProcessor';
+
+type Props = NativeStackNavigationOptions & {
+  route: Route<string>;
+};
+
+export default function HeaderConfig({
+  backButtonImage,
+  backButtonInCustomView,
+  direction,
+  disableBackButtonMenu,
+  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]);
+
+  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}
+      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>
+          <SearchBar {...processedSearchBarOptions} />
+        </ScreenStackHeaderSearchBarView>
+      ) : null}
+    </ScreenStackHeaderConfig>
+  );
+}