Automated "All stories" story

[sregg]

Is your feature request related to a problem? Please describe.
When I have a lot of stories for a given component, it can be tedious to switch stories (i.e. side bar, click story, side bar, click story, etc...). I'd like to be able to see all stories in one screen. Especially for small components like buttons or list items.

Describe the solution you'd like
It'd be great to have the ability to automatically add an "All" story where all stories are rendered after an other with their title.

Describe alternatives you've considered
Infinite Red's Ignite had some cool components like UseCase for achieving this (see PR when they removed all that here) but the new CSF format doesn't support this (i.e. you can't easily render multiple components in one story).

Are you able to assist bring the feature to reality?
Yes!

Additional context
Example of Story in Ignite:

Something similar but automated would be awesome.

[sregg]

I just found this: https://storybook.js.org/addons/storybook-addon-variants
It'd be great to support this on mobile or build something similar.

[dannyhw]

You can pretty easily make something like this happen with csf, excuse the formatting I'm just doing this from memory.

const meta = {
   title: "Button",
   component: Button,
}

export const Story1 = {
  args: { 
    text: "text1"
  }
}

export const Story2 = {
  args: { 
    text: "text2"
  }
}

export const AllStory = {
  render ()=>{
    return (<>
      <Button {...Story1.args}>
      <Button {...Story2.args}>
   </>)
 }
}

[sregg]

Nice! I didn't know about this render() function 🎉
Looks like we could automatize this though.

import React from 'react';

import { CookStats } from './CookStats';

import type { Meta, StoryObj } from '@storybook/react-native';
import type { CookStatsProps } from './types';
import { InlineStorySectionHeader } from '~/storybook/components/InlineStorySectionHeader';

const CookStatsMeta = {
  title: 'Components/CookStats',
  component: CookStats,
  args: {
    size: 'large',
    distanceFromCustomer: '3.8mi',
  },
  argTypes: {
    size: {
      type: { name: 'enum', value: ['small', 'large'] },
    },
  },
} as Meta<CookStatsProps>;

export default CookStatsMeta;

export const WithEverything: StoryObj<CookStatsProps> = {
  args: {
    orderCount: 1126,
    averageRating: 4.7,
    ratingCount: 304,
  },
};

export const NoOrderCount: StoryObj<CookStatsProps> = {
  args: {
    averageRating: 4.2,
    ratingCount: 304,
  },
};

export const NoRating: StoryObj<CookStatsProps> = {
  args: {
    orderCount: 19,
  },
};

export const NoOrderCountNoRating: StoryObj<CookStatsProps> = {
  args: {},
};

export const All: StoryObj<CookStatsProps> = {
  render: () => (
    <>
      <InlineStorySectionHeader title="WithEverything" />
      <CookStats
        {...(CookStatsMeta.args as CookStatsProps)}
        {...WithEverything.args}
      />
      <InlineStorySectionHeader title="NoOrderCount" />
      <CookStats
        {...(CookStatsMeta.args as CookStatsProps)}
        {...NoOrderCount.args}
      />
      <InlineStorySectionHeader title="NoRating" />
      <CookStats
        {...(CookStatsMeta.args as CookStatsProps)}
        {...NoRating.args}
      />
      <InlineStorySectionHeader title="NoOrderCountNoRating" />
      <CookStats
        {...(CookStatsMeta.args as CookStatsProps)}
        {...NoOrderCountNoRating.args}
      />
    </>
  ),
};

[sregg]

I can create a util function that I can reuse in my project:

export function renderAllStories<T>(meta: Meta<T>, stories: StoryObj<T>[]) {
  return (
    <>
      {stories.map((story, index) => (
        <Fragment key={index}>
          <InlineStorySectionHeader title={story.name ?? ''} />
          {meta.component && <meta.component {...meta.args} {...story.args} />}
        </Fragment>
      ))}
    </>
  );
}

and use it like so:

export const All: StoryObj<CookStatsProps> = {
  render: () =>
    renderAllStories(CookStatsMeta, [
      WithEverything,
      NoOrderCount,
      NoRating,
      NoOrderCountNoRating,
    ]),
};

Small question: how does Storybook get the name of the story objects (e.g. WithEverything)?

[dannyhw]

when you import/require a module it has all the named exports and the default export in there like

module.exports = {
 Name1: { stuff here}
default: {meta stuff here}
}

so when you import that file its like

const file = require("location")

this file has all of those things

so yeah you could actually do this more automated yet probably by getting the current module and looping through it

[dannyhw]

@sregg since you can get the current module from just accessing "module", you should be able to do this:

export const AllStory = {
  render: () => {
    return (
      <>
        {Object.entries(module.exports)
          .filter(([key, _val]) => key !== "default")
          .map(([key, val]) => {
            if (val.args) {
              return <Icon key={key} {...val.args} />;
            }
          })}
      </>
    );
  },
};

[sregg]

Sounds good. I'll see if I have time to build that into this package itself.
Maybe with a showAllStoriesStory flag in Meta.

[machadogj]

FYI, I did a very basic looper in my app. looks like this:

The code is fairly vanilla, but it does depend on a few packages:

• react-native-vector-icons/MaterialIcons
• @react-native-async-storage/async-storage

import React, { useEffect, useState, useCallback } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import AsyncStorage from '@react-native-async-storage/async-storage';

interface Story {
    name: string;
    args: any;
}

interface StoryLooperProps {
    stories: Story[];
    component: React.ComponentType<any>;
}

const STORAGE_KEY_PLAYING = '@story_looper_playing';
const STORAGE_KEY_CONTROL_BAR = '@story_looper_control_bar';
const STORAGE_KEY_STORY_INDEX = '@story_looper_story_index';

const StoryLooper: React.FC<StoryLooperProps> = ({ stories, component: Component }) => {
    const [storyIndex, setStoryIndex] = useState(0);
    const [isPlaying, setIsPlaying] = useState(true);
    const [isControlBarVisible, setIsControlBarVisible] = useState(true);

    useEffect(() => {
        const loadSavedState = async () => {
            try {
                const savedPlaying = await AsyncStorage.getItem(STORAGE_KEY_PLAYING);
                const savedControlBar = await AsyncStorage.getItem(STORAGE_KEY_CONTROL_BAR);
                const savedStoryIndex = await AsyncStorage.getItem(STORAGE_KEY_STORY_INDEX);

                if (savedPlaying !== null) {
                    setIsPlaying(savedPlaying === 'true');
                }
                if (savedControlBar !== null) {
                    setIsControlBarVisible(savedControlBar === 'true');
                }
                if (savedStoryIndex !== null) {
                    const parsedIndex = parseInt(savedStoryIndex, 10);
                    if (!isNaN(parsedIndex) && parsedIndex >= 0 && parsedIndex < stories.length) {
                        setStoryIndex(parsedIndex);
                    }
                }
            } catch (error) {
                console.error('Error loading saved state:', error);
            }
        };

        loadSavedState();
    }, [stories.length]);

    const goToNextStory = useCallback(() => {
        setStoryIndex((prevIndex) => {
            const newIndex = (prevIndex + 1) % stories.length;
            AsyncStorage.setItem(STORAGE_KEY_STORY_INDEX, newIndex.toString()).catch(error => {
                console.error('Error saving story index:', error);
            });
            return newIndex;
        });
    }, [stories.length]);

    const goToPreviousStory = useCallback(() => {
        setStoryIndex((prevIndex) => {
            const newIndex = (prevIndex - 1 + stories.length) % stories.length;
            AsyncStorage.setItem(STORAGE_KEY_STORY_INDEX, newIndex.toString()).catch(error => {
                console.error('Error saving story index:', error);
            });
            return newIndex;
        });
    }, [stories.length]);

    useEffect(() => {
        let interval: NodeJS.Timeout;
        if (isPlaying) {
            interval = setInterval(goToNextStory, 2000);
        }
        return () => clearInterval(interval);
    }, [isPlaying, goToNextStory]);

    const togglePlayPause = async () => {
        const newIsPlaying = !isPlaying;
        setIsPlaying(newIsPlaying);
        try {
            await AsyncStorage.setItem(STORAGE_KEY_PLAYING, newIsPlaying.toString());
        } catch (error) {
            console.error('Error saving playing state:', error);
        }
    };

    const toggleControlBar = async () => {
        const newIsControlBarVisible = !isControlBarVisible;
        setIsControlBarVisible(newIsControlBarVisible);
        try {
            await AsyncStorage.setItem(STORAGE_KEY_CONTROL_BAR, newIsControlBarVisible.toString());
        } catch (error) {
            console.error('Error saving control bar state:', error);
        }
    };

    const currentStory = stories[storyIndex];

    return (
        <View style={{flex: 1, position: 'relative'}}>
            <Component {...currentStory.args} />
            {isControlBarVisible ? (
                <View style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    right: 0,
                    flexDirection: 'row',
                    alignItems: 'center',
                    height: 50,
                    paddingHorizontal: 10,
                    backgroundColor: '#ddd',
                    opacity: 0.8,
                }}>
                    <Text style={{
                        fontSize: 14,
                        fontWeight: 'bold',
                        color: 'black',
                        flex: 1,
                    }}>{currentStory.name}</Text>
                    <TouchableOpacity onPress={goToPreviousStory} style={{ marginRight: 20 }}>
                        <Icon name="fast-rewind" size={24} color="black" />
                    </TouchableOpacity>
                    <TouchableOpacity onPress={togglePlayPause} style={{ marginRight: 20 }}>
                        <Icon name={isPlaying ? 'pause' : 'play-arrow'} size={24} color="black" />
                    </TouchableOpacity>
                    <TouchableOpacity onPress={goToNextStory} style={{ marginRight: 20 }}>
                        <Icon name="fast-forward" size={24} color="black" />
                    </TouchableOpacity>
                    <TouchableOpacity onPress={toggleControlBar}>
                        <Icon name="visibility-off" size={24} color="black" />
                    </TouchableOpacity>
                </View>
            ) : (
                <TouchableOpacity
                    onPress={toggleControlBar}
                    style={{
                        position: 'absolute',
                        top: 10,
                        right: 10,
                        backgroundColor: '#ddd',
                        borderRadius: 15,
                        padding: 5,
                        opacity: 0.8,
                    }}
                >
                    <Icon name="visibility" size={24} color="black" />
                </TouchableOpacity>
            )}
        </View>
    );
};

