Storybook Addon On Device Knobs allow you to edit React props dynamically using the Storybook UI. You can also use Knobs as a dynamic variable inside stories in Storybook.

Framework Support

This is how Knobs look like:

This addon is a wrapper for addon @storybook/addon-knobs. Refer to its documentation to understand how to use knobs

Getting Started

First of all, you need to install knobs into your project.

yarn add @storybook/addon-ondevice-knobs @storybook/addon-knobs --dev

Then create a file called rn-addons.js in your storybook config.

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

@storybook/addon-ondevice-knobs use register only.

Then import rn-addons.js next to your getStorybookUI call.

import './rn-addons';

Now, write your stories with knobs.

Refer to @storybook/addon-knobs to learn how to write stories.

Note: you'll still have to install @storybook/addon-knobs as well and import withKnobs and all knob types (e.g. select, text etc) from that module.

// Example
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';

// Write your story...