Package Exports

@storybook/addon-ondevice-controls
@storybook/addon-ondevice-controls/dist/index.js
@storybook/addon-ondevice-controls/register
@storybook/addon-ondevice-controls/register.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@storybook/addon-ondevice-controls) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Storybook Controls Addon for React Native

Storybook Controls Addon for React Native allows editing a component's arguments dynamically via a graphical UI without needing to code. The Controls Addon replaces the old Knobs Addon.

Installation

Controls has some extra dependencies needed to display the form inputs.

yarn add -D @storybook/addon-ondevice-controls @react-native-community/datetimepicker @react-native-community/slider

Configuration

Then, add following content to .rnstorybook/main.ts:

import type { StorybookConfig } from '@storybook/react-native';

const main: StorybookConfig = {
  addons: ['@storybook/addon-ondevice-controls'],
};

export default main;

See the examples of using the Controls Addon with Component Story Format. You can also run the react-native app to see it in action.

The web Controls Addon documentation may also be useful, but the examples there have not been tested with Storybook for React Native.

Migrating from Knobs

See examples for migrating from Knobs to Controls in the web Controls Addon README.