export default StoryLooper;

And it requires that you define a name in every story to display which story it's showing.

[pietgk]

FYI: Wrote a Button-All.stories.tsx that works for me.

import React from "react";
import type { Meta, StoryObj, ReactRenderer } from "@storybook/react";
import type { ListRenderItemInfo } from "react-native";
import { FlatList } from "react-native";
import { action } from "@storybook/addon-actions";
import type {
  BaseAnnotations,
  ComponentAnnotations,
  StoryAnnotations,
  StoryContext,
} from "storybook/internal/types";
import type { ButtonProps } from "./Button";
import { Button } from "./Button";
import * as AllStories from "./Button.stories";
import { Divider } from "../Divider";

type TStory<TProps> = ListRenderItemInfo<
  [
    string,
    (
      | ComponentAnnotations<ReactRenderer, TProps>
      | StoryAnnotations<ReactRenderer, TProps>
      | BaseAnnotations<ReactRenderer, TProps>
    )
  ]
>;

const renderButtonStory = <TProps extends ButtonProps>( // Record<string, unknown>>(
  story: TStory<TProps>
) => {
  const [key, val] = story.item;
  const props = val.args
    ? ({ ...val.args } as TProps)
    : ({
        text: key,
        onPress: () => action(`onPress${key}`),
      } as unknown as TProps);
  props.text = key;
  props.onPress = () => action(`onPress${key}`);
  if (val.render) {
    return val.render(props, {} as StoryContext<ReactRenderer, TProps>);
  }
  return (
    <Button key={key} {...props} onPress={() => action(`onPress${key}`)} />
  );
};

