React native Storybook 6.5 #131

dannyhw · 2020-11-12T14:25:43Z

ivan-khr85 · 2021-03-19T14:15:41Z

Please, add support for React v17.0 and React-Native v0.64

dannyhw · 2021-03-19T16:41:41Z

@ivan-khr85 hey, yeah I haven't had a chance to check this however I don't see any reason it wouldn't work. I will update the examples to 0.64 when I get a chance and check it out.

Did you already try it and had issues or something?

pang0018 · 2021-03-26T20:09:16Z

@dannyhw One issue I am running into is thatReact-Native 0.64 uses the the latest of @testing-library/jest-native which breaks Storyshots (see thread. Getting React Native storybook to version 6.x should resolve the issue.

dannyhw · 2021-05-11T18:47:34Z

For more information please see the comments I made in this PR #135

dannyhw · 2021-05-11T20:09:33Z

Tasks have been split into smaller parts that are tracked in the 6.0 project here
#164 auto import stories
#166 update version of repo to 6.0
#167 update storybook dependencies
#168 update react native to 0.64.1 and react to 17
#169 update dependencies for ondevice addons
#170 add react-native-web example

dannyhw · 2021-05-31T12:16:26Z

CSF Support and ARGs are now complete with #175 being merged

dannyhw · 2021-07-12T21:22:36Z

The first basic iteration of ondevice controls was added with #182 along with more of the declarative config features.
The first alpha of 6.0 will be created once the issues in the first milestone are completed https://github.com/storybookjs/react-native/milestone/1

dannyhw · 2021-07-18T17:43:59Z

Now that all the issues in the first milestone have been completed I have released the first alpha.

I've also created an initial guide on how you can get setup with a fresh project. Migration guide to come in the future.

Find the guide here:
https://github.com/storybookjs/react-native/blob/next-6.0/v6README.md

trajano · 2021-09-06T23:10:50Z

Can you make the list a checklist style

[ ] e.g.
[x] so it looks nicer.

Also can you add the following to the list?
[ ] migration guide

dannyhw · 2021-09-06T23:37:10Z

Can you make the list a checklist style

[ ] e.g.
[x] so it looks nicer.

Also can you add the following to the list?
[ ] migration guide

Sure if that's useful I can update it like that 👍

avertin · 2021-11-16T21:19:26Z

With version 6, how do you embed storybook inside an existing RN application? Where should the main.js, preview.js and storybook.require.js files go?

dannyhw · 2021-11-16T23:43:19Z

With version 6, how do you embed storybook inside an existing RN application? Where should the main.js, preview.js and storybook.require.js files go?

@avertin That all works basically the same, the only difference is that the folder is now .storybook by default (added a .) . You still get a component returned from a getStorybookUI function call.

xiongemi · 2021-11-22T17:36:19Z

when is the official 6.0 going to be released? would it be using webpack 5?

dannyhw · 2021-11-22T19:37:51Z

when is the official 6.0 going to be released? would it be using webpack 5?

react native storybook doesn't use webpack so I don't know if that would matter much.

In regards to react-native 6.0 release date
I would love to give a timeline but it's hard because it depends a lot on my free time. It will come out when it's ready, hopefully early next year. I'm likely going to be without a computer in December so that will delay things a bit.

From DevDep tree - @storybook/[email protected] - @storybook/[email protected] - [email protected] Resolve: GHSA-w8qv-6jwh-64r5 May be worth considering/including in - storybookjs/react-native#131 - https://github.com/storybookjs/react-native/projects/2#card-68690945

From DevDep tree (similar to 5bc69b5) - @storybook/[email protected] - @storybook/[email protected] - [email protected] Resolve: GHSA-5q6m-3h65-w53x May be worth considering/including again in - storybookjs/react-native#131 - https://github.com/storybookjs/react-native/projects/2#card-68690945

ramykl · 2022-04-23T20:51:46Z

Any updates on this?

dannyhw · 2022-04-24T12:18:39Z

@ramykl

Any updates on this?

Currently working on getting 6.4 storybook dependencies working. Once that's done probably the first stable version will not be far off. I'm leaning on the side of releasing asap and adding other missing features over time.

nicolascgarcia · 2022-05-25T20:16:01Z

Hi, I would like to know if is there any date setted to release the new stable version?

dannyhw · 2022-05-28T09:41:59Z

@nicolascgarcia i would love to release a version but currently I'm at a bit of a blocker.

In order to support 6.4 and 6.5 versions of storybook a large rewrite of internals is necessary. A lot of that work is done but I've run into some problems which need help from other maintainers and so I've pairing on it a bit but its hard to organise.

Its hard to say because I don't have a lot of free time and external factors are involved. I plan to release the stable version as soon as it works with 6.4/6.5 and has been tested.

trajano · 2022-05-28T18:21:42Z

@dannyhw I think what you have at the moment is good as an interim release so we can baseline and add 6.4/6.5 versions later. As the saying goes, "Don’t Let “Perfect” Be the Enemy of “Good"

dannyhw · 2022-06-29T20:22:47Z

@trajano sorry for the late response here. I appreciate the encouragement and the sentiment here. There are a few things close to coming to fruition that i wanted to wait on. However I'm becoming more likely to ship as time goes on.

I had some positive talks recently with some core storybook maintainers that made it seem like progress is imminent which is something i need to follow up on again essentially.

I know this has been a really drawn out update so I appreciate the patience and I understand those questions about a release date. It's on my mind a lot so I promise its going to happen sooner or later.

dannyhw · 2023-02-22T12:55:06Z

Update

new version will be 6.5.14 not 6.0, this is because new changes were needed in storybook to make react native work and that was introduced in 6.5.14 and therefore you must use a minimum of storybook version 6.5.14.
Compatibility with 6.5+ however means 6.4 and below won't work without patches.
I've now written a new tutorial for v6.5 and its under review
new sb init command with v6.5 support
server support has been added for v6.5
experimental support for auto arg types

New release is pending tutorial approval, documentation updates and a blog post for the release.

Thanks to everyone for your patience, a lot of weekends and late nights have gone into this release and whilst it taken longer than anyone wanted (me included), we're finally getting there.

dannyhw · 2023-02-22T13:00:39Z

A note on v7:

As you may know v7 of storybook (web) is coming out soon, and whilst that might seem to be an issue for React Native I'm actually hopeful that we can get a V7 out in the coming months. The reason is that in the recent changes for 6.5 support a lot of changes were made that make React Native more compatible with ReactJS Storybook, even re-using a lot of the setup code (preview-web). I don't want to make premature promises, but I think we'll see a v7 within a reasonable time frame.

V7 will be a big release because it will likely solve other issues we've had such as polyfills polluting the global namespace (corejs promises I'm looking at you) and on demand story loading could be a possibility.

