From 8292cea322f2af0f0e0f07b3b16cbefdf26eddc8 Mon Sep 17 00:00:00 2001
From: Forbes Lindesay <forbes.lindesay@threadsstyling.com>
Date: Thu, 18 Apr 2019 16:07:24 +0100
Subject: [PATCH 1/8] feat: addon-ondevice-actions

This adds an ondevice actions addon that shows a logger for the actions on device.
---
 addons/actions/src/index.ts                   |   1 +
 addons/ondevice-actions/README.md             |  32 ++++
 addons/ondevice-actions/package.json          |  47 +++++
 addons/ondevice-actions/register.js           |   1 +
 .../src/components/ActionLogger/Inspect.tsx   | 173 ++++++++++++++++++
 .../src/components/ActionLogger/index.tsx     |  31 ++++
 .../src/containers/ActionLogger/index.tsx     |  86 +++++++++
 addons/ondevice-actions/src/index.tsx         |  13 ++
 addons/ondevice-actions/tsconfig.json         |  13 ++
 yarn.lock                                     |   4 +-
 10 files changed, 399 insertions(+), 2 deletions(-)
 create mode 100644 addons/ondevice-actions/README.md
 create mode 100644 addons/ondevice-actions/package.json
 create mode 100644 addons/ondevice-actions/register.js
 create mode 100644 addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx
 create mode 100644 addons/ondevice-actions/src/components/ActionLogger/index.tsx
 create mode 100644 addons/ondevice-actions/src/containers/ActionLogger/index.tsx
 create mode 100644 addons/ondevice-actions/src/index.tsx
 create mode 100644 addons/ondevice-actions/tsconfig.json

diff --git a/addons/actions/src/index.ts b/addons/actions/src/index.ts
index 8a6ce711f9b8..8eeba5a84f10 100644
--- a/addons/actions/src/index.ts
+++ b/addons/actions/src/index.ts
@@ -1,4 +1,5 @@
 export * from './constants';
