Storybook: "decorator is not a function" error when using withKnobs decorator from addon-ondevice-knobs (React Native)

[stevula]

Describe the bug
Calling addDecorator(withKnobs) on a story or in the global config causes the app the throw a "decorator is not a function" error when trying to render the component.

Indeed, withKnobs is undefined after importing like so:
import { withKnobs } from '@storybook/addon-ondevice-knobs';

withKnobs does not appear to be a valid import:

withKnobs is not exported from the package's index.js.

When I don't call addDecorator(withKnobs), Storybook runs fine and I do see the empty "KNOBS" tab appear in the device UI.

To Reproduce

1. See code snippets below and run react-native run-ios in storybook mode. (This is an ejected app, not Expo)

Expected behavior
The storybook component should render without throwing an error and the knobs panel should populate in the addons tab.

Screenshots

Code snippets

storybook/index.js

import { AppRegistry } from 'react-native';
import Config from 'react-native-config';
import { getStorybookUI, configure } from '@storybook/react-native';
import SplashScreen from 'react-native-smart-splash-screen';
import './rn-addons';
import './config';

configure(() => {
  require('./stories');
}, module);

const StorybookUIRoot = getStorybookUI({
  onDeviceUI: true,
});

if (Config.ENABLE_STORYBOOK) {
  SplashScreen.close({
    animationType: SplashScreen.animationType.fade,
    duration: 850,
  });
  AppRegistry.registerComponent('MyApp', () => StorybookUIRoot);
}

export default StorybookUIRoot;

storybook/rn-addons.js

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

storybook/config.js

import { addDecorator } from '@storybook/react-native';
import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
import { withNotes } from '@storybook/addon-ondevice-notes';
import { withKnobs } from '@storybook/addon-ondevice-knobs';
import { COLOR_WHITE, COLOR_BLACKER, COLOR_PRIMARY_DARK } from 'app/src/styles/colors';

addDecorator(withKnobs);

addDecorator(
  withBackgrounds([
    { name: 'white', value: COLOR_WHITE, default: true },
    { name: 'teal', value: COLOR_PRIMARY_DARK },
    { name: 'black', value: COLOR_BLACKER },
  ]),
);

Example story:

import React from 'react';
import { storiesOf } from '@storybook/react-native';
import ActivityIndicatorView from 'app/src/components/ActivityIndicatorView/ActivityIndicatorView';

storiesOf('ActivityIndicatorView', module)
  .add('default', () => <ActivityIndicatorView />);

System:

• OS: iOS (Simulator)
• Device: Macbook Pro 2018
• Browser: n/a
• Framework: React Native
• Addons: addon-ondevice-knobs, addon-ondevice-backgrounds, addon-ondevice-notes
• Version: 4.0.8 (also tried 4.1.0-alpha.7, 4.0.0-alpha.25)

Additional context
Add any other context about the problem here.

[stevula]

So, I just noticed when running yarn install that addon-ondevice-knobs has a peer dependency on addon-knobs. After installing that, other thing I had to change was to import from '@storybook/addon-knobs' instead of from '@storybook/addon-ondevice-knobs'.

It may just be me, but it seems a bit unintuitive to import the decorator and types from addon-knobs instead of addon-ondevice-knobs. That is not the pattern followed with the other ondevice-* packages, which tell you to import from the ondevice version of the package.

It might be worth making this explicit in the ondevice-knobs readme, which is quite sparse. I'm happy to take a stab at that if it's acceptable.

[shilman]

@stevula would love to review a PR for that. @Gongreg maybe you can chime in here too?

[Gongreg]

Hey,
I definitely agree that the documentation could be a lot better over there. The addon was done as a POC that we can support addons in React Native. And it used addon-knobs to reuse as much code as possible.

@stevula, if you have any time to update readme, that would be great.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[nitaking]

@Gongreg
@shilman
Oh, exactly the same thing happened to me. And I agree.
If I have times, I'll fixed the readme and send PR.

[nitaking]

@Gongreg
@shilman
What do you think?
https://github.com/storybooks/storybook/pull/5629

I noticed that import is natural in other 'ondevice' packages ....
Should be unified so that it can be used with *-ondevice-* import?

import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';

import { withNotes } from '@storybook/addon-ondevice-notes';

[shilman]

@nitaking Thanks for fixing this! What do you mean by unified though?

[shilman]

Yowza!! I just released https://github.com/storybooks/storybook/releases/tag/v4.1.13 containing PR #5629 that references this issue. Upgrade today to try it out!

Closing this issue. Please re-open if you think there's still more to do.