@webority-technologies/mobile 0.0.15 → 0.0.21

package/lib/module/components/Banner/Banner.js

@@ -3,7 +3,7 @@
 import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
-import { SkeletonContent } from "../Skeleton/index.js";
+import { Skeleton, SkeletonText } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Banner = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -19,6 +19,11 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
     loading = false,
     accessibilityLabel,
     style,
+    containerStyle,
+    iconCircleStyle,
+    tintBarStyle,
+    closeButtonStyle,
+    actionButtonStyle,
     testID
   } = props;
   const theme = useTheme();
@@ -72,7 +77,7 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
     return /*#__PURE__*/_jsx(View, {
       style: [styles.iconCircle, {
         backgroundColor: tint.bar + '22'
-      }],
+      }, iconCircleStyle],
       children: /*#__PURE__*/_jsx(Text, {
         style: [styles.iconGlyph, {
           color: tint.glyphColor
@@ -99,11 +104,11 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
       transform: [{
         translateY
       }]
-    }, style],
+    }, style, containerStyle],
     children: [/*#__PURE__*/_jsx(View, {
       style: [styles.tintBar, {
         backgroundColor: tint.bar
-      }]
+      }, tintBarStyle]
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.row,
       children: [renderIcon(), /*#__PURE__*/_jsxs(View, {
@@ -140,11 +145,11 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
           pressed
         }) => [styles.closeBtn, {
           backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
-        }],
+        }, closeButtonStyle],
         children: /*#__PURE__*/_jsx(Text, {
           style: {
             color: theme.colors.text.secondary,
-            fontSize: 18,
+            fontSize: theme.components.banner?.closeGlyphFontSize ?? 18,
             fontWeight: theme.typography.fontWeight.bold,
             lineHeight: 18
           },
@@ -164,7 +169,7 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
             pressed
           }) => [styles.actionBtn, {
             backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
-          }],
+          }, actionButtonStyle],
           children: /*#__PURE__*/_jsx(Text, {
             style: {
               color: isPrimary ? tint.glyphColor : theme.colors.text.secondary,
@@ -179,15 +184,86 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
     }) : null]
   });
   if (loading) {
-    return /*#__PURE__*/_jsx(SkeletonContent, {
-      loading: true,
-      mode: "auto",
-      children: rendered
+    return /*#__PURE__*/_jsx(BannerSkeleton, {
+      ...props
     });
   }
   return rendered;
 });
 Banner.displayName = 'Banner';
+
+/**
+ * Placeholder shape for `<Banner>`. Keeps the icon circle on the left and
+ * shows title + 1-2 message lines + optional action button row. Outer
+ * container retains the elevated background so the banner footprint
+ * doesn't shift when it loads.
+ */
+const BannerSkeleton = ({
+  title,
+  actions,
+  icon,
+  containerStyle,
+  style
+}) => {
+  const theme = useTheme();
+  const showIcon = icon !== false;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      backgroundColor: theme.colors.background.elevated,
+      borderRadius: theme.radius.md,
+      padding: theme.spacing.md,
+      borderWidth: 1,
+      borderColor: theme.colors.border.primary
+    }, containerStyle, style],
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    children: [showIcon ? /*#__PURE__*/_jsx(View, {
+      style: {
+        marginRight: theme.spacing.sm
+      },
+      children: /*#__PURE__*/_jsx(Skeleton, {
+        shape: "circle",
+        width: 32,
+        height: 32
+      })
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: {
+        flex: 1
+      },
+      children: [title !== undefined ? /*#__PURE__*/_jsx(Skeleton, {
+        shape: "text",
+        width: "55%",
+        height: 16,
+        style: {
+          marginBottom: theme.spacing.xs
+        }
+      }) : null, /*#__PURE__*/_jsx(SkeletonText, {
+        lines: 2,
+        fontSize: 13,
+        lastLineWidth: "70%"
+      }), actions && actions.length > 0 ? /*#__PURE__*/_jsx(View, {
+        style: {
+          flexDirection: 'row',
+          marginTop: theme.spacing.sm
+        },
+        children: actions.map((_, i) => /*#__PURE__*/_jsx(Skeleton, {
+          width: 72,
+          height: 28,
+          shape: "rounded",
+          style: {
+            marginRight: theme.spacing.sm
+          }
+        }, `sk-banner-action-${i}`))
+      }) : null]
+    })]
+  });
+};
+BannerSkeleton.displayName = 'BannerSkeleton';
+Banner.Skeleton = BannerSkeleton;
 const tintFor = (theme, variant) => {
   switch (variant) {
     case 'success':
@@ -223,62 +299,66 @@ const tintFor = (theme, variant) => {
       };
   }
 };
