@storybook/addon-ondevice-actions

What is @storybook/addon-ondevice-actions?

@storybook/addon-ondevice-actions is an addon for Storybook that allows you to log actions and events directly on your device. This is particularly useful for mobile and tablet development, where you want to see the interactions and events happening in real-time on the actual device.

What are @storybook/addon-ondevice-actions's main functionalities?

Logging Actions

This feature allows you to log actions such as button presses. The `action` function from `@storybook/addon-ondevice-actions` is used to log the event, which can then be viewed in the Storybook UI.

import { storiesOf } from '@storybook/react-native';
import { action } from '@storybook/addon-ondevice-actions';
import { Button } from 'react-native';

storiesOf('Button', module)
  .add('with text', () => (
    <Button
      onPress={action('button-pressed')}
      title="Press me"
    />
  ));

Custom Action Handlers

This feature allows you to create custom action handlers for different events. In this example, the `onChangeText` event of a `TextInput` component is logged using the `action` function.

import { storiesOf } from '@storybook/react-native';
import { action } from '@storybook/addon-ondevice-actions';
import { TextInput } from 'react-native';

storiesOf('TextInput', module)
  .add('with placeholder', () => (
    <TextInput
      placeholder="Type here"
      onChangeText={action('text-changed')}
    />
  ));

Other packages similar to @storybook/addon-ondevice-actions

@storybook/addon-actions

@storybook/addon-actions is a similar addon for Storybook, but it is designed for web applications. It allows you to log actions and events in the Storybook UI, making it easier to debug and understand component behavior.

@storybook/addon-knobs

@storybook/addon-knobs allows you to dynamically edit props of your components in the Storybook UI. While it doesn't log actions, it provides a way to interact with and test components in real-time, similar to how @storybook/addon-ondevice-actions allows you to see real-time interactions.

@storybook/addon-controls

@storybook/addon-controls is another addon that allows you to interact with component props dynamically. It provides a more advanced and flexible way to manipulate component inputs compared to @storybook/addon-ondevice-actions, which focuses on logging actions.

README

Storybook Actions Addon for react-native

Storybook Actions Addon allows you to log events/actions inside stories in Storybook.

Installation

yarn add -D @storybook/addon-ondevice-actions

Configuration

Then, add following content to .storybook/main.ts:

import { StorybookConfig } from '@storybook/react-native';

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

export default main;

The actions documentation may also be useful.