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

package/src/components/ScreenStack.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import React, { PropsWithChildren } from 'react';
+import {
+  GestureDetectorBridge,
+  ScreensRefsHolder,
+  GestureProviderProps,
+  GoBackGesture,
+  ScreenStackProps,
+} from '../types';
+import { GHContext, RNSScreensRefContext } from '../contexts';
+import warnOnce from 'warn-once';
+
+// Native components
+import ScreenStackNativeComponent, {
+  NativeProps,
+} from '../fabric/ScreenStackNativeComponent';
+
+const assertGHProvider = (
+  ScreenGestureDetector: (
+    props: PropsWithChildren<GestureProviderProps>,
+  ) => React.JSX.Element,
+  goBackGesture: GoBackGesture | undefined,
+) => {
+  const isGestureDetectorProviderNotDetected =
+    ScreenGestureDetector.name !== 'GHWrapper' && goBackGesture !== undefined;
+
+  warnOnce(
+    isGestureDetectorProviderNotDetected,
+    'Cannot detect GestureDetectorProvider in a screen that uses `goBackGesture`. Make sure your navigator is wrapped in GestureDetectorProvider.',
+  );
+};
+
+const assertCustomScreenTransitionsProps = (
+  screensRefs: ScreenStackProps['screensRefs'],
+  currentScreenId: ScreenStackProps['currentScreenId'],
+  goBackGesture: ScreenStackProps['goBackGesture'],
+) => {
+  const isGestureDetectorNotConfiguredProperly =
+    goBackGesture !== undefined &&
+    screensRefs === null &&
+    currentScreenId === undefined;
+
+  warnOnce(
+    isGestureDetectorNotConfiguredProperly,
+    'Custom Screen Transition require screensRefs and currentScreenId to be provided.',
+  );
+};
+
+function ScreenStack(props: ScreenStackProps) {
+  const {
+    goBackGesture,
+    screensRefs: passedScreenRefs, // TODO: For compatibility with v5, remove once v5 is removed
+    currentScreenId,
+    transitionAnimation,
+    screenEdgeGesture,
+    onFinishTransitioning,
+    children,
+    ...rest
+  } = props;
+
+  const screensRefs = React.useRef<ScreensRefsHolder>(
+    passedScreenRefs?.current ?? {},
+  );
+  const ref = React.useRef(null);
+  const ScreenGestureDetector = React.useContext(GHContext);
+  const gestureDetectorBridge = React.useRef<GestureDetectorBridge>({
+    stackUseEffectCallback: _stackRef => {
+      // this method will be overriden in GestureDetector
+    },
+  });
+
+  React.useEffect(() => {
+    gestureDetectorBridge.current.stackUseEffectCallback(ref);
+  });
+
+  assertGHProvider(ScreenGestureDetector, goBackGesture);
+
+  assertCustomScreenTransitionsProps(
+    screensRefs,
+    currentScreenId,
+    goBackGesture,
+  );
+
+  return (
+    <RNSScreensRefContext.Provider value={screensRefs}>
+      <ScreenGestureDetector
+        gestureDetectorBridge={gestureDetectorBridge}
+        goBackGesture={goBackGesture}
+        transitionAnimation={transitionAnimation}
+        screenEdgeGesture={screenEdgeGesture ?? false}
+        screensRefs={screensRefs}
+        currentScreenId={currentScreenId}>
+        <ScreenStackNativeComponent
+          {...rest}
+          /**
+           * This messy override is to conform NativeProps used by codegen and
+           * our Public API. To see reasoning go to this PR:
+           * https://github.com/software-mansion/react-native-screens/pull/2423#discussion_r1810616995
+           */
+          onFinishTransitioning={
+            onFinishTransitioning as NativeProps['onFinishTransitioning']
+          }
+          ref={ref}>
+          {children}
+        </ScreenStackNativeComponent>
+      </ScreenGestureDetector>
+    </RNSScreensRefContext.Provider>
+  );
+}
+
+export default ScreenStack;

package/src/components/ScreenStack.web.tsx

@@ -0,0 +1,5 @@
+import { View } from 'react-native';
+
+const ScreenStack = View;
+
+export default ScreenStack;

