Create global control shared by all stories
Nobody has claimed this yet.
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 25/100
- Issue type
- Feature
- Clarity
- Needs clarification
- Activity status
- Stale
- Tech stack
- react-native, typescript
- Domain
- mobile
Research direction
Start by reviewing the global args and global types documentation linked in the issue, then inspect how preview.js is handled in Storybook React Native 6.5.6. Compare the React behavior with the React Native implementation and define what support for a shared, story-updatable ThemeProvider control would require. Done means the supported configuration is documented and covered by an appropriate example or test.
Written by the indexing model from the issue text.
Description
Is your feature request related to a problem? Please describe.
We have a global decorator that wraps all the stories with a "ThemeProvider" wrapper, something like this:
export const decorators = [
(Story) => (
<ThemeProvider theme={"light"}>
<Story />
</ThemeProvider>
),
];
The problem is that I can't find a way to provide control or anything to update the theme from each story.
Describe the solution you'd like
I would want to be able to provide args, argTypes, or anything to the global decorator that allows me to update this theme prop for every story.
Describe alternatives you've considered
-
I've looked into storybook documentation for React that allows us to define
argsat the global level inpreview.js, but this does not seem to work with storybook version of react-native
https://storybook.js.org/docs/6.5/react/writing-stories/args#global-args -
Also according to the React storybook documentation, we are able to specify "global types" in our toolbar, but seems like this addon is not supported in storybook react-native
https://storybook.js.org/docs/6.5/react/essentials/toolbars-and-globals#globals
Are you able to assist bring the feature to reality?
no
Additional context
For context, I'm on storybook 6.5.6
- Dominant language
- TypeScript
- Stars
- 1.3k
- Forks
- 184
- Avg merge
- 21m
- Merged PRs (30d)
- 3
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from storybookjs/react-native
-
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
storybookjs/react-native#924 ·
-
On-device Controls stop working after Fast Refresh: "cannot render when canvasElement is unset" Open
Difficulty 4/5 3-5 days Newbie friendliness 52/100
storybookjs/react-native#925 · 1 comment ·
-
Difficulty 4/5 3-5 days Newbie friendliness 52/100
storybookjs/react-native#923 ·
-
Story tags Open
Difficulty 4/5 3-5 days Newbie friendliness 30/100
storybookjs/react-native#866 · 1 comment ·
-
Difficulty 3/5 1-2 days Newbie friendliness 28/100
storybookjs/react-native#780 · 1 reaction ·
All issues in storybookjs/react-native
Similar issues
-
clawsweeper:fix-shape-clear clawsweeper:queueable-fix clawsweeper:source-repro impact:ux-friction issue-rating: 🦞 diamond lobster no-stale P3
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Difficulty 1/5 Under an hour Newbie friendliness 76/100
-
code-quality refactoring
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
github/gh-aw-firewall#8816 ·
-
integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
langchain-ai/deepagents#6450 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 88/100
vercel/react-tweet#225 ·