+export * from './models';
 export * from './preview';
 
 if (module && module.hot && module.hot.decline) {
diff --git a/addons/ondevice-actions/README.md b/addons/ondevice-actions/README.md
new file mode 100644
index 000000000000..183cb89c9914
--- /dev/null
+++ b/addons/ondevice-actions/README.md
@@ -0,0 +1,32 @@
+# Storybook Actions Addon for react-native
+
+Storybook Actions Addon allows you to log events/actions inside stories in [Storybook](https://storybook.js.org).
+
+[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
+
+**This addon is a wrapper for addon [@storybook/addon-actions](https://github.com/storybooks/storybook/blob/master/addons/actions).
+Refer to its documentation to understand how to use actions**
+
+## Installation
+
+```sh
+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:
+
+```js
+import '@storybook/addon-ondevice-actions/register';
+```
+
+Then import `rn-addons.js` next to your `getStorybookUI` call.
+
+```js
+import './rn-addons';
+```
+
+See [@storybook/addon-actions](https://github.com/storybooks/storybook/blob/master/addons/actions) to learn how to write stories with actions and the [crna-kitchen-sink app](../../examples-native/crna-kitchen-sink) for more examples.
diff --git a/addons/ondevice-actions/package.json b/addons/ondevice-actions/package.json
new file mode 100644
index 000000000000..ee729f80667c
--- /dev/null
+++ b/addons/ondevice-actions/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "@storybook/addon-ondevice-actions",
+  "version": "5.1.0-alpha.29",
+  "description": "Action Logger addon for storybook",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybooks/storybook/tree/master/addons/actions",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storybook.git"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "jsnext:main": "src/index.js",
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "5.1.0-alpha.29",
+    "@storybook/api": "5.1.0-alpha.29",
+    "@storybook/core-events": "5.1.0-alpha.29",
+    "core-js": "^2.5.7",
+    "fast-deep-equal": "^2.0.1",
+    "global": "^4.3.2",
+    "lodash": "^4.17.11",
+    "make-error": "^1.3.5",
+    "prop-types": "^15.6.2",
+    "react-inspector": "^2.3.0",
+    "uuid": "^3.3.2"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "5.1.0-alpha.29"
+  },
+  "peerDependencies": {
+    "@storybook/addon-actions": "*",
+    "react": "*",
+    "react-native": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "fbd7ee4c80df437fed4bdc6e11140733fd450080"
+}
diff --git a/addons/ondevice-actions/register.js b/addons/ondevice-actions/register.js
new file mode 100644
index 000000000000..e69edbea3ed1
--- /dev/null
+++ b/addons/ondevice-actions/register.js
@@ -0,0 +1 @@
+require('./dist').register();
diff --git a/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx b/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx
new file mode 100644
index 000000000000..ec5023ad9176
--- /dev/null
+++ b/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx
@@ -0,0 +1,173 @@
+import React from 'react';
+import { Button, View, Text } from 'react-native';
+
+const theme = {
+  OBJECT_PREVIEW_ARRAY_MAX_PROPERTIES: 10,
+  OBJECT_PREVIEW_OBJECT_MAX_PROPERTIES: 5,
+  OBJECT_NAME_COLOR: 'rgb(136, 19, 145)',
+  OBJECT_VALUE_NULL_COLOR: 'rgb(128, 128, 128)',
+  OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(128, 128, 128)',
+  OBJECT_VALUE_REGEXP_COLOR: 'rgb(196, 26, 22)',
+  OBJECT_VALUE_STRING_COLOR: 'rgb(196, 26, 22)',
+  OBJECT_VALUE_SYMBOL_COLOR: 'rgb(196, 26, 22)',
+  OBJECT_VALUE_NUMBER_COLOR: 'rgb(28, 0, 207)',
+  OBJECT_VALUE_BOOLEAN_COLOR: 'rgb(28, 0, 207)',
+  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(13, 34, 170)',
+
+  ARROW_COLOR: '#6e6e6e',
+  ARROW_MARGIN_RIGHT: 3,
+  ARROW_FONT_SIZE: 12,
+  ARROW_ANIMATION_DURATION: '0',
+};
+
+class Inspect extends React.Component<{ name?: string; value: any }, { expanded: boolean }> {
+  state = { expanded: false };
+  render() {
+    const { name, value } = this.props;
+    const { expanded } = this.state;
+    const toggle = (
+      <View style={{ width: 40, height: 40 }}>
+        {name &&
+        ((Array.isArray(value) && value.length) ||
+          (value &&
+            typeof value === 'object' &&
+            !Array.isArray(value) &&
+            Object.keys(value).length)) ? (
+          <Button
+            onPress={() => this.setState(s => ({ expanded: !s.expanded }))}
+            title={!expanded ? '▶' : '▼'}
+          />
+        ) : null}
+      </View>
+    );
+
+    const nameComponent = name ? (
+      <Text style={{ color: theme.OBJECT_NAME_COLOR }}>{name}</Text>
+    ) : null;
+
+    if (Array.isArray(value)) {
+      if (name) {
+        return (
+          <>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              {toggle}
+              {nameComponent}
+              <Text>{': ' + (value.length === 0 ? '[]' : expanded ? '[' : '[...]')}</Text>
+            </View>
+            {expanded ? (
+              <View style={{ marginLeft: 40 }}>
+                {value.map((v, i) => (
+                  <View key={i} style={{ marginLeft: 40 }}>
+                    <Inspect value={v} />
+                  </View>
+                ))}
+                <View style={{ marginLeft: 20 }}>
+                  <Text>{']'}</Text>
+                </View>
+              </View>
+            ) : null}
+          </>
+        );
+      }
+      return (
+        <View>
+          <Text>{'['}</Text>
+          {value.map((v, i) => (
+            <View key={i} style={{ marginLeft: 20 }}>
+              <Inspect value={v} />
+            </View>
+          ))}
+          <Text>{']'}</Text>
+        </View>
+      );
+    }
+    if (typeof value === 'object' && !(value instanceof RegExp)) {
+      if (name) {
+        return (
+          <>
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              {toggle}
+              {nameComponent}
+              <Text>
+                {': ' + (Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}')}
+              </Text>
+            </View>
+            {expanded ? (
+              <View style={{ marginLeft: 40 }}>
+                {Object.entries(value).map(([key, v]) => (
+                  <View key={key}>
+                    <Inspect name={key} value={v} />
+                  </View>
+                ))}
+                <View style={{ marginLeft: 20 }}>
+                  <Text>{'}'}</Text>
+                </View>
+              </View>
+            ) : null}
+          </>
+        );
+      }
+      return (
+        <View>
+          <Text>{'{'}</Text>
+          {Object.entries(value).map(([key, v]) => (
+            <View key={key}>
+              <Inspect name={key} value={v} />
+            </View>
+          ))}
+          <Text>{'}'}</Text>
+        </View>
+      );
+    }
+    if (name) {
+      return (
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          {toggle}
+          {nameComponent}
+          <Text>{': '}</Text>
+          <Value value={value} />
+        </View>
+      );
+    }
+    return (
+      <View>
+        <Value value={value} />
+      </View>
+    );
+  }
+}
+
+function Value({ value }: { value: any }) {
+  if (value === null) {
+    return <Text style={{ color: theme.OBJECT_VALUE_NULL_COLOR }}>null</Text>;
+  }
+  if (value === undefined) {
+    return <Text style={{ color: theme.OBJECT_VALUE_UNDEFINED_COLOR }}>undefined</Text>;
+  }
+  if (value instanceof RegExp) {
+    return (
+      <Text style={{ color: theme.OBJECT_VALUE_REGEXP_COLOR }}>
+        {'/' + value.source + '/' + value.flags}
+      </Text>
+    );
+  }
+  switch (typeof value) {
+    case 'string':
+      return (
+        <Text style={{ color: theme.OBJECT_VALUE_STRING_COLOR }}>{JSON.stringify(value)}</Text>
+      );
+    case 'number':
+      return (
+        <Text style={{ color: theme.OBJECT_VALUE_NUMBER_COLOR }}>{JSON.stringify(value)}</Text>
+      );
+    case 'boolean':
+      return (
+        <Text style={{ color: theme.OBJECT_VALUE_BOOLEAN_COLOR }}>{JSON.stringify(value)}</Text>
+      );
+    case 'function':
+      return <Text style={{ color: theme.OBJECT_VALUE_FUNCTION_PREFIX_COLOR }}>[Function]</Text>;
+  }
+  return <Text>{JSON.stringify(value)}</Text>;
+}
+
+export default Inspect;
diff --git a/addons/ondevice-actions/src/components/ActionLogger/index.tsx b/addons/ondevice-actions/src/components/ActionLogger/index.tsx
new file mode 100644
index 000000000000..efe84ca53e97
--- /dev/null
+++ b/addons/ondevice-actions/src/components/ActionLogger/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Button, View, Text, ScrollView } from 'react-native';
+import { ActionDisplay } from '@storybook/addon-actions';
+import Inspect from './Inspect';
+
+interface ActionLoggerProps {
+  actions: ActionDisplay[];
+  onClear: () => void;
+}
+
+export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => (
+  <ScrollView>
+    <ScrollView horizontal>
+      <View>
+        {actions.map((action: ActionDisplay) => (
+          <View key={action.id} style={{ flexDirection: 'row' }}>
+            <View>{action.count > 1 ? <Text>{action.count}</Text> : null}</View>
+            <View style={{ flexGrow: 1 }}>
+              <Inspect name={action.data.name} value={action.data.args || action.data} />
+            </View>
+          </View>
+        ))}
+      </View>
+    </ScrollView>
+    <View>
+      <Button onPress={onClear} title="CLEAR" />
+    </View>
+  </ScrollView>
+);
+
+export default ActionLogger;
diff --git a/addons/ondevice-actions/src/containers/ActionLogger/index.tsx b/addons/ondevice-actions/src/containers/ActionLogger/index.tsx
new file mode 100644
index 000000000000..ca7713c6c3e6
--- /dev/null
+++ b/addons/ondevice-actions/src/containers/ActionLogger/index.tsx
@@ -0,0 +1,86 @@
+import React, { Component } from 'react';
+import deepEqual from 'fast-deep-equal';
+
+import { API } from '@storybook/api';
+import { STORY_RENDERED } from '@storybook/core-events';
+import { EVENT_ID, ActionDisplay } from '@storybook/addon-actions';
+
+import { ActionLogger as ActionLoggerComponent } from '../../components/ActionLogger';
+
+interface ActionLoggerProps {
+  active: boolean;
+  api: API;
+}
+
+interface ActionLoggerState {
+  actions: ActionDisplay[];
+}
+
+const safeDeepEqual = (a: any, b: any): boolean => {
+  try {
+    return deepEqual(a, b);
+  } catch (e) {
+    return false;
+  }
+};
+
+export default class ActionLogger extends Component<ActionLoggerProps, ActionLoggerState> {
+  private mounted: boolean;
+
+  constructor(props: ActionLoggerProps) {
+    super(props);
+
+    this.state = { actions: [] };
+  }
+
+  componentDidMount() {
+    this.mounted = true;
+    const { api } = this.props;
+
+    api.on(EVENT_ID, this.addAction);
+    api.on(STORY_RENDERED, this.handleStoryChange);
+  }
+
+  componentWillUnmount() {
+    this.mounted = false;
+    const { api } = this.props;
+
+    api.off(STORY_RENDERED, this.handleStoryChange);
+    api.off(EVENT_ID, this.addAction);
+  }
+
+  handleStoryChange = () => {
+    const { actions } = this.state;
+    if (actions.length > 0 && actions[0].options.clearOnStoryChange) {
+      this.clearActions();
+    }
+  };
+
+  addAction = (action: ActionDisplay) => {
+    this.setState((prevState: ActionLoggerState) => {
+      const actions = [...prevState.actions];
+      const previous = actions.length && actions[0];
+      if (previous && safeDeepEqual(previous.data, action.data)) {
+        previous.count++; // eslint-disable-line
+      } else {
+        action.count = 1; // eslint-disable-line
+        actions.unshift(action);
+      }
+      return { actions: actions.slice(0, action.options.limit) };
+    });
+  };
+
+  clearActions = () => {
+    this.setState({ actions: [] });
+  };
+
+  render() {
+    const { actions = [] } = this.state;
+    const { active } = this.props;
+    const props = {
+      actions,
+      onClear: this.clearActions,
+    };
+    return active ? <ActionLoggerComponent {...props} /> : null;
+  }
+}
diff --git a/addons/ondevice-actions/src/index.tsx b/addons/ondevice-actions/src/index.tsx
new file mode 100644
index 000000000000..2b92178b50d6
--- /dev/null
+++ b/addons/ondevice-actions/src/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import addons from '@storybook/addons';
+import { ADDON_ID, PANEL_ID } from '@storybook/addon-actions';
+import ActionLogger from './containers/ActionLogger';
+
+export function register() {
+  addons.register(ADDON_ID, api => {
+    addons.addPanel(PANEL_ID, {
+      title: 'Actions',
+      render: ({ active, key }) => <ActionLogger key={key} api={api} active={active} />,
+    });
+  });
+}
diff --git a/addons/ondevice-actions/tsconfig.json b/addons/ondevice-actions/tsconfig.json
new file mode 100644
index 000000000000..8876bb6737a1
--- /dev/null
+++ b/addons/ondevice-actions/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/__tests__/**/*"
+  ]
+}
diff --git a/yarn.lock b/yarn.lock
index b194111882e8..c311d1c016cd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16817,7 +16817,7 @@ make-dir@^2.0.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-error@1.x, make-error@^1.1.1:
+make-error@1.x, make-error@^1.1.1, make-error@^1.3.5:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.5.tgz#efe4e81f6db28cadd605c70f29c831b58ef776c8"
   integrity sha512-c3sIjNUow0+8swNwVpqoH4YCShKNFkMaw6oH1mNS2haDZQqkeZFlHS3dhoeEbKKmJB4vXpJucU6oH75aDYeE9g==
@@ -21337,7 +21337,7 @@ react-input-autosize@^2.2.1:
   dependencies:
     prop-types "^15.5.8"
 
-react-inspector@^2.3.1:
+react-inspector@^2.3.0, react-inspector@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-2.3.1.tgz#f0eb7f520669b545b441af9d38ec6d706e5f649c"
   integrity sha512-tUUK7t3KWgZEIUktOYko5Ic/oYwvjEvQUFAGC1UeMeDaQ5za2yZFtItJa2RTwBJB//NxPr000WQK6sEbqC6y0Q==

From 077509c50e53c911657661434af4dc59a43f03ce Mon Sep 17 00:00:00 2001
From: Forbes Lindesay <forbes.lindesay@threadsstyling.com>
Date: Tue, 23 Apr 2019 12:45:01 +0100
Subject: [PATCH 2/8] fix: use addons channel for events

The "API" passed to react native addons is not the same kind of API passed to web addons, so the previous code failed.
---
 addons/ondevice-actions/package.json          |  1 -
 .../src/containers/ActionLogger/index.tsx     | 21 +++++++------------
 addons/ondevice-actions/src/index.tsx         |  4 ++--
 3 files changed, 9 insertions(+), 17 deletions(-)

diff --git a/addons/ondevice-actions/package.json b/addons/ondevice-actions/package.json
index ee729f80667c..c52d3b113204 100644
--- a/addons/ondevice-actions/package.json
+++ b/addons/ondevice-actions/package.json
@@ -21,7 +21,6 @@
   },
   "dependencies": {
     "@storybook/addons": "5.1.0-alpha.29",
-    "@storybook/api": "5.1.0-alpha.29",
     "@storybook/core-events": "5.1.0-alpha.29",
     "core-js": "^2.5.7",
     "fast-deep-equal": "^2.0.1",
diff --git a/addons/ondevice-actions/src/containers/ActionLogger/index.tsx b/addons/ondevice-actions/src/containers/ActionLogger/index.tsx
index ca7713c6c3e6..292b91655a41 100644
--- a/addons/ondevice-actions/src/containers/ActionLogger/index.tsx
+++ b/addons/ondevice-actions/src/containers/ActionLogger/index.tsx
@@ -1,15 +1,14 @@
 import React, { Component } from 'react';
 import deepEqual from 'fast-deep-equal';
 
-import { API } from '@storybook/api';
+import { addons } from '@storybook/addons';
 import { STORY_RENDERED } from '@storybook/core-events';
-import { EVENT_ID, ActionDisplay } from '@storybook/addon-actions';
+import { ActionDisplay, EVENT_ID } from '@storybook/addon-actions';
 
 import { ActionLogger as ActionLoggerComponent } from '../../components/ActionLogger';
 
 interface ActionLoggerProps {
   active: boolean;
-  api: API;
 }
 
 interface ActionLoggerState {
@@ -25,7 +24,7 @@ const safeDeepEqual = (a: any, b: any): boolean => {
 };
 
 export default class ActionLogger extends Component<ActionLoggerProps, ActionLoggerState> {
-  private mounted: boolean;
+  private channel = addons.getChannel();
 
   constructor(props: ActionLoggerProps) {
     super(props);
@@ -34,19 +33,13 @@ export default class ActionLogger extends Component<ActionLoggerProps, ActionLog
   }
 
   componentDidMount() {
-    this.mounted = true;
-    const { api } = this.props;
-
-    api.on(EVENT_ID, this.addAction);
-    api.on(STORY_RENDERED, this.handleStoryChange);
+    this.channel.addListener(EVENT_ID, this.addAction);
+    this.channel.addListener(STORY_RENDERED, this.handleStoryChange);
   }
 
   componentWillUnmount() {
-    this.mounted = false;
-    const { api } = this.props;
-
-    api.off(STORY_RENDERED, this.handleStoryChange);
-    api.off(EVENT_ID, this.addAction);
+    this.channel.removeListener(STORY_RENDERED, this.handleStoryChange);
+    this.channel.removeListener(EVENT_ID, this.addAction);
   }
 
   handleStoryChange = () => {
diff --git a/addons/ondevice-actions/src/index.tsx b/addons/ondevice-actions/src/index.tsx
index 2b92178b50d6..76602d22ae9c 100644
--- a/addons/ondevice-actions/src/index.tsx
+++ b/addons/ondevice-actions/src/index.tsx
@@ -4,10 +4,10 @@ import { ADDON_ID, PANEL_ID } from '@storybook/addon-actions';
 import ActionLogger from './containers/ActionLogger';
 
 export function register() {
-  addons.register(ADDON_ID, api => {
+  addons.register(ADDON_ID, () => {
     addons.addPanel(PANEL_ID, {
       title: 'Actions',
-      render: ({ active, key }) => <ActionLogger key={key} api={api} active={active} />,
+      render: ({ active, key }) => <ActionLogger key={key} active={active} />,
     });
   });
 }

From 95bcd71511d1edfe641e443b4baae9268c81b49a Mon Sep 17 00:00:00 2001
From: Forbes Lindesay <forbes.lindesay@threadsstyling.com>
Date: Tue, 23 Apr 2019 12:55:26 +0100
Subject: [PATCH 3/8] fix: resolve issue when inspecting `null`

---
 addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx b/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx
index ec5023ad9176..bcf4f1fcac2e 100644
--- a/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx
+++ b/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx
@@ -81,7 +81,7 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
         </View>
       );
     }
-    if (typeof value === 'object' && !(value instanceof RegExp)) {
+    if (value && typeof value === 'object' && !(value instanceof RegExp)) {
       if (name) {
         return (
           <>

From 476d1cf7b6fb27ea1208ff7579d09916243a5897 Mon Sep 17 00:00:00 2001
From: Forbes Lindesay <forbes.lindesay@threadsstyling.com>
Date: Tue, 23 Apr 2019 14:20:20 +0100
Subject: [PATCH 4/8] docs: update examples and docs

---
 ADDONS_SUPPORT.md                                        | 2 +-
 examples-native/crna-kitchen-sink/package.json           | 2 ++
 examples-native/crna-kitchen-sink/storybook/rn-addons.js | 1 +
 3 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/ADDONS_SUPPORT.md b/ADDONS_SUPPORT.md
index 7feda154f228..5b8381af1011 100644
--- a/ADDONS_SUPPORT.md
+++ b/ADDONS_SUPPORT.md
@@ -3,7 +3,7 @@
 | | [React](app/react)|[React Native](app/react-native)|[Vue](app/vue)|[Angular](app/angular)| [Polymer](app/polymer)| [Mithril](app/mithril)| [HTML](app/html)| [Marko](app/marko)| [Svelte](app/svelte)| [Riot](app/riot)| [Ember](app/ember)| [Preact](app/preact)|
 | ----------- |:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|:-------:|
 |[a11y](addons/a11y)                         |+| |+|+|+|+|+|+| | |+|+|
-|[actions](addons/actions)                   |+|+|+|+|+|+|+|+|+|+|+|+|
+|[actions](addons/actions)                   |+|+*|+|+|+|+|+|+|+|+|+|+|
 |[backgrounds](addons/backgrounds)           |+|*|+|+|+|+|+|+|+|+|+|+|
 |[centered](addons/centered)                 |+| |+|+| |+|+| |+| |+|+|
 |[events](addons/events)                     |+| |+|+|+|+|+|+| | |+|+|
diff --git a/examples-native/crna-kitchen-sink/package.json b/examples-native/crna-kitchen-sink/package.json
index ba24d9215ad8..7cf34a7912d4 100644
--- a/examples-native/crna-kitchen-sink/package.json
+++ b/examples-native/crna-kitchen-sink/package.json
@@ -24,7 +24,9 @@
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "@babel/plugin-transform-react-jsx-source": "^7.2.0",
+    "@storybook/addon-actions": "5.1.0-alpha.29",
     "@storybook/addon-knobs": "5.1.0-alpha.29",
+    "@storybook/addon-ondevice-actions": "5.1.0-alpha.29",
     "@storybook/addon-ondevice-backgrounds": "5.1.0-alpha.29",
     "@storybook/addon-ondevice-knobs": "5.1.0-alpha.29",
     "@storybook/addon-ondevice-notes": "5.1.0-alpha.29",
diff --git a/examples-native/crna-kitchen-sink/storybook/rn-addons.js b/examples-native/crna-kitchen-sink/storybook/rn-addons.js
index 9617c17a5d89..2321f99cf843 100644
--- a/examples-native/crna-kitchen-sink/storybook/rn-addons.js
+++ b/examples-native/crna-kitchen-sink/storybook/rn-addons.js
@@ -1,3 +1,4 @@
+require('@storybook/addon-ondevice-actions/register');
 require('@storybook/addon-ondevice-knobs/register');
 require('@storybook/addon-ondevice-notes/register');
 require('@storybook/addon-ondevice-backgrounds/register');

From 2ec925c455bbd656995ff041b3e6d5f3aa93d1b3 Mon Sep 17 00:00:00 2001
From: Forbes Lindesay <forbes.lindesay@threadsstyling.com>
Date: Wed, 24 Apr 2019 11:47:34 +0100
Subject: [PATCH 5/8] chore: feedback - remove unused dependencies

---
 addons/ondevice-actions/package.json  | 12 ++----------
 addons/ondevice-actions/tsconfig.json | 11 +++--------
 2 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/addons/ondevice-actions/package.json b/addons/ondevice-actions/package.json
index c52d3b113204..bc2d0b5880f9 100644
--- a/addons/ondevice-actions/package.json
+++ b/addons/ondevice-actions/package.json
@@ -15,7 +15,6 @@
   },
   "license": "MIT",
   "main": "dist/index.js",
-  "jsnext:main": "src/index.js",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
@@ -23,13 +22,7 @@
     "@storybook/addons": "5.1.0-alpha.29",
     "@storybook/core-events": "5.1.0-alpha.29",
     "core-js": "^2.5.7",
-    "fast-deep-equal": "^2.0.1",
-    "global": "^4.3.2",
-    "lodash": "^4.17.11",
-    "make-error": "^1.3.5",
-    "prop-types": "^15.6.2",
-    "react-inspector": "^2.3.0",
-    "uuid": "^3.3.2"
+    "fast-deep-equal": "^2.0.1"
   },
   "devDependencies": {
     "@storybook/addon-actions": "5.1.0-alpha.29"
@@ -41,6 +34,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "gitHead": "fbd7ee4c80df437fed4bdc6e11140733fd450080"
+  }
 }
diff --git a/addons/ondevice-actions/tsconfig.json b/addons/ondevice-actions/tsconfig.json
index 8876bb6737a1..9b69fbfdaed4 100644
--- a/addons/ondevice-actions/tsconfig.json
+++ b/addons/ondevice-actions/tsconfig.json
@@ -1,13 +1,8 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "rootDir": "./src",
-    "types": ["webpack-env"]
+    "rootDir": "./src"
   },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "src/__tests__/**/*"
-  ]
+  "include": ["src/**/*"],
+  "exclude": ["src/__tests__/**/*"]
 }

From e41f87b83f04de1485606256c886527ce5299831 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Fri, 26 Apr 2019 22:14:59 +0200
Subject: [PATCH 6/8] FIX lockfile

---
 yarn.lock | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 9c2427dda31a..df6c2728416e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17381,7 +17381,7 @@ make-dir@^2.0.0, make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-error@1.x, make-error@^1.1.1, make-error@^1.3.5:
+make-error@1.x, make-error@^1.1.1:
   version "1.3.5"
   resolved "https://registry.npmjs.org/make-error/-/make-error-1.3.5.tgz#efe4e81f6db28cadd605c70f29c831b58ef776c8"
   integrity sha512-c3sIjNUow0+8swNwVpqoH4YCShKNFkMaw6oH1mNS2haDZQqkeZFlHS3dhoeEbKKmJB4vXpJucU6oH75aDYeE9g==
@@ -21972,7 +21972,7 @@ react-input-autosize@^2.2.1:
   dependencies:
     prop-types "^15.5.8"
 
-react-inspector@^2.3.0, react-inspector@^2.3.1:
+react-inspector@^2.3.1:
   version "2.3.1"
   resolved "https://registry.npmjs.org/react-inspector/-/react-inspector-2.3.1.tgz#f0eb7f520669b545b441af9d38ec6d706e5f649c"
   integrity sha512-tUUK7t3KWgZEIUktOYko5Ic/oYwvjEvQUFAGC1UeMeDaQ5za2yZFtItJa2RTwBJB//NxPr000WQK6sEbqC6y0Q==

From 2d947be435d3cca38ea963a4dd59f45bd6a45aca Mon Sep 17 00:00:00 2001
From: Benoit Dion <benoitdion@gmail.com>
Date: Wed, 1 May 2019 18:22:43 -0400
Subject: [PATCH 7/8] update version to .37

---
 addons/ondevice-actions/package.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/addons/ondevice-actions/package.json b/addons/ondevice-actions/package.json
index 28185bcc149c..8f981067d044 100644
--- a/addons/ondevice-actions/package.json
+++ b/addons/ondevice-actions/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@storybook/addon-ondevice-actions",
-  "version": "5.1.0-alpha.35",
-  "description": "Action Logger addon for storybook",
+  "version": "5.1.0-alpha.37",
+  "description": "Action Logger addon for react-native storybook",
   "keywords": [
     "storybook"
   ],
@@ -19,13 +19,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.1.0-alpha.35",
-    "@storybook/core-events": "5.1.0-alpha.35",
+    "@storybook/addons": "5.1.0-alpha.37",
+    "@storybook/core-events": "5.1.0-alpha.37",
     "core-js": "^2.5.7",
     "fast-deep-equal": "^2.0.1"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "5.1.0-alpha.35"
+    "@storybook/addon-actions": "5.1.0-alpha.37"
   },
   "peerDependencies": {
     "@storybook/addon-actions": "*",

From 3990ba725c5bd0e7cd8fa1fcb3062c1669e742b1 Mon Sep 17 00:00:00 2001
From: Benoit Dion <benoitdion@gmail.com>
Date: Wed, 1 May 2019 21:35:28 -0400
Subject: [PATCH 8/8] fix lint error

---
 lib/api/src/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/api/src/index.tsx b/lib/api/src/index.tsx
index 2306e4ebc684..aa02b3f272a0 100644
--- a/lib/api/src/index.tsx
+++ b/lib/api/src/index.tsx
@@ -241,14 +241,14 @@ class ManagerConsumer extends Component<ConsumerProps<SubState, Combo>> {
   prevData?: SubState;
 
   render() {
-    const { children } = this.props;
+    const { children, pure } = this.props;
 
     return (
       <ManagerContext.Consumer>
         {d => {
           const data = this.dataMemory ? this.dataMemory(d) : d;
           if (
-            this.props.pure &&
+            pure &&
             this.prevChildren &&
             this.prevData &&
             shallowEqualObjects(data, this.prevData)