package/src/components/ScreenStackHeaderConfig.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import React from 'react';
+import {
+  HeaderSubviewTypes,
+  ScreenStackHeaderConfigProps,
+  SearchBarProps,
+} from '../types';
+import {
+  Image,
+  ImageProps,
+  Platform,
+  StyleSheet,
+  View,
+  ViewProps,
+} from 'react-native';
+
+// Native components
+import ScreenStackHeaderConfigNativeComponent from '../fabric/ScreenStackHeaderConfigNativeComponent';
+import ScreenStackHeaderSubviewNativeComponent from '../fabric/ScreenStackHeaderSubviewNativeComponent';
+
+export const ScreenStackHeaderSubview: React.ComponentType<
+  React.PropsWithChildren<ViewProps & { type?: HeaderSubviewTypes }>
+> = ScreenStackHeaderSubviewNativeComponent as any;
+
+export const ScreenStackHeaderConfig = React.forwardRef<
+  View,
+  ScreenStackHeaderConfigProps
+>((props, ref) => (
+  <ScreenStackHeaderConfigNativeComponent
+    {...props}
+    ref={ref}
+    style={styles.headerConfig}
+    pointerEvents="box-none"
+  />
+));
+
+ScreenStackHeaderConfig.displayName = 'ScreenStackHeaderConfig';
+
+export const ScreenStackHeaderBackButtonImage = (
+  props: ImageProps,
+): JSX.Element => (
+  <ScreenStackHeaderSubview type="back" style={styles.headerSubview}>
+    <Image resizeMode="center" fadeDuration={0} {...props} />
+  </ScreenStackHeaderSubview>
+);
+
+export const ScreenStackHeaderRightView = (
+  props: React.PropsWithChildren<ViewProps>,
+): JSX.Element => {
+  const { style, ...rest } = props;
+
+  return (
+    <ScreenStackHeaderSubview
+      {...rest}
+      type="right"
+      style={[styles.headerSubview, style]}
+    />
+  );
+};
+
+export const ScreenStackHeaderLeftView = (
+  props: React.PropsWithChildren<ViewProps>,
+): JSX.Element => {
+  const { style, ...rest } = props;
+
+  return (
+    <ScreenStackHeaderSubview
+      {...rest}
+      type="left"
+      style={[styles.headerSubview, style]}
+    />
+  );
+};
+
+export const ScreenStackHeaderCenterView = (
+  props: React.PropsWithChildren<ViewProps>,
+): JSX.Element => {
+  const { style, ...rest } = props;
+
+  return (
+    <ScreenStackHeaderSubview
+      {...rest}
+      type="center"
+      style={[styles.headerSubviewCenter, style]}
+    />
+  );
+};
+
+export const ScreenStackHeaderSearchBarView = (
+  props: React.PropsWithChildren<SearchBarProps>,
+): JSX.Element => (
+  <ScreenStackHeaderSubview
+    {...props}
+    type="searchBar"
+    style={styles.headerSubview}
+  />
+);
+
+const styles = StyleSheet.create({
+  headerSubview: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  headerSubviewCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 1,
+  },
+  headerConfig: {
+    position: 'absolute',
+    top: '-100%',
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    // We only want to center align the subviews on iOS.
+    // See https://github.com/software-mansion/react-native-screens/pull/2456
+    alignItems: Platform.OS === 'ios' ? 'center' : undefined,
+  },
+});

package/src/components/ScreenStackHeaderConfig.web.tsx

@@ -0,0 +1,39 @@
+import { Image, ImageProps, View, ViewProps } from 'react-native';
+import React from 'react';
+import {
+  HeaderSubviewTypes,
+  ScreenStackHeaderConfigProps,
+  SearchBarProps,
+} from '../types';
+
+export const ScreenStackHeaderBackButtonImage = (
+  props: ImageProps,
+): JSX.Element => (
+  <View>
+    <Image resizeMode="center" fadeDuration={0} {...props} />
+  </View>
+);
+
+export const ScreenStackHeaderRightView = (
+  props: React.PropsWithChildren<ViewProps>,
+): JSX.Element => <View {...props} />;
+
+export const ScreenStackHeaderLeftView = (
+  props: React.PropsWithChildren<ViewProps>,
+): JSX.Element => <View {...props} />;
+
+export const ScreenStackHeaderCenterView = (
+  props: React.PropsWithChildren<ViewProps>,
+): JSX.Element => <View {...props} />;
+
+export const ScreenStackHeaderSearchBarView = (
+  props: React.PropsWithChildren<Omit<SearchBarProps, 'ref'>>,
+): JSX.Element => <View {...props} />;
+
+export const ScreenStackHeaderConfig = (
+  props: React.PropsWithChildren<ScreenStackHeaderConfigProps>,
+): JSX.Element => <View {...props} />;
+
+export const ScreenStackHeaderSubview: React.ComponentType<
+  React.PropsWithChildren<ViewProps & { type?: HeaderSubviewTypes }>
+> = View;

