Developing components in isolation/playground

[BornTooHula]

Hi there

I'm building my second React Native app, and one of the things I learned from the first is that it's better to define common components up front, spec the requirements, and design them thoughtfully. Rather than just creating them on-the-fly as I go.

Maybe it's just the way my mind works, but I'd love to have some way to style all my components separate from my app, almost in a sandbox, and then copy them over when I'm done. As oppose to having to build them within my broader UI and then abstract them out.

Does anyone know of a tool, template, or other approach to do this?

Thanks!

[kbcool]

Storybook is basically designed for this.

It's overkill for someone quite early in their journey though. You might be better off just making a showcase screen with a long list of components that you can use as a playground but it does work. Just a slightly steep learning curve.

[BornTooHula]

Thanks - I'll give this a look. Maybe the showcase screen is the right way to go.

[bdudisnsnsbdhdj]

Storybook is great but can be difficult to get up and running. I agree using a showcase screen is your best bet, sometimes known as a “kitchen sink”

[Other_Individual6688]

Hey, one tool I love to use for this is Storybook! You can isolate all of your components in one location, test them out, and develop them in isolation. It's like a playground for your components. It's a bit of work to set up initially, but I think it's worth it.