const ButtonAllStories = () => {
  const data = Object.entries(AllStories).filter(
    (story) => story[0] !== "default"
  );
  return (
    <FlatList
      data={data}
      renderItem={renderButtonStory<ButtonProps>}
      ItemSeparatorComponent={() => <Divider />}
      keyExtractor={(story) => story[0]}
    ></FlatList>
  );
};

const meta: Meta<FlatList> = {
  title: "mindlerui/Atoms/Button/All",
  component: ButtonAllStories,
};

export default meta;
type Story = StoryObj<typeof ButtonAllStories>;

export const All: Story = {
  args: {},
};

Its a bit unfinished but its working with typescript

[sregg]

Anyone figured this out? 😅

[dannyhw]

I think the solution is essentially a version of storybook docs, but for React Native.

This is totally doable; it’s just that the current docs implementation is likely to change or be impacted by upcoming updates. So it hasn’t felt like the right time to look into this (would require reworking it afterwards).

Probably I could make a more crude version that just checks some flag and decides if the special story can be added, but the question is: is it worth diverging from storybook compatibility for this?

If I made some kinda small package with a function you export in the story like

export const AllStory = generateAllStory(module.exports)

Would that be enough? or is the goal to have it built in to every story?

[sregg]

Here's what Cursor came up with:

