Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

addon-knobs for React-Native not working

See original GitHub issue

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",

Issue Analytics

State:
Created 4 years ago
Comments:14 (7 by maintainers)

Top GitHub Comments

1reaction

aswin-scommented, Jun 3, 2019

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.

1reaction

aswin-scommented, Jun 3, 2019

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

Top Results From Across the Web

react storybook addon knobs not showing - Stack Overflow

I was able to fix this simply by hitting the D key, which changes the addon panel orientation. (You can also do this...

@storybook/addon-knobs - npm

Start using @storybook/addon-knobs in your project by running `npm i ... Knobs for React props export const withAButton = () => ( <button ......

@storybook/addon-ondevice-knobs | Yarn - Package Manager

Display storybook story knobs on your deviced. addon, knobs, ondevice, react-native. readme. Storybook for React Native. With Storybook for React Native ...

[Solved]-react storybook addon knobs not showing-Reactjs

This worked for me. ... You probably need to create the addons.js file on the storybook config folder. (By default .storybook). ... Hope...

@storybook/addon-knobs examples - CodeSandbox

Learn how to use @storybook/addon-knobs by viewing and forking @storybook/addon-knobs ... react-js-tutorial ... github.com/storybookjs/addon-knobs/issues.