package/src/components/ScreenStackItem.tsx

@@ -0,0 +1,174 @@
+import * as React from 'react';
+import {
+  Platform,
+  type StyleProp,
+  StyleSheet,
+  type ViewStyle,
+  View,
+} from 'react-native';
+import warnOnce from 'warn-once';
+
+import DebugContainer from './DebugContainer';
+import { ScreenProps, ScreenStackHeaderConfigProps } from '../types';
+import { ScreenStackHeaderConfig } from './ScreenStackHeaderConfig';
+import Screen from './Screen';
+import ScreenStack from './ScreenStack';
+import { RNSScreensRefContext } from '../contexts';
+import { FooterComponent } from './ScreenFooter';
+
+type Props = Omit<
+  ScreenProps,
+  'enabled' | 'isNativeStack' | 'hasLargeHeader'
+> & {
+  screenId: string;
+  headerConfig?: ScreenStackHeaderConfigProps;
+  contentStyle?: StyleProp<ViewStyle>;
+};
+
+function ScreenStackItem(
+  {
+    children,
+    headerConfig,
+    activityState,
+    shouldFreeze,
+    stackPresentation,
+    contentStyle,
+    style,
+    screenId,
+    // eslint-disable-next-line camelcase
+    unstable_sheetFooter,
+    ...rest
+  }: Props,
+  ref: React.ForwardedRef<View>,
+) {
+  const currentScreenRef = React.useRef<View | null>(null);
+  const screenRefs = React.useContext(RNSScreensRefContext);
+
+  React.useImperativeHandle(ref, () => currentScreenRef.current!);
+
+  const isHeaderInModal =
+    // amznmod_react - return false for Modal on kepler because native component is not implemented yet
+    // @ts-ignore
+    Platform.OS === 'android' || Platform.OS === 'kepler'
+      ? false
+      : stackPresentation !== 'push' && headerConfig?.hidden === false;
+
+  const headerHiddenPreviousRef = React.useRef(headerConfig?.hidden);
+
+  React.useEffect(() => {
+    warnOnce(
+      Platform.OS !== 'android' &&
+        stackPresentation !== 'push' &&
+        headerHiddenPreviousRef.current !== headerConfig?.hidden,
+      `Dynamically changing header's visibility in modals will result in remounting the screen and losing all local state.`,
+    );
+
+    headerHiddenPreviousRef.current = headerConfig?.hidden;
+  }, [headerConfig?.hidden, stackPresentation]);
+
+  const content = (
+    <>
+      <DebugContainer
+        style={[
+          stackPresentation === 'formSheet'
+            ? Platform.OS === 'ios'
+              ? styles.absolute
+              : null
+            : styles.container,
+          contentStyle,
+        ]}
+        stackPresentation={stackPresentation ?? 'push'}>
+        {children}
+      </DebugContainer>
+      {/**
+       * `HeaderConfig` needs to be the direct child of `Screen` without any intermediate `View`
+       * We don't render it conditionally based on visibility to make it possible to dynamically render a custom `header`
+       * Otherwise dynamically rendering a custom `header` leaves the native header visible
+       *
+       * https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md#screenstackheaderconfig
+       *
+       * HeaderConfig must not be first child of a Screen.
+       * See https://github.com/software-mansion/react-native-screens/pull/1825
+       * for detailed explanation.
+       */}
+      <ScreenStackHeaderConfig {...headerConfig} />
+      {/* eslint-disable-next-line camelcase */}
+      {stackPresentation === 'formSheet' && unstable_sheetFooter && (
+        <FooterComponent>{unstable_sheetFooter()}</FooterComponent>
+      )}
+    </>
+  );
+
+  // We take backgroundColor from contentStyle and apply it on Screen.
+  // This allows to workaround one issue with truncated
+  // content with formSheet presentation.
+  let internalScreenStyle;
+
+  if (stackPresentation === 'formSheet' && contentStyle) {
+    const flattenContentStyles = StyleSheet.flatten(contentStyle);
+    internalScreenStyle = {
+      backgroundColor: flattenContentStyles?.backgroundColor,
+    };
+  }
+
+  return (
+    <Screen
+      ref={node => {
+        currentScreenRef.current = node;
+
+        if (screenRefs === null) {
+          console.warn(
+            'Looks like RNSScreensRefContext is missing. Make sure the ScreenStack component is wrapped in it',
+          );
+          return;
+        }
+
+        const currentRefs = screenRefs.current;
+
+        if (node === null) {
+          // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+          delete currentRefs[screenId];
+        } else {
+          currentRefs[screenId] = { current: node };
+        }
+      }}
+      enabled
+      isNativeStack
+      activityState={activityState}
+      shouldFreeze={shouldFreeze}
+      stackPresentation={stackPresentation}
+      hasLargeHeader={headerConfig?.largeTitle ?? false}
+      style={[style, internalScreenStyle]}
+      {...rest}>
+      {isHeaderInModal ? (
+        <ScreenStack style={styles.container}>
+          <Screen
+            enabled
+            isNativeStack
+            activityState={activityState}
+            shouldFreeze={shouldFreeze}
+            hasLargeHeader={headerConfig?.largeTitle ?? false}
+            style={StyleSheet.absoluteFill}>
+            {content}
+          </Screen>
+        </ScreenStack>
+      ) : (
+        content
+      )}
+    </Screen>
+  );
+}
+
+export default React.forwardRef(ScreenStackItem);
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  absolute: {
+    position: 'absolute',
+    top: 0,
+    start: 0,
+    end: 0,
+  },
+});