new overviewAwareRender.tsx

import type { Args, ReactRenderer, StoryContext } from '@storybook/react';
import { createElement, type ComponentType, type ReactElement } from 'react';
import { ScrollView } from 'react-native';
import { storyNameFromExport } from 'storybook/internal/csf';
import type { PreparedStory, StoryIndex, StoryIndexEntry } from 'storybook/internal/types';

import { Box } from '~/components/Box';
import { Text } from '~/components/v2/Text';

/** Private RN Storybook View fields used to discover sibling stories. */
type StorybookView = {
  _storyIndex?: StoryIndex;
  _idToPrepared?: Record<string, PreparedStory<ReactRenderer>>;
};

type OverviewSibling = {
  id: string;
  label: string;
  args: Record<string, unknown>;
};

const getStorybookView = (): StorybookView | undefined =>
  (globalThis as typeof globalThis & { view?: StorybookView }).view;

const isOverviewStoryId = (storyId: string) => storyId.endsWith('--overview');

const isSiblingStoryEntry = (
  entry: StoryIndex['entries'][string],
  title: string,
  overviewStoryId: string,
): entry is StoryIndexEntry =>
  entry.type === 'story' && entry.title === title && entry.id !== overviewStoryId;

/**
 * Falls back to the raw export name (e.g. `WeekendStay`) when the story has no
 * explicit `name` — Storybook otherwise humanizes it to `Weekend Stay`.
 */
const getSiblingLabel = (prepared: PreparedStory<ReactRenderer>, exportName?: string): string => {
  if (exportName && prepared.name === storyNameFromExport(exportName)) {
    return exportName;
  }

  return prepared.name;
};

const getOverviewSiblings = (title: string, overviewStoryId: string): OverviewSibling[] => {
  const view = getStorybookView();
  // eslint-disable-next-line no-underscore-dangle -- Storybook View private API
  const storyIndex = view?._storyIndex;
  // eslint-disable-next-line no-underscore-dangle -- Storybook View private API
  const preparedById = view?._idToPrepared;

  if (!storyIndex?.entries || !preparedById) {
    return [];
  }

  return Object.values(storyIndex.entries)
    .filter((entry): entry is StoryIndexEntry => isSiblingStoryEntry(entry, title, overviewStoryId))
    .map((entry) => {
      const prepared = preparedById[entry.id];

      if (!prepared) {
        return null;
      }

      return {
        id: entry.id,
        label: getSiblingLabel(prepared, entry.exportName),
        args: (prepared.initialArgs ?? {}) as Record<string, unknown>,
      };
    })
    .filter((sibling): sibling is OverviewSibling => sibling !== null);
};

