Merge branch 'next-v10' into shilman/add-dev-telemetry

dannyhw · web-flow · commit cf2d3e3ed29a · 2025-09-25T23:40:42.000+01:00
diff --git a/.yarn/releases/yarn-4.9.4.cjs b/.yarn/releases/yarn-4.9.4.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -4,4 +4,4 @@ enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.9.2.cjs
+yarnPath: .yarn/releases/yarn-4.9.4.cjs
diff --git a/docs/docs/intro/configuration/index.md b/docs/docs/intro/configuration/index.md
@@ -160,28 +160,23 @@ export default StorybookUIRoot;
 #### Available Options
 
 - **UI Options**
-
   - `onDeviceUI`: Enable/disable on-device UI (default: true)
   - `shouldPersistSelection`: Persist last viewed story (default: true)
 
 - **Theme Options**
-
   - `theme`: Customize UI theme and branding
 
 - **Story Selection**
-
   - `initialSelection`: Set initial story to display
     - String format: `'kind--story'`
     - Object format: `{ kind: string, name: string }`
 
 - **Storage Options**
-
   - `storage`: Implementation for story persistence
     - `getItem`: Function to retrieve stored values
     - `setItem`: Function to store values
 
 - **Websocket Options**
-
   - `enableWebsockets`: Enable remote control (default: false)
   - `host`: Websocket host (default: 'localhost')
   - `port`: Websocket port (default: 7007)
diff --git a/docs/docs/intro/configuration/metro-configuration.md b/docs/docs/intro/configuration/metro-configuration.md
@@ -144,13 +144,11 @@ export default AppEntryPoint;
 ### Common Issues
 
 1. **Stories not found**
-
    - Verify `configPath` points to correct directory
    - Check story patterns in `main.ts`
    - Ensure Metro cache is cleared: `npx react-native start --reset-cache`
 
 2. **WebSocket connection failed**
-
    - Check if port is already in use
    - Verify `host` matches your development setup
    - verify that host and port match in both the `withStorybook` configuration and the `getStorybookUI` call in your app code
diff --git a/docs/docs/intro/configuration/websocket-configuration.md b/docs/docs/intro/configuration/websocket-configuration.md
@@ -170,14 +170,12 @@ ws.onopen = () => {
 ### Common Issues
 
 1. **Connection Refused**
-
    - Check if port is already in use: `lsof -i :7007`
    - Ensure Metro is running with WebSocket enabled
    - Verify firewall settings
    - make sure the host and port match in both the `withStorybook` configuration and the `getStorybookUI` call in your app code
 
 2. **Cannot Connect from Device**
-
    - Use machine's IP instead of localhost
    - Ensure device is on same network
    - Check device's network permissions
diff --git a/examples/expo-example/app.json b/examples/expo-example/app.json
@@ -8,6 +8,7 @@
   "experiments": {
     "reactCompiler": true
   },
+  "icon": "./assets/icon.png",
   "userInterfaceStyle": "automatic",
   "newArchEnabled": true
 }
