fix: adjust lite ui animations and keyboard handling

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "docs",
-  "version": "10.0.1",
+  "version": "10.0.2-alpha.1",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",

examples/expo-example/.rnstorybook/index.tsx

@@ -1,10 +1,11 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { LiteUI } from '@storybook/react-native-ui-lite';
-// import { StatusBar, View } from 'react-native';
-// import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
+import { StatusBar, View } from 'react-native';
+import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
 import { view } from './storybook.requires';
 
 const isScreenshotTesting = process.env.EXPO_PUBLIC_SCREENSHOT_TESTING === 'true';
+const isLiteUI = process.env.EXPO_PUBLIC_LITE_UI === 'true';
 
 const StorybookUIRoot = view.getStorybookUI({
   shouldPersistSelection: true,
@@ -16,26 +17,27 @@ const StorybookUIRoot = view.getStorybookUI({
   host: 'localhost',
   port: 7007,
 
-  // CustomUIComponent: LiteUI,
-  // CustomUIComponent: isScreenshotTesting
-  //   ? ({ children, story }) => {
-  //       return (
-  //         <SafeAreaProvider>
-  //           <SafeAreaView style={{ flex: 1 }}>
-  //             <StatusBar hidden />
-  //             <View
-  //               style={{ flex: 1 }}
-  //               accessibilityLabel={story?.id}
-  //               testID={story?.id}
-  //               accessible
-  //             >
-  //               {children}
-  //             </View>
-  //           </SafeAreaView>
-  //         </SafeAreaProvider>
-  //       );
-  //     }
-  //   : undefined,
+  CustomUIComponent: isScreenshotTesting
+    ? ({ children, story }) => {
+        return (
+          <SafeAreaProvider>
+            <SafeAreaView style={{ flex: 1 }}>
+              <StatusBar hidden />
+              <View
+                style={{ flex: 1 }}
+                accessibilityLabel={story?.id}
+                testID={story?.id}
+                accessible
+              >
+                {children}
+              </View>
+            </SafeAreaView>
+          </SafeAreaProvider>
+        );
+      }
+    : isLiteUI
+      ? LiteUI
+      : undefined,
 });
 
 export default StorybookUIRoot;

examples/expo-example/package.json

@@ -1,13 +1,14 @@
 {
   "name": "expo-example",
-  "version": "10.0.1",
+  "version": "10.0.2-alpha.1",
   "private": true,
   "main": "index.js",
   "scripts": {
     "android": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start --android",
     "ios": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start --ios",
     "web": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start --web",
     "storybook": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start -c",
+    "storybook:lite": "EXPO_PUBLIC_STORYBOOK_ENABLED=true EXPO_PUBLIC_LITE_UI=true expo start -c",
     "storybook:test": "EXPO_PUBLIC_SCREENSHOT_TESTING=true EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start -c",
     "storybook:web": "storybook dev -p 6006",
     "build-web-storybook": "storybook build",
@@ -29,15 +30,15 @@
     "@react-native-async-storage/async-storage": "2.2.0",
     "@react-native-community/datetimepicker": "8.4.4",
     "@react-native-community/slider": "5.0.1",
-    "@storybook/addon-ondevice-actions": "^10.0.1",
-    "@storybook/addon-ondevice-backgrounds": "^10.0.1",
-    "@storybook/addon-ondevice-controls": "^10.0.1",
-    "@storybook/addon-ondevice-notes": "^10.0.1",
+    "@storybook/addon-ondevice-actions": "^10.0.2-alpha.1",
+    "@storybook/addon-ondevice-backgrounds": "^10.0.2-alpha.1",
+    "@storybook/addon-ondevice-controls": "^10.0.2-alpha.1",
+    "@storybook/addon-ondevice-notes": "^10.0.2-alpha.1",
     "@storybook/addon-react-native-server": "^1.0.1",
-    "@storybook/react": "^10.0.1",
-    "@storybook/react-native": "^10.0.1",
-    "@storybook/react-native-ui-lite": "^10.0.1",
-    "@storybook/react-native-web-vite": "^10.0.1",
+    "@storybook/react": "^10.0.2",
+    "@storybook/react-native": "^10.0.2-alpha.1",
+    "@storybook/react-native-ui-lite": "^10.0.2-alpha.1",
+    "@storybook/react-native-web-vite": "^10.0.2",
     "babel-plugin-react-compiler": "^1.0.0",
     "expo": "^54.0.21",
     "expo-updates": "~29.0.12",
@@ -51,7 +52,7 @@
     "react-native-svg": "15.12.1",
     "react-native-web": "^0.21.2",
     "react-native-worklets": "^0.5.2",
-    "storybook": "^10.0.1",
+    "storybook": "^10.0.2",
     "storybook-addon-deep-controls": "^0.9.5",
     "ws": "^8.18.3"
   },

lerna.json

@@ -1,5 +1,5 @@
 {
   "npmClient": "yarn",
   "registry": "https://registry.npmjs.org",
-  "version": "10.0.1"
+  "version": "10.0.2-alpha.1"
 }

packages/ondevice-actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-actions",
-  "version": "10.0.1",
+  "version": "10.0.2-alpha.1",
   "description": "Action Logger addon for react-native storybook",
   "keywords": [
     "storybook"

packages/ondevice-backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-backgrounds",
-  "version": "10.0.1",
+  "version": "10.0.2-alpha.1",
   "description": "A react-native storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -32,7 +32,7 @@
     "dev": "tsc --watch"
   },
   "dependencies": {
-    "@storybook/react-native-theming": "^10.0.1"
+    "@storybook/react-native-theming": "^10.0.2-alpha.1"
   },
   "devDependencies": {
     "typescript": "~5.9.3"

packages/ondevice-controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-controls",
-  "version": "10.0.1",
+  "version": "10.0.2-alpha.1",
   "description": "Display storybook controls on your device.",
   "keywords": [
     "addon",
@@ -30,8 +30,9 @@
     "copyimages": "cross-env-shell cp -r src/components/color-picker/resources dist/components/color-picker/resources"
   },
   "dependencies": {
-    "@storybook/react-native-theming": "^10.0.1",
-    "@storybook/react-native-ui-common": "^10.0.1",
+    "@gorhom/portal": "^1.0.14",
+    "@storybook/react-native-theming": "^10.0.2-alpha.1",
+    "@storybook/react-native-ui-common": "^10.0.2-alpha.1",
     "polished": "^4.3.1",
     "react-native-modal-datetime-picker": "^18.0.0",
     "tinycolor2": "^1.6.0"

packages/ondevice-controls/src/components/ModalPortal.tsx

@@ -0,0 +1,39 @@
+import { Portal } from '@gorhom/portal';
+import { Modal, ModalProps, Platform, View } from 'react-native';
+
+const modalSupported = Platform.OS !== 'macos';
+
+export const ModalPortal = ({
+  children,
+  visible,
+  usePortal,
+  ...props
+}: ModalProps & { usePortal?: boolean }) => {
+  if (modalSupported && !usePortal) {
+    return (
+      <Modal visible={visible} {...props}>
+        {children}
+      </Modal>
+    );
+  }
+
+  if (!visible) return null;
+
+  return (
+    <Portal hostName="storybook-lite-ui-root">
+      <View
+        style={{
+          flex: 1,
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 1000,
+        }}
+      >
+        {children}
+      </View>
+    </Portal>
+  );
+};

packages/ondevice-controls/src/components/SelectModal.tsx

@@ -1,21 +1,21 @@
 // NOTE This is adapted from react-native-modal-selector https://github.com/peacechen/react-native-modal-selector/blob/master/index.js
 
-import { useState, useCallback, useRef, ReactNode, ComponentType, useMemo } from 'react';
+import { ComponentType, ReactNode, useCallback, useMemo, useState } from 'react';
 
 import {
-  View,
-  Modal,
-  Text,
   FlatList,
   ScrollView,
-  TouchableOpacity,
-  TouchableWithoutFeedback,
+  StyleProp,
   StyleSheet,
-  ViewStyle,
+  Text,
   TextStyle,
-  StyleProp,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
   ViewProps,
+  ViewStyle,
 } from 'react-native';
+import { ModalPortal } from './ModalPortal';
 
 const PADDING = 8;
 const BORDER_RADIUS = 5;
@@ -278,7 +278,6 @@ export const SelectModal = ({
     const initialItem = data.find((item) => String(keyExtractor(item)) === String(initValue));
     return initialItem ? [initialItem] : [];
   });
-  const modalRef = useRef<Modal>(null);
 
   const selectedItemsMap = useMemo(() => {
     if (multiselect) {
@@ -584,17 +583,16 @@ export const SelectModal = ({
 
   return (
     <View style={style} {...passThruProps}>
-      <Modal
+      <ModalPortal
         transparent
-        ref={modalRef}
         supportedOrientations={supportedOrientations}
         visible={modalVisible}
         onRequestClose={close}
         animationType={animationType}
         onDismiss={() => selectedItems.length > 0 && onChange?.(selectedItems)}
       >
         {renderOptionList()}
-      </Modal>
+      </ModalPortal>
 
       {customSelector || (
         <TouchableOpacity