storybook ignores my decorators

[Michael-Ivlev]

Describe the bug So I tried to give a styled component theme provider for all my storybooks, but somehow storybook ignores my decorators. if I warp my story with the theme provider everything works. I use react-native v0.70.1 with NX and storybook/react-native v6.0.1-beta.5

To Reproduce Add a decorator to your storybook

Expected behavior The Story should get a theme provider

Code snippets

// preview.jsx
import * as React from ‘react’;
import { theme } from ‘@ui’;
import { ThemeProvider } from ‘styled-components/native’;
const themeDecorator = storyFn => (
 <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>
);
export const decorators = [themeDecorator];

// test.tsx
import React from 'react';
import { View } from 'react-native';
import styled from 'styled-components/native';

const UiTest = () => {
  return (
    <View>
      <Test>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</Test>
    </View>
  );
};

const Test = styled.Text`
  color: ${({ theme }) => theme.colors.text.orange};
`;

export default UiTest;

// test.stories.tsx
import { storiesOf } from '@storybook/react-native';
import { ThemeProvider } from 'styled-components/native';
import UiTest from './test';
import { theme } from '../../constants/theme';

const props = {};

storiesOf('UiTest', module).add('Primary', () => (
    <UiTest {...props} />
));

[dannyhw]

On the beta please avoid using storiesOf where possible and use CSF. I'm not sure but I think it might be related to that.

Ideally of course storiesof will work but I would try to avoid adding new stories with the old syntax anyway since its deprecated.

[dannyhw]

Also can you try v6.0.1-beta.8?

[Michael-Ivlev]

Also can you try v6.0.1-beta.8?

when I try to use v6.0.1-beta.8 I get this even after I add react-navigation and react-native-safe-area-context

I've tried to use CSF the storybook ignores it and doesn't render it.

[dannyhw]

@Michael-Ivlev after adding them did you run pod install? looks like its missing on the native side.

Also react-navigation shouldn't be needed for storybook

[Michael-Ivlev]

@Michael-Ivlev after adding them did you run pod install? looks like its missing on the native side.

Also react-navigation shouldn't be needed for storybook

I rebuild the app in nx it working on v6.0.1-beta.7 and v6.0.1-beta.5 without this error, but still without decorators

[dannyhw]

@Michael-Ivlev Can you provide a reproduction of the issue so I can debug it? There shouldn't be any issue with decorators not being applied.

[Michael-Ivlev]

@Michael-Ivlev Can you provide a reproduction of the issue so I can debug it? There shouldn't be any issue with decorators not being applied.

Reproduction steps:

1. Create an NX project and select react native.
2. Make sure you installed the NX control panel for vs code.
3. Generate storybook configuration using the control panel.
4. Build the app using run ios and your project.
5. When the app is built start metro and open the app.
6. Open the ios simulator debug menu.

a guide that can help: https://blog.nrwl.io/use-storybook-with-nx-react-native-2ddd8c010eda When opening storybook:

[dannyhw]

@Michael-Ivlev thanks for providing the steps, however if you could provide a repository with those already completed it would be easier for me. I'll try to look during the weekend.

Also the error in the screenshot here is solved by running pod install.

[Michael-Ivlev]

@Michael-Ivlev thanks for providing the steps, however, if you could provide a repository with those already completed it would be easier for me. I'll try to look during the weekend.

Also the error in the screenshot here is solved by running pod install.

After some work, I've found that some dependencies were on older versions, so I updated them and now addDecorator inside the story works, but not in the global decorator. I've tried to use CFS but without success.

This is my project: https://github.com/Michael-Ivlev/storybook-issue/blob/main/apps/mobile/src/components/testStory/TestStory.stories.tsx

[dannyhw]

@Michael-Ivlev in v6.0.1-beta.7 you need to use preview.js and not .jsx however it was changed in v6.0.1-beta.8 so that might be why

[Michael-Ivlev]

@Michael-Ivlev in v6.0.1-beta.7 you need to use preview.js and not .jsx however it was changed in v6.0.1-beta.8 so that might be why

updated the version to v6.0.1-beta.8 without any result in global theme provider, and CSF components do not render. https://github.com/Michael-Ivlev/storybook-issue/blob/main/apps/mobile/.storybook/preview.js

[dannyhw]

@Michael-Ivlev hey sorry been super busy, will try to look at this soon might end up being on the weekend. Thanks for the detailed information 👍 .

[mtzfactory]

I'm having the same issue as @Michael-Ivlev, I just created a new project from scratch and it fails with the same problems, first it doesn't find the react-native-safe-area-context dependency, once it's installed it fails with the following error:

ERROR  Invariant Violation: requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager.
This error is located at:
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider
    in Unknown (created by ToggleStorybook)
    in ToggleStorybook (created by _default)
    in _default
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in MobileCore(RootComponent)

This is the Nx packages used:

❯ npx nx report

 >  NX   Report complete - copy this into the issue template

   Node : 16.17.1
   OS   : darwin arm64
   yarn : 1.22.19

   nx : 15.0.0
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.0.0
   @nrwl/detox : 15.0.0
   @nrwl/devkit : 15.0.0
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.0.0
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.0.0
   @nrwl/js : 15.0.0
   @nrwl/linter : 15.0.0
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.0.0
   @nrwl/react-native : 15.0.0
   @nrwl/rollup : 15.0.0
   @nrwl/schematics : Not Found
   @nrwl/storybook : 15.0.0
   @nrwl/web : 15.0.0
   @nrwl/webpack : 15.0.0
   @nrwl/workspace : 15.0.0
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:

