React Native Storybook Boilerplate

Overview

The react-native-storybook-boilerplate is a development setup designed to kickstart the development of a UI library for React Native. It allows developers to transpile React Native components through the react-native-web project, making it easier to display them on the web. The boilerplate includes two different setups of Storybook: one for React Native and one for React. This allows for parallel development and testing of components for both platforms.

Features

• React Native + Storybook: Set up React Native and Storybook using the npx react-native init command and installing the necessary dependencies.
• React + Storybook: Set up React from scratch, configure Babel and Webpack, and alias React Native with react-native-web.
• Installation of additional packages: Install packages such as styled-components and configure them to work for both React Native and React.
• Custom webpack configuration for Storybook: Configure the custom webpack in the .storybook/main.js file to use the alias configuration from the webpack.config.js file.
• Support for writing stories for React Native: Add an alias where @storybook/react-native resolves to @storybook/react

Installation

To install the react-native-storybook-boilerplate, follow these steps:

1. Clone the repository using the following command:

git clone [repository_url]

2. Install the necessary dependencies for React Native by running the following command in the root folder:

npm install

3. To set up React Native and Storybook, run the React Native Storybook Developer Server using the command:

npm run storybook:rn

4. To run Storybook on either an iOS simulator or an Android emulator, use one of the following commands:

npm run storybook:ios
npm run storybook:android

5. To set up React and run Storybook as a separate entity, use the following command:

npm run storybook:react

6. To run Storybook on the web using React Native Web, run the Storybook Web Developer Server with the command:

npm run storybook:web

Summary

The react-native-storybook-boilerplate provides a comprehensive development setup for building UI libraries for React Native. It offers parallel development and testing for both React Native and React platforms, allowing developers to easily transpile React Native components for display on the web. With features such as customized webpack configuration and support for writing stories for React Native, this boilerplate greatly simplifies the process of creating and showcasing UI components.