dannyhw

import { normalizeStories, loadMainConfig } from 'storybook/internal/common';
import { readFileSync } from 'node:fs';
import { sync as globSync } from 'glob';
import path from 'path';
import { CsfFile, loadCsf } from 'storybook/internal/csf-tools';
import { toId } from 'storybook/internal/csf';
import {
  type StoryIndex,
  type IndexedCSFFile,
  type NormalizedStoriesSpecifier,

dannyhw

import { StorybookConfig } from "@storybook/react-native-web-vite";
import { InlineConfig, mergeConfig } from "vite";

const main: StorybookConfig = {
  stories: ["../components/**/*.stories.@(js|jsx|ts|tsx)"],

  addons: ["@storybook/addon-docs", "@chromatic-com/storybook"],

  framework: {
    name: "@storybook/react-native-web-vite",

dannyhw

Heres how I add React native Storybook to an expo router project in 2 minutes

npm create storybook

choose recommended and then native

npx expo@latest customize metro.config.js

dannyhw

import { readFileSync } from "node:fs"
import * as babel from "@babel/core"
import BabelPluginReactCompiler from "babel-plugin-react-compiler"
import type { Plugin } from "esbuild"
import QuickLRU from "quick-lru"

export function ReactCompilerEsbuildPlugin({
  filter,
  sourceMaps,
  runtimeModulePath,

dannyhw

import { SafeAreaView, Platform } from 'react-native'
import WebView from "react-native-webview";


const markdown = `
- hello from markdown
- test

---

dannyhw

import { Stack } from 'expo-router';
import { StyleSheet, Text, View, useWindowDimensions } from 'react-native';
import Animated, {
  Extrapolation,
  interpolate,
  useAnimatedRef,
  useAnimatedStyle,
  useScrollViewOffset,
} from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

dannyhw

#!/bin/bash
npx react-native init RnSBSixAlpha --template react-native-template-typescript;
cd RnSBSixAlpha;

yarn add @storybook/react-native@next \
            @react-native-async-storage/async-storage \
            @storybook/addon-ondevice-actions@next \
            @storybook/addon-ondevice-controls@next \
            @storybook/addon-ondevice-backgrounds@next \
            @storybook/addon-ondevice-notes@next \

dannyhw

import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from "react-native-reanimated";


export const CollapsableContainer = ({
  children,
  expanded,

dannyhw

#!/bin/bash
set -e
APP_NAME=${1:-RNStorybookAlpha}
echo "APP_NAME: $APP_NAME"
npm install --global expo-cli
expo init -t expo-template-blank-typescript $APP_NAME

cd $APP_NAME
expo install @storybook/react-native@next \
    @storybook/addon-ondevice-actions@next \

dannyhw

Intro

Storybook is a UI development workshop for components and pages. It's used by many teams for all kinds of reasons. You can develop components in isolation, run visual tests and even validate the accessibility of your UI.

Storybook started off web focused and has expanded to many different platforms since then. One of those platforms is React Native.

Storybook for React Native is a catalog of all your components and states, that runs inside your iOS or Android app, on your mobile device. This is great for seeing your React Native components in their production setting, but also has some disadvantages when compared to Storybook's web UI.

That's why I'm excited to announce Storybook for React Native Web, a new complementary approach to developing and sharing React Native components in Storybook.