@amazon-devices/react-native-screens 2.0.9000000000 → 3.0.9000000000-rn-83

package/src/components/ScreenStackHeaderConfig.tsx

@@ -0,0 +1,127 @@
+'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,
+// amznmod_react - add support for react 19
+): React.JSX.Element => (
+  <ScreenStackHeaderSubview type="back" style={styles.headerSubview}>
+    <Image resizeMode="center" fadeDuration={0} {...props} />
+  </ScreenStackHeaderSubview>
+);
+
+export const ScreenStackHeaderRightView = (
+  props: React.PropsWithChildren<ViewProps>,
+// amznmod_react - add support for react 19
+): React.JSX.Element => {
+  const { style, ...rest } = props;
+
+  return (
+    <ScreenStackHeaderSubview
+      {...rest}
+      type="right"
+      style={[styles.headerSubview, style]}
+    />
+  );
+};
+
+export const ScreenStackHeaderLeftView = (
+  props: React.PropsWithChildren<ViewProps>,
+// amznmod_react - add support for react 19
+): React.JSX.Element => {
+  const { style, ...rest } = props;
+
+  return (
+    <ScreenStackHeaderSubview
+      {...rest}
+      type="left"
+      style={[styles.headerSubview, style]}
+    />
+  );
+};
+
+export const ScreenStackHeaderCenterView = (
+  props: React.PropsWithChildren<ViewProps>,
+// amznmod_react - add support for react 19
+): React.JSX.Element => {
+  const { style, ...rest } = props;
+
+  return (
+    <ScreenStackHeaderSubview
+      {...rest}
+      type="center"
+      style={[styles.headerSubviewCenter, style]}
+    />
+  );
+};
+
+export const ScreenStackHeaderSearchBarView = (
+  props: React.PropsWithChildren<SearchBarProps>,
+// amznmod_react - add support for react 19
+): React.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,45 @@
+import { Image, ImageProps, View, ViewProps } from 'react-native';
+import React from 'react';
+import {
+  HeaderSubviewTypes,
+  ScreenStackHeaderConfigProps,
+  SearchBarProps,
+} from '../types';
+
+export const ScreenStackHeaderBackButtonImage = (
+  props: ImageProps,
+// amznmod_react - add support for react 19
+): React.JSX.Element => (
+  <View>
+    <Image resizeMode="center" fadeDuration={0} {...props} />
+  </View>
+);
+
+export const ScreenStackHeaderRightView = (
+  props: React.PropsWithChildren<ViewProps>,
+// amznmod_react - add support for react 19
+): React.JSX.Element => <View {...props} />;
+
+export const ScreenStackHeaderLeftView = (
+  props: React.PropsWithChildren<ViewProps>,
+// amznmod_react - add support for react 19
+): React.JSX.Element => <View {...props} />;
+
+export const ScreenStackHeaderCenterView = (
+  props: React.PropsWithChildren<ViewProps>,
+// amznmod_react - add support for react 19
+): React.JSX.Element => <View {...props} />;
+
+export const ScreenStackHeaderSearchBarView = (
+  props: React.PropsWithChildren<Omit<SearchBarProps, 'ref'>>,
+// amznmod_react - add support for react 19
+): React.JSX.Element => <View {...props} />;
+
+export const ScreenStackHeaderConfig = (
+  props: React.PropsWithChildren<ScreenStackHeaderConfigProps>,
+// amznmod_react - add support for react 19
+): React.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,105 @@
+'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';
+
+// amznmod_react - add support for react 19
+const NativeSearchBar: React.ComponentType<
+  SearchBarNativeProps & { ref?: React.RefObject<SearchBarCommands | null> | null }
+> &
+  typeof NativeSearchBarCommands =
+  SearchBarNativeComponent as unknown as React.ComponentType<SearchBarNativeProps> &
+    SearchBarCommandsType;
+const NativeSearchBarCommands: SearchBarCommandsType =
+  SearchBarNativeCommands as SearchBarCommandsType;
+
+// amznmod_react - add support for react 19
+type NativeSearchBarRef = React.ComponentRef<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>) {
+  // amznmod_react - add support for react 19
+  const searchBarRef = React.useRef<SearchBarCommands>(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,12 @@
+import { useEffect, useRef } from 'react';
+
+export function usePrevious<T>(state: T): T | undefined {
+// amznmod_react - add support for react 19
+  const ref = useRef<T>(undefined);
+
+  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';

package/src/fabric/ModalScreenNativeComponent.ts

@@ -0,0 +1,115 @@
+'use client';
+
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps, ColorValue } from 'react-native';
+import type {
+  DirectEventHandler,
+  WithDefault,
+  Int32,
+  Float,
+  Double,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type ScreenEvent = Readonly<{}>;
+
+type ScreenDismissedEvent = Readonly<{
+  dismissCount: Int32;
+}>;
+
+type TransitionProgressEvent = Readonly<{
+  progress: Double;
+  closing: Int32;
+  goingForward: Int32;
+}>;
+
+type HeaderHeightChangeEvent = Readonly<{
+  headerHeight: Double;
+}>;
+
+type SheetDetentChangedEvent = Readonly<{
+  index: Int32;
+  isStable: boolean;
+}>;
+
+type GestureResponseDistanceType = Readonly<{
+  start: Float;
+  end: Float;
+  top: Float;
+  bottom: Float;
+}>;
+
+type StackPresentation =
+  | 'push'
+  | 'modal'
+  | 'transparentModal'
+  | 'fullScreenModal'
+  | 'formSheet'
+  | 'containedModal'
+  | 'containedTransparentModal';
+
+type StackAnimation =
+  | 'default'
+  | 'flip'
+  | 'simple_push'
+  | 'none'
+  | 'fade'
+  | 'slide_from_right'
+  | 'slide_from_left'
+  | 'slide_from_bottom'
+  | 'fade_from_bottom'
+  | 'ios_from_right'
+  | 'ios_from_left';
+
+type SwipeDirection = 'vertical' | 'horizontal';
+
+type ReplaceAnimation = 'pop' | 'push';
+
+export interface NativeProps extends ViewProps {
+  onAppear?: DirectEventHandler<ScreenEvent>;
+  onDisappear?: DirectEventHandler<ScreenEvent>;
+  onDismissed?: DirectEventHandler<ScreenDismissedEvent>;
+  onNativeDismissCancelled?: DirectEventHandler<ScreenDismissedEvent>;
+  onWillAppear?: DirectEventHandler<ScreenEvent>;
+  onWillDisappear?: DirectEventHandler<ScreenEvent>;
+  onHeaderHeightChange?: DirectEventHandler<HeaderHeightChangeEvent>;
+  onTransitionProgress?: DirectEventHandler<TransitionProgressEvent>;
+  onGestureCancel?: DirectEventHandler<ScreenEvent>;
+  onHeaderBackButtonClicked?: DirectEventHandler<ScreenEvent>;
+  onSheetDetentChanged?: DirectEventHandler<SheetDetentChangedEvent>;
+  sheetAllowedDetents?: number[];
+  sheetLargestUndimmedDetent?: WithDefault<Int32, -1>;
+  sheetGrabberVisible?: WithDefault<boolean, false>;
+  sheetCornerRadius?: WithDefault<Float, -1.0>;
+  sheetExpandsWhenScrolledToEdge?: WithDefault<boolean, false>;
+  sheetInitialDetent?: WithDefault<Int32, 0>;
+  sheetElevation?: WithDefault<Int32, 24>;
+  customAnimationOnSwipe?: boolean;
+  fullScreenSwipeEnabled?: boolean;
+  fullScreenSwipeShadowEnabled?: WithDefault<boolean, true>;
+  homeIndicatorHidden?: boolean;
+  preventNativeDismiss?: boolean;
+  gestureEnabled?: WithDefault<boolean, true>;
+  statusBarColor?: ColorValue;
+  statusBarHidden?: boolean;
+  screenOrientation?: string;
+  statusBarAnimation?: string;
+  statusBarStyle?: string;
+  statusBarTranslucent?: boolean;
+  gestureResponseDistance?: GestureResponseDistanceType;
+  stackPresentation?: WithDefault<StackPresentation, 'push'>;
+  stackAnimation?: WithDefault<StackAnimation, 'default'>;
+  transitionDuration?: WithDefault<Int32, 500>;
+  replaceAnimation?: WithDefault<ReplaceAnimation, 'pop'>;
+  swipeDirection?: WithDefault<SwipeDirection, 'horizontal'>;
+  hideKeyboardOnSwipe?: boolean;
+  activityState?: WithDefault<Float, -1.0>;
+  navigationBarColor?: ColorValue;
+  navigationBarTranslucent?: boolean;
+  navigationBarHidden?: boolean;
+  nativeBackButtonDismissalEnabled?: boolean;
+}
+
+export default codegenNativeComponent<NativeProps>('RNSModalScreen', {
+  interfaceOnly: true,
+});