Search code examples
reactjstypescriptreact-nativestorybook

Can I move storybook directory to prjroot/build/storybook? (in React Native)

I'm intoroducing storybook to my React Native project.

Default storybook directory is located at the root of project as prjroot/storybook/.

But I wanna place it to prjroot/build/storybook/, because I wanna write the storybook config files in TypeScript, and build it into prjroot/build/storybook/ .

Is there any ways to make storybook recognize the moved path?

Solution

  • By adding the outDir option to your Typescript config.

    tsconfig.json

    {
  "compilerOptions": {
    "outDir": "build/",
    ...
  }
}

    Note that configuring the rootDirs may also be useful if you want to specify the source directories.

    https://storybook.js.org/configurations/typescript-config/#tsconfigjson

    EDIT: in your specific case, using react-native-storybook-loader, you have to configure it:

    "prestorybook": "rnstl --outputFile ./build/storybook/storyLoader.js --pattern \"**/*.story.tsx\" --searchDir ./App"
    • outputFile with the new path
    • pattern to scan .tsx files
    • searchDir can be useful to ignore node_modules and prevent conflict