const renderOverviewGrid = (context: StoryContext<ReactRenderer>): ReactElement => {
  const Component = context.component as ComponentType<Record<string, unknown>> | undefined;
  const siblings = getOverviewSiblings(context.title, context.id);

  if (!Component || siblings.length === 0) {
    const emptyStateMessage = Component
      ? 'Overview: no sibling stories ready yet.'
      : 'Overview: meta.component is required.';

    return (
      <Box padding="m">
        {/* Storybook-only developer message — not user-facing copy */}
        <Text>{emptyStateMessage}</Text>
      </Box>
    );
  }

  return (
    <ScrollView>
      <Box gap="xl" paddingVertical="m">
        {siblings.map((sibling) => (
          <Box key={sibling.id} gap="s">
            <Text variant="bodySTitle" color="foregroundFgPrimary">
              {sibling.label}
            </Text>
            {createElement(Component, sibling.args)}
          </Box>
        ))}
      </Box>
    </ScrollView>
  );
};

/**
 * Project-level Storybook `render`. For an `Overview` export without its own
 * `render`, stacks sibling args stories in a labeled ScrollView. Otherwise
 * falls through to the default CSF3 `component` + `args` render.
 *
 * Meta/story decorators still wrap Overview (unlike a replacing decorator).
 * Stories with their own `render` are unaffected (story/meta render win).
 *
 * See `apps/native/docs/guides/storybook-overview.md`.
 */
export const overviewAwareRender = (
  args: Args,
  context: StoryContext<ReactRenderer>,
): ReactElement | null => {
  if (isOverviewStoryId(context.id)) {
    return renderOverviewGrid(context);
  }

  const Component = context.component as ComponentType<Record<string, unknown>> | undefined;

  if (!Component) {
    return null;
  }

  return createElement(Component, args as Record<string, unknown>);
};

then in .rnstorybook/preview.tsx:

const preview: Preview = {
  render: overviewAwareRender,
  ...

and in any .stories.tsx:

const meta: Meta<typeof MyComponent> = {
  title: 'features/example/MyComponent',
  component: MyComponent, // required — Overview renders this with each sibling's args
  decorators: [
    // Optional: still wraps Overview (padding, background, etc.)
  ],
};

export default meta;

type Story = StoryObj<typeof MyComponent>;

/** Empty export is enough — overviewAwareRender builds the grid. */
export const Overview: Story = {};

export const FirstVariant: Story = {
  name: 'Optional label in Overview + sidebar',
  args: { /* ... */ },
};

export const SecondVariant: Story = {
  args: { /* ... */ }, // Overview label falls back to export name: "SecondVariant"
};

I agree a full storybook docs would be more consistent with the web.

[Mathbl]

We ran into the same need and built an in-house native "DocsPage" for @storybook/react-native. It's been working well for our design system, so sharing in case it's useful as a reference for what this could look like:

CleanShot.2026-08-19.at.10.11.31.mp4

Each component gets a Docs story rendering a <DocsPage> with:

• title + description, and a "Figma Code Connect" badge
• import + usage code blocks with syntax highlighting (prism-react-renderer) and copy-to-clipboard
• a props table (name / description / type / default / required)
• labeled story sections rendered as live canvases

export const Docs: Story = {
  render: () => (
    <DocsPage
      title="ActionButton"
      description="Compact action button with optional icon, used for secondary actions."
      importLine={'import { ActionButton } from "@/ds/components";'}
      usage={'<ActionButton title="Call to action" onClick={handleAction} />'}
      figmaCodeConnected
      props={[
        { name: "title", type: "string", description: "Button label", required: true },
        { name: "size", type: '"xs" | "sm" | "md" | "lg"', default: '"md"' },
      ]}
      sections={[
        { title: "With Icon", content: <ActionButton title="Edit" icon={EditIcon} onClick={noop} /> },
        { title: "Disabled", content: <ActionButton title="Call to action" disabled onClick={noop} /> },
      ]}
    />
  ),
};

It's hand-authored rather than automated, so it's the presentation half of what this issue asks for. Pairing it with an adapter that derives the props table from argTypes and the sections from sibling stories (like the view._storyIndex approach above) would give the automated "All"/docs view.

@dannyhw re: "if I made some kinda small package… would that be enough?" — for us, yes. The component is ~300 LOC; ours is currently coupled to our design system (react-strict-dom, our typography/theme, expo-clipboard), but those swap cleanly for plain RN views, a neutral palette, and an injectable clipboard. Happy to extract it as a standalone package if there's interest.