[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-storybook-setup-react-native-storybook":3,"mdc--r8pq4b-key":38,"related-repo-storybook-setup-react-native-storybook":1629,"related-org-storybook-setup-react-native-storybook":1663},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":33,"sourceUrl":36,"mdContent":37},"setup-react-native-storybook","configure Storybook for React Native projects","Set up Storybook for React Native in Expo, React Native CLI, or Re.Pack projects. Use when adding Storybook to a project, configuring metro.config.js with withStorybook, creating .rnstorybook configuration files, setting up Storybook routes in Expo Router, configuring getStorybookUI, or adding the StorybookPlugin to a Re.Pack rspack\u002Fwebpack config. Covers Expo, Expo Router, plain React Native CLI, and Re.Pack setups.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},"storybook","Storybook","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fstorybook.png","storybookjs",[13,17,20,23],{"name":14,"slug":15,"type":16},"React Native","react-native","tag",{"name":18,"slug":19,"type":16},"Expo","expo",{"name":21,"slug":22,"type":16},"UI Components","ui-components",{"name":24,"slug":25,"type":16},"Testing","testing",1304,"https:\u002F\u002Fgithub.com\u002Fstorybookjs\u002Freact-native","2026-07-16T05:59:11.855468",null,184,[19,32,15,8],"react",{"repoUrl":27,"stars":26,"forks":30,"topics":34,"description":35},[19,32,15,8],"📓 Storybook for React Native!","https:\u002F\u002Fgithub.com\u002Fstorybookjs\u002Freact-native\u002Ftree\u002FHEAD\u002Fskills\u002Fsetup-react-native-storybook","---\nname: setup-react-native-storybook\ndescription: Set up Storybook for React Native in Expo, React Native CLI, or Re.Pack projects. Use when adding Storybook to a project, configuring metro.config.js with withStorybook, creating .rnstorybook configuration files, setting up Storybook routes in Expo Router, configuring getStorybookUI, or adding the StorybookPlugin to a Re.Pack rspack\u002Fwebpack config. Covers Expo, Expo Router, plain React Native CLI, and Re.Pack setups.\n---\n\n# React Native Storybook Setup\n\nAdd `@storybook\u002Freact-native` v10 to a React Native project.\n\n**Important:** Detect the project's package manager (look for `yarn.lock`, `pnpm-lock.yaml`, or `bun.lockb`) and use it for all install\u002Frun commands instead of `npm`. The examples below use `npm` but substitute accordingly (e.g. `yarn add` instead of `npm install`, `yarn storybook` instead of `npm run storybook`). For Expo projects, use `npx expo install` (or `bunx expo install`, etc.) to install dependencies so Expo can resolve compatible versions.\n\nFor the init command, use `\u003Cpm> create storybook` with the flags shown below. Only npm needs `--` before the flags. Never use `npx`\u002F`bunx` etc for this.\n\nFour setup flows based on project type:\n\n1. **Expo (no router)** - see [references\u002Fexpo-setup.md](references\u002Fexpo-setup.md)\n2. **Expo with Expo Router** - see [references\u002Fexpo-router-setup.md](references\u002Fexpo-router-setup.md)\n3. **React Native CLI (no Expo)** - see [references\u002Freact-native-cli-setup.md](references\u002Freact-native-cli-setup.md)\n4. **Re.Pack (rspack\u002Fwebpack)** - see [references\u002Frepack-setup.md](references\u002Frepack-setup.md)\n\n## Flow Selection\n\n- Project has `rspack.config` or `webpack.config` and uses `@callstack\u002Frepack` -> **Re.Pack**\n- Project has `app\u002F` directory with `_layout.tsx` and uses `expo-router` -> **Expo Router**\n- Project uses Expo but not file-based routing -> **Expo**\n- Project uses `@react-native-community\u002Fcli` with no Expo -> **React Native CLI**\n\n## Common Steps (all flows)\n\n### 1. Run CLI Init\n\n```sh\nnpm create storybook -- --type react_native --yes\n# or: pnpm create storybook --type react_native --yes\n# or: bun create storybook --type react_native --yes\n```\n\nThis installs dependencies and creates `.rnstorybook\u002F` with `main.ts`, `preview.tsx`, and `index.tsx`.\n\n### 2. Enable WebSockets in .rnstorybook\u002Findex.tsx\n\nUpdate the generated `.rnstorybook\u002Findex.tsx` to enable WebSocket support. This is required for remote control and syncing with the Storybook web companion:\n\n```tsx\n\u002F\u002F .rnstorybook\u002Findex.tsx\nimport AsyncStorage from '@react-native-async-storage\u002Fasync-storage';\nimport { view } from '.\u002Fstorybook.requires';\n\nconst StorybookUIRoot = view.getStorybookUI({\n  storage: {\n    getItem: AsyncStorage.getItem,\n    setItem: AsyncStorage.setItem,\n  },\n  enableWebsockets: true,\n});\n\nexport default StorybookUIRoot;\n```\n\nIf the project doesn't have `@react-native-async-storage\u002Fasync-storage`, install it:\n\n```sh\nnpm install @react-native-async-storage\u002Fasync-storage\n```\n\n### 3. Update Story Globs in main.ts\n\nThe CLI generates a default `stories` glob in `.rnstorybook\u002Fmain.ts`. Keep the existing glob and add an additional entry pointing to where UI components actually live in the project. Look for directories like `components\u002F`, `src\u002Fcomponents\u002F`, `src\u002F`, `ui\u002F`, etc.:\n\n```ts\n\u002F\u002F .rnstorybook\u002Fmain.ts\nconst main: StorybookConfig = {\n  stories: [\n    '.\u002Fstories\u002F**\u002F*.stories.?(ts|tsx|js|jsx)', \u002F\u002F example stories from init\n    '..\u002Fsrc\u002Fcomponents\u002F**\u002F*.stories.?(ts|tsx|js|jsx)', \u002F\u002F add based on project structure\n  ],\n  \u002F\u002F ...\n};\n```\n\n### 4. Configure Bundler\n\nFor Metro projects, wrap the metro config with `withStorybook`. For Re.Pack projects, add the `StorybookPlugin` to your rspack\u002Fwebpack config. See the relevant reference file for details.\n\n### 5. Create Entrypoint\n\nHow Storybook is rendered differs per flow - see the relevant reference file.\n\n### 6. Run\n\n```sh\nnpm run start\nnpm run ios     # or npm run android\n```\n\n## withStorybook Options (Metro)\n\n```js\nmodule.exports = withStorybook(config, {\n  enabled: true, \u002F\u002F Remove Storybook from bundle when false\n  configPath: '.\u002F.rnstorybook', \u002F\u002F Optional and redundant when using the default .\u002F.rnstorybook folder\n  useJs: false, \u002F\u002F Generate .js instead of .ts\n  docTools: true, \u002F\u002F Auto arg extraction\n  liteMode: false, \u002F\u002F Mock default UI deps (use with react-native-ui-lite)\n  websockets: { port: 7007, host: 'localhost' }, \u002F\u002F Remote control\n});\n```\n\n## StorybookPlugin Options (Re.Pack)\n\n```js\nnew StorybookPlugin({\n  enabled: true, \u002F\u002F Strip Storybook from bundle when false\n  configPath: '.\u002F.rnstorybook', \u002F\u002F Optional and redundant when using the default .\u002F.rnstorybook folder\n  useJs: false, \u002F\u002F Generate .js instead of .ts\n  docTools: true, \u002F\u002F Auto arg extraction\n  liteMode: false, \u002F\u002F Mock default UI deps (use with react-native-ui-lite)\n  websockets: 'auto', \u002F\u002F 'auto' detects LAN IP, or { port: 7007, host: 'localhost' }\n});\n```\n",{"data":39,"body":40},{"name":4,"description":6},{"type":41,"children":42},"root",[43,52,67,163,200,205,268,275,371,377,384,456,492,498,511,830,842,866,872,922,1066,1072,1093,1099,1104,1110,1155,1161,1417,1423,1623],{"type":44,"tag":45,"props":46,"children":48},"element","h1",{"id":47},"react-native-storybook-setup",[49],{"type":50,"value":51},"text","React Native Storybook Setup",{"type":44,"tag":53,"props":54,"children":55},"p",{},[56,58,65],{"type":50,"value":57},"Add ",{"type":44,"tag":59,"props":60,"children":62},"code",{"className":61},[],[63],{"type":50,"value":64},"@storybook\u002Freact-native",{"type":50,"value":66}," v10 to a React Native project.",{"type":44,"tag":53,"props":68,"children":69},{},[70,76,78,84,86,92,94,100,102,108,110,115,117,123,125,131,132,138,139,145,147,153,155,161],{"type":44,"tag":71,"props":72,"children":73},"strong",{},[74],{"type":50,"value":75},"Important:",{"type":50,"value":77}," Detect the project's package manager (look for ",{"type":44,"tag":59,"props":79,"children":81},{"className":80},[],[82],{"type":50,"value":83},"yarn.lock",{"type":50,"value":85},", ",{"type":44,"tag":59,"props":87,"children":89},{"className":88},[],[90],{"type":50,"value":91},"pnpm-lock.yaml",{"type":50,"value":93},", or ",{"type":44,"tag":59,"props":95,"children":97},{"className":96},[],[98],{"type":50,"value":99},"bun.lockb",{"type":50,"value":101},") and use it for all install\u002Frun commands instead of ",{"type":44,"tag":59,"props":103,"children":105},{"className":104},[],[106],{"type":50,"value":107},"npm",{"type":50,"value":109},". The examples below use ",{"type":44,"tag":59,"props":111,"children":113},{"className":112},[],[114],{"type":50,"value":107},{"type":50,"value":116}," but substitute accordingly (e.g. ",{"type":44,"tag":59,"props":118,"children":120},{"className":119},[],[121],{"type":50,"value":122},"yarn add",{"type":50,"value":124}," instead of ",{"type":44,"tag":59,"props":126,"children":128},{"className":127},[],[129],{"type":50,"value":130},"npm install",{"type":50,"value":85},{"type":44,"tag":59,"props":133,"children":135},{"className":134},[],[136],{"type":50,"value":137},"yarn storybook",{"type":50,"value":124},{"type":44,"tag":59,"props":140,"children":142},{"className":141},[],[143],{"type":50,"value":144},"npm run storybook",{"type":50,"value":146},"). For Expo projects, use ",{"type":44,"tag":59,"props":148,"children":150},{"className":149},[],[151],{"type":50,"value":152},"npx expo install",{"type":50,"value":154}," (or ",{"type":44,"tag":59,"props":156,"children":158},{"className":157},[],[159],{"type":50,"value":160},"bunx expo install",{"type":50,"value":162},", etc.) to install dependencies so Expo can resolve compatible versions.",{"type":44,"tag":53,"props":164,"children":165},{},[166,168,174,176,182,184,190,192,198],{"type":50,"value":167},"For the init command, use ",{"type":44,"tag":59,"props":169,"children":171},{"className":170},[],[172],{"type":50,"value":173},"\u003Cpm> create storybook",{"type":50,"value":175}," with the flags shown below. Only npm needs ",{"type":44,"tag":59,"props":177,"children":179},{"className":178},[],[180],{"type":50,"value":181},"--",{"type":50,"value":183}," before the flags. Never use ",{"type":44,"tag":59,"props":185,"children":187},{"className":186},[],[188],{"type":50,"value":189},"npx",{"type":50,"value":191},"\u002F",{"type":44,"tag":59,"props":193,"children":195},{"className":194},[],[196],{"type":50,"value":197},"bunx",{"type":50,"value":199}," etc for this.",{"type":44,"tag":53,"props":201,"children":202},{},[203],{"type":50,"value":204},"Four setup flows based on project type:",{"type":44,"tag":206,"props":207,"children":208},"ol",{},[209,226,240,254],{"type":44,"tag":210,"props":211,"children":212},"li",{},[213,218,220],{"type":44,"tag":71,"props":214,"children":215},{},[216],{"type":50,"value":217},"Expo (no router)",{"type":50,"value":219}," - see ",{"type":44,"tag":221,"props":222,"children":224},"a",{"href":223},"references\u002Fexpo-setup.md",[225],{"type":50,"value":223},{"type":44,"tag":210,"props":227,"children":228},{},[229,234,235],{"type":44,"tag":71,"props":230,"children":231},{},[232],{"type":50,"value":233},"Expo with Expo Router",{"type":50,"value":219},{"type":44,"tag":221,"props":236,"children":238},{"href":237},"references\u002Fexpo-router-setup.md",[239],{"type":50,"value":237},{"type":44,"tag":210,"props":241,"children":242},{},[243,248,249],{"type":44,"tag":71,"props":244,"children":245},{},[246],{"type":50,"value":247},"React Native CLI (no Expo)",{"type":50,"value":219},{"type":44,"tag":221,"props":250,"children":252},{"href":251},"references\u002Freact-native-cli-setup.md",[253],{"type":50,"value":251},{"type":44,"tag":210,"props":255,"children":256},{},[257,262,263],{"type":44,"tag":71,"props":258,"children":259},{},[260],{"type":50,"value":261},"Re.Pack (rspack\u002Fwebpack)",{"type":50,"value":219},{"type":44,"tag":221,"props":264,"children":266},{"href":265},"references\u002Frepack-setup.md",[267],{"type":50,"value":265},{"type":44,"tag":269,"props":270,"children":272},"h2",{"id":271},"flow-selection",[273],{"type":50,"value":274},"Flow Selection",{"type":44,"tag":276,"props":277,"children":278},"ul",{},[279,313,344,353],{"type":44,"tag":210,"props":280,"children":281},{},[282,284,290,292,298,300,306,308],{"type":50,"value":283},"Project has ",{"type":44,"tag":59,"props":285,"children":287},{"className":286},[],[288],{"type":50,"value":289},"rspack.config",{"type":50,"value":291}," or ",{"type":44,"tag":59,"props":293,"children":295},{"className":294},[],[296],{"type":50,"value":297},"webpack.config",{"type":50,"value":299}," and uses ",{"type":44,"tag":59,"props":301,"children":303},{"className":302},[],[304],{"type":50,"value":305},"@callstack\u002Frepack",{"type":50,"value":307}," -> ",{"type":44,"tag":71,"props":309,"children":310},{},[311],{"type":50,"value":312},"Re.Pack",{"type":44,"tag":210,"props":314,"children":315},{},[316,317,323,325,331,332,338,339],{"type":50,"value":283},{"type":44,"tag":59,"props":318,"children":320},{"className":319},[],[321],{"type":50,"value":322},"app\u002F",{"type":50,"value":324}," directory with ",{"type":44,"tag":59,"props":326,"children":328},{"className":327},[],[329],{"type":50,"value":330},"_layout.tsx",{"type":50,"value":299},{"type":44,"tag":59,"props":333,"children":335},{"className":334},[],[336],{"type":50,"value":337},"expo-router",{"type":50,"value":307},{"type":44,"tag":71,"props":340,"children":341},{},[342],{"type":50,"value":343},"Expo Router",{"type":44,"tag":210,"props":345,"children":346},{},[347,349],{"type":50,"value":348},"Project uses Expo but not file-based routing -> ",{"type":44,"tag":71,"props":350,"children":351},{},[352],{"type":50,"value":18},{"type":44,"tag":210,"props":354,"children":355},{},[356,358,364,366],{"type":50,"value":357},"Project uses ",{"type":44,"tag":59,"props":359,"children":361},{"className":360},[],[362],{"type":50,"value":363},"@react-native-community\u002Fcli",{"type":50,"value":365}," with no Expo -> ",{"type":44,"tag":71,"props":367,"children":368},{},[369],{"type":50,"value":370},"React Native CLI",{"type":44,"tag":269,"props":372,"children":374},{"id":373},"common-steps-all-flows",[375],{"type":50,"value":376},"Common Steps (all flows)",{"type":44,"tag":378,"props":379,"children":381},"h3",{"id":380},"_1-run-cli-init",[382],{"type":50,"value":383},"1. Run CLI Init",{"type":44,"tag":385,"props":386,"children":391},"pre",{"className":387,"code":388,"language":389,"meta":390,"style":390},"language-sh shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm create storybook -- --type react_native --yes\n# or: pnpm create storybook --type react_native --yes\n# or: bun create storybook --type react_native --yes\n","sh","",[392],{"type":44,"tag":59,"props":393,"children":394},{"__ignoreMap":390},[395,437,447],{"type":44,"tag":396,"props":397,"children":400},"span",{"class":398,"line":399},"line",1,[401,406,412,417,422,427,432],{"type":44,"tag":396,"props":402,"children":404},{"style":403},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[405],{"type":50,"value":107},{"type":44,"tag":396,"props":407,"children":409},{"style":408},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[410],{"type":50,"value":411}," create",{"type":44,"tag":396,"props":413,"children":414},{"style":408},[415],{"type":50,"value":416}," storybook",{"type":44,"tag":396,"props":418,"children":419},{"style":408},[420],{"type":50,"value":421}," --",{"type":44,"tag":396,"props":423,"children":424},{"style":408},[425],{"type":50,"value":426}," --type",{"type":44,"tag":396,"props":428,"children":429},{"style":408},[430],{"type":50,"value":431}," react_native",{"type":44,"tag":396,"props":433,"children":434},{"style":408},[435],{"type":50,"value":436}," --yes\n",{"type":44,"tag":396,"props":438,"children":440},{"class":398,"line":439},2,[441],{"type":44,"tag":396,"props":442,"children":444},{"style":443},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[445],{"type":50,"value":446},"# or: pnpm create storybook --type react_native --yes\n",{"type":44,"tag":396,"props":448,"children":450},{"class":398,"line":449},3,[451],{"type":44,"tag":396,"props":452,"children":453},{"style":443},[454],{"type":50,"value":455},"# or: bun create storybook --type react_native --yes\n",{"type":44,"tag":53,"props":457,"children":458},{},[459,461,467,469,475,476,482,484,490],{"type":50,"value":460},"This installs dependencies and creates ",{"type":44,"tag":59,"props":462,"children":464},{"className":463},[],[465],{"type":50,"value":466},".rnstorybook\u002F",{"type":50,"value":468}," with ",{"type":44,"tag":59,"props":470,"children":472},{"className":471},[],[473],{"type":50,"value":474},"main.ts",{"type":50,"value":85},{"type":44,"tag":59,"props":477,"children":479},{"className":478},[],[480],{"type":50,"value":481},"preview.tsx",{"type":50,"value":483},", and ",{"type":44,"tag":59,"props":485,"children":487},{"className":486},[],[488],{"type":50,"value":489},"index.tsx",{"type":50,"value":491},".",{"type":44,"tag":378,"props":493,"children":495},{"id":494},"_2-enable-websockets-in-rnstorybookindextsx",[496],{"type":50,"value":497},"2. Enable WebSockets in .rnstorybook\u002Findex.tsx",{"type":44,"tag":53,"props":499,"children":500},{},[501,503,509],{"type":50,"value":502},"Update the generated ",{"type":44,"tag":59,"props":504,"children":506},{"className":505},[],[507],{"type":50,"value":508},".rnstorybook\u002Findex.tsx",{"type":50,"value":510}," to enable WebSocket support. This is required for remote control and syncing with the Storybook web companion:",{"type":44,"tag":385,"props":512,"children":516},{"className":513,"code":514,"language":515,"meta":390,"style":390},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F .rnstorybook\u002Findex.tsx\nimport AsyncStorage from '@react-native-async-storage\u002Fasync-storage';\nimport { view } from '.\u002Fstorybook.requires';\n\nconst StorybookUIRoot = view.getStorybookUI({\n  storage: {\n    getItem: AsyncStorage.getItem,\n    setItem: AsyncStorage.setItem,\n  },\n  enableWebsockets: true,\n});\n\nexport default StorybookUIRoot;\n","tsx",[517],{"type":44,"tag":59,"props":518,"children":519},{"__ignoreMap":390},[520,528,569,613,623,667,687,719,749,758,781,799,807],{"type":44,"tag":396,"props":521,"children":522},{"class":398,"line":399},[523],{"type":44,"tag":396,"props":524,"children":525},{"style":443},[526],{"type":50,"value":527},"\u002F\u002F .rnstorybook\u002Findex.tsx\n",{"type":44,"tag":396,"props":529,"children":530},{"class":398,"line":439},[531,537,543,548,554,559,564],{"type":44,"tag":396,"props":532,"children":534},{"style":533},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[535],{"type":50,"value":536},"import",{"type":44,"tag":396,"props":538,"children":540},{"style":539},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[541],{"type":50,"value":542}," AsyncStorage ",{"type":44,"tag":396,"props":544,"children":545},{"style":533},[546],{"type":50,"value":547},"from",{"type":44,"tag":396,"props":549,"children":551},{"style":550},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[552],{"type":50,"value":553}," '",{"type":44,"tag":396,"props":555,"children":556},{"style":408},[557],{"type":50,"value":558},"@react-native-async-storage\u002Fasync-storage",{"type":44,"tag":396,"props":560,"children":561},{"style":550},[562],{"type":50,"value":563},"'",{"type":44,"tag":396,"props":565,"children":566},{"style":550},[567],{"type":50,"value":568},";\n",{"type":44,"tag":396,"props":570,"children":571},{"class":398,"line":449},[572,576,581,586,591,596,600,605,609],{"type":44,"tag":396,"props":573,"children":574},{"style":533},[575],{"type":50,"value":536},{"type":44,"tag":396,"props":577,"children":578},{"style":550},[579],{"type":50,"value":580}," {",{"type":44,"tag":396,"props":582,"children":583},{"style":539},[584],{"type":50,"value":585}," view",{"type":44,"tag":396,"props":587,"children":588},{"style":550},[589],{"type":50,"value":590}," }",{"type":44,"tag":396,"props":592,"children":593},{"style":533},[594],{"type":50,"value":595}," from",{"type":44,"tag":396,"props":597,"children":598},{"style":550},[599],{"type":50,"value":553},{"type":44,"tag":396,"props":601,"children":602},{"style":408},[603],{"type":50,"value":604},".\u002Fstorybook.requires",{"type":44,"tag":396,"props":606,"children":607},{"style":550},[608],{"type":50,"value":563},{"type":44,"tag":396,"props":610,"children":611},{"style":550},[612],{"type":50,"value":568},{"type":44,"tag":396,"props":614,"children":616},{"class":398,"line":615},4,[617],{"type":44,"tag":396,"props":618,"children":620},{"emptyLinePlaceholder":619},true,[621],{"type":50,"value":622},"\n",{"type":44,"tag":396,"props":624,"children":626},{"class":398,"line":625},5,[627,633,638,643,647,651,657,662],{"type":44,"tag":396,"props":628,"children":630},{"style":629},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[631],{"type":50,"value":632},"const",{"type":44,"tag":396,"props":634,"children":635},{"style":539},[636],{"type":50,"value":637}," StorybookUIRoot ",{"type":44,"tag":396,"props":639,"children":640},{"style":550},[641],{"type":50,"value":642},"=",{"type":44,"tag":396,"props":644,"children":645},{"style":539},[646],{"type":50,"value":585},{"type":44,"tag":396,"props":648,"children":649},{"style":550},[650],{"type":50,"value":491},{"type":44,"tag":396,"props":652,"children":654},{"style":653},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[655],{"type":50,"value":656},"getStorybookUI",{"type":44,"tag":396,"props":658,"children":659},{"style":539},[660],{"type":50,"value":661},"(",{"type":44,"tag":396,"props":663,"children":664},{"style":550},[665],{"type":50,"value":666},"{\n",{"type":44,"tag":396,"props":668,"children":670},{"class":398,"line":669},6,[671,677,682],{"type":44,"tag":396,"props":672,"children":674},{"style":673},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[675],{"type":50,"value":676},"  storage",{"type":44,"tag":396,"props":678,"children":679},{"style":550},[680],{"type":50,"value":681},":",{"type":44,"tag":396,"props":683,"children":684},{"style":550},[685],{"type":50,"value":686}," {\n",{"type":44,"tag":396,"props":688,"children":690},{"class":398,"line":689},7,[691,696,700,705,709,714],{"type":44,"tag":396,"props":692,"children":693},{"style":673},[694],{"type":50,"value":695},"    getItem",{"type":44,"tag":396,"props":697,"children":698},{"style":550},[699],{"type":50,"value":681},{"type":44,"tag":396,"props":701,"children":702},{"style":539},[703],{"type":50,"value":704}," AsyncStorage",{"type":44,"tag":396,"props":706,"children":707},{"style":550},[708],{"type":50,"value":491},{"type":44,"tag":396,"props":710,"children":711},{"style":539},[712],{"type":50,"value":713},"getItem",{"type":44,"tag":396,"props":715,"children":716},{"style":550},[717],{"type":50,"value":718},",\n",{"type":44,"tag":396,"props":720,"children":722},{"class":398,"line":721},8,[723,728,732,736,740,745],{"type":44,"tag":396,"props":724,"children":725},{"style":673},[726],{"type":50,"value":727},"    setItem",{"type":44,"tag":396,"props":729,"children":730},{"style":550},[731],{"type":50,"value":681},{"type":44,"tag":396,"props":733,"children":734},{"style":539},[735],{"type":50,"value":704},{"type":44,"tag":396,"props":737,"children":738},{"style":550},[739],{"type":50,"value":491},{"type":44,"tag":396,"props":741,"children":742},{"style":539},[743],{"type":50,"value":744},"setItem",{"type":44,"tag":396,"props":746,"children":747},{"style":550},[748],{"type":50,"value":718},{"type":44,"tag":396,"props":750,"children":752},{"class":398,"line":751},9,[753],{"type":44,"tag":396,"props":754,"children":755},{"style":550},[756],{"type":50,"value":757},"  },\n",{"type":44,"tag":396,"props":759,"children":761},{"class":398,"line":760},10,[762,767,771,777],{"type":44,"tag":396,"props":763,"children":764},{"style":673},[765],{"type":50,"value":766},"  enableWebsockets",{"type":44,"tag":396,"props":768,"children":769},{"style":550},[770],{"type":50,"value":681},{"type":44,"tag":396,"props":772,"children":774},{"style":773},"--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC",[775],{"type":50,"value":776}," true",{"type":44,"tag":396,"props":778,"children":779},{"style":550},[780],{"type":50,"value":718},{"type":44,"tag":396,"props":782,"children":784},{"class":398,"line":783},11,[785,790,795],{"type":44,"tag":396,"props":786,"children":787},{"style":550},[788],{"type":50,"value":789},"}",{"type":44,"tag":396,"props":791,"children":792},{"style":539},[793],{"type":50,"value":794},")",{"type":44,"tag":396,"props":796,"children":797},{"style":550},[798],{"type":50,"value":568},{"type":44,"tag":396,"props":800,"children":802},{"class":398,"line":801},12,[803],{"type":44,"tag":396,"props":804,"children":805},{"emptyLinePlaceholder":619},[806],{"type":50,"value":622},{"type":44,"tag":396,"props":808,"children":810},{"class":398,"line":809},13,[811,816,821,826],{"type":44,"tag":396,"props":812,"children":813},{"style":533},[814],{"type":50,"value":815},"export",{"type":44,"tag":396,"props":817,"children":818},{"style":533},[819],{"type":50,"value":820}," default",{"type":44,"tag":396,"props":822,"children":823},{"style":539},[824],{"type":50,"value":825}," StorybookUIRoot",{"type":44,"tag":396,"props":827,"children":828},{"style":550},[829],{"type":50,"value":568},{"type":44,"tag":53,"props":831,"children":832},{},[833,835,840],{"type":50,"value":834},"If the project doesn't have ",{"type":44,"tag":59,"props":836,"children":838},{"className":837},[],[839],{"type":50,"value":558},{"type":50,"value":841},", install it:",{"type":44,"tag":385,"props":843,"children":845},{"className":387,"code":844,"language":389,"meta":390,"style":390},"npm install @react-native-async-storage\u002Fasync-storage\n",[846],{"type":44,"tag":59,"props":847,"children":848},{"__ignoreMap":390},[849],{"type":44,"tag":396,"props":850,"children":851},{"class":398,"line":399},[852,856,861],{"type":44,"tag":396,"props":853,"children":854},{"style":403},[855],{"type":50,"value":107},{"type":44,"tag":396,"props":857,"children":858},{"style":408},[859],{"type":50,"value":860}," install",{"type":44,"tag":396,"props":862,"children":863},{"style":408},[864],{"type":50,"value":865}," @react-native-async-storage\u002Fasync-storage\n",{"type":44,"tag":378,"props":867,"children":869},{"id":868},"_3-update-story-globs-in-maints",[870],{"type":50,"value":871},"3. Update Story Globs in main.ts",{"type":44,"tag":53,"props":873,"children":874},{},[875,877,883,885,891,893,899,900,906,907,913,914,920],{"type":50,"value":876},"The CLI generates a default ",{"type":44,"tag":59,"props":878,"children":880},{"className":879},[],[881],{"type":50,"value":882},"stories",{"type":50,"value":884}," glob in ",{"type":44,"tag":59,"props":886,"children":888},{"className":887},[],[889],{"type":50,"value":890},".rnstorybook\u002Fmain.ts",{"type":50,"value":892},". Keep the existing glob and add an additional entry pointing to where UI components actually live in the project. Look for directories like ",{"type":44,"tag":59,"props":894,"children":896},{"className":895},[],[897],{"type":50,"value":898},"components\u002F",{"type":50,"value":85},{"type":44,"tag":59,"props":901,"children":903},{"className":902},[],[904],{"type":50,"value":905},"src\u002Fcomponents\u002F",{"type":50,"value":85},{"type":44,"tag":59,"props":908,"children":910},{"className":909},[],[911],{"type":50,"value":912},"src\u002F",{"type":50,"value":85},{"type":44,"tag":59,"props":915,"children":917},{"className":916},[],[918],{"type":50,"value":919},"ui\u002F",{"type":50,"value":921},", etc.:",{"type":44,"tag":385,"props":923,"children":927},{"className":924,"code":925,"language":926,"meta":390,"style":390},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F .rnstorybook\u002Fmain.ts\nconst main: StorybookConfig = {\n  stories: [\n    '.\u002Fstories\u002F**\u002F*.stories.?(ts|tsx|js|jsx)', \u002F\u002F example stories from init\n    '..\u002Fsrc\u002Fcomponents\u002F**\u002F*.stories.?(ts|tsx|js|jsx)', \u002F\u002F add based on project structure\n  ],\n  \u002F\u002F ...\n};\n","ts",[928],{"type":44,"tag":59,"props":929,"children":930},{"__ignoreMap":390},[931,939,969,986,1013,1038,1050,1058],{"type":44,"tag":396,"props":932,"children":933},{"class":398,"line":399},[934],{"type":44,"tag":396,"props":935,"children":936},{"style":443},[937],{"type":50,"value":938},"\u002F\u002F .rnstorybook\u002Fmain.ts\n",{"type":44,"tag":396,"props":940,"children":941},{"class":398,"line":439},[942,946,951,955,960,965],{"type":44,"tag":396,"props":943,"children":944},{"style":629},[945],{"type":50,"value":632},{"type":44,"tag":396,"props":947,"children":948},{"style":539},[949],{"type":50,"value":950}," main",{"type":44,"tag":396,"props":952,"children":953},{"style":550},[954],{"type":50,"value":681},{"type":44,"tag":396,"props":956,"children":957},{"style":403},[958],{"type":50,"value":959}," StorybookConfig",{"type":44,"tag":396,"props":961,"children":962},{"style":550},[963],{"type":50,"value":964}," =",{"type":44,"tag":396,"props":966,"children":967},{"style":550},[968],{"type":50,"value":686},{"type":44,"tag":396,"props":970,"children":971},{"class":398,"line":449},[972,977,981],{"type":44,"tag":396,"props":973,"children":974},{"style":673},[975],{"type":50,"value":976},"  stories",{"type":44,"tag":396,"props":978,"children":979},{"style":550},[980],{"type":50,"value":681},{"type":44,"tag":396,"props":982,"children":983},{"style":539},[984],{"type":50,"value":985}," [\n",{"type":44,"tag":396,"props":987,"children":988},{"class":398,"line":615},[989,994,999,1003,1008],{"type":44,"tag":396,"props":990,"children":991},{"style":550},[992],{"type":50,"value":993},"    '",{"type":44,"tag":396,"props":995,"children":996},{"style":408},[997],{"type":50,"value":998},".\u002Fstories\u002F**\u002F*.stories.?(ts|tsx|js|jsx)",{"type":44,"tag":396,"props":1000,"children":1001},{"style":550},[1002],{"type":50,"value":563},{"type":44,"tag":396,"props":1004,"children":1005},{"style":550},[1006],{"type":50,"value":1007},",",{"type":44,"tag":396,"props":1009,"children":1010},{"style":443},[1011],{"type":50,"value":1012}," \u002F\u002F example stories from init\n",{"type":44,"tag":396,"props":1014,"children":1015},{"class":398,"line":625},[1016,1020,1025,1029,1033],{"type":44,"tag":396,"props":1017,"children":1018},{"style":550},[1019],{"type":50,"value":993},{"type":44,"tag":396,"props":1021,"children":1022},{"style":408},[1023],{"type":50,"value":1024},"..\u002Fsrc\u002Fcomponents\u002F**\u002F*.stories.?(ts|tsx|js|jsx)",{"type":44,"tag":396,"props":1026,"children":1027},{"style":550},[1028],{"type":50,"value":563},{"type":44,"tag":396,"props":1030,"children":1031},{"style":550},[1032],{"type":50,"value":1007},{"type":44,"tag":396,"props":1034,"children":1035},{"style":443},[1036],{"type":50,"value":1037}," \u002F\u002F add based on project structure\n",{"type":44,"tag":396,"props":1039,"children":1040},{"class":398,"line":669},[1041,1046],{"type":44,"tag":396,"props":1042,"children":1043},{"style":539},[1044],{"type":50,"value":1045},"  ]",{"type":44,"tag":396,"props":1047,"children":1048},{"style":550},[1049],{"type":50,"value":718},{"type":44,"tag":396,"props":1051,"children":1052},{"class":398,"line":689},[1053],{"type":44,"tag":396,"props":1054,"children":1055},{"style":443},[1056],{"type":50,"value":1057},"  \u002F\u002F ...\n",{"type":44,"tag":396,"props":1059,"children":1060},{"class":398,"line":721},[1061],{"type":44,"tag":396,"props":1062,"children":1063},{"style":550},[1064],{"type":50,"value":1065},"};\n",{"type":44,"tag":378,"props":1067,"children":1069},{"id":1068},"_4-configure-bundler",[1070],{"type":50,"value":1071},"4. Configure Bundler",{"type":44,"tag":53,"props":1073,"children":1074},{},[1075,1077,1083,1085,1091],{"type":50,"value":1076},"For Metro projects, wrap the metro config with ",{"type":44,"tag":59,"props":1078,"children":1080},{"className":1079},[],[1081],{"type":50,"value":1082},"withStorybook",{"type":50,"value":1084},". For Re.Pack projects, add the ",{"type":44,"tag":59,"props":1086,"children":1088},{"className":1087},[],[1089],{"type":50,"value":1090},"StorybookPlugin",{"type":50,"value":1092}," to your rspack\u002Fwebpack config. See the relevant reference file for details.",{"type":44,"tag":378,"props":1094,"children":1096},{"id":1095},"_5-create-entrypoint",[1097],{"type":50,"value":1098},"5. Create Entrypoint",{"type":44,"tag":53,"props":1100,"children":1101},{},[1102],{"type":50,"value":1103},"How Storybook is rendered differs per flow - see the relevant reference file.",{"type":44,"tag":378,"props":1105,"children":1107},{"id":1106},"_6-run",[1108],{"type":50,"value":1109},"6. Run",{"type":44,"tag":385,"props":1111,"children":1113},{"className":387,"code":1112,"language":389,"meta":390,"style":390},"npm run start\nnpm run ios     # or npm run android\n",[1114],{"type":44,"tag":59,"props":1115,"children":1116},{"__ignoreMap":390},[1117,1134],{"type":44,"tag":396,"props":1118,"children":1119},{"class":398,"line":399},[1120,1124,1129],{"type":44,"tag":396,"props":1121,"children":1122},{"style":403},[1123],{"type":50,"value":107},{"type":44,"tag":396,"props":1125,"children":1126},{"style":408},[1127],{"type":50,"value":1128}," run",{"type":44,"tag":396,"props":1130,"children":1131},{"style":408},[1132],{"type":50,"value":1133}," start\n",{"type":44,"tag":396,"props":1135,"children":1136},{"class":398,"line":439},[1137,1141,1145,1150],{"type":44,"tag":396,"props":1138,"children":1139},{"style":403},[1140],{"type":50,"value":107},{"type":44,"tag":396,"props":1142,"children":1143},{"style":408},[1144],{"type":50,"value":1128},{"type":44,"tag":396,"props":1146,"children":1147},{"style":408},[1148],{"type":50,"value":1149}," ios",{"type":44,"tag":396,"props":1151,"children":1152},{"style":443},[1153],{"type":50,"value":1154},"     # or npm run android\n",{"type":44,"tag":269,"props":1156,"children":1158},{"id":1157},"withstorybook-options-metro",[1159],{"type":50,"value":1160},"withStorybook Options (Metro)",{"type":44,"tag":385,"props":1162,"children":1166},{"className":1163,"code":1164,"language":1165,"meta":390,"style":390},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","module.exports = withStorybook(config, {\n  enabled: true, \u002F\u002F Remove Storybook from bundle when false\n  configPath: '.\u002F.rnstorybook', \u002F\u002F Optional and redundant when using the default .\u002F.rnstorybook folder\n  useJs: false, \u002F\u002F Generate .js instead of .ts\n  docTools: true, \u002F\u002F Auto arg extraction\n  liteMode: false, \u002F\u002F Mock default UI deps (use with react-native-ui-lite)\n  websockets: { port: 7007, host: 'localhost' }, \u002F\u002F Remote control\n});\n","js",[1167],{"type":44,"tag":59,"props":1168,"children":1169},{"__ignoreMap":390},[1170,1200,1225,1259,1285,1310,1335,1402],{"type":44,"tag":396,"props":1171,"children":1172},{"class":398,"line":399},[1173,1178,1182,1187,1192,1196],{"type":44,"tag":396,"props":1174,"children":1175},{"style":550},[1176],{"type":50,"value":1177},"module.exports",{"type":44,"tag":396,"props":1179,"children":1180},{"style":550},[1181],{"type":50,"value":964},{"type":44,"tag":396,"props":1183,"children":1184},{"style":653},[1185],{"type":50,"value":1186}," withStorybook",{"type":44,"tag":396,"props":1188,"children":1189},{"style":539},[1190],{"type":50,"value":1191},"(config",{"type":44,"tag":396,"props":1193,"children":1194},{"style":550},[1195],{"type":50,"value":1007},{"type":44,"tag":396,"props":1197,"children":1198},{"style":550},[1199],{"type":50,"value":686},{"type":44,"tag":396,"props":1201,"children":1202},{"class":398,"line":439},[1203,1208,1212,1216,1220],{"type":44,"tag":396,"props":1204,"children":1205},{"style":673},[1206],{"type":50,"value":1207},"  enabled",{"type":44,"tag":396,"props":1209,"children":1210},{"style":550},[1211],{"type":50,"value":681},{"type":44,"tag":396,"props":1213,"children":1214},{"style":773},[1215],{"type":50,"value":776},{"type":44,"tag":396,"props":1217,"children":1218},{"style":550},[1219],{"type":50,"value":1007},{"type":44,"tag":396,"props":1221,"children":1222},{"style":443},[1223],{"type":50,"value":1224}," \u002F\u002F Remove Storybook from bundle when false\n",{"type":44,"tag":396,"props":1226,"children":1227},{"class":398,"line":449},[1228,1233,1237,1241,1246,1250,1254],{"type":44,"tag":396,"props":1229,"children":1230},{"style":673},[1231],{"type":50,"value":1232},"  configPath",{"type":44,"tag":396,"props":1234,"children":1235},{"style":550},[1236],{"type":50,"value":681},{"type":44,"tag":396,"props":1238,"children":1239},{"style":550},[1240],{"type":50,"value":553},{"type":44,"tag":396,"props":1242,"children":1243},{"style":408},[1244],{"type":50,"value":1245},".\u002F.rnstorybook",{"type":44,"tag":396,"props":1247,"children":1248},{"style":550},[1249],{"type":50,"value":563},{"type":44,"tag":396,"props":1251,"children":1252},{"style":550},[1253],{"type":50,"value":1007},{"type":44,"tag":396,"props":1255,"children":1256},{"style":443},[1257],{"type":50,"value":1258}," \u002F\u002F Optional and redundant when using the default .\u002F.rnstorybook folder\n",{"type":44,"tag":396,"props":1260,"children":1261},{"class":398,"line":615},[1262,1267,1271,1276,1280],{"type":44,"tag":396,"props":1263,"children":1264},{"style":673},[1265],{"type":50,"value":1266},"  useJs",{"type":44,"tag":396,"props":1268,"children":1269},{"style":550},[1270],{"type":50,"value":681},{"type":44,"tag":396,"props":1272,"children":1273},{"style":773},[1274],{"type":50,"value":1275}," false",{"type":44,"tag":396,"props":1277,"children":1278},{"style":550},[1279],{"type":50,"value":1007},{"type":44,"tag":396,"props":1281,"children":1282},{"style":443},[1283],{"type":50,"value":1284}," \u002F\u002F Generate .js instead of .ts\n",{"type":44,"tag":396,"props":1286,"children":1287},{"class":398,"line":625},[1288,1293,1297,1301,1305],{"type":44,"tag":396,"props":1289,"children":1290},{"style":673},[1291],{"type":50,"value":1292},"  docTools",{"type":44,"tag":396,"props":1294,"children":1295},{"style":550},[1296],{"type":50,"value":681},{"type":44,"tag":396,"props":1298,"children":1299},{"style":773},[1300],{"type":50,"value":776},{"type":44,"tag":396,"props":1302,"children":1303},{"style":550},[1304],{"type":50,"value":1007},{"type":44,"tag":396,"props":1306,"children":1307},{"style":443},[1308],{"type":50,"value":1309}," \u002F\u002F Auto arg extraction\n",{"type":44,"tag":396,"props":1311,"children":1312},{"class":398,"line":669},[1313,1318,1322,1326,1330],{"type":44,"tag":396,"props":1314,"children":1315},{"style":673},[1316],{"type":50,"value":1317},"  liteMode",{"type":44,"tag":396,"props":1319,"children":1320},{"style":550},[1321],{"type":50,"value":681},{"type":44,"tag":396,"props":1323,"children":1324},{"style":773},[1325],{"type":50,"value":1275},{"type":44,"tag":396,"props":1327,"children":1328},{"style":550},[1329],{"type":50,"value":1007},{"type":44,"tag":396,"props":1331,"children":1332},{"style":443},[1333],{"type":50,"value":1334}," \u002F\u002F Mock default UI deps (use with react-native-ui-lite)\n",{"type":44,"tag":396,"props":1336,"children":1337},{"class":398,"line":689},[1338,1343,1347,1351,1356,1360,1366,1370,1375,1379,1383,1388,1392,1397],{"type":44,"tag":396,"props":1339,"children":1340},{"style":673},[1341],{"type":50,"value":1342},"  websockets",{"type":44,"tag":396,"props":1344,"children":1345},{"style":550},[1346],{"type":50,"value":681},{"type":44,"tag":396,"props":1348,"children":1349},{"style":550},[1350],{"type":50,"value":580},{"type":44,"tag":396,"props":1352,"children":1353},{"style":673},[1354],{"type":50,"value":1355}," port",{"type":44,"tag":396,"props":1357,"children":1358},{"style":550},[1359],{"type":50,"value":681},{"type":44,"tag":396,"props":1361,"children":1363},{"style":1362},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[1364],{"type":50,"value":1365}," 7007",{"type":44,"tag":396,"props":1367,"children":1368},{"style":550},[1369],{"type":50,"value":1007},{"type":44,"tag":396,"props":1371,"children":1372},{"style":673},[1373],{"type":50,"value":1374}," host",{"type":44,"tag":396,"props":1376,"children":1377},{"style":550},[1378],{"type":50,"value":681},{"type":44,"tag":396,"props":1380,"children":1381},{"style":550},[1382],{"type":50,"value":553},{"type":44,"tag":396,"props":1384,"children":1385},{"style":408},[1386],{"type":50,"value":1387},"localhost",{"type":44,"tag":396,"props":1389,"children":1390},{"style":550},[1391],{"type":50,"value":563},{"type":44,"tag":396,"props":1393,"children":1394},{"style":550},[1395],{"type":50,"value":1396}," },",{"type":44,"tag":396,"props":1398,"children":1399},{"style":443},[1400],{"type":50,"value":1401}," \u002F\u002F Remote control\n",{"type":44,"tag":396,"props":1403,"children":1404},{"class":398,"line":721},[1405,1409,1413],{"type":44,"tag":396,"props":1406,"children":1407},{"style":550},[1408],{"type":50,"value":789},{"type":44,"tag":396,"props":1410,"children":1411},{"style":539},[1412],{"type":50,"value":794},{"type":44,"tag":396,"props":1414,"children":1415},{"style":550},[1416],{"type":50,"value":568},{"type":44,"tag":269,"props":1418,"children":1420},{"id":1419},"storybookplugin-options-repack",[1421],{"type":50,"value":1422},"StorybookPlugin Options (Re.Pack)",{"type":44,"tag":385,"props":1424,"children":1426},{"className":1163,"code":1425,"language":1165,"meta":390,"style":390},"new StorybookPlugin({\n  enabled: true, \u002F\u002F Strip Storybook from bundle when false\n  configPath: '.\u002F.rnstorybook', \u002F\u002F Optional and redundant when using the default .\u002F.rnstorybook folder\n  useJs: false, \u002F\u002F Generate .js instead of .ts\n  docTools: true, \u002F\u002F Auto arg extraction\n  liteMode: false, \u002F\u002F Mock default UI deps (use with react-native-ui-lite)\n  websockets: 'auto', \u002F\u002F 'auto' detects LAN IP, or { port: 7007, host: 'localhost' }\n});\n",[1427],{"type":44,"tag":59,"props":1428,"children":1429},{"__ignoreMap":390},[1430,1451,1475,1506,1529,1552,1575,1608],{"type":44,"tag":396,"props":1431,"children":1432},{"class":398,"line":399},[1433,1438,1443,1447],{"type":44,"tag":396,"props":1434,"children":1435},{"style":550},[1436],{"type":50,"value":1437},"new",{"type":44,"tag":396,"props":1439,"children":1440},{"style":653},[1441],{"type":50,"value":1442}," StorybookPlugin",{"type":44,"tag":396,"props":1444,"children":1445},{"style":539},[1446],{"type":50,"value":661},{"type":44,"tag":396,"props":1448,"children":1449},{"style":550},[1450],{"type":50,"value":666},{"type":44,"tag":396,"props":1452,"children":1453},{"class":398,"line":439},[1454,1458,1462,1466,1470],{"type":44,"tag":396,"props":1455,"children":1456},{"style":673},[1457],{"type":50,"value":1207},{"type":44,"tag":396,"props":1459,"children":1460},{"style":550},[1461],{"type":50,"value":681},{"type":44,"tag":396,"props":1463,"children":1464},{"style":773},[1465],{"type":50,"value":776},{"type":44,"tag":396,"props":1467,"children":1468},{"style":550},[1469],{"type":50,"value":1007},{"type":44,"tag":396,"props":1471,"children":1472},{"style":443},[1473],{"type":50,"value":1474}," \u002F\u002F Strip Storybook from bundle when false\n",{"type":44,"tag":396,"props":1476,"children":1477},{"class":398,"line":449},[1478,1482,1486,1490,1494,1498,1502],{"type":44,"tag":396,"props":1479,"children":1480},{"style":673},[1481],{"type":50,"value":1232},{"type":44,"tag":396,"props":1483,"children":1484},{"style":550},[1485],{"type":50,"value":681},{"type":44,"tag":396,"props":1487,"children":1488},{"style":550},[1489],{"type":50,"value":553},{"type":44,"tag":396,"props":1491,"children":1492},{"style":408},[1493],{"type":50,"value":1245},{"type":44,"tag":396,"props":1495,"children":1496},{"style":550},[1497],{"type":50,"value":563},{"type":44,"tag":396,"props":1499,"children":1500},{"style":550},[1501],{"type":50,"value":1007},{"type":44,"tag":396,"props":1503,"children":1504},{"style":443},[1505],{"type":50,"value":1258},{"type":44,"tag":396,"props":1507,"children":1508},{"class":398,"line":615},[1509,1513,1517,1521,1525],{"type":44,"tag":396,"props":1510,"children":1511},{"style":673},[1512],{"type":50,"value":1266},{"type":44,"tag":396,"props":1514,"children":1515},{"style":550},[1516],{"type":50,"value":681},{"type":44,"tag":396,"props":1518,"children":1519},{"style":773},[1520],{"type":50,"value":1275},{"type":44,"tag":396,"props":1522,"children":1523},{"style":550},[1524],{"type":50,"value":1007},{"type":44,"tag":396,"props":1526,"children":1527},{"style":443},[1528],{"type":50,"value":1284},{"type":44,"tag":396,"props":1530,"children":1531},{"class":398,"line":625},[1532,1536,1540,1544,1548],{"type":44,"tag":396,"props":1533,"children":1534},{"style":673},[1535],{"type":50,"value":1292},{"type":44,"tag":396,"props":1537,"children":1538},{"style":550},[1539],{"type":50,"value":681},{"type":44,"tag":396,"props":1541,"children":1542},{"style":773},[1543],{"type":50,"value":776},{"type":44,"tag":396,"props":1545,"children":1546},{"style":550},[1547],{"type":50,"value":1007},{"type":44,"tag":396,"props":1549,"children":1550},{"style":443},[1551],{"type":50,"value":1309},{"type":44,"tag":396,"props":1553,"children":1554},{"class":398,"line":669},[1555,1559,1563,1567,1571],{"type":44,"tag":396,"props":1556,"children":1557},{"style":673},[1558],{"type":50,"value":1317},{"type":44,"tag":396,"props":1560,"children":1561},{"style":550},[1562],{"type":50,"value":681},{"type":44,"tag":396,"props":1564,"children":1565},{"style":773},[1566],{"type":50,"value":1275},{"type":44,"tag":396,"props":1568,"children":1569},{"style":550},[1570],{"type":50,"value":1007},{"type":44,"tag":396,"props":1572,"children":1573},{"style":443},[1574],{"type":50,"value":1334},{"type":44,"tag":396,"props":1576,"children":1577},{"class":398,"line":689},[1578,1582,1586,1590,1595,1599,1603],{"type":44,"tag":396,"props":1579,"children":1580},{"style":673},[1581],{"type":50,"value":1342},{"type":44,"tag":396,"props":1583,"children":1584},{"style":550},[1585],{"type":50,"value":681},{"type":44,"tag":396,"props":1587,"children":1588},{"style":550},[1589],{"type":50,"value":553},{"type":44,"tag":396,"props":1591,"children":1592},{"style":408},[1593],{"type":50,"value":1594},"auto",{"type":44,"tag":396,"props":1596,"children":1597},{"style":550},[1598],{"type":50,"value":563},{"type":44,"tag":396,"props":1600,"children":1601},{"style":550},[1602],{"type":50,"value":1007},{"type":44,"tag":396,"props":1604,"children":1605},{"style":443},[1606],{"type":50,"value":1607}," \u002F\u002F 'auto' detects LAN IP, or { port: 7007, host: 'localhost' }\n",{"type":44,"tag":396,"props":1609,"children":1610},{"class":398,"line":721},[1611,1615,1619],{"type":44,"tag":396,"props":1612,"children":1613},{"style":550},[1614],{"type":50,"value":789},{"type":44,"tag":396,"props":1616,"children":1617},{"style":539},[1618],{"type":50,"value":794},{"type":44,"tag":396,"props":1620,"children":1621},{"style":550},[1622],{"type":50,"value":568},{"type":44,"tag":1624,"props":1625,"children":1626},"style",{},[1627],{"type":50,"value":1628},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":1630,"total":449},[1631,1638,1650],{"slug":4,"name":4,"fn":5,"description":6,"org":1632,"tags":1633,"stars":26,"repoUrl":27,"updatedAt":28},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1634,1635,1636,1637],{"name":18,"slug":19,"type":16},{"name":14,"slug":15,"type":16},{"name":24,"slug":25,"type":16},{"name":21,"slug":22,"type":16},{"slug":1639,"name":1639,"fn":1640,"description":1641,"org":1642,"tags":1643,"stars":26,"repoUrl":27,"updatedAt":1649},"upgrading-react-native-storybook","upgrade React Native Storybook versions","Incrementally upgrade React Native Storybook across the supported migration paths. Use when upgrading `@storybook\u002Freact-native` projects from 5.3.x to 6.5.x, 6.5.x to 7.6.x, 7.6.x to 8.3.x, 8.x to 9.x, or 9.x to 10.x. Detect the currently installed Storybook version, choose only the next migration step, update dependencies and config, regenerate `storybook.requires`, convert remaining `storiesOf` stories to CSF during the `6.5.x -> 7.6.x` upgrade, and stop after a single version hop instead of jumping multiple major versions at once.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1644,1647,1648],{"name":1645,"slug":1646,"type":16},"Migration","migration",{"name":14,"slug":15,"type":16},{"name":21,"slug":22,"type":16},"2026-07-16T06:00:45.492255",{"slug":1651,"name":1651,"fn":1652,"description":1653,"org":1654,"tags":1655,"stars":26,"repoUrl":27,"updatedAt":1662},"writing-react-native-storybook-stories","write React Native Storybook stories","Create and edit React Native Storybook stories using Component Story Format (CSF). Use when writing .stories.tsx files, adding stories to React Native components, configuring Storybook addons (controls, actions, backgrounds, notes), setting up argTypes, decorators, parameters, or working with portable stories for testing. Applies to any task involving @storybook\u002Freact-native story authoring.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1656,1659,1660,1661],{"name":1657,"slug":1658,"type":16},"Documentation","documentation",{"name":14,"slug":15,"type":16},{"name":24,"slug":25,"type":16},{"name":21,"slug":22,"type":16},"2026-07-16T05:59:13.908569",{"items":1664,"total":689},[1665,1672,1678,1685,1703,1715,1725],{"slug":4,"name":4,"fn":5,"description":6,"org":1666,"tags":1667,"stars":26,"repoUrl":27,"updatedAt":28},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1668,1669,1670,1671],{"name":18,"slug":19,"type":16},{"name":14,"slug":15,"type":16},{"name":24,"slug":25,"type":16},{"name":21,"slug":22,"type":16},{"slug":1639,"name":1639,"fn":1640,"description":1641,"org":1673,"tags":1674,"stars":26,"repoUrl":27,"updatedAt":1649},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1675,1676,1677],{"name":1645,"slug":1646,"type":16},{"name":14,"slug":15,"type":16},{"name":21,"slug":22,"type":16},{"slug":1651,"name":1651,"fn":1652,"description":1653,"org":1679,"tags":1680,"stars":26,"repoUrl":27,"updatedAt":1662},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1681,1682,1683,1684],{"name":1657,"slug":1658,"type":16},{"name":14,"slug":15,"type":16},{"name":24,"slug":25,"type":16},{"name":21,"slug":22,"type":16},{"slug":882,"name":882,"fn":1686,"description":1687,"org":1688,"tags":1689,"stars":1700,"repoUrl":1701,"updatedAt":1702},"manage UI components and design tokens","Invoke FIRST, before creating, editing, or deleting components, stories, styles, CSS, themes, colors, or design tokens — anything that changes how the UI looks, no exceptions. Also for starting or previewing Storybook to verify UI, requests to show, browse, or list components, stories, or UI states, and docs, props, or usage lookups.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1690,1693,1696,1699],{"name":1691,"slug":1692,"type":16},"CSS","css",{"name":1694,"slug":1695,"type":16},"Design","design",{"name":1697,"slug":1698,"type":16},"Themes","themes",{"name":21,"slug":22,"type":16},262,"https:\u002F\u002Fgithub.com\u002Fstorybookjs\u002Fmcp","2026-07-16T05:59:14.246482",{"slug":1704,"name":1704,"fn":1705,"description":1706,"org":1707,"tags":1708,"stars":1700,"repoUrl":1701,"updatedAt":1714},"storybook-init","initialize Storybook in new projects","Use when adding Storybook to a project that does not have Storybook configured yet.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1709,1712,1713],{"name":1710,"slug":1711,"type":16},"Configuration","configuration",{"name":24,"slug":25,"type":16},{"name":21,"slug":22,"type":16},"2026-07-16T06:00:45.823925",{"slug":1716,"name":1716,"fn":1717,"description":1718,"org":1719,"tags":1720,"stars":1700,"repoUrl":1701,"updatedAt":1724},"storybook-setup","configure Storybook preview and stories","Use this skill when Storybook is already installed and the user wants a working `preview` file and stories for real components.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1721,1722,1723],{"name":1710,"slug":1711,"type":16},{"name":24,"slug":25,"type":16},{"name":21,"slug":22,"type":16},"2026-07-16T05:59:14.581999",{"slug":1726,"name":1726,"fn":1727,"description":1728,"org":1729,"tags":1730,"stars":1700,"repoUrl":1701,"updatedAt":1734},"storybook-upgrade","upgrade existing Storybook installations","Use this skill when Storybook exists but needs an upgrade.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[1731,1732,1733],{"name":1710,"slug":1711,"type":16},{"name":1645,"slug":1646,"type":16},{"name":21,"slug":22,"type":16},"2026-07-16T05:59:14.927035"]