Skip to content

CLI: Fix react native template not copying in init#33308

Merged
valentinpalkovic merged 1 commit into
storybookjs:nextfrom
dannyhw:dannyhw/fix/react-native-template-not-copied
Dec 9, 2025
Merged

CLI: Fix react native template not copying in init#33308
valentinpalkovic merged 1 commit into
storybookjs:nextfrom
dannyhw:dannyhw/fix/react-native-template-not-copied

Conversation

@dannyhw
Copy link
Copy Markdown
Member

@dannyhw dannyhw commented Dec 8, 2025 •
edited by coderabbitai Bot
Loading

fixes: #33307

What I did

Added @storybook/react-native to the rendererPackages mapping in get-storybook-info.ts.

The React Native template files were not being copied during create-storybook initialization because @storybook/react-native was missing from the rendererPackages map. This caused getRendererDir() to return null when looking up the react-native renderer, which meant copyTemplateFiles() silently skipped copying the template files.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

  1. Create a new React Native project
  2. Run npx storybook@next init
  3. Verify that the .rnstorybook folder is created with template files

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Checklist for Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

  • Make sure this PR contains one of the labels below:

    Available labels
    • bug: Internal changes that fixes incorrect behavior.
    • maintenance: User-facing maintenance tasks.
    • dependencies: Upgrading (sometimes downgrading) dependencies.
    • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
    • cleanup: Minor cleanup style change. Will not show up in release changelog.
    • documentation: Documentation only changes. Will not show up in release changelog.
    • feature request: Introducing a new feature.
    • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
    • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

  • New Features
    • Added support for React Native Storybook renderer package detection and configuration.

✏️ Tip: You can customize this high-level summary in your review settings.

@nx-cloud
Copy link
Copy Markdown

nx-cloud Bot commented Dec 8, 2025 •
edited
Loading

View your CI Pipeline Execution ↗ for commit 50ee2cc

☁️ Nx Cloud last updated this comment at 2025-12-09 05:30:59 UTC

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Dec 8, 2025

📝 Walkthrough

Walkthrough

Adds a new mapping entry to the rendererPackages object associating the '@storybook/react-native' package with the SupportedRenderer.REACT_NATIVE enum value to support detection of the React Native renderer.

Changes

Cohort / File(s) Change Summary
React Native renderer mapping
code/core/src/common/utils/get-storybook-info.ts		 Adds '@storybook/react-native': SupportedRenderer.REACT_NATIVE entry to the rendererPackages mapping object for renderer detection.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related issues

✨ Finishing touches
  • 📝 Generate docstrings

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot]
coderabbitai Bot reviewed Dec 8, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (1)
code/core/src/common/utils/get-storybook-info.ts (1)

22-37: React Native renderer mapping is correct and consistent

The new '@storybook/react-native': SupportedRenderer.REACT_NATIVE entry matches the existing renderer mapping pattern and should unblock reverse lookups for the React Native renderer (e.g., for template copying). No issues from a typing or style perspective.

As a follow‑up, consider adding a small unit/integration test that exercises getStorybookInfo for a React Native setup to ensure rendererPackage resolves to @storybook/react-native and to prevent regressions in the create-storybook RN flow.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9548e92 and 50ee2cc.