Project dependencies:

{
  "@nrwl/cli": "15.0.0",
  "@nrwl/detox": "15.0.0",
  "@nrwl/eslint-plugin-nx": "15.0.0",
  "@nrwl/jest": "15.0.0",
  "@nrwl/linter": "15.0.0",
  "@nrwl/react-native": "15.0.0",
  "@nrwl/storybook": "15.0.0",
  "@nrwl/web": "15.0.0",
  "@nrwl/workspace": "15.0.0",
  "@react-native-async-storage/async-storage": "1.17.10",
  "@react-native-community/cli": "9.1.1",
  "@react-native-community/cli-platform-android": "9.1.0",
  "@react-native-community/cli-platform-ios": "9.1.0",
  "@storybook/addon-essentials": "~6.5.9",
  "@storybook/addon-ondevice-actions": "^6.0.1-beta.5",
  "@storybook/addon-ondevice-backgrounds": "^6.0.1-beta.5",
  "@storybook/addon-ondevice-controls": "^6.0.1-beta.5",
  "@storybook/addon-ondevice-notes": "^6.0.1-beta.5",
  "@storybook/core-server": "~6.5.9",
  "@storybook/react-native": "^6.0.1-beta.5",
  "@testing-library/jest-dom": "5.16.5",
  "@testing-library/jest-native": "4.0.13",
  "@testing-library/react-native": "11.2.0",
  "@types/jest": "28.1.1",
  "@types/node": "16.11.7",
  "@types/react": "18.0.20",
  "@types/react-native": "0.70.4",
  "@typescript-eslint/eslint-plugin": "^5.36.1",
  "@typescript-eslint/parser": "^5.36.1",
  "babel-jest": "28.1.1",
  "detox": "19.12.5",
  "eslint": "~8.15.0",
  "eslint-config-prettier": "8.1.0",
  "eslint-plugin-import": "2.26.0",
  "eslint-plugin-jsx-a11y": "6.6.1",
  "eslint-plugin-react": "7.31.8",
  "eslint-plugin-react-hooks": "4.6.0",
  "jest": "28.1.1",
  "jest-circus": "28.1.1",
  "jest-environment-jsdom": "28.1.1",
  "jest-react-native": "18.0.0",
  "metro": "0.72.3",
  "metro-babel-register": "0.72.3",
  "metro-react-native-babel-preset": "0.72.3",
  "metro-react-native-babel-transformer": "0.72.3",
  "metro-resolver": "0.72.3",
  "nx": "15.0.0",
  "prettier": "^2.6.2",
  "react-native-config": "1.4.6",
  "react-native-safe-area-context": "^4.4.1",
  "react-native-storybook-loader": "^2.0.5",
  "react-native-svg": "13.2.0",
  "react-native-svg-transformer": "1.0.0",
  "react-test-renderer": "18.2.0",
  "ts-jest": "28.0.5",
  "ts-node": "10.9.1",
  "typescript": "~4.8.2"
}

[dannyhw]

@mtzfactory please make sure you run pod install

Still need to check this, sorry for the delay

[dannyhw]

I've just checked the latest version and as long as you properly install the dependencies (Pods and npm) there shouldn't be any issue with 6.0.1-beta.8. If your NX setup is not installing pods then thats something that needs to be resolved.

FYI "RNCSafeAreaProvider" was not found in the UIManager. is a sign that you didn't install the pods since its looking for the native dependency.

[dannyhw]

regarding decorators I'll look at that next

[diginikkari]

@Michael-Ivlev in v6.0.1-beta.7 you need to use preview.js and not .jsx however it was changed in v6.0.1-beta.8 so that might be why

updated the version to v6.0.1-beta.8 without any result in global theme provider, and CSF components do not render. https://github.com/Michael-Ivlev/storybook-issue/blob/main/apps/mobile/.storybook/preview.js

To use CSF with NX and React Native you should use not yet released version of react-native-storybook-loader.

package.json:

"devDependencies": {
...
"react-native-storybook-loader": "https://github.com/elderfo/react-native-storybook-loader",

After updating your react-native-storybook-loader package. Update stories to be loaded by: nx storybook your-lib-or-app

Then in your your app change `storybook.ts' to use modules instead of loadStories:

import { modules } from '../../../../../.storybook/story-loader';

configure(() => modules, module, false);

edit: this doesn't solve the decorator issue. Global decorators are not loaded even when the stories are in CSF.

[dannyhw]

Im not sure about this unreleased loader thing, in the v6 beta there is a built in story loader so it would surely make mor sense to use that?

[dannyhw]

Please try the latest version of the beta, a lot has been updated.

[diginikkari]

I tested beta.6 and with some tinkering I was able to get most of it working. One issue was that sb-rn-get-stories script didn't support main.ts file only 'main.js'. I think that there could be easy fix for it by using loadMainConfig from @storybook/core-common to load config (it works for both ts and js). Also watcher seems to be hard coded to use main.js and preview.js -files.

Anyway there are some work to be done in NX to support new v6 rn storybook though. Current version is not using generated storybook.requires.js -file instead it is using story-loader which is only loading stories in the old storiesOf format and is not adding decorators or addons.

[dannyhw]

@diginikkari Yes in my point of view NX needs to change to use the new built in loading. Not only that but storiesOf is deprecated and should be avoided. Decorators are likely not working specifically for that reason since they aren't following the intended usage.

Also now the latest beta is 6.0.1-beta.9.

I will look into the core-common stuff you mentioned.

[dannyhw]

391 should resolve the main.ts thing