react-native-platform-components 1.2.0 → 1.4.0

package/src/ContextMenuNativeComponent.ts

@@ -1,6 +1,7 @@
 // ContextMenuNativeComponent.ts
-import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
+import type { HostComponent, ViewProps } from 'react-native';
 import { codegenNativeComponent } from 'react-native';
+import type { BubblingEventHandler } from './codegenTypes';
 
 /**
  * Attributes for a context menu action.
@@ -120,17 +121,17 @@ export interface ContextMenuProps extends ViewProps {
   /**
    * Fired when user presses an action.
    */
-  onPressAction?: CodegenTypes.BubblingEventHandler<ContextMenuPressActionEvent>;
+  onPressAction?: BubblingEventHandler<ContextMenuPressActionEvent>;
 
   /**
    * Fired when menu opens.
    */
-  onMenuOpen?: CodegenTypes.BubblingEventHandler<Readonly<{}>>;
+  onMenuOpen?: BubblingEventHandler<Readonly<{}>>;
 
   /**
    * Fired when menu closes.
    */
-  onMenuClose?: CodegenTypes.BubblingEventHandler<Readonly<{}>>;
+  onMenuClose?: BubblingEventHandler<Readonly<{}>>;
 
   ios?: IOSProps;
   android?: AndroidProps;

package/src/DatePickerNativeComponent.ts

@@ -1,11 +1,17 @@
 // DatePickerNativeComponent.ts
-import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
+import type { HostComponent, ViewProps } from 'react-native';
 import { codegenNativeComponent } from 'react-native';
+import type {
+  BubblingEventHandler,
+  Double,
+  Int32,
+  WithDefault,
+} from './codegenTypes';
 
-export type TimestampMs = CodegenTypes.Double;
+export type TimestampMs = Double;
 
 export type DateChangeEvent = {
-  timestampMs: CodegenTypes.Double;
+  timestampMs: Double;
   confirmed: boolean;
 };
 
