Setup StoryBook with ReactNativeWeb Typescript Project

3 min readMay 17, 2020

In this article I use react react-native-web and typescript to create a react native web project and it also uses storybook for development of stories of your components.

Setup React project along with typescript

now lets create few folders to have components, create src folder for components and typings folder for our type declarations /src and /typings.

inside src folder make index.tsx for registration of our App Component and a components folder add the following snippet. index.tsx will be entrypoint of our web project.

import { AppRegistry } from 'react-native';
import App from './App'AppRegistry.registerComponent('App', () => App);
AppRegistry.runApplication('App', { rootTag: document.getElementById('root') });

lets create tsconfig.json file in root directory of our project

now will add webpack configuration for our project in root.

lets complete aur setup by adding public folder with index.html inside it.

add contents in index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=”utf-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
<meta name=”theme-color” content=”#000000">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id=”root”>
</div>
</body>
</html>

and install html-loader and html-webpack-plugin

npm install --save-dev html-loader html-webpack-plugin

Now lets add a custom component to render in our App.tsx and CustomButton.tsx in components folder.

we have to add declartion for CustomButton. Add index.d.ts to typings folder and paste following content

declare module "CustomButton";

last part to setup aur web react native is to add scripts to package.json and run npm run dev

"dev": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js      --config webpack.config.js",

after this project will look like this in browser.

StoryBook Setup

create .storybook folder in root directory and stories folder inside it which will have our stories. We need to have main.tsx file which will mark entry for our stories and a webpack.config.

npm install --save-dev @storybook/addon-actions @storybook/addon-links @storybook/react @storybook/react-native babel-loader

above commands will install storybook for our project, we will require babel-loader for storybook

module.exports = {stories: ["./stories/**/*.stories.[tj]sx"] };

add following content to main.tsx this will select all files with .stories.tsx extension for our storybook and the webpack config will be

after this all we need is contents for our storybook. Lets create a Button folder inside stories folder which will have our story e.g index.stories.tsx. This file will have our CustomButton imported

after this our directory structure will look something like this