diff --git a/examples/expo-example/package.json b/examples/expo-example/package.json
@@ -23,11 +23,11 @@
   },
   "dependencies": {
     "@babel/plugin-transform-class-static-block": "^7.27.1",
-    "@expo/metro-runtime": "~6.1.0",
-    "@gorhom/bottom-sheet": "^5.2.3",
+    "@expo/metro-runtime": "~6.1.2",
+    "@gorhom/bottom-sheet": "^5.2.6",
     "@react-native-async-storage/async-storage": "2.2.0",
     "@react-native-community/datetimepicker": "8.4.4",
-    "@react-native-community/slider": "5.0.0",
+    "@react-native-community/slider": "5.0.1",
     "@storybook/addon-ondevice-actions": "^10.0.0-beta.0",
     "@storybook/addon-ondevice-backgrounds": "^10.0.0-beta.0",
     "@storybook/addon-ondevice-controls": "^10.0.0-beta.0",
@@ -40,17 +40,17 @@
     "@storybook/react-native-ui-lite": "^10.0.0-beta.0",
     "@storybook/react-native-web-vite": "10.0.0-beta.0",
     "babel-plugin-react-compiler": "^19.1.0-rc.2",
-    "expo": "next",
+    "expo": "^54.0.10",
     "react": "19.1.0",
     "react-compiler-runtime": "^19.1.0-rc.2",
     "react-dom": "19.1.0",
-    "react-native": "0.81.0",
+    "react-native": "0.81.4",
     "react-native-gesture-handler": "~2.28.0",
-    "react-native-reanimated": "~4.0.2",
+    "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-svg": "15.12.1",
     "react-native-web": "^0.21.0",
-    "react-native-worklets": "^0.4.1",
+    "react-native-worklets": "^0.5.1",
     "storybook": "10.0.0-beta.0",
     "storybook-addon-deep-controls": "^0.9.3",
     "ws": "^8.18.0"
@@ -62,10 +62,10 @@
     "@types/ws": "^8.5.10",
     "babel-plugin-react-docgen-typescript": "^1.5.1",
     "jest": "^29.7.0",
-    "jest-expo": "~54.0.1",
+    "jest-expo": "~54.0.12",
     "rn-storybook-test": "^0.0.1",
     "typescript": "~5.9.2",
     "universal-test-renderer": "^0.6.0",
-    "vite": "^6.1.1"
+    "vite": "^7.1.5"
   }
 }
diff --git a/package.json b/package.json
@@ -48,23 +48,24 @@
     "format:fix": "prettier --write ."
   },
   "devDependencies": {
-    "@docusaurus/eslint-plugin": "^3.8.0",
-    "cross-env": "^7.0.3",
-    "eslint": "^9.25.1",
-    "eslint-config-expo": "^9.2.0",
-    "eslint-config-prettier": "^10.1.2",
+    "@docusaurus/eslint-plugin": "^3.8.1",
+    "cross-env": "^10.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-expo": "^10.0.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react-compiler": "^19.1.0-rc.2",
     "lerna": "^8.2.3",
-    "prettier": "^3.5.3",
-    "sherif": "^1.4.0",
+    "prettier": "^3.6.2",
+    "sherif": "^1.6.1",
     "typescript": "~5.9.2"
   },
   "resolutions": {
     "react-docgen-typescript": "2.2.2",
     "jotai@^2.6.2": "patch:jotai@npm%3A2.6.2#./.yarn/patches/jotai-npm-2.6.2-d482bf2d42.patch",
     "webpack-dev-server": "^5.2.2",
     "markdown-it": "^14.0.0",
-    "@types/markdown-it": "^14.0.1"
+    "@types/markdown-it": "^14.0.1",
+    "react-native-web": "^0.21.0"
   },
   "engines": {
     "node": ">=22.18.0"
@@ -73,5 +74,5 @@
     "type": "opencollective",
     "url": "https://opencollective.com/storybook"
   },
-  "packageManager": "yarn@4.9.2"
+  "packageManager": "yarn@4.9.4"
 }
