Storybook: addon-knobs for React-Native not working

[lyqht]

Describe the bug
In the index.tsx file, I have tried adding a global decorator for add-on knobs with the code below. (Notes is working, knobs is not.)

addDecorator(withNotes)
addDecorator(withKnobs)

configure(() => {
  loadStories()
}, module)

const StorybookUIRoot = getStorybookUI(
  {port: 7070, host: 'localhost'});

AppRegistry.registerComponent(appName, () => StorybookUIRoot);
export default StorybookUIRoot;

And in my story file,

// ...
import { number } from '@storybook/addon-knobs';

storiesOf('Pill', module)
  .add('Configuring Colors', () => {
    const pill1R = number('R', 255)
    const pill1G = number('G', 118)
    const pill1B = number('B', 0)
    const pill1Color = `rgb(${pill1R}, ${pill1G}, ${pill1B})`

    return (
    <View style={StoryStyle.centerComponent}>
      <View style={StoryStyle.buttonSubsection}>
        <Pill label="Hello" indicatorColor={pill1Color}  />
        <View style={StoryStyle.space} />
        <Text.H5>Indicator Color: {pill1Color}</Text.H5>
      </View>
    </View> )
  }

I can see that the const values are parsed correctly in the app, but there is no knobs available.

relevant dependencies:

    "@storybook/addon-actions": "^5.0.11",
    "@storybook/addon-info": "^5.0.11",
    "@storybook/addon-knobs": "^5.0.11",
    "@storybook/addon-notes": "^5.0.11",
    "@storybook/addon-ondevice-backgrounds": "^4.1.18",
    "@storybook/addon-ondevice-knobs": "^4.1.18",
    "@storybook/addon-ondevice-notes": "^4.1.18",
    "@storybook/addons": "^5.0.11",
    "@storybook/react-native": "^4.1.18",

[aswin-s]

Facing the same issue. Tried alpha & next channels as well.

[github-actions[bot]]

Automention: Hey @Armanio @benoitdion @gongreg @igor-dv @leoyli, you've been tagged! Can you give a hand here?

[shilman]

@lyqht @aswin-s You should either use 4.1.x versions across the board or upgrade everything to 5.1.0-rc.x. Can't guarantee it will fix the problem, but I wouldn't expect the example posted here to work due to version inconsistency (4.x to 5.x is a breaking change, that's why we use semver)

[Gongreg]

Sorry, accidentally closed it.

[aswin-s]

@shilman Yes I did the same. When I was trying out stable build, all storybook dependencies were on 4.1.18. And for 'rc' tag, I used 5.1.0-rc.3 across.

[shilman]

@aswin-s Ok, thanks for letting me know. Hopefully we can get a fix out soon.

[lyqht]

@shilman , thank you for getting back on this issue!

• Regarding upgrading to 5.1.0-rc.x, i faced the resolution issue in #6917 and hence decided to keep it in 4.1.18.
• While the add-on knobs are able to work on 4.1.x, i faced the same issue as #6005 , where the debouncing is too fast and editing the knob value results in NaN before I finish typing the input value, and that's why there was the lack of consistency in the versions of the dependencies above.

[aswin-s]

I tried this on a new CRNA app and to my surprise, it's working. I don't know where I messed up last time. Please mark this as a non-issue.

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

[Gongreg]

Hey, is there still an issue here?

[lyqht]

@Gongreg Nope, they are working! But theres still the debounce interval problem that i highlighted. But i guess this issue can be closed for its topic :) Thanks for helping out !

[slorber]

is there someone having an Expo SDK33 setup that works? I can't find any RN example anymore in the repo and by ondevice knobs don't appear :(

[Gongreg]

Hey @slorber, this is the example: https://github.com/storybookjs/storybook/tree/next/examples-native/crna-kitchen-sink . I hope it works, I am not sure, didn't test it.

[slorber]

Thanks @Gongreg this probably saved me few hours :)

Just noticed I simply forgot to add "/register" at the end of each import.

Isn't there a way to warn the user if he types the wrong import, like I did?