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

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,
+});

package/src/fabric/NativeScreensModule.ts

@@ -0,0 +1,8 @@
+'use client';
+
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {}
+
+export default TurboModuleRegistry.get<Spec>('RNSModule');

package/src/fabric/NativeScreensModule.web.ts

@@ -0,0 +1 @@
+export default {};

package/src/fabric/ScreenContainerNativeComponent.ts

@@ -1,5 +1,6 @@
+'use client';
 /*
- * Portions of this file are copyright (c) 2023 Amazon.com, Inc. or its affiliates.  All rights reserved.
+ * 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.
  *
@@ -11,8 +12,7 @@
  * Set up react-native-screens package to build for Kepler
  */
 
-// @ts-ignore
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
 import type { ViewProps, HostComponent } from 'react-native';
 
 // amznmod_react - register component on Kepler

package/src/fabric/ScreenContentWrapperNativeComponent.ts

@@ -0,0 +1,14 @@
+import type { HostComponent, ViewProps } from 'react-native';
+
+// amznmod_react - register component on Kepler
+// @ts-ignore
+import register from '@amazon-devices/react-native-kepler/Libraries/Utilities/registerGeneratedViewConfig';
+
+export interface NativeProps extends ViewProps {}
+
+
+// amznmod_react - register component on Kepler
+const ScreenContentWrapperComponent = 'RNSScreenContentWrapper';
+
+register(ScreenContentWrapperComponent, {uiViewClassName: ScreenContentWrapperComponent});
+export default (ScreenContentWrapperComponent as unknown) as HostComponent<NativeProps>;

package/src/fabric/ScreenFooterNativeComponent.ts

@@ -0,0 +1,6 @@
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { ViewProps } from 'react-native';
+
+export interface NativeProps extends ViewProps {}
+
+export default codegenNativeComponent<NativeProps>('RNSScreenFooter', {});

package/src/fabric/ScreenNativeComponent.ts