package/src/components/SearchBar.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import React from 'react';
+import { SearchBarCommands, SearchBarProps } from '../types';
+import { isSearchBarAvailableForCurrentPlatform } from '../utils';
+import { View } from 'react-native';
+
+// Native components
+import SearchBarNativeComponent, {
+  Commands as SearchBarNativeCommands,
+  NativeProps as SearchBarNativeProps,
+  SearchBarEvent,
+  SearchButtonPressedEvent,
+  ChangeTextEvent,
+} from '../fabric/SearchBarNativeComponent';
+import { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+
+const NativeSearchBar: React.ComponentType<
+  SearchBarNativeProps & { ref?: React.RefObject<SearchBarCommands> }
+> &
+  typeof NativeSearchBarCommands =
+  SearchBarNativeComponent as unknown as React.ComponentType<SearchBarNativeProps> &
+    SearchBarCommandsType;
+const NativeSearchBarCommands: SearchBarCommandsType =
+  SearchBarNativeCommands as SearchBarCommandsType;
+
+type NativeSearchBarRef = React.ElementRef<typeof NativeSearchBar>;
+
+type SearchBarCommandsType = {
+  blur: (viewRef: NativeSearchBarRef) => void;
+  focus: (viewRef: NativeSearchBarRef) => void;
+  clearText: (viewRef: NativeSearchBarRef) => void;
+  toggleCancelButton: (viewRef: NativeSearchBarRef, flag: boolean) => void;
+  setText: (viewRef: NativeSearchBarRef, text: string) => void;
+  cancelSearch: (viewRef: NativeSearchBarRef) => void;
+};
+
+function SearchBar(props: SearchBarProps, ref: React.Ref<SearchBarCommands>) {
+  const searchBarRef = React.useRef<SearchBarCommands | null>(null);
+
+  React.useImperativeHandle(ref, () => ({
+    blur: () => {
+      _callMethodWithRef(ref => NativeSearchBarCommands.blur(ref));
+    },
+    focus: () => {
+      _callMethodWithRef(ref => NativeSearchBarCommands.focus(ref));
+    },
+    toggleCancelButton: (flag: boolean) => {
+      _callMethodWithRef(ref =>
+        NativeSearchBarCommands.toggleCancelButton(ref, flag),
+      );
+    },
+    clearText: () => {
+      _callMethodWithRef(ref => NativeSearchBarCommands.clearText(ref));
+    },
+    setText: (text: string) => {
+      _callMethodWithRef(ref => NativeSearchBarCommands.setText(ref, text));
+    },
+    cancelSearch: () => {
+      _callMethodWithRef(ref => NativeSearchBarCommands.cancelSearch(ref));
+    },
+  }));
+
+  const _callMethodWithRef = React.useCallback(
+    (method: (ref: SearchBarCommands) => void) => {
+      const ref = searchBarRef.current;
+      if (ref) {
+        method(ref);
+      } else {
+        console.warn(
+          'Reference to native search bar component has not been updated yet',
+        );
+      }
+    },
+    [searchBarRef],
+  );
+
+  if (!isSearchBarAvailableForCurrentPlatform) {
+    console.warn(
+      'Importing SearchBar is only valid on iOS and Android devices.',
+    );
+    return View as unknown as React.ReactNode;
+  }
+
+  return (
+    <NativeSearchBar
+      ref={searchBarRef}
+      {...props}
+      onSearchFocus={props.onFocus as DirectEventHandler<SearchBarEvent>}
+      onSearchBlur={props.onBlur as DirectEventHandler<SearchBarEvent>}
+      onSearchButtonPress={
+        props.onSearchButtonPress as DirectEventHandler<SearchButtonPressedEvent>
+      }
+      onCancelButtonPress={
+        props.onCancelButtonPress as DirectEventHandler<SearchBarEvent>
+      }
+      onChangeText={props.onChangeText as DirectEventHandler<ChangeTextEvent>}
+    />
+  );
+}
+
+export default React.forwardRef<SearchBarCommands, SearchBarProps>(SearchBar);

package/src/components/SearchBar.web.tsx

@@ -0,0 +1,5 @@
+import { View } from 'react-native';
+
+const SearchBar = View;
+
+export default SearchBar;

package/src/components/helpers/DelayedFreeze.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Freeze } from 'react-freeze';
+
+interface FreezeWrapperProps {
+  freeze: boolean;
+  children: React.ReactNode;
+}
+
+// This component allows one more render before freezing the screen.
+// Allows activityState to reach the native side and useIsFocused to work correctly.
+function DelayedFreeze({ freeze, children }: FreezeWrapperProps) {
+  // flag used for determining whether freeze should be enabled
+  const [freezeState, setFreezeState] = React.useState(false);
+
+  React.useEffect(() => {
+    const id = setImmediate(() => {
+      setFreezeState(freeze);
+    });
+    return () => {
+      clearImmediate(id);
+    };
+  }, [freeze]);
+
+  return <Freeze freeze={freeze ? freezeState : false}>{children}</Freeze>;
+}
+
+export default DelayedFreeze;

