chore(types): enable exactOptionalPropertyTypes

YevheniiKotyrlo · YevheniiKotyrlo · commit cbab010c7dd7 · 2026-03-14T23:44:50.000+02:00
diff --git a/src/components/safe-area/SafeAreaView.types.ts b/src/components/safe-area/SafeAreaView.types.ts
@@ -8,7 +8,7 @@ export type Edge = 'top' | 'right' | 'bottom' | 'left';
 export type InsetType = 'all' | 'system' | 'interface';
 
 export interface SafeAreaViewProps extends ViewProps {
-  edges?: Readonly<Partial<Record<Edge, boolean>>>;
+  edges?: Readonly<Partial<Record<Edge, boolean>>> | undefined;
   // Android-only
-  insetType?: InsetType;
+  insetType?: InsetType | undefined;
 }
diff --git a/src/components/tabs/host/useTabsHost.ts b/src/components/tabs/host/useTabsHost.ts
@@ -12,10 +12,10 @@ type TabsHostPlatformNativeComponentProps =
 
 interface TabsHostConfig<T> {
   componentNodeRef: React.RefObject<React.Component<T> | null>;
-  controlNavigationStateInJS?: boolean;
-  onNativeFocusChange?: (
-    event: NativeSyntheticEvent<NativeFocusChangeEvent>,
-  ) => void;
+  controlNavigationStateInJS?: boolean | undefined;
+  onNativeFocusChange?:
+    | ((event: NativeSyntheticEvent<NativeFocusChangeEvent>) => void)
+    | undefined;
 }
 
 export function useTabsHost<T extends TabsHostPlatformNativeComponentProps>({
diff --git a/src/components/tabs/screen/TabsScreen.android.tsx b/src/components/tabs/screen/TabsScreen.android.tsx
@@ -137,10 +137,10 @@ function parseIconsToNativeProps(
   icon: PlatformIconAndroid | undefined,
   selectedIcon: PlatformIconAndroid | undefined,
 ): {
-  imageIconResource?: ImageResolvedAssetSource;
-  drawableIconResourceName?: string;
-  selectedImageIconResource?: ImageResolvedAssetSource;
-  selectedDrawableIconResourceName?: string;
+  imageIconResource?: ImageResolvedAssetSource | undefined;
+  drawableIconResourceName?: string | undefined;
+  selectedImageIconResource?: ImageResolvedAssetSource | undefined;
+  selectedDrawableIconResourceName?: string | undefined;
 } {
   const parsedIcon = parseIconToNativeProps(icon);
   const parsedSelectedIcon = parseIconToNativeProps(selectedIcon);
@@ -155,8 +155,8 @@ function parseIconsToNativeProps(
 }
 
 function parseIconToNativeProps(icon: PlatformIconAndroid | undefined): {
-  imageIconResource?: ImageResolvedAssetSource;
-  drawableIconResourceName?: string;
+  imageIconResource?: ImageResolvedAssetSource | undefined;
+  drawableIconResourceName?: string | undefined;
 } {
   if (!icon) {
     return {};
diff --git a/src/components/tabs/screen/TabsScreen.ios.tsx b/src/components/tabs/screen/TabsScreen.ios.tsx
@@ -159,13 +159,13 @@ function parseIconsToNativeProps(
   icon: PlatformIconIOS | undefined,
   selectedIcon: PlatformIconIOS | undefined,
 ): {
-  imageIconResource?: ImageResolvedAssetSource;
-  drawableIconResourceName?: string;
-  iconType?: IconType;
-  iconImageSource?: ImageSourcePropType;
-  iconResourceName?: string;
-  selectedIconImageSource?: ImageSourcePropType;
-  selectedIconResourceName?: string;
+  imageIconResource?: ImageResolvedAssetSource | undefined;
+  drawableIconResourceName?: string | undefined;
+  iconType?: IconType | undefined;
+  iconImageSource?: ImageSourcePropType | undefined;
+  iconResourceName?: string | undefined;
+  selectedIconImageSource?: ImageSourcePropType | undefined;
+  selectedIconResourceName?: string | undefined;
 } {
   const parsedIcon = parseIconToNativeProps(icon);
   const parsedSelectedIcon = parseIconToNativeProps(selectedIcon);
@@ -195,9 +195,9 @@ function parseIconsToNativeProps(
 }
 
 function parseIconToNativeProps(icon: PlatformIconIOS | undefined): {
-  iconType?: IconType;
-  iconImageSource?: ImageSourcePropType;
-  iconResourceName?: string;
+  iconType?: IconType | undefined;
+  iconImageSource?: ImageSourcePropType | undefined;
+  iconResourceName?: string | undefined;
 } {
   if (!icon) {
     return {};
diff --git a/src/components/tabs/screen/useTabsScreen.ts b/src/components/tabs/screen/useTabsScreen.ts
@@ -11,11 +11,11 @@ type TabsScreenPlatformNativeComponentProps =
 
 interface TabsScreenConfig<T> {
   componentNodeRef: React.RefObject<React.Component<T> | null>;
-  onDidAppear?: TabsScreenEventHandler<EmptyObject>;
-  onDidDisappear?: TabsScreenEventHandler<EmptyObject>;
-  onWillAppear?: TabsScreenEventHandler<EmptyObject>;
-  onWillDisappear?: TabsScreenEventHandler<EmptyObject>;
-  isFocused?: boolean;
+  onDidAppear?: TabsScreenEventHandler<EmptyObject> | undefined;
+  onDidDisappear?: TabsScreenEventHandler<EmptyObject> | undefined;
+  onWillAppear?: TabsScreenEventHandler<EmptyObject> | undefined;
+  onWillDisappear?: TabsScreenEventHandler<EmptyObject> | undefined;
+  isFocused?: boolean | undefined;
   screenKey: string;
 }
 
diff --git a/src/fabric/ModalScreenNativeComponent.ts b/src/fabric/ModalScreenNativeComponent.ts
@@ -62,19 +62,27 @@ type ReplaceAnimation = 'pop' | 'push';
 type OptionalBoolean = 'undefined' | 'false' | 'true';
 
 export interface NativeProps extends ViewProps {
-  onAppear?: CT.DirectEventHandler<ScreenEvent>;
-  onDisappear?: CT.DirectEventHandler<ScreenEvent>;
-  onDismissed?: CT.DirectEventHandler<ScreenDismissedEvent>;
-  onNativeDismissCancelled?: CT.DirectEventHandler<ScreenDismissedEvent>;
-  onWillAppear?: CT.DirectEventHandler<ScreenEvent>;
-  onWillDisappear?: CT.DirectEventHandler<ScreenEvent>;
-  onHeaderHeightChange?: CT.DirectEventHandler<HeaderHeightChangeEvent>;
-  onTransitionProgress?: CT.DirectEventHandler<TransitionProgressEvent>;
-  onGestureCancel?: CT.DirectEventHandler<ScreenEvent>;
-  onHeaderBackButtonClicked?: CT.DirectEventHandler<ScreenEvent>;
-  onSheetDetentChanged?: CT.DirectEventHandler<SheetDetentChangedEvent>;
+  onAppear?: CT.DirectEventHandler<ScreenEvent> | undefined;
+  onDisappear?: CT.DirectEventHandler<ScreenEvent> | undefined;
+  onDismissed?: CT.DirectEventHandler<ScreenDismissedEvent> | undefined;
+  onNativeDismissCancelled?:
+    | CT.DirectEventHandler<ScreenDismissedEvent>
+    | undefined;
+  onWillAppear?: CT.DirectEventHandler<ScreenEvent> | undefined;
+  onWillDisappear?: CT.DirectEventHandler<ScreenEvent> | undefined;
+  onHeaderHeightChange?:
+    | CT.DirectEventHandler<HeaderHeightChangeEvent>
+    | undefined;
+  onTransitionProgress?:
+    | CT.DirectEventHandler<TransitionProgressEvent>
+    | undefined;
+  onGestureCancel?: CT.DirectEventHandler<ScreenEvent> | undefined;
+  onHeaderBackButtonClicked?: CT.DirectEventHandler<ScreenEvent> | undefined;
+  onSheetDetentChanged?:
+    | CT.DirectEventHandler<SheetDetentChangedEvent>
+    | undefined;
   screenId?: CT.WithDefault<string, ''>;
-  sheetAllowedDetents?: number[];
+  sheetAllowedDetents?: number[] | undefined;
   sheetLargestUndimmedDetent?: CT.WithDefault<CT.Int32, -1>;
   sheetGrabberVisible?: CT.WithDefault<boolean, false>;
   sheetCornerRadius?: CT.WithDefault<CT.Float, -1.0>;
diff --git a/src/fabric/ScreenNativeComponent.ts b/src/fabric/ScreenNativeComponent.ts
@@ -64,19 +64,27 @@ type ScrollEdgeEffect = 'automatic' | 'hard' | 'soft' | 'hidden';
 type OptionalBoolean = 'undefined' | 'false' | 'true';
 
 export interface NativeProps extends ViewProps {
-  onAppear?: CT.DirectEventHandler<ScreenEvent>;
-  onDisappear?: CT.DirectEventHandler<ScreenEvent>;
-  onDismissed?: CT.DirectEventHandler<ScreenDismissedEvent>;
-  onNativeDismissCancelled?: CT.DirectEventHandler<ScreenDismissedEvent>;
-  onWillAppear?: CT.DirectEventHandler<ScreenEvent>;
-  onWillDisappear?: CT.DirectEventHandler<ScreenEvent>;
-  onHeaderHeightChange?: CT.DirectEventHandler<HeaderHeightChangeEvent>;
-  onTransitionProgress?: CT.DirectEventHandler<TransitionProgressEvent>;
-  onGestureCancel?: CT.DirectEventHandler<ScreenEvent>;
-  onHeaderBackButtonClicked?: CT.DirectEventHandler<ScreenEvent>;
-  onSheetDetentChanged?: CT.DirectEventHandler<SheetDetentChangedEvent>;
+  onAppear?: CT.DirectEventHandler<ScreenEvent> | undefined;
+  onDisappear?: CT.DirectEventHandler<ScreenEvent> | undefined;
+  onDismissed?: CT.DirectEventHandler<ScreenDismissedEvent> | undefined;
+  onNativeDismissCancelled?:
+    | CT.DirectEventHandler<ScreenDismissedEvent>
+    | undefined;
+  onWillAppear?: CT.DirectEventHandler<ScreenEvent> | undefined;
+  onWillDisappear?: CT.DirectEventHandler<ScreenEvent> | undefined;
+  onHeaderHeightChange?:
+    | CT.DirectEventHandler<HeaderHeightChangeEvent>
+    | undefined;
+  onTransitionProgress?:
+    | CT.DirectEventHandler<TransitionProgressEvent>
+    | undefined;
+  onGestureCancel?: CT.DirectEventHandler<ScreenEvent> | undefined;
+  onHeaderBackButtonClicked?: CT.DirectEventHandler<ScreenEvent> | undefined;
+  onSheetDetentChanged?:
+    | CT.DirectEventHandler<SheetDetentChangedEvent>
+    | undefined;
   screenId?: CT.WithDefault<string, ''>;
-  sheetAllowedDetents?: number[];
+  sheetAllowedDetents?: number[] | undefined;
   sheetLargestUndimmedDetent?: CT.WithDefault<CT.Int32, -1>;
   sheetGrabberVisible?: CT.WithDefault<boolean, false>;
   sheetCornerRadius?: CT.WithDefault<CT.Float, -1.0>;
diff --git a/src/fabric/ScreenStackHeaderConfigNativeComponent.ts b/src/fabric/ScreenStackHeaderConfigNativeComponent.ts
@@ -72,10 +72,14 @@ export interface NativeProps extends ViewProps {
   blurEffect?: CT.WithDefault<BlurEffect, 'none'>;
   // TODO: implement this props on iOS
   topInsetEnabled?: boolean;
-  headerLeftBarButtonItems?: CT.UnsafeMixed[];
-  headerRightBarButtonItems?: CT.UnsafeMixed[];
-  onPressHeaderBarButtonItem?: CT.DirectEventHandler<OnPressHeaderBarButtonItemEvent>;
-  onPressHeaderBarButtonMenuItem?: CT.DirectEventHandler<OnPressHeaderBarButtonMenuItemEvent>;
+  headerLeftBarButtonItems?: CT.UnsafeMixed[] | undefined;
+  headerRightBarButtonItems?: CT.UnsafeMixed[] | undefined;
+  onPressHeaderBarButtonItem?:
+    | CT.DirectEventHandler<OnPressHeaderBarButtonItemEvent>
+    | undefined;
+  onPressHeaderBarButtonMenuItem?:
+    | CT.DirectEventHandler<OnPressHeaderBarButtonMenuItemEvent>
+    | undefined;
   synchronousShadowStateUpdatesEnabled?: CT.WithDefault<boolean, false>;
 
   // Experimental
diff --git a/src/fabric/ScreenStackNativeComponent.ts b/src/fabric/ScreenStackNativeComponent.ts
@@ -9,7 +9,9 @@ type FinishTransitioningEvent = Readonly<{}>;
 export interface NativeProps extends ViewProps {
   iosPreventReattachmentOfDismissedScreens?: CT.WithDefault<boolean, true>;
 
-  onFinishTransitioning?: CT.DirectEventHandler<FinishTransitioningEvent>;
+  onFinishTransitioning?:
+    | CT.DirectEventHandler<FinishTransitioningEvent>
+    | undefined;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSScreenStack', {});
diff --git a/src/fabric/safe-area/SafeAreaViewNativeComponent.ts b/src/fabric/safe-area/SafeAreaViewNativeComponent.ts
@@ -7,12 +7,14 @@ import type { CodegenTypes as CT, ViewProps } from 'react-native';
 type InsetType = 'all' | 'system' | 'interface';
 
 export interface NativeProps extends ViewProps {
-  edges?: Readonly<{
-    top: boolean;
-    right: boolean;
-    bottom: boolean;
-    left: boolean;
-  }>;
+  edges?:
+    | Readonly<{
+        top: boolean;
+        right: boolean;
+        bottom: boolean;
+        left: boolean;
+      }>
+    | undefined;
   // Android-only
   insetType?: CT.WithDefault<InsetType, 'all'>;
 }
diff --git a/src/fabric/tabs/TabsHostAndroidNativeComponent.ts b/src/fabric/tabs/TabsHostAndroidNativeComponent.ts
@@ -24,7 +24,7 @@ export interface NativeProps extends ViewProps {
 
   // General
   tabBarHidden?: CT.WithDefault<boolean, false>;
-  nativeContainerBackgroundColor?: ColorValue;
+  nativeContainerBackgroundColor?: ColorValue | undefined;
   colorScheme?: CT.WithDefault<TabsHostColorScheme, 'inherit'>;
 
   // Android-specific props
diff --git a/src/fabric/tabs/TabsHostIOSNativeComponent.ts b/src/fabric/tabs/TabsHostIOSNativeComponent.ts
@@ -34,7 +34,7 @@ export interface NativeProps extends ViewProps {
 
   // General
   tabBarHidden?: CT.WithDefault<boolean, false>;
-  nativeContainerBackgroundColor?: ColorValue;
+  nativeContainerBackgroundColor?: ColorValue | undefined;
   colorScheme?: CT.WithDefault<TabsHostColorScheme, 'inherit'>;
 
   // We can't use `direction` name for this prop as it's also used by
@@ -47,7 +47,7 @@ export interface NativeProps extends ViewProps {
   controlNavigationStateInJS?: CT.WithDefault<boolean, false>;
 
   // iOS-specific props
-  tabBarTintColor?: ColorValue;
+  tabBarTintColor?: ColorValue | undefined;
   tabBarMinimizeBehavior?: CT.WithDefault<TabBarMinimizeBehavior, 'automatic'>;
   tabBarControllerMode?: CT.WithDefault<TabBarControllerMode, 'automatic'>;
 }
diff --git a/src/fabric/tabs/TabsScreenAndroidNativeComponent.ts b/src/fabric/tabs/TabsScreenAndroidNativeComponent.ts
@@ -24,16 +24,16 @@ type TabBarItemLabelVisibilityMode =
   | 'unlabeled';
 
 export type ItemStateAppearance = {
-  tabBarItemTitleFontColor?: ProcessedColorValue | null;
-  tabBarItemIconColor?: ProcessedColorValue | null;
+  tabBarItemTitleFontColor?: ProcessedColorValue | null | undefined;
+  tabBarItemIconColor?: ProcessedColorValue | null | undefined;
 };
 
 export type Appearance = {
   // TabBar - Appearance
-  tabBarBackgroundColor?: ProcessedColorValue | null;
+  tabBarBackgroundColor?: ProcessedColorValue | null | undefined;
 
   // TabBarItem - Ripple
-  tabBarItemRippleColor?: ProcessedColorValue | null;
+  tabBarItemRippleColor?: ProcessedColorValue | null | undefined;
 
   // TabBarItem - Label layout
   tabBarItemLabelVisibilityMode?: CT.WithDefault<
@@ -42,25 +42,25 @@ export type Appearance = {
   >;
 
   // TabBarItem - State-dependent appearance
-  normal?: ItemStateAppearance;
-  selected?: ItemStateAppearance;
-  focused?: ItemStateAppearance;
-  disabled?: ItemStateAppearance;
+  normal?: ItemStateAppearance | undefined;
+  selected?: ItemStateAppearance | undefined;
+  focused?: ItemStateAppearance | undefined;
+  disabled?: ItemStateAppearance | undefined;
 
   // TabBarItem - Active Indicator
-  tabBarItemActiveIndicatorColor?: ProcessedColorValue | null;
+  tabBarItemActiveIndicatorColor?: ProcessedColorValue | null | undefined;
   tabBarItemActiveIndicatorEnabled?: CT.WithDefault<boolean, true>;
 
   // TabBarItem - Label
-  tabBarItemTitleFontFamily?: string;
-  tabBarItemTitleSmallLabelFontSize?: CT.Float;
-  tabBarItemTitleLargeLabelFontSize?: CT.Float;
-  tabBarItemTitleFontWeight?: string;
-  tabBarItemTitleFontStyle?: string;
+  tabBarItemTitleFontFamily?: string | undefined;
+  tabBarItemTitleSmallLabelFontSize?: CT.Float | undefined;
+  tabBarItemTitleLargeLabelFontSize?: CT.Float | undefined;
+  tabBarItemTitleFontWeight?: string | undefined;
+  tabBarItemTitleFontStyle?: string | undefined;
 
   // TabBarItem - Badge
-  tabBarItemBadgeBackgroundColor?: ProcessedColorValue | null;
-  tabBarItemBadgeTextColor?: ProcessedColorValue | null;
+  tabBarItemBadgeBackgroundColor?: ProcessedColorValue | null | undefined;
+  tabBarItemBadgeTextColor?: ProcessedColorValue | null | undefined;
 };
 
 // #endregion Android-specific helpers
@@ -73,34 +73,36 @@ export interface NativeProps extends ViewProps {
   onDidDisappear?: CT.DirectEventHandler<GenericEmptyEvent>;
 
   // Control
-  isFocused?: boolean;
+  isFocused?: boolean | undefined;
   screenKey: string;
 
   // General
   title?: string | undefined | null;
-  badgeValue?: string;
+  badgeValue?: string | undefined;
 
   // Accessibility
-  tabBarItemTestID?: string;
-  tabBarItemAccessibilityLabel?: string;
+  tabBarItemTestID?: string | undefined;
+  tabBarItemAccessibilityLabel?: string | undefined;
 
   // Effects
-  specialEffects?: {
-    repeatedTabSelection?: {
-      popToRoot?: CT.WithDefault<boolean, true>;
-      scrollToTop?: CT.WithDefault<boolean, true>;
-    };
-  };
+  specialEffects?:
+    | {
+        repeatedTabSelection?: {
+          popToRoot?: CT.WithDefault<boolean, true>;
+          scrollToTop?: CT.WithDefault<boolean, true>;
+        };
+      }
+    | undefined;
 
   // Android-specific props
   // Image handling
-  drawableIconResourceName?: string;
-  imageIconResource?: ImageSource;
-  selectedDrawableIconResourceName?: string;
-  selectedImageIconResource?: ImageSource;
+  drawableIconResourceName?: string | undefined;
+  imageIconResource?: ImageSource | undefined;
+  selectedDrawableIconResourceName?: string | undefined;
+  selectedImageIconResource?: ImageSource | undefined;
 
   // Appearance
-  standardAppearance?: Appearance;
+  standardAppearance?: Appearance | undefined;
 }
 
 export default codegenNativeComponent<NativeProps>('RNSTabsScreenAndroid', {
diff --git a/src/fabric/tabs/TabsScreenIOSNativeComponent.ts b/src/fabric/tabs/TabsScreenIOSNativeComponent.ts
diff --git a/src/types.tsx b/src/types.tsx
diff --git a/tsconfig.json b/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ export type Edge = 'top' \| 'right' \| 'bottom' \| 'left';`
`8`	`8`	`export type InsetType = 'all' \| 'system' \| 'interface';`
`9`	`9`
`10`	`10`	`export interface SafeAreaViewProps extends ViewProps {`
`11`		`- edges?: Readonly<Partial<Record<Edge, boolean>>>;`
	`11`	`+ edges?: Readonly<Partial<Record<Edge, boolean>>> \| undefined;`
`12`	`12`	`// Android-only`
`13`		`- insetType?: InsetType;`
	`13`	`+ insetType?: InsetType \| undefined;`
`14`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,9 @@ type FinishTransitioningEvent = Readonly<{}>;`
`9`	`9`	`export interface NativeProps extends ViewProps {`
`10`	`10`	`iosPreventReattachmentOfDismissedScreens?: CT.WithDefault<boolean, true>;`
`11`	`11`
`12`		`- onFinishTransitioning?: CT.DirectEventHandler<FinishTransitioningEvent>;`
	`12`	`+ onFinishTransitioning?:`
	`13`	`+ \| CT.DirectEventHandler<FinishTransitioningEvent>`
	`14`	`+ \| undefined;`
`13`	`15`	`}`
`14`	`16`
`15`	`17`	`export default codegenNativeComponent<NativeProps>('RNSScreenStack', {});`