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

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.

[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.