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

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 { 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

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


export const CollapsableContainer = ({
  children,
  expanded,

dannyhw

#!/usr/bin/env node
const yargs = require("yargs/yargs");
const { hideBin } = require("yargs/helpers");
const { token } = require("./.env.json");
const { URL, URLSearchParams } = require("url");
const fetch = require("node-fetch");

class HTTPResponseError extends Error {
  constructor(response, customMessage, ...args) {
    super(

dannyhw

no data is stored anywhere other than on your device and it is not shared with any 3rd party or uploaded in any way

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.

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

#!/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 \