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.
Storybook Actions Addon for react-native
Storybook Actions Addon allows you to log events/actions inside stories in Storybook.
Framework Support
This addon is a wrapper for addon @storybook/addon-actions.
Refer to its documentation to understand how to use actions
Installation
yarn add -D @storybook/addon-ondevice-actions @storybook/addon-actions
Configuration
Create a file called rn-addons.js
in your storybook config.
Add following content to it:
import '@storybook/addon-ondevice-actions/register';
Then import rn-addons.js
next to your getStorybookUI
call.
import './rn-addons';
See @storybook/addon-actions to learn how to write stories with actions and the crna-kitchen-sink app for more examples.
v6.0.1-alpha.0
Features
Many of these features come from the web storybook so you can find more info by looking at the storybook documentation.
- New story format CSF
- Args
- Knobs replaced by Controls
- ondevice addons Notes, actions and backgrounds have all been updated to work for 6.0+
- New declarative config style
- Auto story detection built in. Including an optional watcher.
- Overall simplified implementation
Bug fixes
- Much less warnings when using controls (knobs replacement) - no longer using deprecated components.
- Promises no longer break for the entire app when using storybook.
- Weird storylist bottom margin is now gone
Breaking Changes
- Knobs are no longer supported, use controls instead
- storiesOf syntax is no longer recommended and you should move to CSF
- You now require a main.js and preview.js file to configure storybook.
- in order to resolve issues with polyfills that caused promises to break and much more you should change your metro config to include
resolverMainFields: ['sbmodern', 'main']
in the resolver field
See https://github.com/storybookjs/react-native/blob/next-6.0/v6README.md for a guide to try out this alpha