From 19866efc7d16376e68586d796414a0b2f97bac3d Mon Sep 17 00:00:00 2001
From: Maciej Stosio <maciekstosio@users.noreply.github.com>
Date: Tue, 22 Oct 2024 17:07:53 +0200
Subject: [PATCH] refactor: separate Screen native props and public API (#2423)

## Description

Separating native types and public API for Screen component. The core
idea behind this change is that I removed hardcoded as ScreenProps and
try to conform public API to NativeProps accepted by Codegen, with some
transformations if necessary.

## Changes

The biggest change is not casting Native to Component with ScreenProps.

## Screenshots / GIFs

N/A

## Checklist

- [ ] Included code example that can be used to test this change
- [ ] Updated TS types
- [ ] Updated documentation: <!-- For adding new props to native-stack
-->
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx
- [ ]
https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx
- [ ] Ensured that CI passes
---
 src/components/Screen.tsx                | 52 +++++++++++++++---------
 src/fabric/ModalScreenNativeComponent.ts | 10 ++++-
 2 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/src/components/Screen.tsx b/src/components/Screen.tsx
index 964768e6a3..53e28bfb66 100644
--- a/src/components/Screen.tsx
+++ b/src/components/Screen.tsx
@@ -14,23 +14,20 @@ import {
 } from '../core';
 
 // Native components
-import ScreenNativeComponent from '../fabric/ScreenNativeComponent';
-import ModalScreenNativeComponent from '../fabric/ModalScreenNativeComponent';
+import ScreenNativeComponent, {
+  NativeProps as ScreenNativeComponentProps,
+} from '../fabric/ScreenNativeComponent';
+import ModalScreenNativeComponent, {
+  NativeProps as ModalScreenNativeComponentProps,
+} from '../fabric/ModalScreenNativeComponent';
 import { usePrevious } from './helpers/usePrevious';
 
-type NativeScreenProps = Omit<
-  ScreenProps,
-  'sheetInitialDetentIndex' | 'sheetLargestUndimmedDetentIndex'
-> & {
-  sheetInitialDetent: number;
-  sheetLargestUndimmedDetent: number;
-};
-
-const NativeScreen: React.ComponentType<NativeScreenProps> =
-  ScreenNativeComponent as React.ComponentType<NativeScreenProps>;
-const AnimatedNativeScreen = Animated.createAnimatedComponent(NativeScreen);
+type NativeProps = ScreenNativeComponentProps | ModalScreenNativeComponentProps;
+const AnimatedNativeScreen = Animated.createAnimatedComponent(
+  ScreenNativeComponent,
+);
 const AnimatedNativeModalScreen = Animated.createAnimatedComponent(
-  ModalScreenNativeComponent as React.ComponentType<NativeScreenProps>,
+  ModalScreenNativeComponent,
 );
 
 // Incomplete type, all accessible properties available at:
@@ -196,6 +193,11 @@ export const InnerScreen = React.forwardRef<View, ScreenProps>(
       sheetInitialDetentIndex = 0,
       // Other
       stackPresentation,
+      // Events for override
+      onAppear,
+      onDisappear,
+      onWillAppear,
+      onWillDisappear,
     } = rest;
 
     if (enabled && isNativePlatformSupported) {
@@ -273,6 +275,22 @@ export const InnerScreen = React.forwardRef<View, ScreenProps>(
         <DelayedFreeze freeze={freezeOnBlur && activityState === 0}>
           <AnimatedScreen
             {...props}
+            /**
+             * 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
+             */
+            onAppear={onAppear as NativeProps['onAppear']}
+            onDisappear={onDisappear as NativeProps['onDisappear']}
+            onWillAppear={onWillAppear as NativeProps['onWillAppear']}
+            onWillDisappear={onWillDisappear as NativeProps['onWillDisappear']}
+            onGestureCancel={
+              (onGestureCancel as NativeProps['onGestureCancel']) ??
+              (() => {
+                // for internal use
+              })
+            }
+            //
             // Hierarchy of screens is handled on the native side and setting zIndex value causes this issue:
             // https://github.com/software-mansion/react-native-screens/issues/2345
             // With below change of zIndex, we force RN diffing mechanism to NOT include detaching and attaching mutation in one transaction.
@@ -310,12 +328,6 @@ export const InnerScreen = React.forwardRef<View, ScreenProps>(
                     ],
                     { useNativeDriver: true },
                   )
-            }
-            onGestureCancel={
-              onGestureCancel ??
-              (() => {
-                // for internal use
-              })
             }>
             {!isNativeStack ? ( // see comment of this prop in types.tsx for information why it is needed
               children
diff --git a/src/fabric/ModalScreenNativeComponent.ts b/src/fabric/ModalScreenNativeComponent.ts
index 1a675c2c84..16cd62b5e4 100644
--- a/src/fabric/ModalScreenNativeComponent.ts
+++ b/src/fabric/ModalScreenNativeComponent.ts
@@ -27,6 +27,11 @@ type HeaderHeightChangeEvent = Readonly<{
   headerHeight: Double;
 }>;
 
+type SheetDetentChangedEvent = Readonly<{
+  index: Int32;
+  isStable: boolean;
+}>;
+
 type GestureResponseDistanceType = Readonly<{
   start: Float;
   end: Float;
@@ -53,7 +58,8 @@ type StackAnimation =
   | 'slide_from_left'
   | 'slide_from_bottom'
   | 'fade_from_bottom'
-  | 'ios';
+  | 'ios_from_right'
+  | 'ios_from_left';
 
 type SwipeDirection = 'vertical' | 'horizontal';
 
@@ -70,12 +76,14 @@ export interface NativeProps extends ViewProps {
   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?: boolean;