Can't see stories on android emulator for react-native storybook

Viewed 371

I'm building a mobile app with React Native and Storybook. But somehow, I can't see my component lists in the android emulator but can see my actual app screen.

ScreenShot

This is the screenshot of my android emulator and this is my actual app.

Android Emulator

Versions and configurations

This is my package.json.

{
  "name": "sushi",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "storybook": "start-storybook -p 7007 -h 192.168.1.2",
    "prestorybook": "rnstl",
    "build-storybook": "build-storybook"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.15.14",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/material-top-tabs": "^6.0.6",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "react": "17.0.2",
    "react-native": "0.66.4",
    "react-native-config": "^1.4.5",
    "react-native-pager-view": "^5.4.9",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.1",
    "react-native-tab-view": "^3.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@storybook/addon-actions": "^5.3",
    "@storybook/addon-knobs": "^5.3",
    "@storybook/addon-links": "^5.3",
    "@storybook/addon-ondevice-actions": "^5.3.23",
    "@storybook/addon-ondevice-knobs": "^5.3.25",
    "@storybook/react-native": "^5.3.25",
    "@storybook/react-native-server": "^5.3.23",
    "@types/jest": "^26.0.23",
    "@types/react-native": "^0.66.4",
    "@types/react-test-renderer": "^17.0.1",
    "@typescript-eslint/eslint-plugin": "^5.7.0",
    "@typescript-eslint/parser": "^5.7.0",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.3",
    "babel-plugin-module-resolver": "^4.1.0",
    "eslint": "^7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.66.2",
    "react-dom": "17.0.2",
    "react-native-storybook-loader": "^2.0.4",
    "react-test-renderer": "17.0.2",
    "typescript": "^4.4.4"
  },
  "resolutions": {
    "@types/react": "^17"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

This is storbook/index.js

// if you use expo remove this line
import { AppRegistry, Platform } from "react-native";

import {
  getStorybookUI,
  configure,
  addDecorator,
} from "@storybook/react-native";
import { withKnobs } from "@storybook/addon-knobs";

import "./rn-addons";

// enables knobs for all stories
addDecorator(withKnobs);

// import stories
configure(() => {
  require("./stories/index");
}, module);

// Refer to https://github.com/storybookjs/react-native/tree/master/app/react-native#getstorybookui-options
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({
  // host: Platform.OS === "android" ? "10.0.2.2" : "0.0.0.0",
  host: Platform.OS === "android" ? "192.168.1.2" : "0.0.0.0",
  asyncStorage: require("@react-native-async-storage/async-storage").default,
});

// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
// If you use Expo you should remove this line.
AppRegistry.registerComponent("%APP_NAME%", () => StorybookUIRoot);

export default StorybookUIRoot;

How do I start storybook

  • Run adb reverse tcp:7007 tcp:7007 (This is only once)
  • Start android emulator
  • Run yarn storybook
  • Run yarn android

Error log

No error log on metro server and the terminal that storybook running.

1 Answers

You need to import the storybook in your ./App.js:

import StorybookUIRoot from './storybook';

Now add the component to return in the App function:

return <StorybookUIRoot />

Related