@storybook/addon-ondevice-backgrounds/dist/index.js

A react-native storybook addon to show different backgrounds for your preview

import { jsx as _jsx } from "react/jsx-runtime";
import { makeDecorator } from 'storybook/internal/preview-api';
import { addons } from 'storybook/manager-api';
import Events from './constants';
import Container from './container';
export const withBackgrounds = makeDecorator({
    name: 'withBackgrounds',
    parameterName: 'backgrounds',
    skipIfNoParametersOrOptions: true,
    wrapper: (getStory, context, { options, parameters }) => {
        const data = (parameters || options || { values: [] });
        const backgrounds = data.values;
        let background = 'transparent';
        if (backgrounds.length !== 0) {
            addons.getChannel().emit(Events.SET, backgrounds);
            const defaultValue = data.default
                ? backgrounds.find((b) => b.name === data.default)
                : undefined;
            const defaultOrFirst = defaultValue ? defaultValue : backgrounds[0];
            if (defaultOrFirst) {
                background = defaultOrFirst.value;
            }
        }
        return (_jsx(Container, { initialBackground: background, channel: addons.getChannel(), children: getStory(context) }));
    },
});