-const buildStyles = _theme => StyleSheet.create({
-  container: {
-    overflow: 'hidden',
-    paddingLeft: 16
-  },
-  tintBar: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    bottom: 0,
-    width: 4
-  },
-  row: {
-    flexDirection: 'row',
-    alignItems: 'flex-start'
-  },
-  iconWrap: {
-    marginRight: 12
-  },
-  iconCircle: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 12
-  },
-  iconGlyph: {
-    fontSize: 15,
-    fontWeight: '700',
-    lineHeight: 17
-  },
-  textBlock: {
-    flex: 1,
-    paddingRight: 8
-  },
-  closeBtn: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginLeft: 4
-  },
-  actionsRow: {
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-    marginTop: 8,
-    gap: 4
-  },
-  actionBtn: {
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderRadius: 8
-  }
-});
+const buildStyles = theme => {
+  const iconCircleSize = theme.components.banner?.iconCircleSize ?? 28;
+  const closeButtonSize = theme.components.banner?.closeButtonSize ?? 28;
+  return StyleSheet.create({
+    container: {
+      overflow: 'hidden',
+      paddingLeft: theme.components.banner?.containerPaddingLeft ?? theme.spacing.md
+    },
+    tintBar: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      bottom: 0,
+      width: theme.components.banner?.tintBarWidth ?? 4
+    },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'flex-start'
+    },
+    iconWrap: {
+      marginRight: theme.components.banner?.iconGap ?? theme.spacing.sm
+    },
+    iconCircle: {
+      width: iconCircleSize,
+      height: iconCircleSize,
+      borderRadius: theme.components.banner?.iconCircleRadius ?? iconCircleSize / 2,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginRight: theme.components.banner?.iconGap ?? theme.spacing.sm
+    },
+    iconGlyph: {
+      fontSize: theme.components.banner?.iconGlyphFontSize ?? 15,
+      fontWeight: '700',
+      lineHeight: theme.components.banner?.iconGlyphLineHeight ?? 17
+    },
+    textBlock: {
+      flex: 1,
+      paddingRight: theme.components.banner?.textBlockPaddingRight ?? theme.spacing.xs
+    },
+    closeBtn: {
+      width: closeButtonSize,
+      height: closeButtonSize,
+      borderRadius: theme.components.banner?.closeButtonRadius ?? closeButtonSize / 2,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginLeft: theme.components.banner?.closeButtonMarginLeft ?? theme.spacing.xxs ?? 4
+    },
+    actionsRow: {
+      flexDirection: 'row',
+      justifyContent: 'flex-end',
+      marginTop: theme.components.banner?.actionsRowMarginTop ?? theme.spacing.xs,
+      gap: theme.components.banner?.actionsRowGap ?? 4
+    },
+    actionBtn: {
+      paddingHorizontal: theme.components.banner?.actionButtonPaddingHorizontal ?? theme.spacing.sm,
+      paddingVertical: theme.components.banner?.actionButtonPaddingVertical ?? 6,
+      borderRadius: theme.components.banner?.actionButtonRadius ?? theme.radius.sm
+    }
+  });
+};
 export { Banner };
 export default Banner;
 //# sourceMappingURL=Banner.js.map

package/lib/module/components/BottomNavigation/BottomNavigation.js

