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