Storybook — React Native, React, Angular, Vue

3 min readJun 6, 2021

Storybook | Design Reusable Component | Share Component

Hello Experts, We all use Reusable Components in our applications OR we develop custom components that are frequently used at multiple places and keep that logic separate, so whenever we change on business logic it will be reflected everywhere where it is used. What happens if I say show me the component you developed, you need to import/implement it in one component and run the application, correct? Is there any way I can see all Reusable Components in one place, I can play with it, change various props and validate it? Yes it’s there.

What is a Storybook?

Storybook allows developers to write Story (Custom Component), Run Story, Play with various properties, Validate it without running actual application and without importing in any component. Storybook makes developer life more simple, developers can play with all Story (Custom Component) from one place — that’s called Storybook. Storybook integrates with most popular JavaScript UI frameworks like React, React Native, Angular, Vue and supports a server-rendered component framework such as Ruby on Rails.

What is a Story?

Story captures the rendered state of a UI Component. Developers can write multiple stories per component. Stories are written in COmponent Story Format (CSF) an ES6 modules based standard — for writing components.

Storybook Features —

Isolated component development
Deliver robust UIs
Addons to power up your workflow
Consistent user experience
Unit test components
Share & Reuse component

Installations —

Execute this command from within the root of your react native app:

npx -p @storybook/cli sb init — type react_native

You’ll be prompted asking if you want to install @storybook/react-native-server, you can safely choose not to install this now since you can add it later and it’s not required.

Run Storybook —

# Starts Storybook in development mode

npm run storybook

Writing Stories —

Create Task Component

Create TaskStories

Configuration

Render All | Specific Storie

AddOns —

Knobs —

npm i — save @storybook/addon-ondevice-knobs

Allow developers to adjust components props in real time.

Actions —

npm i — save @storybook/addon-ondevice-actions

Developer can verify onPress calls with actions that will log information in the actions tab.

Notes —

npm i — save @storybook/addon-ondevice-notes

Allow developers to add some markdown to your stories to help document their usage.

Background —

npm i — save @storybook/addon-ondevice-backgrounds

Allows developer to change the background of storybook to compare the look of your component against different backgrounds.

ToDo Application Step By Step — React Js —

React Native Apollo GraphQL

Discover Apollo Client | State Management Library Local & Remote Data With GraphQL | Fetch, Cache, Update Data | Step…

kpiteng.medium.com

React Hooks

Step By Step Integration Of React Hooks — useState, useEffect, useRef, useMemo, useCallback