@amazon-devices/react-navigation__stack 2.0.1758683737

package/src/utils/useCardAnimation.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import CardAnimationContext from './CardAnimationContext';
+
+export default function useCardAnimation() {
+  const animation = React.useContext(CardAnimationContext);
+
+  if (animation === undefined) {
+    throw new Error(
+      "Couldn't find values for card animation. Are you inside a screen in Stack?"
+    );
+  }
+
+  return animation;
+}

package/src/utils/useGestureHandlerRef.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import StackGestureRefContext from './GestureHandlerRefContext';
+
+export default function useGestureHandlerRef() {
+  const ref = React.useContext(StackGestureRefContext);
+
+  if (ref === undefined) {
+    throw new Error(
+      "Couldn't find a ref for gesture handler. Are you inside a screen in Stack?"
+    );
+  }
+
+  return ref;
+}

package/src/utils/useKeyboardManager.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { HostComponent, Keyboard, TextInput } from 'react-native';
+
+type InputRef = React.ElementRef<HostComponent<unknown>> | undefined;
+
+export default function useKeyboardManager(isEnabled: () => boolean) {
+  // Numeric id of the previously focused text input
+  // When a gesture didn't change the tab, we can restore the focused input with this
+  const previouslyFocusedTextInputRef = React.useRef<InputRef>(undefined);
+  const startTimestampRef = React.useRef<number>(0);
+  const keyboardTimeoutRef = React.useRef<any>();
+
+  const clearKeyboardTimeout = React.useCallback(() => {
+    if (keyboardTimeoutRef.current !== undefined) {
+      clearTimeout(keyboardTimeoutRef.current);
+      keyboardTimeoutRef.current = undefined;
+    }
+  }, []);
+
+  const onPageChangeStart = React.useCallback(() => {
+    if (!isEnabled()) {
+      return;
+    }
+
+    clearKeyboardTimeout();
+
+    const input: InputRef = TextInput.State.currentlyFocusedInput();
+
+    // When a page change begins, blur the currently focused input
+    input?.blur();
+
+    // Store the id of this input so we can refocus it if change was cancelled
+    previouslyFocusedTextInputRef.current = input;
+
+    // Store timestamp for touch start
+    startTimestampRef.current = Date.now();
+  }, [clearKeyboardTimeout, isEnabled]);
+
+  const onPageChangeConfirm = React.useCallback(
+    (force: boolean) => {
+      if (!isEnabled()) {
+        return;
+      }
+
+      clearKeyboardTimeout();
+
+      if (force) {
+        // Always dismiss input, even if we don't have a ref to it
+        // We might not have the ref if onPageChangeStart was never called
+        // This can happen if page change was not from a gesture
+        Keyboard.dismiss();
+      } else {
+        const input = previouslyFocusedTextInputRef.current;
+
+        // Dismiss the keyboard only if an input was a focused before
+        // This makes sure we don't dismiss input on going back and focusing an input
+        input?.blur();
+      }
+
+      // Cleanup the ID on successful page change
+      previouslyFocusedTextInputRef.current = undefined;
+    },
+    [clearKeyboardTimeout, isEnabled]
+  );
+
+  const onPageChangeCancel = React.useCallback(() => {
+    if (!isEnabled()) {
+      return;
+    }
+
+    clearKeyboardTimeout();
+
+    // The page didn't change, we should restore the focus of text input
+    const input = previouslyFocusedTextInputRef.current;
+
+    if (input) {
+      // If the interaction was super short we should make sure keyboard won't hide again.
+
+      // Too fast input refocus will result only in keyboard flashing on screen and hiding right away.
+      // During first ~100ms keyboard will be dismissed no matter what,
+      // so we have to make sure it won't interrupt input refocus logic.
+      // That's why when the interaction is shorter than 100ms we add delay so it won't hide once again.
+      // Subtracting timestamps makes us sure the delay is executed only when needed.
+      if (Date.now() - startTimestampRef.current < 100) {
+        keyboardTimeoutRef.current = setTimeout(() => {
+          input?.focus();
+          previouslyFocusedTextInputRef.current = undefined;
+        }, 100);
+      } else {
+        input?.focus();
+        previouslyFocusedTextInputRef.current = undefined;
+      }
+    }
+  }, [clearKeyboardTimeout, isEnabled]);
+
+  React.useEffect(() => {
+    return () => clearKeyboardTimeout();
+  }, [clearKeyboardTimeout]);
+
+  return {
+    onPageChangeStart,
+    onPageChangeConfirm,
+    onPageChangeCancel,
+  };
+}

