`@storybook/addon-actions` & `@storybook/addon-ondevice-actions` are not working

I’m using @storybook/react-native and @storybook/react-native-server and having the same issue (or at least same error message) as described here: https://github.com/storybooks/storybook/issues/6471#issue-431269970 (ie. synthetic event is used for performance reasons error)

Summary

• @storybook/react-native: No addons are shown on the device (under the addons tab on iOS Simulator)
• @storybook/react-native-server: Unlike @storybook/react-native, the addons tab displays as expected. However, when clicking a button with an action() handler on it (eg.<Button onPress={action("clicked-text")}>), a “synthetic event handler” error is thrown recursively.

Source (storybook/stories/index.js)

storiesOf("Button", module)
  .addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
  .add("with text", () => (
    <Button onPress={action("clicked-text")}>
      <Text>Hello Button</Text>
    </Button>
  ))

Error

The error below recurses

Screenshot

Text

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're %s `%s` on a released/nullified synthetic event. %s. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information., accessing the property, target, This is set to null
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:619:8 in warningWithoutStack
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:1577:10 in warn
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:1569:9 in get$$1
* [native code]:null in stringify
- node_modules/@storybook/react-native/node_modules/@storybook/channel-websocket/dist/index.js:67:46 in sendNow
- node_modules/@storybook/react-native/node_modules/@storybook/channel-websocket/dist/index.js:56:21 in send
- node_modules/@storybook/channels/dist/index.js:126:32 in handler
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:152:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:200:17 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:464:30 in callImmediates
* [native code]:null in callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:320:6 in __callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:135:6 in <unknown>
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:297:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:134:17 in flushedQueue
* [native code]:null in flushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

Screenshots

Chrome (@storybook/react-native-server)

iOS Simulator (@storybook/react-native)

Config

package.json

Also, if you’re wondering why I’m using @storybook/react-native-server@5.1.0-alpha.7 instead of @storybook/react-native-server@5.1.0-beta.0 please see this issue: https://github.com/storybooks/storybook/issues/6769

  "scripts": {
    "android": "expo start --android",
    "build": "yarn run build:components",
    "build:components": "webpack --config ./webpack.components.js",
    "eject": "expo eject",
    "expo": "expo start",
    "ios": "expo start --ios",
    "start": "npm-run-all --parallel expo storybook",
    "storybook": "start-storybook -p 7007"
  },
  "dependencies": {
    "@emotion/native": "^10.0.11",
    "expo": "^32.0.0",
    "native-base": "^2.12.1",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-router": "^5.0.0"
  },
  "devDependencies": {
    "@babel/preset-react": "^7.0.0",
    "@emotion/core": "^10.0.10",
    "@storybook/addon-actions": "^5.0.11",
    "@storybook/addon-links": "^5.0.11",
    "@storybook/addon-storysource": "^5.0.11",
    "@storybook/addons": "^5.0.11",
    "@storybook/react-native": "^5.0.11",
    "@storybook/react-native-server": "5.1.0-alpha.7",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.5",
    "babel-preset-expo": "^5.0.0",
    "babel-runtime": "^6.26.0",
    "duplicate-package-checker-webpack-plugin": "^3.0.0",
    "emotion-theming": "^10.0.10",
    "npm-run-all": "^4.1.5",
    "prop-types": "^15.7.2",
    "react-dom": "16.5.0",
    "size-plugin": "^1.2.0",
    "storybook-react-router": "^1.0.5",
    "webpack-cli": "^3.3.2",
    "webpack-node-externals": "^1.7.2"
  },

Addon files

addons.js

import "@storybook/addon-actions/register";
import "@storybook/addon-links/register";
import "@storybook/addon-storysource/register";

rn-addons.js

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

Quick Fix

Haven’t found a quick fix yet (besides not using @storybook/addon-actions / @storybook/addon-ondevice-actions).

I’m going to try upgrading react-dom like suggested here: https://github.com/storybooks/storybook/issues/6471#issue-431269970

I’ll update if that progresses the “synthetic event” error.

[traviswimer]

I ran into this error while using the default React Native stories.

This probably isn’t exactly the same problem that this issue is discussing, but I want to mention it in case it helps.

For me the problem was that when these default stories import their index.js file, they do so like this:

import Welcome from '.';

This results in an error, but I was able to prevent the error by actually including the index file name in the import:

import Welcome from './index';

I’m not sure if this is just a result of my specific environment or if it is a bug in the Storybook default examples. I am using Typescript, so maybe that is part of the problem. (isn’t it always 😏)

[mashaalmemon]

I just started using storybook and noticed us react-native folks are still on 5.3 whereas the rest of the storybook ecosystem is on 6.3!

For anyone still experiencing this error on 5.3 with react native, looking at the error experienced closer it says:

Warning: This synthetic event is reused for performance reasons. If you’re seeing this, you’re accessing the method isPropagationStopped on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See https://reactjs.org/link/event-pooling for more information.

Using @alechp 's example which is from the storybook react-native ‘Hello World’:

storiesOf("Button", module)
  .addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
  .add("with text", () => (
    <Button onPress={action("clicked-text")}>
      <Text>Hello Button</Text>
    </Button>
  ))

To get rid of the nuisance error we can just replace

onPress={action("clicked-text")}

with

onPress={(e)=>{ e.persist(); action('clicked-text')(e)}}

Ultimately we’re just calling event.persist() before calling the handler generated by action. Once this is done, e everything else seems to work the same (that is the action feeds through to the react-native-server), without the nuisance error!