Storybook with React Native on Web and Native Android / iOS components

Imagine to define a React UI component that render on the Web Browser in a progressive web app (PWA) or as a Native component on Android or iOS.

This is already possible thanks to React Native Web, it is an Abstraction that supports almost all the React Native features on Web, it also means that you can't use plain CSS to style your UI because Native UI on Android / iOS don't use it.

Another issue is that Web HTML components and Native UI are rendered in different ways so it's very important to frequently test the changes among the different environments and Storybook helps a lot.

What Will I Learn?

• How to test React Native agnostic components
• Some consideration about the current ecosystem and Storybook

Requirements

To follow this tutorial you need this software

• Ubuntu Linux LTS (or another operative system with NodeJS)
• NPM/yarn packagereact-native-web and storybook
• Expo app installed on Android or iOS

Difficulty

• Intermediate

Tutorial Contents

• What is Storybook and why is important to test component is isolation?
• Storybook 4 + React Native Web on Web and Native
• Your first agnostic web component

What is Storybook and why is important to test components in isolation?

Clients want results for their apps, but unfortunatly the more features you add the more it becames harder to debug and to find bugs.

The proper way to maintain software developers mental health, current features, the future improvements, is to build and UI toolkit or at least a catalog with critical UI components in isolation. That means, you can just focus on a component at time without wasting time navigating the app again and again, for every change you make.

Storybook is a tool to do that, the developers can see it as a way to "visual test" the UI component in isolation and the graphic designer can see it as a live catalog of components.

Storybook 4 + React Native Web on Web and Native

The current situation is in evolution. The latest Storybook 5 supports React only, while Storybook 4 supports React and React Native. The easiest way to test Storybook React Native on Web and Native is via react-native-hybrid-storybook but it supports only Storybook 3..

Long story short.. Kiwi built an internal boilerplate that allows to you to just concentrate on your react components. That means maybe You'll have to move your components in future, but there is already a separation between your agnostic components code and the magic needed to render the components in Web, Android and iOS.

Your first agnostic web component

Download the boilerplate Kiwi/Margarita.

git clone https://github.com/kiwicom/margarita status-components-sandbox

I know it's huge, but your code will live just in a specific directory inside packages/, lets say packages/status-components.

yarn
cd packages/status-components

Good. Now You have all the dependencies installed, and you can start to develop you Hello World component, an agnostic button.

It seems just a boring button but the magic here is that Btn will use react-native on Android/iOS and react-native-web when it will be rendered in the web browser.

This is the Storybook part, You design some use cases or configurations that are worth to visual test. Storybook is thery powerful, it also allow the designers or non-coders people to stress test it with different input data or scenarios. Just have a look to the Storybook documentation.
You can visual test the component inside other components and with different widths, in this simple scenario I've just added some margin because on Android the UI do not have it and the simple and advanced use case.

Finally, with commands below, you can see your component on the Web Browser and with the smartphone on your hands. You need Expo app installled on your smartphone to read the QRCode and render React Native.

yarn storybook        # web (react-native-web)
yarn storybook:mobile # native (react-native via expo)

All the code is available here https://github.com/grigio/status-components-sandbox

Conclusion

Finally You have a working environment to test or show your components that permits to manage the software development complexity. You just change a line of code to see the results on the Web and on the Smartphone!
Designers, can just change some configurations to see if the new color or sizes break the project.. without interrupt the developers :D

The true: Write once, Run everywhere !

Curriculum

• DIY Your Home Cloud with Docker / docker-compose ecosystem
• 🖥 How to restore Monero private keys from Ledger Nano S wallet or Coinomi