package/src/views/GestureHandler.android.tsx

@@ -0,0 +1 @@
+export * from './GestureHandlerNative';

package/src/views/GestureHandler.ios.tsx

@@ -0,0 +1 @@
+export * from './GestureHandlerNative';

package/src/views/GestureHandler.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import type { PanGestureHandlerProperties } from 'react-native-gesture-handler';
+
+const Dummy: any = ({ children }: { children: React.ReactNode }) => (
+  <>{children}</>
+);
+
+export const PanGestureHandler =
+  Dummy as React.ComponentType<PanGestureHandlerProperties>;
+
+export const GestureHandlerRootView = View;
+
+export const GestureState = {
+  UNDETERMINED: 0,
+  FAILED: 1,
+  BEGAN: 2,
+  CANCELLED: 3,
+  ACTIVE: 4,
+  END: 5,
+};
+
+export type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';

package/src/views/GestureHandlerNative.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import {
+  PanGestureHandler as PanGestureHandlerNative,
+  PanGestureHandlerProperties,
+} from 'react-native-gesture-handler';
+
+import GestureHandlerRefContext from '../utils/GestureHandlerRefContext';
+
+export function PanGestureHandler(props: PanGestureHandlerProperties) {
+  const gestureRef = React.useRef<PanGestureHandlerNative>(null);
+
+  return (
+    <GestureHandlerRefContext.Provider value={gestureRef}>
+      <PanGestureHandlerNative {...props} ref={gestureRef} />
+    </GestureHandlerRefContext.Provider>
+  );
+}
+
+export type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';
+export {
+  GestureHandlerRootView,
+  State as GestureState,
+} from 'react-native-gesture-handler';

package/src/views/Header/Header.tsx

@@ -0,0 +1,72 @@
+import { getHeaderTitle, HeaderShownContext } from '@amazon-devices/react-navigation__elements';
+import { StackActions } from '@amazon-devices/react-navigation__native';
+import * as React from 'react';
+import { useSafeAreaInsets } from '@amazon-devices/react-native-safe-area-context';
+
+import type { StackHeaderProps } from '../../types';
+import debounce from '../../utils/debounce';
+import ModalPresentationContext from '../../utils/ModalPresentationContext';
+import HeaderSegment from './HeaderSegment';
+
+export default React.memo(function Header({
+  back,
+  layout,
+  progress,
+  options,
+  route,
+  navigation,
+  styleInterpolator,
+}: StackHeaderProps) {
+  const insets = useSafeAreaInsets();
+
+  let previousTitle;
+
+  // The label for the left back button shows the title of the previous screen
+  // If a custom label is specified, we use it, otherwise use previous screen's title
+  if (options.headerBackTitle !== undefined) {
+    previousTitle = options.headerBackTitle;
+  } else if (back) {
+    previousTitle = back.title;
+  }
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const goBack = React.useCallback(
+    debounce(() => {
+      if (navigation.isFocused() && navigation.canGoBack()) {
+        navigation.dispatch({
+          ...StackActions.pop(),
+          source: route.key,
+        });
+      }
+    }, 50),
+    [navigation, route.key]
+  );
+
+  const isModal = React.useContext(ModalPresentationContext);
+  const isParentHeaderShown = React.useContext(HeaderShownContext);
+
+  const statusBarHeight =
+    options.headerStatusBarHeight !== undefined
+      ? options.headerStatusBarHeight
+      : isModal || isParentHeaderShown
+      ? 0
+      : insets.top;
+
+  return (
+    <HeaderSegment
+      {...options}
+      title={getHeaderTitle(options, route.name)}
+      progress={progress}
+      layout={layout}
+      modal={isModal}
+      headerBackTitle={
+        options.headerBackTitle !== undefined
+          ? options.headerBackTitle
+          : previousTitle
+      }
+      headerStatusBarHeight={statusBarHeight}
+      onGoBack={back ? goBack : undefined}
+      styleInterpolator={styleInterpolator}
+    />
+  );
+});