The difficult part will be getting react native to work with storystore v7 since the old store is deprecated. However I know a few people that can help me get that done so I'm hopeful.

stevoland · 2023-02-23T07:47:38Z

Thanks again for your massive efforts. v6 is a banger!

alex1092 · 2023-03-03T13:31:15Z

@dannyhw If you need some help with any specific tests hit me up, be glad to look into it

dannyhw · 2023-03-03T13:37:32Z

@alex1092

v6 (6.5) is ready I'm just getting the release blog and tutorial reviewed whats left is basically updating the template projects, starter projects and documentation.

For example migration guide and also double checking all the github documentation. Seems like we'll get the bottom panel for addons in too

I still need to update these templates

~~https://github.com/dannyhw/react-native-template-storybook~~
~~https://github.com/dannyhw/react-native-storybook-starter~~
~~https://github.com/dannyhw/expo-storybook-starter~~
~~https://github.com/dannyhw/expo-template-storybook~~

There is also all the documentation on this repo that needs double checking to make sure its up to date for 6.5

The migration guide is the next big documentation step I think

dannyhw · 2023-03-04T18:36:50Z

Heres an interesting issue to pick up for you @alex1092

#377

Basically having an error boundary to show an error message instead of crashing.

dannyhw · 2023-03-04T23:46:52Z

I've updated expo templates now and the migration guide. I also tried to update a few more pieces of documentation. Any proof reading very appreciated 🙏

dannyhw · 2023-03-11T19:50:16Z

React native cli templates are updated, and release is planned for April 5th if all goes well.

dannyhw · 2023-03-29T12:16:12Z

more details to come soon :)

Thanks everyone for your support, its been a journey.

dannyhw · 2023-03-29T15:04:30Z

https://storybook.js.org/blog/storybook-for-react-native-6-5/

douglasjunior · 2023-03-30T13:32:52Z

I'm trying the storybook 6 right now, but I'm getting these errors: storybookjs/storybook#15067

TypeError: (tag.text || "").trim is not a function

Maybe related to type inheritance like this:

export type CustomTextProps = TextProps & {
    /// ...
};

My project was created by npx react-native init StoryBook6Example --template react-native-template-storybook.

EDIT:

Fixing this version on my package.json solves the issue: styleguidist/react-docgen-typescript#356 (comment)

  "resolutions": {
    "react-docgen-typescript": "2.2.2"
  }

dannyhw · 2023-03-30T14:23:00Z

@douglasjunior hey thanks for sharing your solution. Yes the docgen stuff can have some issues with extending types from libraries. If you have more problems you can also just remove the docgen and manually set your argtypes since docgen for react native storybook is somewhat experimental

douglasjunior · 2023-03-30T14:36:27Z

