Setting up Storybook in React Native and Creating a Component

Introduction

In this blog, we are going to understand how to set up a storybook react native in the application. We are also going to understand what exactly a storybook is and why we should use it in a react project. Let’s first understand what a storybook is exactly used for.

While component-based UI libraries like React simplify web development they also introduce new complexities like testing and debugging.

Storybook react native enables developers to build UI components in isolation using independent building blocks. With Storybook you can quickly create User Interface components using your favorite framework while also providing a decluttered interface to work on each component.

What is a Storybook?

Storybook react native is a development environment for UI components that enables you to create and showcase components in an environment outside your main application. This allows you to work on one module at a time and develop entire UIs without the need for a complex dev stack. Storybook also enables you to document, reuse, and test user interface components. In addition to that, it makes building web applications faster and more efficient.

Related read: Storybook React Native Integration: Boosting App Development and Documentation

Should You Use a Storybook with React?

Yes, we should use storybook react native in React because it provides a better approach to creating a component. It also provides plenty of benefits for developers like,

• Simplifies component building
• Prevents you from duplicating efforts
• Creates a living style guide
• Builds a component in isolation

How to Set Up Storybook and Build a Component?

So let’s see how to set up Storybook React Native in our React application step by step,

🔸 The first step is to create our react application using the command:

 npx create-next-app <your-app-name>

🔸 Then we can open our application in an editor or the terminal just type:

cd nextjs-<your-app-name>

🔸 Then we will install the storybook in our application by typing the following command in the terminal:

npx sb init

🔸 After installing the storybook let’s make sure that all the required dependencies are installed by running:

npm install

🔸 Running Storybook locally:

npm run storybook

Once the command has successfully run, a working version of Storybook should start running at http://localhost:6006/.

The folder structure should look somewhat like what we have shown in the above image components can be created in the component folder and in the stories folder which was created while installing the storybook React Native in the application we can create story files for the components with the extension .stories.jsx in which we can create stories in these files.

In the components folder let’s create a file named ‘Button.jsx’ and add the following code in the file.

PropTypes are also objects with a key and a value pair where the ‘key’ is the name of the prop while the value represents the type or class by which they are defined.

DefaultProps are default values for our title which will automatically be rendered if the title has not been passed as a prop from our parent component.

Next, we will add styles in the CSS file in which we will add all the styling that needs to be tested on the component. In the example shown below, we have created a default style and styles for Primary, Secondary, Small, Medium, and Large buttons respectively.

Then we will create a story file in the stories folder with the extension ‘.stories.jsx’ in which we will:

• Import button component, and writing a story for the button format is called the component story format.
• It has one default export and one or more name exports.
• In Default export title is mandatory and it should be unique in the entire project. This tile is displayed on the left side of the storybook’s navigation panel.
• Every named export in this file represents a story.
• The menu item is created as a button title in the storybook for each of the named exports.
• We can check how our component looks in different variations.

The stories file that we have created will look like this:

Then run the command:

npm run storybook or yarn run storybook

When you run the command ‘yarn storybook’, the Command goes to the main.js file to check the pattern and pick up the appropriate stories. We have such file button.stories.js, then it picks up that file. Here the code reads the default export and adds an entry in the side navigation, and then it picks up named exports and renders actual components.

Advantages

• Easy access to all components
• Ease of sharing and reusing components, stories
• Increased chance of catching all edge cases
• Highly improved communication between developers and designers
• Improved code quality
• Smart debuggingBetter documentation