chore(types): enable exactOptionalPropertyTypes

Add `| undefined` to optional properties in type declarations and fabric
native component specs to support TypeScript's exactOptionalPropertyTypes
flag. This ensures downstream projects using this flag get no type errors
from react-native-screens.

Zero runtime changes — all modifications are type annotations only.

Author: YevheniiKotyrlo

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;
 }

src/components/tabs/TabsScreen.tsx

@@ -280,17 +280,17 @@ function parseIconsToNativeProps(
   icon: PlatformIcon | undefined,
   selectedIcon: PlatformIcon | undefined,
 ): {
-  imageIconResource?: ImageResolvedAssetSource;
-  drawableIconResourceName?: string;
-  iconType?: IconType;
-  iconImageSource?: ImageSourcePropType;
-  iconResourceName?: string;
+  imageIconResource?: ImageResolvedAssetSource | undefined;
+  drawableIconResourceName?: string | undefined;
+  iconType?: IconType | undefined;
+  iconImageSource?: ImageSourcePropType | undefined;
+  iconResourceName?: string | undefined;
   // android
-  selectedImageIconResource?: ImageSourcePropType;
-  selectedDrawableIconResourceName?: string;
+  selectedImageIconResource?: ImageSourcePropType | undefined;
+  selectedDrawableIconResourceName?: string | undefined;
   // iOS
-  selectedIconImageSource?: ImageSourcePropType;
-  selectedIconResourceName?: string;
+  selectedIconImageSource?: ImageSourcePropType | undefined;
+  selectedIconResourceName?: string | undefined;
 } {
   if (Platform.OS === 'android') {
     const { imageIconResource, drawableIconResourceName } =

src/fabric/ModalScreenNativeComponent.ts

@@ -62,17 +62,25 @@ 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[];
   sheetLargestUndimmedDetent?: CT.WithDefault<CT.Int32, -1>;

src/fabric/ScreenNativeComponent.ts

@@ -64,17 +64,25 @@ 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[];
   sheetLargestUndimmedDetent?: CT.WithDefault<CT.Int32, -1>;

src/fabric/ScreenStackHeaderConfigNativeComponent.ts

@@ -72,14 +72,20 @@ 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
-  userInterfaceStyle?: CT.WithDefault<UserInterfaceStyle, 'unspecified'>;
+  userInterfaceStyle?:
+    | CT.WithDefault<UserInterfaceStyle, 'unspecified'>
+    | undefined;
 }
 
 export default codegenNativeComponent<NativeProps>(

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', {});

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'>;
 }

src/fabric/tabs/TabsScreenNativeComponent.ts

@@ -23,33 +23,33 @@ type LifecycleStateChangeEvent = Readonly<{
 }>;
 
 export type ItemStateAppearance = {
-  tabBarItemTitleFontFamily?: string;
-  tabBarItemTitleFontSize?: CT.Float;
-  tabBarItemTitleFontWeight?: string;
-  tabBarItemTitleFontStyle?: string;
-  tabBarItemTitleFontColor?: ProcessedColorValue | null;
+  tabBarItemTitleFontFamily?: string | undefined;
+  tabBarItemTitleFontSize?: CT.Float | undefined;
+  tabBarItemTitleFontWeight?: string | undefined;
+  tabBarItemTitleFontStyle?: string | undefined;
+  tabBarItemTitleFontColor?: ProcessedColorValue | null | undefined;
   tabBarItemTitlePositionAdjustment?: {
     horizontal?: CT.Float;
     vertical?: CT.Float;
   };
-  tabBarItemIconColor?: ProcessedColorValue | null;
-  tabBarItemBadgeBackgroundColor?: ProcessedColorValue | null;
+  tabBarItemIconColor?: ProcessedColorValue | null | undefined;
+  tabBarItemBadgeBackgroundColor?: ProcessedColorValue | null | undefined;
 };
 
 export type ItemAppearance = {
-  normal?: ItemStateAppearance;
-  selected?: ItemStateAppearance;
-  focused?: ItemStateAppearance;
-  disabled?: ItemStateAppearance;
+  normal?: ItemStateAppearance | undefined;
+  selected?: ItemStateAppearance | undefined;
+  focused?: ItemStateAppearance | undefined;
+  disabled?: ItemStateAppearance | undefined;
 };
 
 export type Appearance = {
-  stacked?: ItemAppearance;
-  inline?: ItemAppearance;
-  compactInline?: ItemAppearance;
+  stacked?: ItemAppearance | undefined;
+  inline?: ItemAppearance | undefined;
+  compactInline?: ItemAppearance | undefined;
 
-  tabBarBackgroundColor?: ProcessedColorValue | null;
-  tabBarShadowColor?: ProcessedColorValue | null;
+  tabBarBackgroundColor?: ProcessedColorValue | null | undefined;
+  tabBarShadowColor?: ProcessedColorValue | null | undefined;
   tabBarBlurEffect?: CT.WithDefault<BlurEffect, 'systemDefault'>;
 };
 

src/types.tsx

@@ -149,11 +149,16 @@ export interface PlatformIcon {
 
 export interface ScreenProps extends ViewProps {
   active?: 0 | 1 | Animated.AnimatedInterpolation<number>;
-  activityState?: 0 | 1 | 2 | Animated.AnimatedInterpolation<number>;
+  activityState?:
+    | 0
+    | 1
+    | 2
+    | Animated.AnimatedInterpolation<number>
+    | undefined;
   /**
    * Boolean indicating that the screen should be frozen with `react-freeze`.
    */
-  shouldFreeze?: boolean;
+  shouldFreeze?: boolean | undefined;
   children?: React.ReactNode;
   /**
    * Boolean indicating that swipe dismissal should trigger animation provided by `stackAnimation`. Defaults to `false`.
@@ -309,9 +314,9 @@ export interface ScreenProps extends ViewProps {
   /**
    * A callback that gets called when the header height has changed.
    */
-  onHeaderHeightChange?: (
-    e: NativeSyntheticEvent<HeaderHeightChangeEventType>,
-  ) => void;
+  onHeaderHeightChange?:
+    | ((e: NativeSyntheticEvent<HeaderHeightChangeEventType>) => void)
+    | undefined;
   /**
    * A callback that gets called after swipe back is canceled.
    */
@@ -414,7 +419,13 @@ export interface ScreenProps extends ViewProps {
    *
    * Defaults to `[1.0]`.
    */
-  sheetAllowedDetents?: number[] | 'fitToContents' | 'medium' | 'large' | 'all';
+  sheetAllowedDetents?:
+    | number[]
+    | 'fitToContents'
+    | 'medium'
+    | 'large'
+    | 'all'
+    | undefined;
   /**
    * Integer value describing elevation of the sheet, impacting shadow on the top edge of the sheet.
    *
@@ -1306,9 +1317,9 @@ export type ScreensRefsHolder = Record<string, React.RefObject<View>>;
 
 export interface GestureProps {
   screensRefs?: React.MutableRefObject<ScreensRefsHolder>;
-  currentScreenId?: string;
-  goBackGesture?: GoBackGesture;
-  transitionAnimation?: AnimatedScreenTransition;
+  currentScreenId?: string | undefined;
+  goBackGesture?: GoBackGesture | undefined;
+  transitionAnimation?: AnimatedScreenTransition | undefined;
   screenEdgeGesture?: boolean;
 }
 

tsconfig.json

@@ -20,6 +20,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
+    "exactOptionalPropertyTypes": true,
     "target": "esnext",
     "types": ["jest", "node"]
   },