React native Storybook 6.0

[dannyhw]

Is your feature request related to a problem? Please describe.

Update react native storybook with the new api changes from storybook 6.0 and improvements.

Describe the solution you'd like

• [x] csf support
• [x] main.js/preview.js config style supported
  • [x] support for importing stories automatically
• [x] args
• [x] controls instead of knobs
• [ ] Improved docs and tutorial
• [ ] review the way the server works and maybe make it an addon
• [ ] Improved typescript support (would be nice)
• [ ] tests (at least unit tests)
• [ ] developer experience improvements for contributors

6.0 bug fixes :

• [x] remove deprecated components in favour of community components such as datetime picker (fixes react-native-web issues)

Additional context

Please use this issue for discussion on 6.0 such as suggestions or questions about its development.

[ivan-khr85]

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

[dannyhw]

@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]

@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]

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

[dannyhw]

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]

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

[dannyhw]

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]

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]

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]

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]

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]

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]

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

[dannyhw]

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.

[ramykl]

Any updates on this?

[dannyhw]

@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]

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

[dannyhw]

@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]

@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]

@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]

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]

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]

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

[alex1092]

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

[dannyhw]

@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]

Heres an interesting issue to pick up for you @alex1092

https://github.com/storybookjs/react-native/issues/377

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

[dannyhw]

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]

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

[dannyhw]

more details to come soon :)

Thanks everyone for your support, its been a journey.

[dannyhw]

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