How to set up React Native Storybook with alternate dist directory (e.g. with TypeScript)?

The default installation instructions create a ./storybook directory, but in our case we need all source to be in src for TypeScript. We compile to dist.

Moving storybook directory to src and compiling it doesn’t appear to work. We can get the server running with -c dist/storybook, but then the app runs normally - not showing any storybook content.

How can we get the storybook app to run with react-native run-ios when it’s in the ./dist/storybook directory?

[Hypnosphi]

@lukecwilliams it’s used for dealing with HMR

[lukewlms]

@roblafeve So far I don’t have a better answer for (1) above - I just have to modify jsBundleURLForBundleRoot.

Here’s what else I had to do to get running with storybook/RN/TS:

• Moved storybook files to ./src/storybook, and compiling to ./dist/storybook along with other code
• Had to add declarations like this to satisfy TS (is there a better answer?) declare var module: {};
• Modified package.json script with directory: “storybook”: “storybook start -p 7007 -c dist/storybook”
• I’ll have to remember to delete the ./dist/storybook directory prior to production deployment

I’d still really like to know how to get storybook to find my index.ios.js file without my having to make temporary modifications to AppDelegate.m - I believe Storybook is supposed to be able to just find this file when the storybook packager is running!

---

(Side note: I was unable to get output to multiple directories with multiple tsconfig.json files in different folders, though comments elsewhere seemed to indicate this is possible. Although this would mean no danger of accidentally shipping ./dist/storybook directory, I think this would not actually help because AppDelegate.m is still pointing to dist for the entry file so wouldn’t find it.)