CODEWITHSUNDEEP
react-nativestorybook
dan_boy
dan_boy

Reputation: 2019

How to create a nested storybook structure in react-native?

We are working with Storybook in our React Native project and were wondering how to organize our components since nested structures are not supported. From the web application, we are used to creating individual components and building our "pages" from them. We have been aiming for a similar workflow for the React Native application, but are having trouble implementing it. Target is a structure like that:

Components
--Buttons
----Button 1
----Button 2
--Input Fields
----Input Field 1
----Input Field 2

Pages
-- Page 1
----Sub Page 1
----Sub Page 2
-- Page 2
...

Upvotes: 2

Views: 1299

Answers (1)

Danny
Danny

Reputation: 1010

as you mentioned this feature isn't yet implemented. However you can to some degree group things together by making them part of the same story.

For example if you used

storiesOf("Buttons").add("button1")

You can also do

storiesOf("Buttons").add("button2")

In another file and since the stories of is the same they will be grouped under Buttons.

However having a third level of nesting is not really doable currently. You could Start all page stories like

storiesOf("Pages/Page1").add("SubPage1")

storiesOf("Pages/Page2").add("SubPage1")

And then they should be appear together whenever you search Page for example.

I realise its not ideal but I have it in the backlog to add this feature to the project. Once 6.0 is ready the aim is to introduce the grouping feature as an enhancement for the first milestone after the initial release. So 6.1 probably is what I'm hoping for.

Upvotes: 3

Related Questions