@@ -6,9 +6,11 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const ICON_SIZE = 24;
-const PILL_HEIGHT = 36;
-const UNDERLINE_HEIGHT = 3;
+const DEFAULT_ICON_SIZE = 24;
+const DEFAULT_PILL_HEIGHT = 36;
+const DEFAULT_PILL_MAX_WIDTH = 120;
+const DEFAULT_PILL_INSET = 16;
+const DEFAULT_UNDERLINE_HEIGHT = 3;
 const formatBadge = value => {
   if (value === null || value === undefined || value === false) return null;
   if (value === true || value === '·') return {
@@ -57,8 +59,19 @@ const BottomNavigation = /*#__PURE__*/forwardRef((props, ref) => {
   const theme = useTheme();
   const insets = useSafeAreaInsets();
   const styles = useMemo(() => buildStyles(theme), [theme]);
+  const tokens = theme.components.bottomNavigation;
+  const iconSize = tokens?.iconSize ?? DEFAULT_ICON_SIZE;
+  const pillHeight = tokens?.pillHeight ?? DEFAULT_PILL_HEIGHT;
+  const pillMaxWidth = tokens?.pillMaxWidth ?? DEFAULT_PILL_MAX_WIDTH;
+  const pillInset = tokens?.pillInset ?? DEFAULT_PILL_INSET;
   const activeIndex = Math.max(0, tabs.findIndex(tab => tab.key === activeTab));
   const [tabWidth, setTabWidth] = React.useState(0);
+
+  // Single Animated.Value holds the pill's absolute pixel offset (active index
+  // × tab width + half the gap between tab edge and pill edge). Folding the
+  // offset into the same value avoids creating a fresh Animated.Value +
+  // Animated.add node on every render — earlier code did that and slowly
+  // leaked addition nodes as the user pressed tabs.
   const indicatorTranslateX = useRef(createAnimatedValue(0)).current;
   const iconScales = useRef({});
 
@@ -69,7 +82,17 @@ const BottomNavigation = /*#__PURE__*/forwardRef((props, ref) => {
     }
   });
 
-  // Animate indicator when active tab changes or layout settles
+  // Pill width is intrinsic; we compute its rendered offset to keep it
+  // centered within each tab cell. The offset is applied to the pill itself
+  // (NOT folded into the shared indicatorTranslateX) so the underline indicator
+  // — which spans the full tab cell — stays aligned with the tab boundary
+  // instead of being shifted by the pill-centering math.
+  const pillWidth = tabWidth > 0 ? Math.min(tabWidth - pillInset, pillMaxWidth) : 0;
+  const pillOffset = tabWidth > 0 ? (tabWidth - pillWidth) / 2 : 0;
+
+  // Animate indicator to the active tab's cell edge. Pill mode applies the
+  // centering offset via a static `left` style below; underline mode uses
+  // this value directly.
   useEffect(() => {
     if (tabWidth <= 0) return;
     Animated.spring(indicatorTranslateX, {
@@ -105,11 +128,6 @@ const BottomNavigation = /*#__PURE__*/forwardRef((props, ref) => {
     onTabPress(tab.key);
   };
   const paddingBottom = Math.max(8, insets.bottom);
-
-  // Pill width is intrinsic; we compute its rendered offset to keep it centered
-  // within each tab cell when it animates.
-  const pillWidth = tabWidth > 0 ? Math.min(tabWidth - 16, 120) : 0;
-  const pillOffset = tabWidth > 0 ? (tabWidth - pillWidth) / 2 : 0;
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
     testID: testID,
@@ -126,11 +144,12 @@ const BottomNavigation = /*#__PURE__*/forwardRef((props, ref) => {
         pointerEvents: "none",
         style: [styles.pill, {
           width: pillWidth,
-          height: PILL_HEIGHT,
+          height: pillHeight,
+          left: pillOffset,
           backgroundColor: theme.colors.primaryMuted,
           borderRadius: theme.radius.full,
           transform: [{
-            translateX: Animated.add(indicatorTranslateX, new Animated.Value(pillOffset))
+            translateX: indicatorTranslateX
           }]
         }, indicatorStyle]
       }) : null, tabs.map((tab, index) => {
@@ -162,13 +181,15 @@ const BottomNavigation = /*#__PURE__*/forwardRef((props, ref) => {
           testID: testID ? `${testID}-tab-${tab.key}` : undefined,
           children: [/*#__PURE__*/_jsxs(Animated.View, {
             style: [styles.iconWrap, {
+              width: iconSize + 8,
+              height: iconSize + 8,
               transform: [{
                 scale
               }]
             }],
             children: [renderIcon({
               color,
-              size: ICON_SIZE,
+              size: iconSize,
               focused: isActive
             }), badge ? /*#__PURE__*/_jsx(View, {
               style: [badge.isDot ? styles.badgeDot : styles.badgePill, {
@@ -196,6 +217,7 @@ const BottomNavigation = /*#__PURE__*/forwardRef((props, ref) => {
         pointerEvents: "none",
         style: [styles.underline, indicatorPosition === 'top' ? styles.underlineTop : styles.underlineBottom, {
           width: tabWidth,
+          height: tokens?.underlineHeight ?? DEFAULT_UNDERLINE_HEIGHT,
           backgroundColor: theme.colors.primary,
           transform: [{
             translateX: indicatorTranslateX
@@ -226,8 +248,8 @@ const buildStyles = theme => StyleSheet.create({
     gap: 2
   },
   iconWrap: {
-    width: ICON_SIZE + 8,
-    height: ICON_SIZE + 8,
+    width: DEFAULT_ICON_SIZE + 8,
+    height: DEFAULT_ICON_SIZE + 8,
     alignItems: 'center',
     justifyContent: 'center',
     position: 'relative'
@@ -245,7 +267,7 @@ const buildStyles = theme => StyleSheet.create({
   underline: {
     position: 'absolute',
     left: 0,
-    height: UNDERLINE_HEIGHT
+    height: DEFAULT_UNDERLINE_HEIGHT
   },
   underlineBottom: {
     bottom: -6,

package/lib/module/components/BottomSheet/BottomSheet.js

@@ -20,9 +20,9 @@
  */
 
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Dimensions, Keyboard, Modal, Platform, Pressable, StyleSheet, View } from 'react-native';
+import { Dimensions, Keyboard, Modal, Platform, StyleSheet, View } from 'react-native';
 import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
-import Animated, { Extrapolation, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
@@ -42,7 +42,6 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
     onAnimate,
     enablePanDownToClose = true,
     enableBackdropPress = true,
-    backdropOpacity = 0.5,
     keyboardBehavior = 'none',
     mode = 'modal',
     handleIndicatorStyle,
@@ -84,6 +83,11 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
   // synchronously on open and unmount only after the close animation finishes
   // so the slide-down stays visible.
   const [modalVisible, setModalVisible] = useState(false);
+  // Inline-mode mirror of modalVisible: gates the absoluteFill backdrop +
+  // sheet tree so a closed inline sheet doesn't sit over the parent dimming
+  // it and swallowing touches. Set true on expand, cleared in
+  // markAnimationDone once the close animation completes.
+  const [inlineMounted, setInlineMounted] = useState(false);
 
   // Convert a snap-point index → translateY position. -1 = closed.
   const yForIndex = useCallback(idx => {
@@ -111,18 +115,20 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
   }, [onAnimate, translateY]);
   const markAnimationDone = useCallback(() => {
     isAnimatingRef.current = false;
-    // If we just finished a close animation, unmount the modal wrapper.
-    if (mode === 'modal' && currentIndexShared.value < 0) {
-      setModalVisible(false);
+    // If we just finished a close animation, unmount the sheet wrapper.
+    if (currentIndexShared.value < 0) {
+      if (mode === 'modal') setModalVisible(false);else setInlineMounted(false);
     }
   }, [mode, currentIndexShared]);
   const expand = useCallback(idx => {
     const target = typeof idx === 'number' ? clamp(idx, 0, resolvedSnapPoints.length - 1) : currentIndex >= 0 ? currentIndex : 0;
     const fromIndex = currentIndexShared.value;
     const to = yForIndex(target);
-    // Mount the Modal before kicking off the spring so the sheet has a
-    // host to animate into.
-    if (mode === 'modal') setModalVisible(true);
+    // Mount the host (Modal in modal mode, inline overlay in inline mode)
+    // before kicking off the spring so the sheet has somewhere to animate
+    // into. Inline mode also gates the backdrop on this so a closed sheet
+    // doesn't dim the parent.
+    if (mode === 'modal') setModalVisible(true);else setInlineMounted(true);
     // Reset translateY to the closed position so the first open animates
     // up from off-screen rather than snapping in place.
     if (fromIndex < 0) {
@@ -291,23 +297,22 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
     // status bar / notch.
     const lowerBound = keyboardOffset.value < 0 ? safeAreaTop : minTopY;
     const clamped = yWithKb < lowerBound ? lowerBound : yWithKb;
+    // Animate `top` (layout prop) instead of `transform: translateY`
+    // (visual only). Layout-prop animation under Reanimated still runs on
+    // the UI thread, but crucially the sheet's *hit-test box* moves with
+    // its visual position. With translateY the layout box stayed parked
+    // at top:0..maxSnap regardless of visual offset, so:
+    //   (a) the empty top half intercepted backdrop taps (worked around
+    //       previously via pointerEvents="box-none"), and
+    //   (b) drag gestures on the handle could be claimed by sibling
+    //       gesture handlers because the actual sheet view was effectively
+    //       hidden from the responder chain.
+    // Animating `top` collapses both problems into nothing — visible area
+    // == hit area — so we can drop the box-none hack too.
     return {
-      transform: [{
-        translateY: clamped
-      }]
+      top: clamped
     };
   });
-  const backdropStyle = useAnimatedStyle(() => {
-    // 0 opacity when sheet is closed, full backdropOpacity at minSnap height (and above).
-    const closedAt = screenHeight;
-    const openAt = screenHeight - minSnapPoint;
-    const opacity = interpolate(translateY.value, [closedAt, openAt], [0, backdropOpacity], Extrapolation.CLAMP);
-    return {
-      opacity,
-      // Disable hit-test entirely when fully closed so it doesn't swallow taps.
-      pointerEvents: translateY.value >= closedAt - 0.5 ? 'none' : 'auto'
-    };
-  }, [backdropOpacity, minSnapPoint, screenHeight]);
   const isExpanded = currentIndex >= 0;
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const handleBackdropPress = useCallback(() => {
@@ -316,46 +321,51 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
     close();
   }, [enableBackdropPress, close]);
 
-  // Don't render the heavy gesture tree at all when nothing's been opened yet.
-  // For inline mode we keep the legacy "mount on first open" behavior; modal
-  // mode is gated entirely by `modalVisible`.
-  const everOpenedRef = useRef(false);
-  if (isExpanded || controlledIndex !== undefined) {
-    everOpenedRef.current = true;
-  }
-  if (mode === 'inline' && !everOpenedRef.current) {
+  // RNGH Tap gesture for the backdrop. Plain RN Pressable on a sibling of a
+  // gesture-handler/reanimated sheet doesn't fire reliably on RN 0.85 / Fabric
+  // (the gesture system swallows the touch sequence). gorhom/bottom-sheet uses
+  // the same Gesture.Tap() pattern for the same reason.
+  const backdropTapGesture = useMemo(() => Gesture.Tap().maxDuration(250).onEnd((_e, success) => {
+    'worklet';
+
+    if (!success) return;
+    runOnJS(handleBackdropPress)();
+  }), [handleBackdropPress]);
+
+  // Don't render the backdrop / sheet tree when the sheet is fully closed.
+  // Inline: gated by `inlineMounted` (set in expand, cleared in
+  // markAnimationDone after close animation) — keeps an idle inline sheet
+  // from sitting over the parent and swallowing touches.
+  // Modal: gated by `modalVisible` for the same reason.
+  if (mode === 'inline' && !inlineMounted) {
     return null;
   }
   if (mode === 'modal' && !modalVisible) {
     return null;
   }
   const sheetTree = /*#__PURE__*/_jsxs(View, {
-    style: StyleSheet.absoluteFill,
-    pointerEvents: "box-none",
+    collapsable: false
+    // Modal mode: the backdrop is the modal's root, so it fills via flex.
+    // Inline mode: the backdrop overlays the parent, so it positions absolute.
+    ,
+    style: [mode === 'modal' ? styles.backdropModal : styles.backdropInline, {
+      backgroundColor: theme.colors.background.overlay
+    }],
     testID: testID,
     accessibilityViewIsModal: accessibilityViewIsModal ?? isExpanded,
-    children: [/*#__PURE__*/_jsx(Animated.View, {
-      style: [styles.backdrop,
-      // Solid scrim — the theme `background.overlay` token bakes in alpha
-      // and double-multiplies with `backdropOpacity`, leaving the backdrop
-      // looking washed out. Standard modal scrims are solid black so the
-      // prop controls the actual final opacity.
-      {
-        backgroundColor: '#000'
-      }, backdropStyle],
-      children: /*#__PURE__*/_jsx(Pressable, {
-        style: StyleSheet.absoluteFill,
-        onPress: handleBackdropPress,
+    children: [/*#__PURE__*/_jsx(GestureDetector, {
+      gesture: backdropTapGesture,
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: StyleSheet.absoluteFillObject,
         accessibilityRole: "button",
-        accessibilityLabel: "Close bottom sheet",
-        disabled: !enableBackdropPress || !isExpanded
+        accessibilityLabel: "Close bottom sheet"
       })
     }), /*#__PURE__*/_jsx(GestureDetector, {
       gesture: panGesture,
       children: /*#__PURE__*/_jsxs(Animated.View, {
         // 'dialog' is a valid platform role on web/iOS; RN's typings list it as a string union
         // that varies by platform — cast keeps strict-mode happy.
-        accessibilityRole: 'dialog',
+        accessibilityRole: "alert",
         accessibilityLabel: accessibilityLabel,
         accessibilityViewIsModal: accessibilityViewIsModal ?? isExpanded,
         style: [styles.sheet, {
@@ -371,7 +381,7 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
           pointerEvents: "box-none",
           children: /*#__PURE__*/_jsx(View, {
             style: [styles.handle, {
-              backgroundColor: theme.colors.border.primary
+              backgroundColor: theme.components.bottomSheet?.handleColor ?? theme.colors.border.primary
             }, handleIndicatorStyle]
           })
         }), /*#__PURE__*/_jsx(View, {
@@ -386,14 +396,17 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
       transparent: true,
       visible: modalVisible,
       onRequestClose: close,
-      statusBarTranslucent: true,
-      presentationStyle: "overFullScreen",
+      statusBarTranslucent: true
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore — typed in RN 0.73+, the runtime prop exists on 0.71+
+      ,
+      navigationBarTranslucent: true,
       animationType: "none",
       supportedOrientations: ['portrait', 'landscape'],
-      children: /*#__PURE__*/_jsx(GestureHandlerRootView, {
+      children: Platform.OS === 'android' ? /*#__PURE__*/_jsx(GestureHandlerRootView, {
         style: styles.modalRoot,
         children: sheetTree
-      })
+      }) : sheetTree
     });
   }
   return sheetTree;
@@ -413,14 +426,26 @@ const resolveSnapPoints = (points, screenH) => {
 };
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
 const buildStyles = _theme => StyleSheet.create({
-  backdrop: {
+  backdropModal: {
+    // The backdrop is the modal's root View. On Fabric, an absolute-
+    // positioned root inside RNModal has no positioned ancestor and
+    // collapses to zero size, taking the scrim with it. `flex: 1` fills
+    // the modal content area reliably.
+    flex: 1
+  },
+  backdropInline: {
+    // Inline mode: overlay the parent. Parent must be positioned for this
+    // to take effect (the consumer is expected to render BottomSheet inside
+    // a relatively-positioned container).
     ...StyleSheet.absoluteFillObject
   },
   sheet: {
     position: 'absolute',
     left: 0,
     right: 0,
-    top: 0,
+    // `top` is driven by the animated style (see sheetStyle). Omitted
+    // here so the static `0` doesn't fight the animated value during
+    // initial paint.
     overflow: 'hidden'
   },
   handleRow: {