BackgroundCsf.stories.tsx

import type { StoryObj, Meta } from '@storybook/react-native';
import { Text, StyleSheet } from 'react-native';

const Background = () => (
  <Text style={styles.text}>Change background color via Addons -&gt; Background</Text>
);

const styles = StyleSheet.create({
  text: { color: 'black' },
});

const meta = {
  component: Background,
  tags: ['backgrounds'],
  // parameters: {
  //   backgrounds: {
  //     default: 'warm',
  //     values: [
  //       { name: 'warm', value: 'hotpink' },
  //       { name: 'cool', value: 'deepskyblue' },
  //       { name: 'white', value: 'white' },
  //       { name: 'black', value: 'black' },
  //     ],
  //   },
  // },
  parameters: {
    backgrounds: {
      options: {
        // 👇 Override the default `dark` option
        warm: { name: 'Warm', value: 'hotpink' },
        // 👇 Add a new option
        cool: { name: 'Cool', value: 'deepskyblue' },
        white: { name: 'White', value: 'white' },
        black: { name: 'Black', value: 'black' },
      },
    },
  },
} satisfies Meta<typeof Background>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Basic: Story = {
  globals: {
    // 👇 Override background value for this story
    backgrounds: { value: 'warm' },
  },
};