diff --git a/packages/ondevice-controls/package.json b/packages/ondevice-controls/package.json
@@ -38,7 +38,7 @@
     "tinycolor2": "^1.4.1"
   },
   "devDependencies": {
-    "cross-env": "^7.0.3",
+    "cross-env": "^10.0.0",
     "typescript": "~5.9.2"
   },
   "peerDependencies": {
diff --git a/packages/ondevice-controls/src/components/RadioSelect.tsx b/packages/ondevice-controls/src/components/RadioSelect.tsx
@@ -7,7 +7,7 @@ interface RadioProps {
   isInline: boolean;
 }
 
-const RadioContainer = styled.View(({ isInline }: any) => ({
+const RadioContainer = styled.View<{ isInline: boolean }>(({ isInline }) => ({
   flexDirection: isInline ? 'row' : 'column',
   alignItems: isInline ? 'center' : 'flex-start',
   flexWrap: 'wrap',
@@ -24,17 +24,17 @@ const RadioCircle = styled.View(({ theme }) => ({
   height: 16,
   borderWidth: 1,
   borderColor: theme.appBorderColor,
-  borderRadius: '100%',
+  borderRadius: 8,
   backgroundColor: theme.background.content,
   alignItems: 'center',
   justifyContent: 'center',
 }));
 
-const RadioInnerCircle = styled.View(({ theme, selected }: any) => ({
+const RadioInnerCircle = styled.View<{ selected: boolean }>(({ theme, selected }) => ({
   width: 8,
   height: 8,
-  borderRadius: '100%',
-  backgroundColor: selected ? theme.color.positive : 'transparent',
+  borderRadius: 4,
+  backgroundColor: selected ? theme.color.positive : theme.background.content,
 }));
 
 const RadioLabel = styled.Text(({ theme }) => ({
diff --git a/packages/react-native-ui-lite/src/MobileAddonsPanel.tsx b/packages/react-native-ui-lite/src/MobileAddonsPanel.tsx
@@ -1,4 +1,5 @@
 import { styled, useTheme } from '@storybook/react-native-theming';
+import { IconButton } from '@storybook/react-native-ui-common';
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import {
   Animated,
@@ -9,15 +10,14 @@ import {
   ScrollView,
   StyleProp,
   Text,
-  useAnimatedValue,
   useWindowDimensions,
   View,
   ViewStyle,
 } from 'react-native';
 import { addons } from 'storybook/internal/manager-api';
 import { Addon_TypesEnum } from 'storybook/internal/types';
-import { IconButton } from '@storybook/react-native-ui-common';
 import { CloseIcon } from './icon/iconDataUris';
+import useAnimatedValue from './useAnimatedValue';
 
 export interface MobileAddonsPanelRef {
   setAddonsPanelOpen: (isOpen: boolean) => void;
diff --git a/packages/react-native-ui-lite/src/MobileMenuDrawer.tsx b/packages/react-native-ui-lite/src/MobileMenuDrawer.tsx
@@ -10,11 +10,11 @@ import {
   Pressable,
   SafeAreaView,
   ScrollView,
-  useAnimatedValue,
   View,
 } from 'react-native';
 
 import { useSelectedNode } from './SelectedNodeProvider';
+import useAnimatedValue from './useAnimatedValue';
 
 interface MobileMenuDrawerProps {
   children: ReactNode | ReactNode[];
diff --git a/packages/react-native-ui-lite/src/useAnimatedValue.ts b/packages/react-native-ui-lite/src/useAnimatedValue.ts
@@ -0,0 +1,13 @@
+import { useRef } from 'react';
+import { Animated } from 'react-native';
+
+export default function useAnimatedValue(
+  initialValue: number,
+  config?: Animated.AnimatedConfig
+): Animated.Value {
+  const ref = useRef<null | Animated.Value>(null);
+  if (ref.current == null) {
+    ref.current = new Animated.Value(initialValue, config);
+  }
+  return ref.current;
+}
diff --git a/packages/react-native-ui/src/MobileMenuDrawer.tsx b/packages/react-native-ui/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%'];
 
diff --git a/packages/react-native/package.json b/packages/react-native/package.json
@@ -70,10 +70,10 @@
     "babel-jest": "^29.7.0",
     "babel-preset-expo": "^12.0.9",
     "jest": "^29.7.0",
-    "jest-expo": "~54.0.1",
+    "jest-expo": "~54.0.12",
     "jotai": "^2.6.2",
     "react": "19.1.0",
-    "react-native": "0.81.0",
+    "react-native": "0.81.4",
     "storybook": "10.0.0-beta.0",
     "tsup": "^8.5.0",
     "typescript": "~5.9.2",
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -4,4 +4,4 @@ enableGlobalCache: false`
`4`	`4`
`5`	`5`	`nodeLinker: node-modules`
`6`	`6`
`7`		`-yarnPath: .yarn/releases/yarn-4.9.2.cjs`
	`7`	`+yarnPath: .yarn/releases/yarn-4.9.4.cjs`
Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,7 @@`
`8`	`8`	`"experiments": {`
`9`	`9`	`"reactCompiler": true`
`10`	`10`	`},`
	`11`	`+ "icon": "./assets/icon.png",`
`11`	`12`	`"userInterfaceStyle": "automatic",`
`12`	`13`	`"newArchEnabled": true`
`13`	`14`	`}`