Seeking Assistance: React Native Storybook - No addons loaded

[Harinony]

I've implemented Storybook in my React Native project, and everything seems to be working fine except for the addons – they're not loading. Could someone assist me in resolving this issue and getting the addons to load properly?
Here is my code:

import { ComponentMeta, ComponentStory } from '@storybook/react-native';

import { Text } from './Text';

const TextMeta: ComponentMeta<typeof Text> = {
  title: 'Text',
  component: Text,
  args: {
    color: 'red',
  },
  argTypes: {
    color: {
      options: ['red', 'blue', 'green'],
      control: { type: 'radio' },
    },
  },
};

export default TextMeta;

type TextStory = ComponentStory<typeof Text>;

export const Primary: TextStory = args => <Text {...args}> Hello World </Text>;

and this is how it looks

[joevaugh4n]

Hey @Harinony! Just to say that I'm sharing this with our RN maintainer. Hold tight and hopefully we can get back to you very soon! Thanks for formatting the thread so nicely ❤️

[dannyhw]

Please include your main.js config and package.json if possible and I'll be happy to give some advice.

Please also include any error logs that you have

[dannyhw]

if this is the same one from discord, I'll repeat my response here just in case

you are mixing addons for react native with addons for web, that won't work
for react native only addon-ondevice addons should be included
you should have a separate config file for web if you want to use web addons

[arekkubaczkowski]

@dannyhw I having the same issue, I've tried to provide mobile-only addons and it still shows that "No addons loaded"
any other ideas?

const config = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: [
    // '@storybook/addon-essentials',
    // '@storybook/addon-interactions',
    '@storybook/addon-ondevice-actions',
    '@storybook/addon-ondevice-backgrounds',
    '@storybook/addon-ondevice-controls',
    '@storybook/addon-ondevice-notes',
    // '@storybook/addon-actions',
    // '@storybook/addon-react-native-web',
    // '@storybook/addon-actions',
  ],
  framework: {
    name: '@storybook/react-native',
    options: {},
  },
};

export default config;

        "@storybook/addon-ondevice-actions": "^6.5.3",
        "@storybook/addon-ondevice-backgrounds": "^6.5.3",
        "@storybook/addon-ondevice-controls": "^6.5.3",
        "@storybook/addon-ondevice-notes": "^6.5.3",

[dannyhw]

The nx setup is not updated and doesn't work properly as far as I know. I tried to reach out about it but made no progress 🤷‍♂️ .

[arekkubaczkowski]

that's a bad news :(
I found that out and added it manually:

import '@storybook/addon-ondevice-notes/register';
import '@storybook/addon-ondevice-backgrounds/register';
import '@storybook/addon-ondevice-actions/register';

however addon-ondevice-actions introduced another error:

Unknown named module: @storybook/global, I tried to install it explicitly but no luck

[dannyhw]

this bug depends on your versions if you are on 6.5 make every storybook version 6.5 for example. You could update everything to v7 too.

[arekkubaczkowski]

okay I have managed to get that works, thanks a lot!

[vinayaksaubhri]

hey @arekkubaczkowski I have the same error and I am using nx too and addons are not working so how did you manage to solve it.