package/src/views/Header/HeaderContainer.tsx

@@ -0,0 +1,186 @@
+import { getHeaderTitle, HeaderBackContext } from '@amazon-devices/react-navigation__elements';
+import {
+  NavigationContext,
+  NavigationRouteContext,
+  ParamListBase,
+  Route,
+} from '@amazon-devices/react-navigation__native';
+import * as React from 'react';
+import { Animated, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+
+import {
+  forNoAnimation,
+  forSlideLeft,
+  forSlideRight,
+  forSlideUp,
+} from '../../TransitionConfigs/HeaderStyleInterpolators';
+import type {
+  Layout,
+  Scene,
+  StackHeaderMode,
+  StackHeaderProps,
+  StackNavigationProp,
+} from '../../types';
+import Header from './Header';
+
+export type Props = {
+  mode: StackHeaderMode;
+  layout: Layout;
+  scenes: (Scene | undefined)[];
+  getPreviousScene: (props: { route: Route<string> }) => Scene | undefined;
+  getFocusedRoute: () => Route<string>;
+  onContentHeightChange?: (props: {
+    route: Route<string>;
+    height: number;
+  }) => void;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+};
+
+export default function HeaderContainer({
+  mode,
+  scenes,
+  layout,
+  getPreviousScene,
+  getFocusedRoute,
+  onContentHeightChange,
+  style,
+}: Props) {
+  const focusedRoute = getFocusedRoute();
+  const parentHeaderBack = React.useContext(HeaderBackContext);
+
+  return (
+    <Animated.View pointerEvents="box-none" style={style}>
+      {scenes.slice(-3).map((scene, i, self) => {
+        if ((mode === 'screen' && i !== self.length - 1) || !scene) {
+          return null;
+        }
+
+        const {
+          header,
+          headerMode,
+          headerShown = true,
+          headerTransparent,
+          headerStyleInterpolator,
+        } = scene.descriptor.options;
+
+        if (headerMode !== mode || !headerShown) {
+          return null;
+        }
+
+        const isFocused = focusedRoute.key === scene.descriptor.route.key;
+        const previousScene = getPreviousScene({
+          route: scene.descriptor.route,
+        });
+
+        let headerBack = parentHeaderBack;
+
+        if (previousScene) {
+          const { options, route } = previousScene.descriptor;
+
+          headerBack = previousScene
+            ? { title: getHeaderTitle(options, route.name) }
+            : parentHeaderBack;
+        }
+
+        // If the screen is next to a headerless screen, we need to make the header appear static
+        // This makes the header look like it's moving with the screen
+        const previousDescriptor = self[i - 1]?.descriptor;
+        const nextDescriptor = self[i + 1]?.descriptor;
+
+        const {
+          headerShown: previousHeaderShown = true,
+          headerMode: previousHeaderMode,
+        } = previousDescriptor?.options || {};
+
+        // If any of the next screens don't have a header or header is part of the screen
+        // Then we need to move this header offscreen so that it doesn't cover it
+        const nextHeaderlessScene = self.slice(i + 1).find((scene) => {
+          const {
+            headerShown: currentHeaderShown = true,
+            headerMode: currentHeaderMode,
+          } = scene?.descriptor.options || {};
+
+          return currentHeaderShown === false || currentHeaderMode === 'screen';
+        });
+
+        const { gestureDirection: nextHeaderlessGestureDirection } =
+          nextHeaderlessScene?.descriptor.options || {};
+
+        const isHeaderStatic =
+          ((previousHeaderShown === false || previousHeaderMode === 'screen') &&
+            // We still need to animate when coming back from next scene
+            // A hacky way to check this is if the next scene exists
+            !nextDescriptor) ||
+          nextHeaderlessScene;
+
+        const props: StackHeaderProps = {
+          layout,
+          back: headerBack,
+          progress: scene.progress,
+          options: scene.descriptor.options,
+          route: scene.descriptor.route,
+          navigation: scene.descriptor
+            .navigation as StackNavigationProp<ParamListBase>,
+          styleInterpolator:
+            mode === 'float'
+              ? isHeaderStatic
+                ? nextHeaderlessGestureDirection === 'vertical' ||
+                  nextHeaderlessGestureDirection === 'vertical-inverted'
+                  ? forSlideUp
+                  : nextHeaderlessGestureDirection === 'horizontal-inverted'
+                  ? forSlideRight
+                  : forSlideLeft
+                : headerStyleInterpolator
+              : forNoAnimation,
+        };
+
+        return (
+          <NavigationContext.Provider
+            key={scene.descriptor.route.key}
+            value={scene.descriptor.navigation}
+          >
+            <NavigationRouteContext.Provider value={scene.descriptor.route}>
+              <View
+                onLayout={
+                  onContentHeightChange
+                    ? (e) => {
+                        const { height } = e.nativeEvent.layout;
+
+                        onContentHeightChange({
+                          route: scene.descriptor.route,
+                          height,
+                        });
+                      }
+                    : undefined
+                }
+                pointerEvents={isFocused ? 'box-none' : 'none'}
+                accessibilityElementsHidden={!isFocused}
+                importantForAccessibility={
+                  isFocused ? 'auto' : 'no-hide-descendants'
+                }
+                style={
+                  // Avoid positioning the focused header absolutely
+                  // Otherwise accessibility tools don't seem to be able to find it
+                  (mode === 'float' && !isFocused) || headerTransparent
+                    ? styles.header
+                    : null
+                }
+              >
+                {header !== undefined ? header(props) : <Header {...props} />}
+              </View>
+            </NavigationRouteContext.Provider>
+          </NavigationContext.Provider>
+        );
+      })}
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+});

package/src/views/Header/HeaderSegment.tsx

@@ -0,0 +1,205 @@
+import {
+  getDefaultHeaderHeight,
+  Header,
+  HeaderBackButton,
+  HeaderBackButtonProps,
+  HeaderTitle,
+} from '@amazon-devices/react-navigation__elements';
+import * as React from 'react';
+import {
+  Animated,
+  LayoutChangeEvent,
+  Platform,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
+
+import type {
+  Layout,
+  SceneProgress,
+  StackHeaderOptions,
+  StackHeaderStyleInterpolator,
+} from '../../types';
+import memoize from '../../utils/memoize';
+
+type Props = Omit<StackHeaderOptions, 'headerStatusBarHeight'> & {
+  headerStatusBarHeight: number;
+  layout: Layout;
+  title: string;
+  modal: boolean;
+  onGoBack?: () => void;
+  progress: SceneProgress;
+  styleInterpolator: StackHeaderStyleInterpolator;
+};
+
+export default function HeaderSegment(props: Props) {
+  const [leftLabelLayout, setLeftLabelLayout] = React.useState<
+    Layout | undefined
+  >(undefined);
+
+  const [titleLayout, setTitleLayout] = React.useState<Layout | undefined>(
+    undefined
+  );
+
+  const handleTitleLayout = (e: LayoutChangeEvent) => {
+    const { height, width } = e.nativeEvent.layout;
+
+    setTitleLayout((titleLayout) => {
+      if (
+        titleLayout &&
+        height === titleLayout.height &&
+        width === titleLayout.width
+      ) {
+        return titleLayout;
+      }
+
+      return { height, width };
+    });
+  };
+
+  const handleLeftLabelLayout = (e: LayoutChangeEvent) => {
+    const { height, width } = e.nativeEvent.layout;
+
+    if (
+      leftLabelLayout &&
+      height === leftLabelLayout.height &&
+      width === leftLabelLayout.width
+    ) {
+      return;
+    }
+
+    setLeftLabelLayout({ height, width });
+  };
+
+  const getInterpolatedStyle = memoize(
+    (
+      styleInterpolator: StackHeaderStyleInterpolator,
+      layout: Layout,
+      current: Animated.AnimatedInterpolation<number>,
+      next: Animated.AnimatedInterpolation<number> | undefined,
+      titleLayout: Layout | undefined,
+      leftLabelLayout: Layout | undefined,
+      headerHeight: number
+    ) =>
+      styleInterpolator({
+        current: { progress: current },
+        next: next && { progress: next },
+        layouts: {
+          header: {
+            height: headerHeight,
+            width: layout.width,
+          },
+          screen: layout,
+          title: titleLayout,
+          leftLabel: leftLabelLayout,
+        },
+      })
+  );
+
+  const {
+    progress,
+    layout,
+    modal,
+    onGoBack,
+    headerTitle: title,
+    headerLeft: left = onGoBack
+      ? (props: HeaderBackButtonProps) => <HeaderBackButton {...props} />
+      : undefined,
+    headerRight: right,
+    headerBackImage,
+    headerBackTitle,
+    headerBackTitleVisible = Platform.OS === 'ios',
+    headerTruncatedBackTitle,
+    headerBackAccessibilityLabel,
+    headerBackTestID,
+    headerBackAllowFontScaling,
+    headerBackTitleStyle,
+    headerTitleContainerStyle,
+    headerLeftContainerStyle,
+    headerRightContainerStyle,
+    headerBackgroundContainerStyle,
+    headerStyle: customHeaderStyle,
+    headerStatusBarHeight,
+    styleInterpolator,
+    ...rest
+  } = props;
+
+  const defaultHeight = getDefaultHeaderHeight(
+    layout,
+    modal,
+    headerStatusBarHeight
+  );
+
+  const { height = defaultHeight } = StyleSheet.flatten(
+    customHeaderStyle || {}
+  ) as ViewStyle;
+
+  const {
+    titleStyle,
+    leftButtonStyle,
+    leftLabelStyle,
+    rightButtonStyle,
+    backgroundStyle,
+  } = getInterpolatedStyle(
+    styleInterpolator,
+    layout,
+    progress.current,
+    progress.next,
+    titleLayout,
+    headerBackTitle ? leftLabelLayout : undefined,
+    typeof height === 'number' ? height : defaultHeight
+  );
+
+  const headerLeft: StackHeaderOptions['headerLeft'] = left
+    ? (props) =>
+        left({
+          ...props,
+          backImage: headerBackImage,
+          accessibilityLabel: headerBackAccessibilityLabel,
+          testID: headerBackTestID,
+          allowFontScaling: headerBackAllowFontScaling,
+          onPress: onGoBack,
+          label: headerBackTitle,
+          truncatedLabel: headerTruncatedBackTitle,
+          labelStyle: [leftLabelStyle, headerBackTitleStyle],
+          onLabelLayout: handleLeftLabelLayout,
+          screenLayout: layout,
+          titleLayout,
+          canGoBack: Boolean(onGoBack),
+        })
+    : undefined;
+
+  const headerRight: StackHeaderOptions['headerRight'] = right
+    ? (props) =>
+        right({
+          ...props,
+          canGoBack: Boolean(onGoBack),
+        })
+    : undefined;
+
+  const headerTitle: StackHeaderOptions['headerTitle'] =
+    typeof title !== 'function'
+      ? (props) => <HeaderTitle {...props} onLayout={handleTitleLayout} />
+      : (props) => title({ ...props, onLayout: handleTitleLayout });
+
+  return (
+    <Header
+      modal={modal}
+      layout={layout}
+      headerTitle={headerTitle}
+      headerLeft={headerLeft}
+      headerLeftLabelVisible={headerBackTitleVisible}
+      headerRight={headerRight}
+      headerTitleContainerStyle={[titleStyle, headerTitleContainerStyle]}
+      headerLeftContainerStyle={[leftButtonStyle, headerLeftContainerStyle]}
+      headerRightContainerStyle={[rightButtonStyle, headerRightContainerStyle]}
+      headerBackgroundContainerStyle={[
+        backgroundStyle,
+        headerBackgroundContainerStyle,
+      ]}
+      headerStyle={customHeaderStyle}
+      headerStatusBarHeight={headerStatusBarHeight}
+      {...rest}
+    />
+  );
+}