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 = {
  deviceAddons: ['@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.