@dannyhw seems that the source of the problem is the babel-plugin-react-docgen-typescript that depends on react-docgen-typescript 1.x.

The last version of babel-plugin-react-docgen-typescript was about 3 years ago.

dannyhw · 2023-03-30T17:48:37Z

@douglasjunior yeah this is why its kinda experimental because the real solution would require developing a new babel plugin or converting the webpack plugin that core storybook uses to work somehow with metro.

dannyhw added the 6.5 label Nov 12, 2020

dannyhw mentioned this issue Nov 16, 2020

tech: upgrade to 6.0 (part 1) #135

Merged

dannyhw added the in progress label Nov 16, 2020

dannyhw pinned this issue May 11, 2021

dannyhw closed this as completed Mar 29, 2023

dannyhw changed the title ~~React native Storybook 6.0~~ React native Storybook 6.5 Mar 29, 2023

dannyhw unpinned this issue Jul 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React native Storybook 6.5 #131

React native Storybook 6.5 #131

dannyhw commented Nov 12, 2020 •

edited

ivan-khr85 commented Mar 19, 2021

dannyhw commented Mar 19, 2021

pang0018 commented Mar 26, 2021

dannyhw commented May 11, 2021 •

edited

dannyhw commented May 11, 2021

dannyhw commented May 31, 2021

dannyhw commented Jul 12, 2021

dannyhw commented Jul 18, 2021

trajano commented Sep 6, 2021

dannyhw commented Sep 6, 2021

avertin commented Nov 16, 2021

dannyhw commented Nov 16, 2021 •

edited

xiongemi commented Nov 22, 2021

dannyhw commented Nov 22, 2021 •

edited

ramykl commented Apr 23, 2022

dannyhw commented Apr 24, 2022

nicolascgarcia commented May 25, 2022

dannyhw commented May 28, 2022

trajano commented May 28, 2022

dannyhw commented Jun 29, 2022 •

edited

dannyhw commented Feb 22, 2023

dannyhw commented Feb 22, 2023 •

edited

stevoland commented Feb 23, 2023

alex1092 commented Mar 3, 2023

dannyhw commented Mar 3, 2023 •

edited

dannyhw commented Mar 4, 2023 •

edited

dannyhw commented Mar 4, 2023

dannyhw commented Mar 11, 2023

dannyhw commented Mar 29, 2023

dannyhw commented Mar 29, 2023

douglasjunior commented Mar 30, 2023 •

edited

dannyhw commented Mar 30, 2023

douglasjunior commented Mar 30, 2023 •

edited

dannyhw commented Mar 30, 2023

React native Storybook 6.5 #131

React native Storybook 6.5 #131

Comments

dannyhw commented Nov 12, 2020 • edited

ivan-khr85 commented Mar 19, 2021

dannyhw commented Mar 19, 2021

pang0018 commented Mar 26, 2021

dannyhw commented May 11, 2021 • edited

dannyhw commented May 11, 2021

dannyhw commented May 31, 2021

dannyhw commented Jul 12, 2021

dannyhw commented Jul 18, 2021

trajano commented Sep 6, 2021

dannyhw commented Sep 6, 2021

avertin commented Nov 16, 2021

dannyhw commented Nov 16, 2021 • edited

xiongemi commented Nov 22, 2021

dannyhw commented Nov 22, 2021 • edited

ramykl commented Apr 23, 2022

dannyhw commented Apr 24, 2022

nicolascgarcia commented May 25, 2022

dannyhw commented May 28, 2022

trajano commented May 28, 2022

dannyhw commented Jun 29, 2022 • edited

dannyhw commented Feb 22, 2023

dannyhw commented Feb 22, 2023 • edited

stevoland commented Feb 23, 2023

alex1092 commented Mar 3, 2023

dannyhw commented Mar 3, 2023 • edited

dannyhw commented Mar 4, 2023 • edited

dannyhw commented Mar 4, 2023

dannyhw commented Mar 11, 2023

dannyhw commented Mar 29, 2023

dannyhw commented Mar 29, 2023

douglasjunior commented Mar 30, 2023 • edited

dannyhw commented Mar 30, 2023

douglasjunior commented Mar 30, 2023 • edited

dannyhw commented Mar 30, 2023

dannyhw commented Nov 12, 2020 •

edited

dannyhw commented May 11, 2021 •

edited

dannyhw commented Nov 16, 2021 •

edited

dannyhw commented Nov 22, 2021 •

edited

dannyhw commented Jun 29, 2022 •

edited

dannyhw commented Feb 22, 2023 •

edited

dannyhw commented Mar 3, 2023 •

edited

dannyhw commented Mar 4, 2023 •

edited

douglasjunior commented Mar 30, 2023 •

edited

douglasjunior commented Mar 30, 2023 •

edited