@@ -18,14 +24,14 @@ export type IOSConfirmToolbar = 'show' | 'hide';
 
 export type IOSProps = {
   preferredStyle?: string; // IOSDatePickerStyle
-  countDownDurationSeconds?: CodegenTypes.Double;
-  minuteInterval?: CodegenTypes.Int32;
+  countDownDurationSeconds?: Double;
+  minuteInterval?: Int32;
   roundsToMinuteInterval?: string; // IOSRoundsToMinuteInterval
   confirmToolbar?: string; // IOSConfirmToolbar
 };
 
 export type AndroidProps = {
-  firstDayOfWeek?: CodegenTypes.Int32;
+  firstDayOfWeek?: Int32;
   material?: string; // AndroidMaterialMode
   dialogTitle?: string;
   positiveButtonTitle?: string;
@@ -44,9 +50,9 @@ export type MacOSProps = Readonly<{}>;
 export type CommonProps = {
   mode?: string; // DatePickerMode
 
-  dateMs?: CodegenTypes.WithDefault<TimestampMs, -9007199254740991>;
-  minDateMs?: CodegenTypes.WithDefault<TimestampMs, -9007199254740991>;
-  maxDateMs?: CodegenTypes.WithDefault<TimestampMs, -9007199254740991>;
+  dateMs?: WithDefault<TimestampMs, -9007199254740991>;
+  minDateMs?: WithDefault<TimestampMs, -9007199254740991>;
+  maxDateMs?: WithDefault<TimestampMs, -9007199254740991>;
 
   locale?: string;
   timeZoneName?: string;
@@ -65,8 +71,8 @@ export interface NativeProps extends ViewProps, CommonProps {
   ios?: IOSProps;
   android?: AndroidProps;
 
-  onConfirm?: CodegenTypes.BubblingEventHandler<DateChangeEvent>;
-  onClosed?: CodegenTypes.BubblingEventHandler<Readonly<{}>>;
+  onConfirm?: BubblingEventHandler<DateChangeEvent>;
+  onClosed?: BubblingEventHandler<Readonly<{}>>;
 }
 
 export default codegenNativeComponent<NativeProps>(

package/src/FloatingToolbar.tsx

@@ -0,0 +1,113 @@
+// FloatingToolbar.tsx
+import React, { useMemo } from 'react';
+import {
+  Platform,
+  StyleSheet,
+  type ColorValue,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native';
+
+import NativeFloatingToolbar from './FloatingToolbarNativeComponent';
+
+/** Glass effect style of the toolbar on iOS 26. */
+export type FloatingToolbarIOSEffect = 'regular' | 'clear';
+
+/** Material 3 color variant of the toolbar on Android. */
+export type FloatingToolbarAndroidVariant = 'standard' | 'vibrant';
+
+export interface FloatingToolbarProps extends ViewProps {
+  /**
+   * Layout direction of the children. Default: `'horizontal'`.
+   */
+  orientation?: 'horizontal' | 'vertical';
+
+  /**
+   * Container color. Default: the platform's toolbar material (Material 3
+   * `surfaceContainer` or `primaryContainer` on Android, Liquid Glass or a
+   * blur on iOS). Use this rather than `style.backgroundColor`, which would
+   * replace the native shape.
+   */
+  color?: ColorValue;
+
+  /**
+   * iOS-specific configuration
+   */
+  ios?: {
+    /**
+     * Glass effect style on iOS 26. Older versions use a blur.
+     * Default: `'regular'`.
+     */
+    effect?: FloatingToolbarIOSEffect;
+  };
+
+  /**
+   * Android-specific configuration
+   */
+  android?: {
+    /**
+     * Material 3 color variant: `'standard'` (surface) or `'vibrant'`
+     * (primary container). Default: `'standard'`.
+     */
+    variant?: FloatingToolbarAndroidVariant;
+  };
+
+  /** The toolbar's actions, usually `Button`s. */
+  children?: React.ReactNode;
+
+  /** Test identifier */
+  testID?: string;
+}
+
+export function FloatingToolbar(
+  props: FloatingToolbarProps
+): React.ReactElement {
+  const { style, orientation, color, ios, android, children, ...viewProps } =
+    props;
+
+  const nativeIos = useMemo(() => {
+    if (Platform.OS !== 'ios' || !ios) return undefined;
+    return { effect: ios.effect ?? 'regular' };
+  }, [ios]);
+
+  const nativeAndroid = useMemo(() => {
+    if (Platform.OS !== 'android' || !android) return undefined;
+    return { variant: android.variant ?? 'standard' };
+  }, [android]);
+
+  const mergedStyle = useMemo(
+    (): StyleProp<ViewStyle> => [
+      styles.toolbar,
+      orientation === 'vertical' ? styles.vertical : styles.horizontal,
+      style,
+    ],
+    [orientation, style]
+  );
+
+  return (
+    <NativeFloatingToolbar
+      style={mergedStyle}
+      color={color}
+      ios={nativeIos}
+      android={nativeAndroid}
+      {...viewProps}
+    >
+      {children}
+    </NativeFloatingToolbar>
+  );
+}
+
+// Material 3 floating toolbar: 8dp container padding, 4dp between actions.
+// The capsule shape comes from native.
+const styles = StyleSheet.create({
+  toolbar: {
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 8,
+    gap: 4,
+  },
+  horizontal: { flexDirection: 'row' },
+  vertical: { flexDirection: 'column' },
+});

package/src/FloatingToolbarNativeComponent.ts

@@ -0,0 +1,31 @@
+// FloatingToolbarNativeComponent.ts
+import type { ColorValue, HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+
+/**
+ * iOS-specific configuration.
+ */
+export type FloatingToolbarIOSProps = Readonly<{
+  /** Glass effect style on iOS 26: 'regular' | 'clear' */
+  effect?: string;
+}>;
+
+/**
+ * Android-specific configuration.
+ */
+export type FloatingToolbarAndroidProps = Readonly<{
+  /** Material color variant: 'standard' | 'vibrant' */
+  variant?: string;
+}>;
+
+export interface FloatingToolbarNativeProps extends ViewProps {
+  /** Container color. Default: the platform's toolbar material. */
+  color?: ColorValue;
+
+  ios?: FloatingToolbarIOSProps;
+  android?: FloatingToolbarAndroidProps;
+}
+
+export default codegenNativeComponent<FloatingToolbarNativeProps>(
+  'PCFloatingToolbar'
+) as HostComponent<FloatingToolbarNativeProps>;

package/src/LiquidGlass.tsx

@@ -7,6 +7,7 @@ import NativeLiquidGlass, {
   type LiquidGlassEffect,
   type LiquidGlassPressEvent,
 } from './LiquidGlassNativeComponent';
+import NativePlatformComponentsTheme from './NativePlatformComponentsTheme';
 
 export type {
   LiquidGlassEffect,
@@ -14,14 +15,32 @@ export type {
   LiquidGlassPressEvent,
 };
 
+function resolveLiquidGlassSupport(): boolean {
+  if (Platform.OS !== 'ios') {
+    return false;
+  }
+  try {
+    // The native module answers for this build: Liquid Glass is compiled out
+    // when the library is built with an Xcode that predates the iOS 26 SDK,
+    // and then no device version makes it available.
+    const supported = NativePlatformComponentsTheme?.isLiquidGlassSupported();
+    if (typeof supported === 'boolean') {
+      return supported;
+    }
+  } catch {
+    // Native module not available (web, tests): fall back to the OS version.
+  }
+  return parseInt(String(Platform.Version), 10) >= 26;
+}
+
 /**
- * Whether the LiquidGlass effect is supported on the current device.
- * Returns true on iOS 26+ (with Liquid Glass support), false otherwise.
+ * Whether the LiquidGlass effect is supported here: iOS 26 or newer, in a
+ * build compiled against the iOS 26 SDK. False on Android, on older iOS, and
+ * in builds made with an older Xcode, where the views fall back to a blur.
  *
- * Use this to conditionally render fallback UI on unsupported devices.
+ * Use this to conditionally render fallback UI.
  */
-export const isLiquidGlassSupported: boolean =
-  Platform.OS === 'ios' && parseInt(String(Platform.Version), 10) >= 26;
+export const isLiquidGlassSupported: boolean = resolveLiquidGlassSupport();
 
 export interface LiquidGlassProps extends ViewProps {
   /**

package/src/LiquidGlassNativeComponent.ts

@@ -1,6 +1,7 @@
 // LiquidGlassNativeComponent.ts
-import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
+import type { HostComponent, ViewProps } from 'react-native';
 import { codegenNativeComponent } from 'react-native';
+import type { DirectEventHandler, Float, WithDefault } from './codegenTypes';
 
 /**
  * Glass effect intensity/style.
@@ -64,9 +65,9 @@ export type LiquidGlassAndroidProps = Readonly<{
  */
 export type LiquidGlassPressEvent = Readonly<{
   /** X coordinate of touch relative to view bounds */
-  x: CodegenTypes.Float;
+  x: Float;
   /** Y coordinate of touch relative to view bounds */
-  y: CodegenTypes.Float;
+  y: Float;
 }>;
 
 export interface LiquidGlassNativeProps extends ViewProps {
@@ -75,7 +76,7 @@ export interface LiquidGlassNativeProps extends ViewProps {
    * Applied uniformly to all corners.
    * @default 0
    */
-  cornerRadius?: CodegenTypes.WithDefault<CodegenTypes.Float, 0>;
+  cornerRadius?: WithDefault<Float, 0>;
 
   /**
    * iOS-specific props.
@@ -91,7 +92,7 @@ export interface LiquidGlassNativeProps extends ViewProps {
    * Fired when the glass view is pressed.
    * Includes touch coordinates relative to view bounds.
    */
-  onGlassPress?: CodegenTypes.DirectEventHandler<LiquidGlassPressEvent>;
+  onGlassPress?: DirectEventHandler<LiquidGlassPressEvent>;
 }
 
 export default codegenNativeComponent<LiquidGlassNativeProps>(

package/src/NativePlatformComponentsTheme.ts

@@ -1,13 +1,22 @@
 // NativePlatformComponentsTheme.ts
-import type { CodegenTypes, TurboModule } from 'react-native';
+import type { TurboModule } from 'react-native';
 import { TurboModuleRegistry } from 'react-native';
+import type { UnsafeObject } from './codegenTypes';
 
 export interface Spec extends TurboModule {
   /**
    * `{ primary }`, where `primary` is a color from `processColor`. An empty
    * object restores the app's own theme colors.
    */
-  setTheme(theme: CodegenTypes.UnsafeObject): void;
+  setTheme(theme: UnsafeObject): void;
+
+  /**
+   * Whether this build can render Liquid Glass: true only when the library was
+   * compiled against the iOS 26 SDK *and* the device runs iOS 26 or newer.
+   * Built with an older Xcode, the glass code is compiled out and the views
+   * fall back to a blur, so the device version alone cannot answer this.
+   */
+  isLiquidGlassSupported(): boolean;
 }
 
 export default TurboModuleRegistry.get<Spec>('PlatformComponentsTheme');

package/src/SegmentedControl.tsx

@@ -1,14 +1,10 @@
 // SegmentedControl.tsx
 import React, { useCallback, useMemo } from 'react';
 import {
-  Image,
   Platform,
   StyleSheet,
   type ColorValue,
-  type ImageRequireSource,
-  type ImageURISource,
   type StyleProp,
-  type TextStyle,
   type ViewProps,
   type ViewStyle,
 } from 'react-native';
@@ -17,44 +13,27 @@ import NativeSegmentedControl, {
   type SegmentedControlSegment as NativeSegment,
   type SegmentedControlSelectEvent,
 } from './SegmentedControlNativeComponent';
+import {
+  resolveIcon,
+  type PlatformIcon,
+  type PlatformIconSource,
+} from './icons';
+import { normalizeLabelStyle, type LabelStyle } from './labelStyle';
+import type { AndroidMaterialStyle } from './sharedTypes';
 
 // Android: Minimum height to ensure visibility.
 // Fabric's shadow node measurement isn't being called on initial render,
 // so we apply a minHeight that matches Material design touch target guidelines.
 const ANDROID_MIN_HEIGHT = 48;
 
-/**
- * A single icon source.
- *
- * - `string`: shorthand for an SF Symbol name on iOS and a drawable resource
- *   name on Android (the original API).
- * - `{ type: 'sfSymbol' }`: an SF Symbol. iOS only; ignored on Android.
- * - `{ type: 'drawable' }`: a drawable from the app's `res/drawable`.
- *   Android only; ignored on iOS.
- * - `{ type: 'image' }`: an image asset (`require('./icon.png')`) or a
- *   `{ uri }` source. Works on both platforms. Images are drawn as tinted
- *   templates unless `tinted` is `false`.
- */
-export type SegmentedControlIconSource =
-  | string
-  | { type: 'sfSymbol'; name: string }
-  | { type: 'drawable'; name: string }
-  | {
-      type: 'image';
-      source: ImageRequireSource | ImageURISource;
-      tinted?: boolean;
-    };
+/** A single icon source. Alias of {@link PlatformIconSource}. */
+export type SegmentedControlIconSource = PlatformIconSource;
 
 /**
  * An icon for a segment: a single source used on both platforms, or a
- * per-platform pair so callers don't need to branch on `Platform.OS`.
+ * per-platform pair. Alias of {@link PlatformIcon}.
  */
-export type SegmentedControlIcon =
-  | SegmentedControlIconSource
-  | {
-      ios?: SegmentedControlIconSource;
-      android?: SegmentedControlIconSource;
-    };
+export type SegmentedControlIcon = PlatformIcon;
 
 /**
  * How labels and icons combine for segments that have an icon.
@@ -67,15 +46,8 @@ export type SegmentedControlIcon =
  */
 export type SegmentedControlLabelVisibility = 'auto' | 'labeled' | 'unlabeled';
 
-/**
- * Font for segment labels. Each field falls back to the platform default.
- */
-export interface SegmentedControlLabelStyle {
-  fontFamily?: string;
-  fontSize?: number;
-  fontWeight?: TextStyle['fontWeight'];
-  fontStyle?: 'normal' | 'italic';
-}
+/** Font for segment labels. Alias of {@link LabelStyle}. */
+export type SegmentedControlLabelStyle = LabelStyle;
 
 /**
  * Badge colors. Both default to the platform look (red with white text).
@@ -201,77 +173,20 @@ export interface SegmentedControlProps extends ViewProps {
 
     /** Outline color of the segments. */
     strokeColor?: ColorValue;
+
+    /**
+     * Material style: the Material 3 Expressive connected buttons (default),
+     * or the classic Material 3 segmented buttons.
+     */
+    material?: AndroidMaterialStyle;
   };
 
   /** Test identifier */
   testID?: string;
 }
 
-type NativeIconFields = Pick<
-  NativeSegment,
-  'iconType' | 'iconName' | 'iconUri' | 'iconScale' | 'iconTinted'
->;
-
-const NO_ICON: NativeIconFields = {
-  iconType: '',
-  iconName: '',
-  iconUri: '',
-  iconScale: 1,
-  iconTinted: 'true',
-};
-
-function pickIconSource(
-  icon: SegmentedControlIcon | undefined
-): SegmentedControlIconSource | undefined {
-  if (icon === undefined || typeof icon === 'string' || 'type' in icon) {
-    return icon;
-  }
-  return Platform.OS === 'ios' ? icon.ios : icon.android;
-}
-
-/**
- * Flattens the public icon shape into the strings native expects, dropping
- * sources that don't apply to the current platform.
- */
-export function resolveSegmentIcon(
-  icon: SegmentedControlIcon | undefined
-): NativeIconFields {
-  const source = pickIconSource(icon);
-  if (source === undefined) return NO_ICON;
-
-  if (typeof source === 'string') {
-    if (source.length === 0) return NO_ICON;
-    return {
-      ...NO_ICON,
-      iconType: Platform.OS === 'ios' ? 'sfSymbol' : 'drawable',
-      iconName: source,
-    };
-  }
-
-  switch (source.type) {
-    case 'sfSymbol':
-      return Platform.OS === 'ios'
-        ? { ...NO_ICON, iconType: 'sfSymbol', iconName: source.name }
-        : NO_ICON;
-    case 'drawable':
-      return Platform.OS === 'android'
-        ? { ...NO_ICON, iconType: 'drawable', iconName: source.name }
-        : NO_ICON;
-    case 'image': {
-      const resolved = Image.resolveAssetSource(source.source);
-      if (!resolved?.uri) return NO_ICON;
-      return {
-        iconType: 'image',
-        iconName: '',
-        iconUri: resolved.uri,
-        iconScale: resolved.scale > 0 ? resolved.scale : 1,
-        iconTinted: source.tinted === false ? 'false' : 'true',
-      };
-    }
-    default:
-      return NO_ICON;
-  }
-}
+/** Flattens a segment icon for native. Alias of {@link resolveIcon}. */
+export const resolveSegmentIcon = resolveIcon;
 
 function normalizeSelectedValue(selected: string | null): string {
   return selected ?? '';
@@ -346,24 +261,17 @@ export function SegmentedControl(
     (Platform.OS === 'ios' ? ios?.selectedSegmentTintColor : undefined);
 
   // Normalize the label font; empty / 0 means platform default
-  const nativeLabelStyle = useMemo(() => {
-    if (!labelStyle) return undefined;
-    return {
-      fontFamily: labelStyle.fontFamily ?? '',
-      fontSize: labelStyle.fontSize ?? 0,
-      fontWeight:
-        labelStyle.fontWeight === undefined
-          ? ''
-          : String(labelStyle.fontWeight),
-      fontStyle: labelStyle.fontStyle ?? '',
-    };
-  }, [labelStyle]);
+  const nativeLabelStyle = useMemo(
+    () => normalizeLabelStyle(labelStyle),
+    [labelStyle]
+  );
 
   // Normalize Android props
   const nativeAndroid = useMemo(() => {
     if (!android) return undefined;
     return {
       selectionRequired: android.selectionRequired === false ? 'false' : 'true',
+      material: android.material ?? 'expressive',
     };
   }, [android]);
 

package/src/SegmentedControlNativeComponent.ts

@@ -1,11 +1,12 @@
 // SegmentedControlNativeComponent.ts
-import type {
-  CodegenTypes,
-  ColorValue,
-  HostComponent,
-  ViewProps,
-} from 'react-native';
+import type { ColorValue, HostComponent, ViewProps } from 'react-native';
 import { codegenNativeComponent } from 'react-native';
+import type {
+  BubblingEventHandler,
+  Double,
+  Int32,
+  WithDefault,
+} from './codegenTypes';
 
 /**
  * A single segment in the control.
@@ -21,7 +22,7 @@ export type SegmentedControlSegment = Readonly<{
   iconType: string; // '' | 'sfSymbol' | 'drawable' | 'image'
   iconName: string; // SF Symbol (iOS) or drawable resource name (Android)
   iconUri: string; // Resolved image URI when iconType === 'image'
-  iconScale: CodegenTypes.Double; // Resolved image scale when iconType === 'image'
+  iconScale: Double; // Resolved image scale when iconType === 'image'
   iconTinted: string; // 'true' | 'false' — draw the image as a tinted template
   badge: string; // Badge text, empty = no badge
   accessibilityLabel: string; // Screen-reader label, empty = use label
@@ -32,7 +33,7 @@ export type SegmentedControlSegment = Readonly<{
  */
 export type SegmentedControlSelectEvent = Readonly<{
   /** Selected segment index. -1 means the selection was cleared. */
-  index: CodegenTypes.Int32;
+  index: Int32;
 
   /** Selected segment value. Empty when the selection was cleared. */
   value: string;
@@ -49,7 +50,7 @@ export type SegmentedControlLabelVisibility = 'auto' | 'labeled' | 'unlabeled';
  */
 export type LabelStyleProps = Readonly<{
   fontFamily?: string;
-  fontSize?: CodegenTypes.Double;
+  fontSize?: Double;
   fontWeight?: string; // 'normal' | 'bold' | '100'..'900'
   fontStyle?: string; // 'normal' | 'italic'
 }>;
@@ -71,6 +72,9 @@ export type IOSProps = Readonly<{
 export type AndroidProps = Readonly<{
   /** Whether one segment must always be selected */
   selectionRequired?: string; // 'true' | 'false'
+
+  /** Material style: 'm3' | 'expressive' */
+  material?: string;
 }>;
 
 export interface SegmentedControlProps extends ViewProps {
@@ -83,7 +87,7 @@ export interface SegmentedControlProps extends ViewProps {
    * Controlled selection by `value`.
    * Empty string means "no selection".
    */
-  selectedValue?: CodegenTypes.WithDefault<string, ''>;
+  selectedValue?: WithDefault<string, ''>;
 
   /**
    * Enabled / disabled state.
@@ -122,7 +126,7 @@ export interface SegmentedControlProps extends ViewProps {
   /**
    * Fired when the user selects a segment.
    */
-  onSelect?: CodegenTypes.BubblingEventHandler<SegmentedControlSelectEvent>;
+  onSelect?: BubblingEventHandler<SegmentedControlSelectEvent>;
 
   ios?: IOSProps;
   android?: AndroidProps;

package/src/SelectionMenuNativeComponent.ts

@@ -1,6 +1,7 @@
 // SelectionMenuNativeComponent.ts
-import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
+import type { HostComponent, ViewProps } from 'react-native';
 import { codegenNativeComponent } from 'react-native';
+import type { BubblingEventHandler, Int32, WithDefault } from './codegenTypes';
 
 /**
  * A single option in the menu.
@@ -15,7 +16,7 @@ export type SelectionMenuOption = Readonly<{
  */
 export type SelectionMenuSelectEvent = Readonly<{
   /** Selected option index (implementation detail; stable for this render) */
-  index: CodegenTypes.Int32;
+  index: Int32;
 
   /** Selected option label */
   label: string;
@@ -57,7 +58,7 @@ export interface SelectionMenuProps extends ViewProps {
    * - Empty string means "no selection".
    * - Native should treat this as the single source of truth.
    */
-  selectedData?: CodegenTypes.WithDefault<string, ''>;
+  selectedData?: WithDefault<string, ''>;
 
   /**
    * Enabled / disabled state.
@@ -83,12 +84,12 @@ export interface SelectionMenuProps extends ViewProps {
   /**
    * Fired when the user selects an option.
    */
-  onSelect?: CodegenTypes.BubblingEventHandler<SelectionMenuSelectEvent>;
+  onSelect?: BubblingEventHandler<SelectionMenuSelectEvent>;
 
   /**
    * Fired when dismissed without selection.
    */
-  onRequestClose?: CodegenTypes.BubblingEventHandler<Readonly<{}>>;
+  onRequestClose?: BubblingEventHandler<Readonly<{}>>;
 
   ios?: IOSProps;
   android?: AndroidProps;