FEAT: Expo 56, Storybook and uniwind update

.github/workflows/code-quality.yml

@@ -39,9 +39,6 @@ jobs:
     name: 🟦 TypeScript Checker
     timeout-minutes: 10
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [22, 'lts/*']
     steps:
       - uses: actions/checkout@v4
 

.prettierignore

@@ -8,3 +8,4 @@ pnpm-lock.yaml
 *.md
 *.mdx
 .env*
+src/uniwind-types.d.ts

.rnstorybook/main.ts

@@ -5,7 +5,7 @@ const main: StorybookConfig = {
     './stories/**/*.stories.?(ts|tsx|js|jsx)',
     '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
-  addons: [
+  deviceAddons: [
     '@storybook/addon-ondevice-controls',
     '@storybook/addon-ondevice-actions',
   ],

.rnstorybook/storybook.requires.ts

@@ -1,5 +1,11 @@
 /* do not change this file, it is auto generated by storybook. */
-import { start, updateView, View } from '@storybook/react-native';
+/// <reference types="@storybook/react-native/metro-env" />
+import {
+  start,
+  updateView,
+  View,
+  type Features,
+} from '@storybook/react-native';
 
 import '@storybook/addon-ondevice-controls/register';
 import '@storybook/addon-ondevice-actions/register';
@@ -11,7 +17,6 @@ const normalizedStories = [
     files: '**/*.stories.?(ts|tsx|js|jsx)',
     importPathMatcher:
       /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
-    // @ts-ignore
     req: require.context(
       './stories',
       true,
@@ -24,7 +29,6 @@ const normalizedStories = [
     files: '**/*.stories.@(js|jsx|mjs|ts|tsx)',
     importPathMatcher:
       /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(js|jsx|mjs|ts|tsx))$/,
-    // @ts-ignore
     req: require.context(
       '../src',
       true,
@@ -36,23 +40,28 @@ const normalizedStories = [
 declare global {
   var view: View;
   var STORIES: typeof normalizedStories;
-  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;
+  var STORYBOOK_WEBSOCKET:
+    | { host?: string; port?: number; secured?: boolean }
+    | undefined;
+  var FEATURES: Features;
 }
 
 const annotations = [require('@storybook/react-native/preview')];
 
 globalThis.STORIES = normalizedStories;
 
-// @ts-ignore
 module?.hot?.accept?.();
 
+const options = {};
+
 if (!globalThis.view) {
   globalThis.view = start({
     annotations,
     storyEntries: normalizedStories,
+    options,
   });
 } else {
-  updateView(globalThis.view, annotations, normalizedStories);
+  updateView(globalThis.view, annotations, normalizedStories, options);
 }
 
 export const view: View = globalThis.view;

README.md

@@ -108,7 +108,8 @@ You can use @dev-plugins pressing `Shift + m` in your Expo terminal.
 Storybook is managed as a specific mode of the app that is launch apart in port 8083
 
 ```bash
-pnpm dev:storybook   # To run app in storybook mode
+pnpm dev:storybook   # Run the app in storybook mode (port 8083)
+pnpm storybook:generate  # Regenerate .rnstorybook/storybook.requires.ts after adding stories
 ```
 
 > [!TIP]

app.config.ts

@@ -111,7 +111,7 @@ export default {
     adaptiveIcon: appConfig.adaptiveIcon,
   },
   plugins: [
-    '@react-native-community/datetimepicker',
+    'expo-image',
     'expo-router',
     [
       'expo-splash-screen',
@@ -130,6 +130,7 @@ export default {
     'expo-secure-store',
     'expo-localization',
     'expo-font',
+    '@react-native-community/datetimepicker',
   ],
   githubUrl: 'https://github.com/bearstudio/start-ui-native',
   updates: {

eslint.config.js

@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from 'eslint-plugin-storybook';
+
 import react from '@eslint-react/eslint-plugin';
 import eslint from '@eslint/js';
 import tanstackQuery from '@tanstack/eslint-plugin-query';
@@ -117,5 +120,6 @@ export default tslint.config(
         },
       ],
     },
-  }
+  },
+  storybook.configs['flat/recommended']
 );

metro.config.cjs

@@ -21,14 +21,16 @@ config.transformer.minifierConfig = {
   },
 };
 
-// withUniwindConfig must be outermost (Uniwind requirement)
 const storybookEnabled = process.env.APP_ENV === 'storybook';
 
-const storybookConfig = withStorybook(config, {
-  enabled: storybookEnabled,
-  configPath: path.resolve(__dirname, '.rnstorybook'),
-});
-
-module.exports = withUniwindConfig(storybookConfig, {
-  cssEntryFile: './src/app.css',
-});
+/** @type {import('expo/metro-config').MetroConfig} */
+module.exports = withUniwindConfig(
+  withStorybook(config, {
+    enabled: storybookEnabled,
+    configPath: path.resolve(__dirname, '.rnstorybook'),
+  }),
+  {
+    cssEntryFile: './src/app.css',
+    dtsFile: './src/uniwind-types.d.ts',
+  }
+);

package.json

@@ -12,6 +12,7 @@
     "dev:build:android": "APP_ENV=development expo prebuild --clean && expo run:android",
     "dev:build:ios": "APP_ENV=development expo prebuild --clean && expo run:ios",
     "dev:storybook": "APP_ENV=storybook expo start --go --port 8083",
+    "storybook:generate": "sb-rn-get-stories --config-path .rnstorybook",
     "build:staging:android": "APP_ENV=staging expo prebuild --clean && expo run:android --variant release",
     "build:staging:ios": "APP_ENV=staging expo prebuild --clean && expo run:ios --configuration Release",
     "build:production:android": "APP_ENV=production expo prebuild --clean && expo run:android --variant release",
@@ -31,12 +32,9 @@
     "@dev-plugins/async-storage": "0.4.0",
     "@dev-plugins/react-navigation": "0.4.0",
     "@dev-plugins/react-query": "0.4.0",
-    "@expo/metro-runtime": "55.0.9",
-    "@gorhom/bottom-sheet": "5.2.8",
+    "@expo/metro-runtime": "56.0.12",
+    "@expo/ui": "56.0.13",
     "@react-native-async-storage/async-storage": "2.2.0",
-    "@react-native-community/datetimepicker": "8.6.0",
-    "@react-native-community/slider": "5.1.2",
-    "@react-navigation/elements": "2.9.10",
     "@rn-primitives/avatar": "1.2.0",
     "@rn-primitives/slot": "1.2.0",
     "@shopify/flash-list": "2.0.2",
@@ -47,75 +45,73 @@
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "dayjs": "1.11.19",
-    "expo": "55.0.11",
-    "expo-application": "55.0.12",
-    "expo-constants": "55.0.11",
-    "expo-crypto": "~55.0.12",
-    "expo-device": "55.0.12",
-    "expo-font": "55.0.6",
-    "expo-haptics": "55.0.11",
-    "expo-image": "55.0.8",
-    "expo-keep-awake": "55.0.6",
-    "expo-linking": "55.0.11",
-    "expo-localization": "55.0.11",
-    "expo-network": "55.0.11",
-    "expo-router": "55.0.10",
-    "expo-secure-store": "55.0.11",
-    "expo-splash-screen": "55.0.15",
-    "expo-status-bar": "55.0.5",
-    "expo-symbols": "55.0.7",
-    "expo-system-ui": "55.0.13",
-    "expo-updates": "55.0.18",
-    "expo-web-browser": "55.0.12",
+    "expo": "56.0.4",
+    "expo-application": "56.0.3",
+    "expo-constants": "56.0.15",
+    "expo-crypto": "56.0.3",
+    "expo-device": "56.0.4",
+    "expo-font": "56.0.5",
+    "expo-haptics": "56.0.3",
+    "expo-image": "56.0.9",
+    "expo-keep-awake": "56.0.3",
+    "expo-linking": "56.0.11",
+    "expo-localization": "56.0.6",
+    "expo-network": "56.0.4",
+    "expo-router": "56.2.6",
+    "expo-secure-store": "56.0.4",
+    "expo-splash-screen": "56.0.10",
+    "expo-status-bar": "56.0.4",
+    "expo-symbols": "56.0.5",
+    "expo-system-ui": "56.0.5",
+    "expo-updates": "56.0.16",
+    "expo-web-browser": "56.0.5",
     "i18next": "25.8.18",
     "lucide-react-native": "0.577.0",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
     "react-i18next": "16.5.8",
-    "react-native": "0.83.4",
-    "react-native-gesture-handler": "2.30.0",
-    "react-native-pager-view": "8.0.0",
-    "react-native-reanimated": "4.2.1",
-    "react-native-safe-area-context": "5.6.2",
-    "react-native-screens": "4.23.0",
-    "react-native-svg": "15.15.3",
+    "react-native": "0.85.3",
+    "react-native-gesture-handler": "2.31.2",
+    "react-native-reanimated": "4.3.1",
+    "react-native-safe-area-context": "5.7.0",
+    "react-native-screens": "4.25.2",
+    "react-native-svg": "15.15.4",
     "react-native-web": "0.21.2",
-    "react-native-worklets": "0.7.2",
-    "remeda": "2.33.6",
+    "react-native-worklets": "0.8.3",
     "sonner-native": "0.23.1",
     "tailwind-merge": "3.5.0",
     "tailwindcss": "4.2.1",
-    "tailwindcss-animate": "1.0.7",
-    "ts-pattern": "5.9.0",
-    "uniwind": "1.5.0",
+    "uniwind": "1.7.0",
     "zod": "4.3.6",
     "zustand": "5.0.11"
   },
   "devDependencies": {
     "@babel/core": "7.29.0",
     "@eslint-react/eslint-plugin": "2.13.0",
     "@eslint/js": "9.39.4",
+    "@gorhom/bottom-sheet": "5.2.14",
     "@hey-api/openapi-ts": "0.94.0",
-    "@storybook/addon-ondevice-actions": "10.2.3",
-    "@storybook/addon-ondevice-controls": "10.2.3",
-    "@storybook/react-native": "10.2.3",
+    "@react-native-community/datetimepicker": "9.1.0",
+    "@react-native-community/slider": "5.2.0",
+    "@storybook/addon-ondevice-actions": "10.4.1",
+    "@storybook/addon-ondevice-controls": "10.4.1",
+    "@storybook/react-native": "10.4.1",
     "@svgr/cli": "8.1.0",
     "@types/node": "25.4.0",
     "@types/react": "19.2.14",
-    "dotenv": "17.3.1",
     "dotenv-cli": "11.0.0",
     "eslint": "9.39.4",
-    "eslint-config-expo": "55.0.0",
+    "eslint-config-expo": "56.0.4",
     "eslint-plugin-react-hooks": "5.2.0",
     "eslint-plugin-simple-import-sort": "12.1.1",
     "eslint-plugin-sonarjs": "4.0.2",
+    "eslint-plugin-storybook": "10.4.1",
     "eslint-plugin-unicorn": "63.0.0",
-    "jiti": "2.6.1",
     "lefthook": "2.1.4",
     "npm-run-all": "4.1.5",
     "prettier": "3.8.1",
     "prettier-plugin-tailwindcss": "0.7.2",
-    "storybook": "10.2.17",
+    "storybook": "10.4.1",
     "ts-plugin-sort-import-suggestions": "1.0.4",
     "typescript": "5.9.3",
     "typescript-eslint": "8.57.0"
@@ -143,7 +139,7 @@
   "expo": {
     "install": {
       "exclude": [
-        "@react-native-community/slider"
+        "typescript"
       ]
     }
   },
@@ -153,12 +149,12 @@
   },
   "homepage": "https://github.com/bearstudio/start-ui-native#readme",
   "pnpm": {
+    "overrides": {
+      "expo-constants": "56.0.15"
+    },
     "onlyBuiltDependencies": [
       "lefthook",
       "unrs-resolver"
-    ],
-    "overrides": {
-      "@react-native-community/slider": "5.0.1"
-    }
+    ]
   }
 }