react-native: `@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.