package/src/components/helpers/usePrevious.tsx

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from 'react';
+
+export function usePrevious<T>(state: T): T | undefined {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = state;
+  });
+
+  return ref.current;
+}

package/src/contexts.tsx

@@ -0,0 +1,9 @@
+import React, { PropsWithChildren } from 'react';
+import { GestureProviderProps, ScreensRefsHolder } from './types';
+
+export const GHContext = React.createContext(
+  (props: PropsWithChildren<GestureProviderProps>) => <>{props.children}</>,
+);
+
+export const RNSScreensRefContext =
+  React.createContext<React.MutableRefObject<ScreensRefsHolder> | null>(null);

package/src/core.ts

@@ -0,0 +1,45 @@
+'use client';
+
+import { Platform, UIManager } from 'react-native';
+
+export const isNativePlatformSupported =
+  Platform.OS === 'ios' ||
+  Platform.OS === 'android' ||
+  Platform.OS === 'windows'||
+  // amznmod_react - add Kepler support
+  // @ts-ignore
+  Platform.OS === 'kepler';
+
+let ENABLE_SCREENS = isNativePlatformSupported;
+
+export function enableScreens(shouldEnableScreens = true) {
+  ENABLE_SCREENS = shouldEnableScreens;
+
+  if (!isNativePlatformSupported) {
+    return;
+  }
+
+  if (ENABLE_SCREENS && !UIManager.getViewManagerConfig('RNSScreen')) {
+    console.error(
+      `Screen native module hasn't been linked. Please check the react-native-screens README for more details`,
+    );
+  }
+}
+
+let ENABLE_FREEZE = false;
+
+export function enableFreeze(shouldEnableReactFreeze = true) {
+  if (!isNativePlatformSupported) {
+    return;
+  }
+
+  ENABLE_FREEZE = shouldEnableReactFreeze;
+}
+
+export function screensEnabled() {
+  return ENABLE_SCREENS;
+}
+
+export function freezeEnabled() {
+  return ENABLE_FREEZE;
+}

package/src/fabric/FullWindowOverlayNativeComponent.ts

@@ -1,3 +1,19 @@
+'use client';
+/*
+ * Portions of this file are copyright (c) 2025 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 - register component on Kepler
 // @ts-ignore
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type { ViewProps } from 'react-native';