refactor: create override for events

Author: maciekstosio

src/components/Screen.tsx

@@ -18,9 +18,36 @@ import NativeScreen from '../fabric/ScreenNativeComponent';
 import ModalScreenNative from '../fabric/ModalScreenNativeComponent';
 import { usePrevious } from './helpers/usePrevious';
 
-const AnimatedNativeScreen = Animated.createAnimatedComponent(NativeScreen);
-const AnimatedNativeModalScreen =
-  Animated.createAnimatedComponent(ModalScreenNative);
+/**
+ * This messy override is to conform NativeProps used by codegen and
+ * out Public API. To see reasoning go to this PR:
+ * https://github.com/software-mansion/react-native-screens/pull/2423#discussion_r1810616995
+ */
+type SharedOverride = {
+  onAppear?: ScreenProps['onAppear'];
+  onDisappear?: ScreenProps['onDisappear'];
+  onWillAppear?: ScreenProps['onWillAppear'];
+  onWillDisappear?: ScreenProps['onWillDisappear'];
+};
+
+type NativeScreenOverrideProps = Omit<
+  React.ComponentPropsWithRef<typeof NativeScreen>,
+  'onAppear' | 'onDisappear' | 'onWillAppear' | 'onWillDisappear'
+> &
+  SharedOverride;
+
+type NativeModalScreenOverrideProps = Omit<
+  React.ComponentPropsWithRef<typeof ModalScreenNative>,
+  'onAppear' | 'onDisappear' | 'onWillAppear' | 'onWillDisappear'
+> &
+  SharedOverride;
+
+const AnimatedNativeScreen = Animated.createAnimatedComponent(
+  NativeScreen as React.ComponentType<NativeScreenOverrideProps>,
+);
+const AnimatedNativeModalScreen = Animated.createAnimatedComponent(
+  ModalScreenNative as React.ComponentType<NativeModalScreenOverrideProps>,
+);
 
 // Incomplete type, all accessible properties available at:
 // react-native/Libraries/Components/View/ReactNativeViewViewConfig.js

src/fabric/ModalScreenNativeComponent.ts

@@ -13,10 +13,6 @@ import type {
 // eslint-disable-next-line @typescript-eslint/ban-types
 type ScreenEvent = Readonly<{}>;
 
-type ScreenTargetEvent = Readonly<{
-  target: Int32;
-}>;
-
 type ScreenDismissedEvent = Readonly<{
   dismissCount: Int32;
 }>;
@@ -70,12 +66,12 @@ type SwipeDirection = 'vertical' | 'horizontal';
 type ReplaceAnimation = 'pop' | 'push';
 
 export interface NativeProps extends ViewProps {
-  onAppear?: DirectEventHandler<ScreenTargetEvent>;
-  onDisappear?: DirectEventHandler<ScreenTargetEvent>;
+  onAppear?: DirectEventHandler<ScreenEvent>;
+  onDisappear?: DirectEventHandler<ScreenEvent>;
   onDismissed?: DirectEventHandler<ScreenDismissedEvent>;
   onNativeDismissCancelled?: DirectEventHandler<ScreenDismissedEvent>;
-  onWillAppear?: DirectEventHandler<ScreenTargetEvent>;
-  onWillDisappear?: DirectEventHandler<ScreenTargetEvent>;
+  onWillAppear?: DirectEventHandler<ScreenEvent>;
+  onWillDisappear?: DirectEventHandler<ScreenEvent>;
   onHeaderHeightChange?: DirectEventHandler<HeaderHeightChangeEvent>;
   onTransitionProgress?: DirectEventHandler<TransitionProgressEvent>;
   onGestureCancel?: DirectEventHandler<ScreenEvent>;

src/fabric/ScreenNativeComponent.ts

@@ -13,10 +13,6 @@ import type {
 // eslint-disable-next-line @typescript-eslint/ban-types
 type ScreenEvent = Readonly<{}>;
 
-type ScreenTargetEvent = Readonly<{
-  target: Int32;
-}>;
-
 type ScreenDismissedEvent = Readonly<{
   dismissCount: Int32;
 }>;
@@ -70,12 +66,12 @@ type SwipeDirection = 'vertical' | 'horizontal';
 type ReplaceAnimation = 'pop' | 'push';
 
 export interface NativeProps extends ViewProps {
-  onAppear?: DirectEventHandler<ScreenTargetEvent>;
-  onDisappear?: DirectEventHandler<ScreenTargetEvent>;
+  onAppear?: DirectEventHandler<ScreenEvent>;
+  onDisappear?: DirectEventHandler<ScreenEvent>;
   onDismissed?: DirectEventHandler<ScreenDismissedEvent>;
   onNativeDismissCancelled?: DirectEventHandler<ScreenDismissedEvent>;
-  onWillAppear?: DirectEventHandler<ScreenTargetEvent>;
-  onWillDisappear?: DirectEventHandler<ScreenTargetEvent>;
+  onWillAppear?: DirectEventHandler<ScreenEvent>;
+  onWillDisappear?: DirectEventHandler<ScreenEvent>;
   onHeaderHeightChange?: DirectEventHandler<HeaderHeightChangeEvent>;
   onTransitionProgress?: DirectEventHandler<TransitionProgressEvent>;
   onGestureCancel?: DirectEventHandler<ScreenEvent>;