has anyone integrated @storybook/react-native v7.x successfully with re.pack

[mlakmal]

we are migrating our application to latest react-native version and as part of it we also upgrading storybook to latest. we are hitting issues with getting storybook working with re.pack.

[jbroma]

Hi @mlakmal, I'm converting this to a discussion since there is nothing actionable from that description.

If you are still facing these issues, please create an issue with a reproduction repository so we can address some of the problems you might be facing.

[mlakmal]

@jbroma was able to get this resolved.

FYI: by using @storybook/addon-webpack5-compiler-babel addon. and also had to specify the babel transformation for storybook packages. if any one needs more details i can share...

[Juan2662]

@mlakmal can you shared with us the steps you followed to get this ?

[mlakmal]

added following packages

"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
"@storybook/react": "^8.0.8",
"@storybook/react-native": "^7.6.10",
"@storybook/react-webpack5": "^8.0.8",

.storybook/main.ts looks like below

import type { StorybookConfig } from '@storybook/react-native';

const main: StorybookConfig = {
  stories: [
    '../src/**/*.stories.?(ts|tsx)',
  ],
  addons: [
    '@storybook/addon-ondevice-notes',
    '@storybook/addon-ondevice-backgrounds',
    '@storybook/addon-ondevice-actions',
    '@storybook/addon-webpack5-compiler-babel',
  ],
};

//For some reason @storybook/react-native package had issues identifying proper paths for below packages. so i included them under alias. and also added storybook packages for babel transpiling
in webpack.config.mjs
```javascript
resolve: {
      ...
      alias: {
        '@storybook/react': new URL('../node_modules/@storybook/react', import.meta.url).pathname,
        '@storybook/addon-actions': new URL('../node_modules/@storybook/addon-actions', import.meta.url).pathname,
        '@storybook/global': new URL('../node_modules/@storybook/global', import.meta.url).pathname,
        '@storybook/core-events': new URL('../node_modules/@storybook/core-events', import.meta.url).pathname
      },
      ...
    }

rules: [
        ...
        {
          test: /\.[jt]sx?$/,
          include: [
            ...
            /node_modules(.*[/\\])+@storybook/,
          ],
          use: 'babel-loader',
        }

export default main;

[Juan2662]

Thanks a lot @mlakmal very helpful. Now works for we too

[dannyhw]

Official support is now available in v10
https://github.com/dannyhw/RepackStorybookStarter
https://storybookjs.github.io/react-native/docs/intro/getting-started/repack

[dannyhw]

Official support is now available in v10
https://github.com/dannyhw/RepackStorybookStarter
https://storybookjs.github.io/react-native/docs/intro/getting-started/repack