📒 Files selected for processing (1)
  • code/core/src/common/utils/get-storybook-info.ts (1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use ESLint and Prettier configurations that are enforced in the codebase

Files:

  • code/core/src/common/utils/get-storybook-info.ts
**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Enable TypeScript strict mode

Files:

  • code/core/src/common/utils/get-storybook-info.ts
code/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

code/**/*.{ts,tsx,js,jsx,mjs}: Use server-side logger from 'storybook/internal/node-logger' for Node.js code
Use client-side logger from 'storybook/internal/client-logger' for browser code
Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

  • code/core/src/common/utils/get-storybook-info.ts
code/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Export functions that need to be tested from their modules

Files:

  • code/core/src/common/utils/get-storybook-info.ts
code/**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

code/**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier with --write flag to format code before committing
Run ESLint with yarn lint:js:cmd to check for linting issues and fix errors before committing

Files:

  • code/core/src/common/utils/get-storybook-info.ts
🧠 Learnings (1)
📚 Learning: 2025-11-05T09:38:47.712Z 
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Applied to files:

  • code/core/src/common/utils/get-storybook-info.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: normal
  • GitHub Check: Core Unit Tests, windows-latest

@shilman shilman changed the title React Native: Fix react native template not copying in create cli CLI: Fix react native template not copying in init Dec 9, 2025
@valentinpalkovic valentinpalkovic added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Dec 9, 2025
@valentinpalkovic valentinpalkovic merged commit 91d158e into storybookjs:next Dec 9, 2025
69 of 87 checks passed
This was referenced Dec 9, 2025
Merged
Merged
@storybook-app-bot
Copy link
Copy Markdown

storybook-app-bot Bot commented Dec 9, 2025

Package Benchmarks

Commit: 50ee2cc, ran on 9 December 2025 at 05:41:55 UTC

The following packages have significant changes to their size or dependencies:

@storybook/builder-webpack5

Before After Difference
Dependency count 191 191 0
Self size 75 KB 75 KB 🚨 +48 B 🚨
Dependency size 32.21 MB 32.18 MB 🎉 -23 KB 🎉
Bundle Size Analyzer Link Link

@storybook/angular

Before After Difference
Dependency count 191 191 0
Self size 118 KB 118 KB 🎉 -48 B 🎉
Dependency size 30.33 MB 30.30 MB 🎉 -23 KB 🎉
Bundle Size Analyzer Link Link

@storybook/ember

Before After Difference
Dependency count 195 195 0
Self size 15 KB 15 KB 0 B
Dependency size 28.93 MB 28.91 MB 🎉 -23 KB 🎉
Bundle Size Analyzer Link Link

@storybook/nextjs

Before After Difference
Dependency count 537 537 0
Self size 645 KB 645 KB 🎉 -120 B 🎉
Dependency size 59.14 MB 59.12 MB 🎉 -23 KB 🎉
Bundle Size Analyzer Link Link

@storybook/nextjs-vite

Before After Difference
Dependency count 128 128 0
Self size 1.12 MB 1.12 MB 0 B
Dependency size 21.98 MB 21.96 MB 🎉 -23 KB 🎉
Bundle Size Analyzer Link Link

@storybook/react-native-web-vite

Before After Difference
Dependency count 160 160 0
Self size 30 KB 30 KB 🚨 +18 B 🚨
Dependency size 23.16 MB 23.14 MB 🎉 -23 KB 🎉
Bundle Size Analyzer Link Link

@storybook/react-vite

Before After Difference
Dependency count 118 118 0
Self size 35 KB 35 KB 🚨 +18 B 🚨
Dependency size 19.78 MB 19.75 MB 🎉 -24 KB 🎉
Bundle Size Analyzer Link Link

@storybook/react-webpack5

Before After Difference
Dependency count 277 277 0
Self size 24 KB 24 KB 🚨 +12 B 🚨
Dependency size 44.09 MB 44.07 MB 🎉 -23 KB 🎉
Bundle Size Analyzer Link Link

@storybook/server-webpack5

Before After Difference
Dependency count 203 203 0
Self size 16 KB 16 KB 0 B
Dependency size 33.46 MB 33.44 MB 🎉 -23 KB 🎉
Bundle Size Analyzer Link Link

@storybook/cli

Before After Difference
Dependency count 173 173 0
Self size 774 KB 774 KB 0 B
Dependency size 67.62 MB 67.60 MB 🎉 -23 KB 🎉
Bundle Size Analyzer Link Link

@storybook/codemod

Before After Difference
Dependency count 166 166 0
Self size 30 KB 30 KB 0 B
Dependency size 66.19 MB 66.17 MB 🎉 -23 KB 🎉
Bundle Size Analyzer Link Link

@storybook/preset-react-webpack

Before After Difference
Dependency count 170 170 0
Self size 18 KB 18 KB 🎉 -24 B 🎉
Dependency size 31.33 MB 31.31 MB 🎉 -23 KB 🎉
Bundle Size Analyzer Link Link

@storybook/react

Before After Difference
Dependency count 57 57 0
Self size 716 KB 716 KB 0 B
Dependency size 12.93 MB 12.90 MB 🎉 -23 KB 🎉
Bundle Size Analyzer Link Link

valentinpalkovic added a commit that referenced this pull request Dec 9, 2025
@valentinpalkovic @storybook-bot
Merge pull request #33308 from dannyhw/dannyhw/fix/react-native-templ…
e337f8c 
…ate-not-copied

CLI: Fix react native template not copying in init
(cherry picked from commit 91d158e)
@github-actions github-actions Bot added the patch:done Patch/release PRs already cherry-picked to main/release branch label Dec 9, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] left review comments

@valentinpalkovic valentinpalkovic valentinpalkovic approved these changes

Assignees

@valentinpalkovic valentinpalkovic

Labels

bug ci:normal cli patch:done Patch/release PRs already cherry-picked to main/release branch patch:yes Bugfix & documentation PR that need to be picked to main branch react-native

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Bug]: in 10.1 the init cli no longer applies react native template correctly

3 participants

@dannyhw @valentinpalkovic @shilman