fix: add missing events (#2095)

## Description

<!--
Description and motivation for this PR.

Include Fixes #<number> if this is fixing some issue.

Fixes # .
-->

Add missing `ScreenStackHeaderConfig` events to fabric spec and remove
the manual registration of events.

Also changed `Bubbling` events to `Direct` which fixes extraneous
lifecycle events. It was to be done quite a while ago already:
#1308 (comment)

src/components/Screen.tsx

@@ -16,20 +16,6 @@ import {
 import ScreenNativeComponent from '../fabric/ScreenNativeComponent';
 import ModalScreenNativeComponent from '../fabric/ModalScreenNativeComponent';
 
-// @ts-ignore - its taken straight from RN
-// eslint-disable-next-line import/namespace
-import { customDirectEventTypes } from 'react-native/Libraries/Renderer/shims/ReactNativeViewConfigRegistry';
-
-customDirectEventTypes.topInsetsChange = {
-  registrationName: 'topInsetsChange',
-};
-customDirectEventTypes.topAttached = {
-  registrationName: 'topAttached',
-};
-customDirectEventTypes.topDetached = {
-  registrationName: 'topDetached',
-};
-
 export const NativeScreen: React.ComponentType<ScreenProps> =
   ScreenNativeComponent as any;
 const AnimatedNativeScreen = Animated.createAnimatedComponent(NativeScreen);

src/fabric/ModalScreenNativeComponent.ts

@@ -1,7 +1,7 @@
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type { ViewProps, ColorValue } from 'react-native';
 import type {
-  BubblingEventHandler,
+  DirectEventHandler,
   WithDefault,
   Int32,
   Float,
@@ -60,16 +60,16 @@ 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>;
-  onHeaderBackButtonClicked?: BubblingEventHandler<ScreenEvent>;
+  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>;
   sheetAllowedDetents?: WithDefault<SheetDetentTypes, 'large'>;
   sheetLargestUndimmedDetent?: WithDefault<SheetDetentTypes, 'all'>;
   sheetGrabberVisible?: WithDefault<boolean, false>;

src/fabric/ScreenNativeComponent.ts

@@ -1,7 +1,7 @@
 import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
 import type { ViewProps, ColorValue } from 'react-native';
 import type {
-  BubblingEventHandler,
+  DirectEventHandler,
   WithDefault,
   Int32,
   Float,
@@ -60,16 +60,16 @@ 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>;
-  onHeaderBackButtonClicked?: BubblingEventHandler<ScreenEvent>;
+  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>;
   sheetAllowedDetents?: WithDefault<SheetDetentTypes, 'large'>;
   sheetLargestUndimmedDetent?: WithDefault<SheetDetentTypes, 'all'>;
   sheetGrabberVisible?: WithDefault<boolean, false>;

src/fabric/ScreenStackHeaderConfigNativeComponent.ts

@@ -3,11 +3,19 @@ import type { ViewProps, ColorValue } from 'react-native';
 import type {
   Int32,
   WithDefault,
+  DirectEventHandler,
 } from 'react-native/Libraries/Types/CodegenTypes';
 
 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<{}>;
+
 export interface NativeProps extends ViewProps {
+  onAttached?: DirectEventHandler<OnAttachedEvent>;
+  onDetached?: DirectEventHandler<OnDetachedEvent>;
   backgroundColor?: ColorValue;
   backTitle?: string;
   backTitleFontFamily?: string;

src/fabric/SearchBarNativeComponent.ts

@@ -3,7 +3,7 @@ import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNati
 import type { ViewProps, ColorValue, HostComponent } from 'react-native';
 import type {
   WithDefault,
-  BubblingEventHandler,
+  DirectEventHandler,
 } from 'react-native/Libraries/Types/CodegenTypes';
 import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
 
@@ -22,11 +22,11 @@ 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;
+  onFocus?: DirectEventHandler<SearchBarEvent> | null;
+  onBlur?: DirectEventHandler<SearchBarEvent> | null;
+  onSearchButtonPress?: DirectEventHandler<SearchButtonPressedEvent> | null;
+  onCancelButtonPress?: DirectEventHandler<SearchBarEvent> | null;
+  onChangeText?: DirectEventHandler<ChangeTextEvent> | null;
   hideWhenScrolling?: boolean;
   autoCapitalize?: WithDefault<AutoCapitalizeType, 'none'>;
   placeholder?: string;
@@ -43,8 +43,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>;