Restyle and Storybook for React Native
Restyle
Restyle enables us to centralize a theme object and consume it in type-enforced components. It lets us apply a design system as prescribed by our design team.
Basic Components
Restyle gives us Box and Text components which essentially act as wrappers around native View and Text react native UI elements, but apply our typed theme object to it. Defining global elements such as
- typography
- textVariants
- responsive design/padding
- spacing
- colors
- palette, colorVariants
- custom variants for custom components
- i.e. buttonVariants, cardVariants etc
(image here)
These components will utilize eslint/VSCode’s intellisense to suggest prop values when keying in theme props for a component
Benefits/Trade-offs
There are many CSS-in-JS libs that work well with react-native (styled components, emotion, styled-system etc). Restyle is heavily inspired by styled-system/rebass philosophy, but only covers mobile, not web, and has better overall TS support. Although styled-components has more widespread adoption, usage, and therefore tutorials available online, in my opinion there is not a singular approach to theming, component variations, style overriding etc, so there end up being many patterns to solve the same problem in UI library development in applications that adopt and utilize styled components. Restyle is more flexible, and allows us to define our own variants as we create either new components or new variations on pre-existing components.
Storybook
Storybook is a powerful documentation tool, enabling us to catalog all of our own component creations. Its component viewer is interactive and now includes some out-of-the-box integrations that let us edit prop values directly in the simulator to see how our components handle prop variations.
(image of button variations in RN simulator)
Storybook UI
In this screenshot, we can see the modified <BaseButton/> with two button color variations visible, (primary is default, purple button, secondary is grey button (ignore incorrect labeling)
Simulator Screen Shot - iPhone 13 - 2022-09-12 at 11.20.09.png
In the addons sections, we can edit these props and see how changing the title or color prop will re-render and update the button appearance in the Preview pane accordingly. The Navigator allows us to browse all the stories we have created and added to our living documentation viewer.
Component Driven Development
At first glance, storybook may just seem like a cataloging tool for our own UI work, but its true power is in creating a react component playground. The storybook interface encourages to developers to think about developing components in isolation; any new fundamental component expected to be reused with many variations throughout the app, should be written as Pure UI Component What are Pure Components in React | by Mayank Gupta | TechnoFunnel | Medium
In order to render a component that fully functions in storybook it will have to have functions as props and not rely on local state from parent components to provide methods/data to it. One of the best advantages I've found personally with using it is editing components that may be deeply nested in the applications navigation. When editing in storybook, we dont have to click all over our app to view our dev changes, and can receive immediate feedback and therefore iterate faster. This approach also encourages components to be developed in a more unit-testing friendly manner.
