From 4aca1ae27d6149c78309a855402ea05d5c4c972f Mon Sep 17 00:00:00 2001 From: Wojciech Lewicki Date: Thu, 4 Apr 2024 19:17:55 +0200 Subject: [PATCH] fix: add missing events (#2095) ## Description 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: https://github.com/software-mansion/react-native-screens/pull/1308#discussion_r805773152 --- src/components/Screen.tsx | 14 ------------ src/fabric/ModalScreenNativeComponent.ts | 22 +++++++++---------- src/fabric/ScreenNativeComponent.ts | 22 +++++++++---------- .../ScreenStackHeaderConfigNativeComponent.ts | 8 +++++++ src/fabric/SearchBarNativeComponent.ts | 16 +++++++------- 5 files changed, 38 insertions(+), 44 deletions(-) diff --git a/src/components/Screen.tsx b/src/components/Screen.tsx index e55b398995..3f9a1cbd34 100644 --- a/src/components/Screen.tsx +++ b/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 = ScreenNativeComponent as any; const AnimatedNativeScreen = Animated.createAnimatedComponent(NativeScreen); diff --git a/src/fabric/ModalScreenNativeComponent.ts b/src/fabric/ModalScreenNativeComponent.ts index 28a7bdccda..2ace0d3156 100644 --- a/src/fabric/ModalScreenNativeComponent.ts +++ b/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; - onDisappear?: BubblingEventHandler; - onDismissed?: BubblingEventHandler; - onNativeDismissCancelled?: BubblingEventHandler; - onWillAppear?: BubblingEventHandler; - onWillDisappear?: BubblingEventHandler; - onHeaderHeightChange?: BubblingEventHandler; - onTransitionProgress?: BubblingEventHandler; - onGestureCancel?: BubblingEventHandler; - onHeaderBackButtonClicked?: BubblingEventHandler; + onAppear?: DirectEventHandler; + onDisappear?: DirectEventHandler; + onDismissed?: DirectEventHandler; + onNativeDismissCancelled?: DirectEventHandler; + onWillAppear?: DirectEventHandler; + onWillDisappear?: DirectEventHandler; + onHeaderHeightChange?: DirectEventHandler; + onTransitionProgress?: DirectEventHandler; + onGestureCancel?: DirectEventHandler; + onHeaderBackButtonClicked?: DirectEventHandler; sheetAllowedDetents?: WithDefault; sheetLargestUndimmedDetent?: WithDefault; sheetGrabberVisible?: WithDefault; diff --git a/src/fabric/ScreenNativeComponent.ts b/src/fabric/ScreenNativeComponent.ts index b6f0b71e3e..83d60be7d4 100644 --- a/src/fabric/ScreenNativeComponent.ts +++ b/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; - onDisappear?: BubblingEventHandler; - onDismissed?: BubblingEventHandler; - onNativeDismissCancelled?: BubblingEventHandler; - onWillAppear?: BubblingEventHandler; - onWillDisappear?: BubblingEventHandler; - onHeaderHeightChange?: BubblingEventHandler; - onTransitionProgress?: BubblingEventHandler; - onGestureCancel?: BubblingEventHandler; - onHeaderBackButtonClicked?: BubblingEventHandler; + onAppear?: DirectEventHandler; + onDisappear?: DirectEventHandler; + onDismissed?: DirectEventHandler; + onNativeDismissCancelled?: DirectEventHandler; + onWillAppear?: DirectEventHandler; + onWillDisappear?: DirectEventHandler; + onHeaderHeightChange?: DirectEventHandler; + onTransitionProgress?: DirectEventHandler; + onGestureCancel?: DirectEventHandler; + onHeaderBackButtonClicked?: DirectEventHandler; sheetAllowedDetents?: WithDefault; sheetLargestUndimmedDetent?: WithDefault; sheetGrabberVisible?: WithDefault; diff --git a/src/fabric/ScreenStackHeaderConfigNativeComponent.ts b/src/fabric/ScreenStackHeaderConfigNativeComponent.ts index e795485c12..9cbc3dad9e 100644 --- a/src/fabric/ScreenStackHeaderConfigNativeComponent.ts +++ b/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; + onDetached?: DirectEventHandler; backgroundColor?: ColorValue; backTitle?: string; backTitleFontFamily?: string; diff --git a/src/fabric/SearchBarNativeComponent.ts b/src/fabric/SearchBarNativeComponent.ts index 15d33f5e54..60ad56421a 100644 --- a/src/fabric/SearchBarNativeComponent.ts +++ b/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 | null; - onBlur?: BubblingEventHandler | null; - onSearchButtonPress?: BubblingEventHandler | null; - onCancelButtonPress?: BubblingEventHandler | null; - onChangeText?: BubblingEventHandler | null; + onFocus?: DirectEventHandler | null; + onBlur?: DirectEventHandler | null; + onSearchButtonPress?: DirectEventHandler | null; + onCancelButtonPress?: DirectEventHandler | null; + onChangeText?: DirectEventHandler | null; hideWhenScrolling?: boolean; autoCapitalize?: WithDefault; placeholder?: string; @@ -43,8 +43,8 @@ interface NativeProps extends ViewProps { disableBackButtonOverride?: boolean; // TODO: consider creating enum here inputType?: string; - onClose?: BubblingEventHandler | null; - onOpen?: BubblingEventHandler | null; + onClose?: DirectEventHandler | null; + onOpen?: DirectEventHandler | null; hintTextColor?: ColorValue; headerIconColor?: ColorValue; shouldShowHintSearchIcon?: WithDefault;