@@ -1,5 +1,6 @@
+'use client';
 /*
- * Portions of this file are copyright (c) 2023 Amazon.com, Inc. or its affiliates.  All rights reserved.
+ * 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.
  *
@@ -13,7 +14,7 @@
 
 import type { ViewProps, ColorValue, HostComponent } from 'react-native';
 import type {
-  BubblingEventHandler,
+  DirectEventHandler,
   WithDefault,
   Int32,
   Float,
@@ -41,6 +42,11 @@ type HeaderHeightChangeEvent = Readonly<{
   headerHeight: Double;
 }>;
 
+type SheetDetentChangedEvent = Readonly<{
+  index: Int32;
+  isStable: boolean;
+}>;
+
 type GestureResponseDistanceType = Readonly<{
   start: Float;
   end: Float;
@@ -66,31 +72,36 @@ type StackAnimation =
   | 'slide_from_right'
   | 'slide_from_left'
   | 'slide_from_bottom'
-  | 'fade_from_bottom';
+  | 'fade_from_bottom'
+  | 'ios_from_right'
+  | 'ios_from_left';
 
 type SwipeDirection = 'vertical' | 'horizontal';
 
 type ReplaceAnimation = 'pop' | 'push';
 
-type SheetDetentTypes = 'large' | 'medium' | 'all';
-
 export interface NativeProps extends ViewProps {
-  onAppear?: BubblingEventHandler<ScreenEvent>;
-  onDisappear?: BubblingEventHandler<ScreenEvent>;
-  onDismissed?: BubblingEventHandler<ScreenDismissedEvent>;
-  onNativeDismissCancelled?: BubblingEventHandler<ScreenDismissedEvent>;
-  onWillAppear?: BubblingEventHandler<ScreenEvent>;
-  onWillDisappear?: BubblingEventHandler<ScreenEvent>;
-  onHeaderHeightChange?: BubblingEventHandler<HeaderHeightChangeEvent>;
-  onTransitionProgress?: BubblingEventHandler<TransitionProgressEvent>;
-  onGestureCancel?: BubblingEventHandler<ScreenEvent>;
-  sheetAllowedDetents?: WithDefault<SheetDetentTypes, 'large'>;
-  sheetLargestUndimmedDetent?: WithDefault<SheetDetentTypes, 'all'>;
+  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>;
@@ -103,15 +114,15 @@ export interface NativeProps extends ViewProps {
   gestureResponseDistance?: GestureResponseDistanceType;
   stackPresentation?: WithDefault<StackPresentation, 'push'>;
   stackAnimation?: WithDefault<StackAnimation, 'default'>;
-  transitionDuration?: WithDefault<Int32, 350>;
+  transitionDuration?: WithDefault<Int32, 500>;
   replaceAnimation?: WithDefault<ReplaceAnimation, 'pop'>;
   swipeDirection?: WithDefault<SwipeDirection, 'horizontal'>;
   hideKeyboardOnSwipe?: boolean;
   activityState?: 0 | 1 | 2;
   navigationBarColor?: ColorValue;
+  navigationBarTranslucent?: boolean;
   navigationBarHidden?: boolean;
   nativeBackButtonDismissalEnabled?: boolean;
-  onHeaderBackButtonClicked?: BubblingEventHandler<ScreenEvent>;
 }
 
 // amznmod_react - register component on Kepler
@@ -119,34 +130,36 @@ const ScreenComponent = 'RNSScreen'
 
 const viewConfig = {
   activityState: true,
+  stackPresentation: true,
+  stackAnimation: true,
 };
 
 const bubblingEventTypes = {
-  topOnAppear: {
+  topAppear: {
     phasedRegistrationNames: {
       bubbled: 'onAppear',
       captured: 'onAppearCapture'
     }
   },
-  topOnDisappear: {
+  topDisappear: {
     phasedRegistrationNames: {
       bubbled: 'onDisappear',
       captured: 'onDisappearCapture'
     }
   },
-  topOnWillAppear: {
+  topWillAppear: {
     phasedRegistrationNames: {
       bubbled: 'onWillAppear',
       captured: 'onWillAppearCapture'
     }
   },
-  topOnWillDisappear: {
+  topWillDisappear: {
     phasedRegistrationNames: {
       bubbled: 'onWillDisappear',
       captured: 'onWillDisappearCapture'
     }
   },
-  topOnTransitionProgress: {
+  topTransitionProgress: {
     phasedRegistrationNames: {
       bubbled: 'onTransitionProgress',
       captured: 'onTransitionProgressCapture'

package/src/fabric/ScreenNavigationContainerNativeComponent.ts

@@ -1,3 +1,5 @@
+'use client';
+
 // @ts-ignore
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type { ViewProps } from 'react-native';
@@ -6,5 +8,5 @@ interface NativeProps extends ViewProps {}
 
 export default codegenNativeComponent<NativeProps>(
   'RNSScreenNavigationContainer',
-  {}
+  {},
 );

package/src/fabric/ScreenStackHeaderConfigNativeComponent.ts

@@ -1,5 +1,6 @@
+'use client';
 /*
- * Portions of this file are copyright (c) 2023 Amazon.com, Inc. or its affiliates.  All rights reserved.
+ * 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.
  *
@@ -15,6 +16,7 @@ import type { ViewProps, ColorValue, HostComponent } from 'react-native';
 import type {
   Int32,
   WithDefault,
+  DirectEventHandler,
 // @ts-ignore
 } from 'react-native/Libraries/Types/CodegenTypes';
 
@@ -24,7 +26,39 @@ import register from '@amazon-devices/react-native-kepler/Libraries/Utilities/re
 
 type DirectionType = 'rtl' | 'ltr';
 
+// eslint-disable-next-line @typescript-eslint/ban-types
+type OnAttachedEvent = Readonly<{}>;
+// eslint-disable-next-line @typescript-eslint/ban-types
+type OnDetachedEvent = Readonly<{}>;
+
+type BackButtonDisplayMode = 'minimal' | 'default' | 'generic';
+
+type BlurEffect =
+  | 'none'
+  | 'extraLight'
+  | 'light'
+  | 'dark'
+  | 'regular'
+  | 'prominent'
+  | 'systemUltraThinMaterial'
+  | 'systemThinMaterial'
+  | 'systemMaterial'
+  | 'systemThickMaterial'
+  | 'systemChromeMaterial'
+  | 'systemUltraThinMaterialLight'
+  | 'systemThinMaterialLight'
+  | 'systemMaterialLight'
+  | 'systemThickMaterialLight'
+  | 'systemChromeMaterialLight'
+  | 'systemUltraThinMaterialDark'
+  | 'systemThinMaterialDark'
+  | 'systemMaterialDark'
+  | 'systemThickMaterialDark'
+  | 'systemChromeMaterialDark';
+
 export interface NativeProps extends ViewProps {
+  onAttached?: DirectEventHandler<OnAttachedEvent>;
+  onDetached?: DirectEventHandler<OnDetachedEvent>;
   backgroundColor?: ColorValue;
   backTitle?: string;
   backTitleFontFamily?: string;
@@ -48,8 +82,10 @@ export interface NativeProps extends ViewProps {
   titleFontWeight?: string;
   titleColor?: ColorValue;
   disableBackButtonMenu?: boolean;
+  backButtonDisplayMode?: WithDefault<BackButtonDisplayMode, 'default'>;
   hideBackButton?: boolean;
   backButtonInCustomView?: boolean;
+  blurEffect?: WithDefault<BlurEffect, 'none'>;
   // TODO: implement this props on iOS
   topInsetEnabled?: boolean;
 }
@@ -58,4 +94,4 @@ export interface NativeProps extends ViewProps {
 const ScreenStackHeaderConfigComponent = 'RNSScreenStackHeaderConfig'
 
 register(ScreenStackHeaderConfigComponent, {uiViewClassName: ScreenStackHeaderConfigComponent});
-export default (ScreenStackHeaderConfigComponent as unknown) as HostComponent<NativeProps>;
+export default (ScreenStackHeaderConfigComponent as unknown) as HostComponent<NativeProps>;

package/src/fabric/ScreenStackHeaderSubviewNativeComponent.ts

@@ -1,3 +1,5 @@
+'use client';
+
 // @ts-ignore
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type { ViewProps } from 'react-native';
@@ -18,5 +20,7 @@ export interface NativeProps extends ViewProps {
 
 export default codegenNativeComponent<NativeProps>(
   'RNSScreenStackHeaderSubview',
-  {}
+  {
+    interfaceOnly: true,
+  },
 );

package/src/fabric/ScreenStackNativeComponent.ts

@@ -1,5 +1,6 @@
+'use client';
 /*
- * Portions of this file are copyright (c) 2023 Amazon.com, Inc. or its affiliates.  All rights reserved.
+ * 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.
  *
@@ -22,7 +23,7 @@ import register from '@amazon-devices/react-native-kepler/Libraries/Utilities/re
 // eslint-disable-next-line @typescript-eslint/ban-types
 type FinishTransitioningEvent = Readonly<{}>;
 
-interface NativeProps extends ViewProps {
+export interface NativeProps extends ViewProps {
   onFinishTransitioning?: DirectEventHandler<FinishTransitioningEvent>;
 }
 

package/src/fabric/SearchBarNativeComponent.ts

@@ -1,22 +1,24 @@
+'use client';
+
 /* eslint-disable */
 // @ts-ignore
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type { ViewProps, ColorValue, HostComponent } from 'react-native';
 import type {
   WithDefault,
-  BubblingEventHandler,
+  DirectEventHandler,
 // @ts-ignore
 } from 'react-native/Libraries/Types/CodegenTypes';
 // @ts-ignore
 import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
 
