Storybook Actions Addon for React Native

Storybook Actions Addon for React Native provides action logging capabilities within the Storybook development environment. It enables developers to monitor and log user interactions and events during component development, making it easier to debug and understand component behavior in isolation.

Package Information

• Package Name: @storybook/addon-ondevice-actions
• Package Type: npm
• Language: TypeScript
• Installation: yarn add -D @storybook/addon-ondevice-actions

Core Imports

import { register } from "@storybook/addon-ondevice-actions";
import ActionLogger from "@storybook/addon-ondevice-actions";

For side-effect registration:

import "@storybook/addon-ondevice-actions/register";

The package exports:

• register: Function to register the addon with Storybook
• ActionLogger: Default export - the container component for action logging

Basic Usage

Addon Configuration

Add the addon to your Storybook configuration:

// .rnstorybook/main.ts
import type { StorybookConfig } from '@storybook/react-native';

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

export default main;

Manual Registration

For custom registration scenarios:

import { register } from "@storybook/addon-ondevice-actions";

// Register the addon manually
register();

Side-Effect Import

For automatic registration using side-effects:

// This automatically calls register() when imported
import "@storybook/addon-ondevice-actions/register";

Component Usage

The ActionLogger can also be used directly as a component:

import ActionLogger from "@storybook/addon-ondevice-actions";
import { ActionDisplay } from "storybook/actions";

const MyComponent = () => {
  const [actions, setActions] = useState<ActionDisplay[]>([]);
  const clearActions = () => setActions([]);
  
  return (
    <ActionLogger 
      active={true} 
    />
  );
};

Once configured, the Actions addon automatically:

• Adds an "Actions" panel to the Storybook UI
• Listens for action events from stories using Storybook's event system
• Displays logged actions with expandable value inspection
• Provides action clearing functionality
• Handles story navigation and action history
• Deduplicates similar actions and shows count

Capabilities

Addon Registration

Registers the Actions addon with Storybook's addon system, adding the Actions panel for logging and displaying component interactions.

/**
 * Registers the Actions addon with Storybook
 * Adds the Actions panel to display logged interactions
 */
function register(): void;

The register() function:

• Registers the addon with a unique identifier (ADDON_ID)
• Creates the "Actions" panel in the Storybook UI
• Sets up the ActionLogger container component
• Configures panel rendering and activation
• Uses Storybook's internal manager API for addon registration

Action Logger Container

Container component that manages action state, event listening, and renders the action list UI.

/**
 * Container component for managing action logging state and rendering
 * @param active - Whether the panel is currently active/visible
 */
interface ActionLoggerProps {
  active: boolean;
}

const ActionLogger: React.FC<ActionLoggerProps>;

The ActionLogger container:

• Manages action state using React hooks
• Listens for action events from Storybook's channel system
• Handles action deduplication and counting
• Provides clear functionality for resetting actions
• Conditionally renders based on panel activity
• Automatically clears actions on story changes when configured

Action Logger Component

Presentation component that renders the action list with React Native styling.

/**
 * Presentation component for displaying actions with native styling
 * @param actions - Array of action displays to render
 * @param onClear - Callback function to clear all actions
 */
interface ActionLoggerComponentProps {
  actions: ActionDisplay[];
  onClear: () => void;
}

export const ActionLogger: React.FC<ActionLoggerComponentProps>;

Value Inspector

Expandable component for inspecting complex action payloads with syntax highlighting.

/**
 * Component for inspecting and expanding action values
 * @param name - Optional name/key for the value
 * @param value - The value to inspect and display
 */
interface InspectProps {
  name?: string;
  value: any;
}

const Inspect: React.FC<InspectProps>;

Architecture

The addon is built around several key components:

• Registration Function (register): Main entry point that registers the addon with Storybook's addon system using addons.register() and addons.add()
• Action Logger Container (containers/ActionLogger): React component that manages action state with hooks, listens to Storybook events, and handles action deduplication
• Action Logger UI (components/ActionLogger): React Native component that renders the scrollable action list with native styling using ScrollView and Button
• Value Inspector (components/ActionLogger/Inspect): Expandable component with touch interaction for inspecting complex action payloads with syntax highlighting
• Register Entry Point (register.js): Side-effect entry point that automatically calls the register function
• Event System Integration: Uses Storybook's channel API (addons.getChannel()) to listen for EVENT_ID and SET_CURRENT_STORY events

The addon automatically handles:

• Action event capture from story interactions via Storybook's channel system
• Action deduplication using fast-deep-equal comparison and counting with action.count
• Story change detection using SET_CURRENT_STORY event and optional action clearing based on clearOnStoryChange option
• React Native compatible UI rendering with StyleSheet and native components
• Touch-based interaction for expanding/collapsing action details using TouchableOpacity
• Action limiting based on action.options.limit configuration

Types

/**
 * Action display object containing action data and metadata
 */
interface ActionDisplay {
  id: string;
  count: number;
  data: {
    name: string;
    args?: any[];
    [key: string]: any;
  };
  options: {
    clearOnStoryChange?: boolean;
    limit: number;
  };
}

/**
 * Props for the ActionLogger container component
 */
interface ActionLoggerProps {
  active: boolean;
}

/**
 * Props for the ActionLogger presentation component
 */
interface ActionLoggerComponentProps {
  actions: ActionDisplay[];
  onClear: () => void;
}

/**
 * Props for the Inspect component
 */
interface InspectProps {
  name?: string;
  value: any;
}

Dependencies

The addon relies on:

• React and React Native for UI components
• Storybook core APIs (storybook/internal/manager-api, storybook/internal/core-events)
• Storybook actions API (storybook/actions)
• fast-deep-equal for action comparison and deduplication

The addon integrates seamlessly with the broader Storybook ecosystem and requires Storybook 9+ as a peer dependency.