Storybook Backgrounds Addon for React Native

Storybook Backgrounds Addon for React Native can be used to change background colors of your stories right from the device.

Installation

yarn add -D @storybook/addon-ondevice-backgrounds

Configuration

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

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

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

export default main;

Usage

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

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

Uh oh!