@storybook/react-native-ui 9.1.1 → 9.1.2

package/dist/index.js

@@ -1562,16 +1562,33 @@ var import_react_native6 = require("react-native");
 var import_react_native_reanimated2 = require("react-native-reanimated");
 var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var BottomSheetBackdropComponent = (backdropComponentProps) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-  import_bottom_sheet3.BottomSheetBackdrop,
-  {
-    ...backdropComponentProps,
-    appearsOnIndex: 0,
-    disappearsOnIndex: -1,
-    pressBehavior: "close",
-    style: [backdropComponentProps.style, { backgroundColor: "rgba(0,0,0,0.5)" }]
-  }
-);
+var BottomSheetBackdropComponent = (backdropComponentProps) => {
+  const androidTouchEventFix = (0, import_react_native_reanimated2.useAnimatedStyle)(() => {
+    if (import_react_native6.Platform.OS === "android") {
+      return {
+        zIndex: backdropComponentProps.animatedIndex.value >= 0 ? 0 : -1
+      };
+    }
+    return {};
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    import_bottom_sheet3.BottomSheetBackdrop,
+    {
+      ...backdropComponentProps,
+      appearsOnIndex: 0,
+      disappearsOnIndex: -1,
+      pressBehavior: "close",
+      style: [
+        backdropComponentProps.style,
+        androidTouchEventFix,
+        {
+          backgroundColor: "rgba(0,0,0,0.5)",
+          paddingTop: import_react_native6.Platform.OS === "android" ? 1 : void 0
+        }
+      ]
+    }
+  );
+};
 var snapPoints = ["50%", "75%"];
 var MobileMenuDrawer = (0, import_react16.memo)(
   (0, import_react16.forwardRef)(({ children }, ref) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "9.1.1",
+  "version": "9.1.2",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -49,18 +49,18 @@
   },
   "devDependencies": {
     "@types/jest": "^29.4.3",
-    "@types/react": "~19.0.10",
+    "@types/react": "~19.1.10",
     "babel-jest": "^29.7.0",
     "jest": "^29.7.0",
     "react-test-renderer": "^19.1.0",
     "ts-dedent": "^2.2.0",
     "tsup": "^8.5.0",
-    "typescript": "~5.8.3"
+    "typescript": "~5.9.2"
   },
   "dependencies": {
-    "@storybook/react": "^9.1.2",
-    "@storybook/react-native-theming": "^9.1.1",
-    "@storybook/react-native-ui-common": "^9.1.1",
+    "@storybook/react": "^9.1.5",
+    "@storybook/react-native-theming": "^9.1.2",
+    "@storybook/react-native-ui-common": "^9.1.2",
     "es-toolkit": "^1.38.0",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
@@ -83,5 +83,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "105eafb68700cd6d137ed9f893481af963189a28"
+  "gitHead": "64b649172957ced2bf579305eddac3fbeddd5851"
 }

package/src/MobileMenuDrawer.tsx

@@ -5,8 +5,8 @@ import BottomSheet, {
 } from '@gorhom/bottom-sheet';
 import { useTheme } from '@storybook/react-native-theming';
 import { forwardRef, memo, ReactNode, useImperativeHandle, useMemo, useRef } from 'react';
-import { Keyboard } from 'react-native';
-import { useReducedMotion } from 'react-native-reanimated';
+import { Keyboard, Platform, StyleSheet } from 'react-native';
+import { useAnimatedStyle, useReducedMotion } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useSelectedNode } from './SelectedNodeProvider';
 
@@ -18,15 +18,33 @@ export interface MobileMenuDrawerRef {
   setMobileMenuOpen: (isOpen: boolean) => void;
 }
 
-export const BottomSheetBackdropComponent = (backdropComponentProps: BottomSheetBackdropProps) => (
-  <BottomSheetBackdrop
-    {...backdropComponentProps}
-    appearsOnIndex={0}
-    disappearsOnIndex={-1}
-    pressBehavior={'close'}
-    style={[backdropComponentProps.style, { backgroundColor: 'rgba(0,0,0,0.5)' }]}
-  />
-);
+export const BottomSheetBackdropComponent = (backdropComponentProps: BottomSheetBackdropProps) => {
+  const androidTouchEventFix = useAnimatedStyle(() => {
+    if (Platform.OS === 'android') {
+      return {
+        zIndex: backdropComponentProps.animatedIndex.value >= 0 ? 0 : -1,
+      };
+    }
+    return {};
+  });
+
+  return (
+    <BottomSheetBackdrop
+      {...backdropComponentProps}
+      appearsOnIndex={0}
+      disappearsOnIndex={-1}
+      pressBehavior={'close'}
+      style={[
+        backdropComponentProps.style,
+        androidTouchEventFix,
+        {
+          backgroundColor: 'rgba(0,0,0,0.5)',
+          paddingTop: Platform.OS === 'android' ? 1 : undefined,
+        },
+      ]}
+    />
+  );
+};
 
 const snapPoints = ['50%', '75%'];