-type SearchBarEvent = Readonly<{}>;
+export type SearchBarEvent = Readonly<{}>;
 
-type SearchButtonPressedEvent = Readonly<{
+export type SearchButtonPressedEvent = Readonly<{
   text?: string;
 }>;
 
-type ChangeTextEvent = Readonly<{
+export type ChangeTextEvent = Readonly<{
   text?: string;
 }>;
 
@@ -24,12 +26,12 @@ type SearchBarPlacement = 'automatic' | 'inline' | 'stacked';
 
 type AutoCapitalizeType = 'none' | 'words' | 'sentences' | 'characters';
 
-interface NativeProps extends ViewProps {
-  onFocus?: BubblingEventHandler<SearchBarEvent> | null;
-  onBlur?: BubblingEventHandler<SearchBarEvent> | null;
-  onSearchButtonPress?: BubblingEventHandler<SearchButtonPressedEvent> | null;
-  onCancelButtonPress?: BubblingEventHandler<SearchBarEvent> | null;
-  onChangeText?: BubblingEventHandler<ChangeTextEvent> | null;
+export interface NativeProps extends ViewProps {
+  onSearchFocus?: DirectEventHandler<SearchBarEvent> | null;
+  onSearchBlur?: DirectEventHandler<SearchBarEvent> | null;
+  onSearchButtonPress?: DirectEventHandler<SearchButtonPressedEvent> | null;
+  onCancelButtonPress?: DirectEventHandler<SearchBarEvent> | null;
+  onChangeText?: DirectEventHandler<ChangeTextEvent> | null;
   hideWhenScrolling?: boolean;
   autoCapitalize?: WithDefault<AutoCapitalizeType, 'none'>;
   placeholder?: string;
@@ -46,8 +48,8 @@ interface NativeProps extends ViewProps {
   disableBackButtonOverride?: boolean;
   // TODO: consider creating enum here
   inputType?: string;
-  onClose?: BubblingEventHandler<SearchBarEvent> | null;
-  onOpen?: BubblingEventHandler<SearchBarEvent> | null;
+  onClose?: DirectEventHandler<SearchBarEvent> | null;
+  onOpen?: DirectEventHandler<SearchBarEvent> | null;
   hintTextColor?: ColorValue;
   headerIconColor?: ColorValue;
   shouldShowHintSearchIcon?: WithDefault<boolean, true>;
@@ -61,9 +63,10 @@ interface NativeCommands {
   clearText: (viewRef: React.ElementRef<ComponentType>) => void;
   toggleCancelButton: (
     viewRef: React.ElementRef<ComponentType>,
-    flag: boolean
+    flag: boolean,
   ) => void;
   setText: (viewRef: React.ElementRef<ComponentType>, text: string) => void;
+  cancelSearch: (viewRef: React.ElementRef<ComponentType>) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
@@ -73,6 +76,7 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
     'clearText',
     'toggleCancelButton',
     'setText',
+    'cancelSearch',
   ],
 });
 

package/src/gesture-handler/GestureDetectorProvider.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { GestureProviderProps } from '../types';
+import { GHContext } from '../contexts';
+import ScreenGestureDetector from './ScreenGestureDetector';
+
+function GHWrapper(props: GestureProviderProps) {
+  return <ScreenGestureDetector {...props} />;
+}
+
+export default function GestureDetectorProvider(props: {
+  children: React.ReactNode;
+}) {
+  return (
+    <GHContext.Provider value={GHWrapper}>{props.children}</GHContext.Provider>
+  );
+}

package/src/gesture-handler/RNScreensTurboModule.ts

@@ -0,0 +1,13 @@
+type RNScreensTurboModuleType = {
+  startTransition: (stackTag: number) => {
+    topScreenTag: number;
+    belowTopScreenTag: number;
+    canStartTransition: boolean;
+  };
+  updateTransition: (stackTag: number, progress: number) => void;
+  finishTransition: (stackTag: number, isCanceled: boolean) => void;
+  disableSwipeBackForTopScreen: (stackTag: number) => void;
+};
+
+export const RNScreensTurboModule: RNScreensTurboModuleType = (global as any)
+  .RNScreensTurboModule;