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.
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
Then, add following content to .storybook/main.ts
:
import { 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.
See examples for migrating from Knobs to Controls in the web Controls Addon README.