0
# Storybook Actions Addon for React Native
1
2
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.
3
4
## Package Information
5
6
- **Package Name**: @storybook/addon-ondevice-actions
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `yarn add -D @storybook/addon-ondevice-actions`
10
11
## Core Imports
12
13
```typescript
14
import { register } from "@storybook/addon-ondevice-actions";
15
import ActionLogger from "@storybook/addon-ondevice-actions";
16
```
17
18
For side-effect registration:
19
20
```javascript
21
import "@storybook/addon-ondevice-actions/register";
22
```
23
24
The package exports:
25
- `register`: Function to register the addon with Storybook
26
- `ActionLogger`: Default export - the container component for action logging
27
28
## Basic Usage
29
30
### Addon Configuration
31
32
Add the addon to your Storybook configuration:
33
34
```typescript
35
// .rnstorybook/main.ts
36
import type { StorybookConfig } from '@storybook/react-native';
37
38
const main: StorybookConfig = {
39
addons: ['@storybook/addon-ondevice-actions'],
40
};
41
42
export default main;
43
```
44
45
### Manual Registration
46
47
For custom registration scenarios:
48
49
```typescript
50
import { register } from "@storybook/addon-ondevice-actions";
51
52
// Register the addon manually
53
register();
54
```
55
56
### Side-Effect Import
57
58
For automatic registration using side-effects:
59
60
```javascript
61
// This automatically calls register() when imported
62
import "@storybook/addon-ondevice-actions/register";
63
```
64
65
### Component Usage
66
67
The ActionLogger can also be used directly as a component:
68
69
```typescript
70
import ActionLogger from "@storybook/addon-ondevice-actions";
71
import { ActionDisplay } from "storybook/actions";
72
73
const MyComponent = () => {
74
const [actions, setActions] = useState<ActionDisplay[]>([]);
75
const clearActions = () => setActions([]);
76
77
return (
78
<ActionLogger
79
active={true}
80
/>
81
);
82
};
83
```
84
85
Once configured, the Actions addon automatically:
86
- Adds an "Actions" panel to the Storybook UI
87
- Listens for action events from stories using Storybook's event system
88
- Displays logged actions with expandable value inspection
89
- Provides action clearing functionality
90
- Handles story navigation and action history
91
- Deduplicates similar actions and shows count
92
93
## Capabilities
94
95
### Addon Registration
96
97
Registers the Actions addon with Storybook's addon system, adding the Actions panel for logging and displaying component interactions.
98
99
```typescript { .api }
100
/**
101
* Registers the Actions addon with Storybook
102
* Adds the Actions panel to display logged interactions
103
*/
104
function register(): void;
105
```
106
107
The `register()` function:
108
- Registers the addon with a unique identifier (`ADDON_ID`)
109
- Creates the "Actions" panel in the Storybook UI
110
- Sets up the ActionLogger container component
111
- Configures panel rendering and activation
112
- Uses Storybook's internal manager API for addon registration
113
114
### Action Logger Container
115
116
Container component that manages action state, event listening, and renders the action list UI.
117
118
```typescript { .api }
119
/**
120
* Container component for managing action logging state and rendering
121
* @param active - Whether the panel is currently active/visible
122
*/
123
interface ActionLoggerProps {
124
active: boolean;
125
}
126
127
const ActionLogger: React.FC<ActionLoggerProps>;
128
```
129
130
The ActionLogger container:
131
- Manages action state using React hooks
132
- Listens for action events from Storybook's channel system
133
- Handles action deduplication and counting
134
- Provides clear functionality for resetting actions
135
- Conditionally renders based on panel activity
136
- Automatically clears actions on story changes when configured
137
138
### Action Logger Component
139
140
Presentation component that renders the action list with React Native styling.
141
142
```typescript { .api }
143
/**
144
* Presentation component for displaying actions with native styling
145
* @param actions - Array of action displays to render
146
* @param onClear - Callback function to clear all actions
147
*/
148
interface ActionLoggerComponentProps {
149
actions: ActionDisplay[];
150
onClear: () => void;
151
}
152
153
export const ActionLogger: React.FC<ActionLoggerComponentProps>;
154
```
155
156
### Value Inspector
157
158
Expandable component for inspecting complex action payloads with syntax highlighting.
159
160
```typescript { .api }
161
/**
162
* Component for inspecting and expanding action values
163
* @param name - Optional name/key for the value
164
* @param value - The value to inspect and display
165
*/
166
interface InspectProps {
167
name?: string;
168
value: any;
169
}
170
171
const Inspect: React.FC<InspectProps>;
172
```
173
174
## Architecture
175
176
The addon is built around several key components:
177
178
- **Registration Function** (`register`): Main entry point that registers the addon with Storybook's addon system using `addons.register()` and `addons.add()`
179
- **Action Logger Container** (`containers/ActionLogger`): React component that manages action state with hooks, listens to Storybook events, and handles action deduplication
180
- **Action Logger UI** (`components/ActionLogger`): React Native component that renders the scrollable action list with native styling using `ScrollView` and `Button`
181
- **Value Inspector** (`components/ActionLogger/Inspect`): Expandable component with touch interaction for inspecting complex action payloads with syntax highlighting
182
- **Register Entry Point** (`register.js`): Side-effect entry point that automatically calls the register function
183
- **Event System Integration**: Uses Storybook's channel API (`addons.getChannel()`) to listen for `EVENT_ID` and `SET_CURRENT_STORY` events
184
185
The addon automatically handles:
186
- Action event capture from story interactions via Storybook's channel system
187
- Action deduplication using `fast-deep-equal` comparison and counting with `action.count`
188
- Story change detection using `SET_CURRENT_STORY` event and optional action clearing based on `clearOnStoryChange` option
189
- React Native compatible UI rendering with `StyleSheet` and native components
190
- Touch-based interaction for expanding/collapsing action details using `TouchableOpacity`
191
- Action limiting based on `action.options.limit` configuration
192
193
## Types
194
195
```typescript { .api }
196
/**
197
* Action display object containing action data and metadata
198
*/
199
interface ActionDisplay {
200
id: string;
201
count: number;
202
data: {
203
name: string;
204
args?: any[];
205
[key: string]: any;
206
};
207
options: {
208
clearOnStoryChange?: boolean;
209
limit: number;
210
};
211
}
212
213
/**
214
* Props for the ActionLogger container component
215
*/
216
interface ActionLoggerProps {
217
active: boolean;
218
}
219
220
/**
221
* Props for the ActionLogger presentation component
222
*/
223
interface ActionLoggerComponentProps {
224
actions: ActionDisplay[];
225
onClear: () => void;
226
}
227
228
/**
229
* Props for the Inspect component
230
*/
231
interface InspectProps {
232
name?: string;
233
value: any;
234
}
235
```
236
237
## Dependencies
238
239
The addon relies on:
240
- React and React Native for UI components
241
- Storybook core APIs (`storybook/internal/manager-api`, `storybook/internal/core-events`)
242
- Storybook actions API (`storybook/actions`)
243
- fast-deep-equal for action comparison and deduplication
244
245
The addon integrates seamlessly with the broader Storybook ecosystem and requires Storybook 9+ as a peer dependency.