[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-storybook-upgrading-react-native-storybook":3,"mdc--epnqme-key":36,"related-org-storybook-upgrading-react-native-storybook":421,"related-repo-storybook-upgrading-react-native-storybook":508},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":12,"stars":23,"repoUrl":24,"updatedAt":25,"license":26,"forks":27,"topics":28,"repo":31,"sourceUrl":34,"mdContent":35},"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},"storybook","Storybook","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fstorybook.png","storybookjs",[13,17,20],{"name":14,"slug":15,"type":16},"React Native","react-native","tag",{"name":18,"slug":19,"type":16},"Migration","migration",{"name":21,"slug":22,"type":16},"UI Components","ui-components",1304,"https:\u002F\u002Fgithub.com\u002Fstorybookjs\u002Freact-native","2026-07-16T06:00:45.492255",null,184,[29,30,15,8],"expo","react",{"repoUrl":24,"stars":23,"forks":27,"topics":32,"description":33},[29,30,15,8],"📓 Storybook for React Native!","https:\u002F\u002Fgithub.com\u002Fstorybookjs\u002Freact-native\u002Ftree\u002FHEAD\u002Fskills\u002Fupgrading-react-native-storybook","---\nname: upgrading-react-native-storybook\ndescription: 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.\n---\n\n# React Native Storybook Upgrades\n\nUpgrade one supported version step at a time. Do not jump from an older major directly to the latest release in a single pass.\n\n## Rules\n\n- Detect the project's package manager first and use it consistently.\n- Detect the currently installed Storybook version from `package.json`, lockfiles, and config files before editing anything.\n- Apply exactly one migration step per run. If a project is multiple versions behind, complete the next hop, verify it, and then report the next required hop.\n- During the `6.5.x -> 7.6.x` step, convert any remaining `storiesOf` stories to CSF instead of preserving compatibility mode.\n- Preserve the project's existing app structure. Only make the migration changes required for the current step.\n\n## Version Detection\n\nLook at these signals together:\n\n- `package.json` versions for `@storybook\u002Freact-native`, `storybook`, `@storybook\u002Freact`, and `@storybook\u002Faddon-ondevice-*`\n- Whether the config folder is `.storybook\u002F` or `.rnstorybook\u002F`\n- Metro config imports such as `metro\u002FwithStorybook`, `metro\u002FwithStorybookConfig`, or default-vs-named `withStorybook`\n- Story format usage: CSF vs `storiesOf`\n- Generated file names such as `storybook.requires.js` vs `storybook.requires.ts`\n\nIf the version is ambiguous, stop and clarify the current installed version instead of guessing.\n\n## Migration Selection\n\nUse exactly one reference file:\n\n1. `9.x -> 10.x`: [references\u002Ffrom-9-to-10.md](references\u002Ffrom-9-to-10.md)\n2. `8.x -> 9.x`: [references\u002Ffrom-8-to-9.md](references\u002Ffrom-8-to-9.md)\n3. `7.6.x -> 8.3.x`: [references\u002Ffrom-7-6-to-8-3.md](references\u002Ffrom-7-6-to-8-3.md)\n4. `6.5.x -> 7.6.x`: [references\u002Ffrom-6-5-to-7-6.md](references\u002Ffrom-6-5-to-7-6.md)\n5. `5.3.x -> 6.5.x`: [references\u002Ffrom-5-3-to-6-5.md](references\u002Ffrom-5-3-to-6-5.md)\n\n## Workflow\n\n1. Confirm the current Storybook version and whether the repo uses Expo, Expo Router, React Native CLI, or Re.Pack.\n2. Pick the next migration step only. Never bundle multiple major upgrades together.\n3. Apply the dependency, config, and source-file changes from the matching reference.\n4. Regenerate `storybook.requires` or restart Metro when that step requires it.\n5. Run the smallest useful verification available for the repo, such as the generation script, tests, lint, or the local Storybook app launch path.\n6. If the repo still is not on the user's target version, stop with a clear note describing the next required migration step.\n\n## Output Expectations\n\nWhen you finish a migration step, report:\n\n- The version hop that was completed\n- The files and config surfaces that changed\n- The verification you ran, or what you could not run\n- The next required migration hop, if the project is still behind\n",{"data":37,"body":38},{"name":4,"description":6},{"type":39,"children":40},"root",[41,50,56,63,118,124,129,244,249,255,260,340,346,387,393,398],{"type":42,"tag":43,"props":44,"children":46},"element","h1",{"id":45},"react-native-storybook-upgrades",[47],{"type":48,"value":49},"text","React Native Storybook Upgrades",{"type":42,"tag":51,"props":52,"children":53},"p",{},[54],{"type":48,"value":55},"Upgrade one supported version step at a time. Do not jump from an older major directly to the latest release in a single pass.",{"type":42,"tag":57,"props":58,"children":60},"h2",{"id":59},"rules",[61],{"type":48,"value":62},"Rules",{"type":42,"tag":64,"props":65,"children":66},"ul",{},[67,73,87,92,113],{"type":42,"tag":68,"props":69,"children":70},"li",{},[71],{"type":48,"value":72},"Detect the project's package manager first and use it consistently.",{"type":42,"tag":68,"props":74,"children":75},{},[76,78,85],{"type":48,"value":77},"Detect the currently installed Storybook version from ",{"type":42,"tag":79,"props":80,"children":82},"code",{"className":81},[],[83],{"type":48,"value":84},"package.json",{"type":48,"value":86},", lockfiles, and config files before editing anything.",{"type":42,"tag":68,"props":88,"children":89},{},[90],{"type":48,"value":91},"Apply exactly one migration step per run. If a project is multiple versions behind, complete the next hop, verify it, and then report the next required hop.",{"type":42,"tag":68,"props":93,"children":94},{},[95,97,103,105,111],{"type":48,"value":96},"During the ",{"type":42,"tag":79,"props":98,"children":100},{"className":99},[],[101],{"type":48,"value":102},"6.5.x -> 7.6.x",{"type":48,"value":104}," step, convert any remaining ",{"type":42,"tag":79,"props":106,"children":108},{"className":107},[],[109],{"type":48,"value":110},"storiesOf",{"type":48,"value":112}," stories to CSF instead of preserving compatibility mode.",{"type":42,"tag":68,"props":114,"children":115},{},[116],{"type":48,"value":117},"Preserve the project's existing app structure. Only make the migration changes required for the current step.",{"type":42,"tag":57,"props":119,"children":121},{"id":120},"version-detection",[122],{"type":48,"value":123},"Version Detection",{"type":42,"tag":51,"props":125,"children":126},{},[127],{"type":48,"value":128},"Look at these signals together:",{"type":42,"tag":64,"props":130,"children":131},{},[132,170,189,215,225],{"type":42,"tag":68,"props":133,"children":134},{},[135,140,142,148,150,155,156,162,164],{"type":42,"tag":79,"props":136,"children":138},{"className":137},[],[139],{"type":48,"value":84},{"type":48,"value":141}," versions for ",{"type":42,"tag":79,"props":143,"children":145},{"className":144},[],[146],{"type":48,"value":147},"@storybook\u002Freact-native",{"type":48,"value":149},", ",{"type":42,"tag":79,"props":151,"children":153},{"className":152},[],[154],{"type":48,"value":8},{"type":48,"value":149},{"type":42,"tag":79,"props":157,"children":159},{"className":158},[],[160],{"type":48,"value":161},"@storybook\u002Freact",{"type":48,"value":163},", and ",{"type":42,"tag":79,"props":165,"children":167},{"className":166},[],[168],{"type":48,"value":169},"@storybook\u002Faddon-ondevice-*",{"type":42,"tag":68,"props":171,"children":172},{},[173,175,181,183],{"type":48,"value":174},"Whether the config folder is ",{"type":42,"tag":79,"props":176,"children":178},{"className":177},[],[179],{"type":48,"value":180},".storybook\u002F",{"type":48,"value":182}," or ",{"type":42,"tag":79,"props":184,"children":186},{"className":185},[],[187],{"type":48,"value":188},".rnstorybook\u002F",{"type":42,"tag":68,"props":190,"children":191},{},[192,194,200,201,207,209],{"type":48,"value":193},"Metro config imports such as ",{"type":42,"tag":79,"props":195,"children":197},{"className":196},[],[198],{"type":48,"value":199},"metro\u002FwithStorybook",{"type":48,"value":149},{"type":42,"tag":79,"props":202,"children":204},{"className":203},[],[205],{"type":48,"value":206},"metro\u002FwithStorybookConfig",{"type":48,"value":208},", or default-vs-named ",{"type":42,"tag":79,"props":210,"children":212},{"className":211},[],[213],{"type":48,"value":214},"withStorybook",{"type":42,"tag":68,"props":216,"children":217},{},[218,220],{"type":48,"value":219},"Story format usage: CSF vs ",{"type":42,"tag":79,"props":221,"children":223},{"className":222},[],[224],{"type":48,"value":110},{"type":42,"tag":68,"props":226,"children":227},{},[228,230,236,238],{"type":48,"value":229},"Generated file names such as ",{"type":42,"tag":79,"props":231,"children":233},{"className":232},[],[234],{"type":48,"value":235},"storybook.requires.js",{"type":48,"value":237}," vs ",{"type":42,"tag":79,"props":239,"children":241},{"className":240},[],[242],{"type":48,"value":243},"storybook.requires.ts",{"type":42,"tag":51,"props":245,"children":246},{},[247],{"type":48,"value":248},"If the version is ambiguous, stop and clarify the current installed version instead of guessing.",{"type":42,"tag":57,"props":250,"children":252},{"id":251},"migration-selection",[253],{"type":48,"value":254},"Migration Selection",{"type":42,"tag":51,"props":256,"children":257},{},[258],{"type":48,"value":259},"Use exactly one reference file:",{"type":42,"tag":261,"props":262,"children":263},"ol",{},[264,281,296,311,325],{"type":42,"tag":68,"props":265,"children":266},{},[267,273,275],{"type":42,"tag":79,"props":268,"children":270},{"className":269},[],[271],{"type":48,"value":272},"9.x -> 10.x",{"type":48,"value":274},": ",{"type":42,"tag":276,"props":277,"children":279},"a",{"href":278},"references\u002Ffrom-9-to-10.md",[280],{"type":48,"value":278},{"type":42,"tag":68,"props":282,"children":283},{},[284,290,291],{"type":42,"tag":79,"props":285,"children":287},{"className":286},[],[288],{"type":48,"value":289},"8.x -> 9.x",{"type":48,"value":274},{"type":42,"tag":276,"props":292,"children":294},{"href":293},"references\u002Ffrom-8-to-9.md",[295],{"type":48,"value":293},{"type":42,"tag":68,"props":297,"children":298},{},[299,305,306],{"type":42,"tag":79,"props":300,"children":302},{"className":301},[],[303],{"type":48,"value":304},"7.6.x -> 8.3.x",{"type":48,"value":274},{"type":42,"tag":276,"props":307,"children":309},{"href":308},"references\u002Ffrom-7-6-to-8-3.md",[310],{"type":48,"value":308},{"type":42,"tag":68,"props":312,"children":313},{},[314,319,320],{"type":42,"tag":79,"props":315,"children":317},{"className":316},[],[318],{"type":48,"value":102},{"type":48,"value":274},{"type":42,"tag":276,"props":321,"children":323},{"href":322},"references\u002Ffrom-6-5-to-7-6.md",[324],{"type":48,"value":322},{"type":42,"tag":68,"props":326,"children":327},{},[328,334,335],{"type":42,"tag":79,"props":329,"children":331},{"className":330},[],[332],{"type":48,"value":333},"5.3.x -> 6.5.x",{"type":48,"value":274},{"type":42,"tag":276,"props":336,"children":338},{"href":337},"references\u002Ffrom-5-3-to-6-5.md",[339],{"type":48,"value":337},{"type":42,"tag":57,"props":341,"children":343},{"id":342},"workflow",[344],{"type":48,"value":345},"Workflow",{"type":42,"tag":261,"props":347,"children":348},{},[349,354,359,364,377,382],{"type":42,"tag":68,"props":350,"children":351},{},[352],{"type":48,"value":353},"Confirm the current Storybook version and whether the repo uses Expo, Expo Router, React Native CLI, or Re.Pack.",{"type":42,"tag":68,"props":355,"children":356},{},[357],{"type":48,"value":358},"Pick the next migration step only. Never bundle multiple major upgrades together.",{"type":42,"tag":68,"props":360,"children":361},{},[362],{"type":48,"value":363},"Apply the dependency, config, and source-file changes from the matching reference.",{"type":42,"tag":68,"props":365,"children":366},{},[367,369,375],{"type":48,"value":368},"Regenerate ",{"type":42,"tag":79,"props":370,"children":372},{"className":371},[],[373],{"type":48,"value":374},"storybook.requires",{"type":48,"value":376}," or restart Metro when that step requires it.",{"type":42,"tag":68,"props":378,"children":379},{},[380],{"type":48,"value":381},"Run the smallest useful verification available for the repo, such as the generation script, tests, lint, or the local Storybook app launch path.",{"type":42,"tag":68,"props":383,"children":384},{},[385],{"type":48,"value":386},"If the repo still is not on the user's target version, stop with a clear note describing the next required migration step.",{"type":42,"tag":57,"props":388,"children":390},{"id":389},"output-expectations",[391],{"type":48,"value":392},"Output Expectations",{"type":42,"tag":51,"props":394,"children":395},{},[396],{"type":48,"value":397},"When you finish a migration step, report:",{"type":42,"tag":64,"props":399,"children":400},{},[401,406,411,416],{"type":42,"tag":68,"props":402,"children":403},{},[404],{"type":48,"value":405},"The version hop that was completed",{"type":42,"tag":68,"props":407,"children":408},{},[409],{"type":48,"value":410},"The files and config surfaces that changed",{"type":42,"tag":68,"props":412,"children":413},{},[414],{"type":48,"value":415},"The verification you ran, or what you could not run",{"type":42,"tag":68,"props":417,"children":418},{},[419],{"type":48,"value":420},"The next required migration hop, if the project is still behind",{"items":422,"total":507},[423,437,443,456,475,487,497],{"slug":424,"name":424,"fn":425,"description":426,"org":427,"tags":428,"stars":23,"repoUrl":24,"updatedAt":436},"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},[429,431,432,435],{"name":430,"slug":29,"type":16},"Expo",{"name":14,"slug":15,"type":16},{"name":433,"slug":434,"type":16},"Testing","testing",{"name":21,"slug":22,"type":16},"2026-07-16T05:59:11.855468",{"slug":4,"name":4,"fn":5,"description":6,"org":438,"tags":439,"stars":23,"repoUrl":24,"updatedAt":25},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[440,441,442],{"name":18,"slug":19,"type":16},{"name":14,"slug":15,"type":16},{"name":21,"slug":22,"type":16},{"slug":444,"name":444,"fn":445,"description":446,"org":447,"tags":448,"stars":23,"repoUrl":24,"updatedAt":455},"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},[449,452,453,454],{"name":450,"slug":451,"type":16},"Documentation","documentation",{"name":14,"slug":15,"type":16},{"name":433,"slug":434,"type":16},{"name":21,"slug":22,"type":16},"2026-07-16T05:59:13.908569",{"slug":457,"name":457,"fn":458,"description":459,"org":460,"tags":461,"stars":472,"repoUrl":473,"updatedAt":474},"stories","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},[462,465,468,471],{"name":463,"slug":464,"type":16},"CSS","css",{"name":466,"slug":467,"type":16},"Design","design",{"name":469,"slug":470,"type":16},"Themes","themes",{"name":21,"slug":22,"type":16},262,"https:\u002F\u002Fgithub.com\u002Fstorybookjs\u002Fmcp","2026-07-16T05:59:14.246482",{"slug":476,"name":476,"fn":477,"description":478,"org":479,"tags":480,"stars":472,"repoUrl":473,"updatedAt":486},"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},[481,484,485],{"name":482,"slug":483,"type":16},"Configuration","configuration",{"name":433,"slug":434,"type":16},{"name":21,"slug":22,"type":16},"2026-07-16T06:00:45.823925",{"slug":488,"name":488,"fn":489,"description":490,"org":491,"tags":492,"stars":472,"repoUrl":473,"updatedAt":496},"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},[493,494,495],{"name":482,"slug":483,"type":16},{"name":433,"slug":434,"type":16},{"name":21,"slug":22,"type":16},"2026-07-16T05:59:14.581999",{"slug":498,"name":498,"fn":499,"description":500,"org":501,"tags":502,"stars":472,"repoUrl":473,"updatedAt":506},"storybook-upgrade","upgrade existing Storybook installations","Use this skill when Storybook exists but needs an upgrade.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[503,504,505],{"name":482,"slug":483,"type":16},{"name":18,"slug":19,"type":16},{"name":21,"slug":22,"type":16},"2026-07-16T05:59:14.927035",7,{"items":509,"total":530},[510,517,523],{"slug":424,"name":424,"fn":425,"description":426,"org":511,"tags":512,"stars":23,"repoUrl":24,"updatedAt":436},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[513,514,515,516],{"name":430,"slug":29,"type":16},{"name":14,"slug":15,"type":16},{"name":433,"slug":434,"type":16},{"name":21,"slug":22,"type":16},{"slug":4,"name":4,"fn":5,"description":6,"org":518,"tags":519,"stars":23,"repoUrl":24,"updatedAt":25},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[520,521,522],{"name":18,"slug":19,"type":16},{"name":14,"slug":15,"type":16},{"name":21,"slug":22,"type":16},{"slug":444,"name":444,"fn":445,"description":446,"org":524,"tags":525,"stars":23,"repoUrl":24,"updatedAt":455},{"slug":8,"name":9,"logoUrl":10,"githubOrg":11},[526,527,528,529],{"name":450,"slug":451,"type":16},{"name":14,"slug":15,"type":16},{"name":433,"slug":434,"type":16},{"name":21,"slug":22,"type":16},3]