Run Storybook with NX Expo and React Native Paper

tl;dr: Add several times, I thought I might as well share my solution, and an approach of how to debug if things go haywire (which they did - a lot).

I am assuming you have a working NX workspace with an Expo project and React Native Paper installed.

Outline

• Add Storybook


• Make DOM elements in Storybook work


• Make React Native elements in Storybook work


• Make React Native Paper elements in Storybook work

Add Storybook

Tested under version

CODE Kopieren

@nx/expo@20.1.4

yarn@1.22.19

node@22.11.0

ubuntu 22.04

Let's get started.

CODE Kopieren

yarn nx add @nx/storybook

yarn nx g @nx/react:storybook-configuration PROJECT_NAME

# I answered all questions with the default selection

In my case, this installed

CODE Kopieren

    "@nx/storybook": "20.1.4",

    "@nx/vite": "20.1.4",

    "@nx/web": "20.1.4",

    "@storybook/addon-essentials": "^8.2.8",

    "@storybook/addon-interactions": "^8.2.8",

    "@storybook/core-server": "^8.2.8",

    "@storybook/jest": "^0.2.3",

    "@storybook/react-vite": "^8.2.8",

    "@storybook/test-runner": "^0.13.0",

    "@storybook/testing-library": "^0.2.2",

    "@vitejs/plugin-react": "^4.2.0",

    "storybook": "^8.2.8",

    "vite": "^5.0.0"

Depending on your components it should generate at least one *.stories.tsx file, in my case App.stories.tsx.

If you start this and it renders perfectly for you. Congratz. You don't need to read further. If you're anything like me, then it doesn't render and here's how I debugged it.

Make DOM elements in Storybook work

I check that at least the most basic setup works by editing App.stories.tsx and replace the file contents with the most limited I can think of

CODE Kopieren

import { expect } from "@storybook/jest";

import type { Meta, StoryObj } from "@storybook/react";

import { within } from "@storybook/testing-library";

import { App } from "./App";



const XComp = () => <div>Hi</div>;



const meta: Meta<typeof App> = {

  component: XComp,

  title: "App",

};

export default meta;

type Story = StoryObj<typeof App>;



export const Primary = {

  args: {},

};

Running yarn nx storybook PROJECT_NAME should open the browser and you should see the text 'Hi'.

!

We install it by running

CODE Kopieren

yarn add -D vite-plugin-react-native-web

and then we go back to {projectRoot}/.storybook/main.ts and replace the config by

CODE Kopieren

import type { StorybookConfig } from "@storybook/react-vite";



import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";

import react from "@vitejs/plugin-react";

import { mergeConfig } from "vite";

import reactNativeWeb from "vite-plugin-react-native-web";



const config: StorybookConfig = {

  stories: ["../src/app/**/*.@(mdx|stories.@(js|jsx|ts|tsx))"],

  addons: ["@storybook/addon-essentials", "@storybook/addon-interactions"],

  framework: {

    name: "@storybook/react-vite",

    options: {},

  },



  viteFinal: async (config) =>

    mergeConfig(config, {

      plugins: [react(), nxViteTsPaths(), reactNativeWeb()],

    }),

};



export default config;

Notice that we also got rid of the resolve.alias part. This is because vite-plugin-react-native-web will take care of that for us.

Now we can rerun yarn nx storybook PROJECT_NAME and the text 'Hi' should render again. (If you don't get an error but a blank canvas inside storybook, then the theme is probably off. Try switching to dark/light theme in the storybook UI and the text should become visible.)

And that's it! We now have a working storybook setup with React Native Paper components.

Kudos go to the maintainers of vite-plugin-react-native-web for making this possible.

Vollständiger Original-Bericht

Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

↗ Original-Artikel auf dev.to lesen