error/warning causes unresponsive touch on-device

[astriskit]

Describe the bug When running the storybook(6.x)/react-native on a device, it seems, if an error/warning appears on the screen, after dismissing those, the touch becomes unresponsive. And even after reloading the expo-app, the touch is unresponsive. Only after clearing the memory for the expo-app on device, the touch becomes available again.

To Reproduce Steps to reproduce the behavior:

1. Setup an expo project (optionally setup using typescript); Follow from here - https://docs.expo.dev/get-started/installation/
2. Setup storybook/react-native 6-alpha; Follow from here - https://github.com/storybookjs/react-native/blob/next-6.0/MANUAL_SETUP.md
3. Create a simple story, so that it throws a warning/error of some sort - viz. not passing down a required prop. Also create a correct story too.
4. Run the expo-start.
5. Scan the qrcode from the web-interface after starting the expo start using the expo-app on the device. (tested with the latest app available on android/apple store - v2.23.2)
6. The device will have the storybook running.
7. Go to the navigator-pane to select the correct one; The story simply should render without any problem.
8. Go to the navigator-pane to select the faulty one; If there is warning message on the screen, dismiss that. And now try to click/tap on the navigation link again or other links placed along the side. That becomes unresponsive. The taps won't work in my setup in this case.

Expected behavior After dismissing error/warning or at-least after reloading, the touch should be responsive.

System: System: OS: macOS 12 CPU: inter i5 Binaries: Node: 16.14.0 Yarn: 1.22.18 npm: 8.3.1 Browsers: Chrome: 100.0.4896.88 Firefox: 99.0.1 Safari: 15.1 npmPackages: @storybook/addon-actions: 6.3 => 6.3.13 @storybook/addon-controls: 6.3 => 6.3.13 @storybook/addon-links: ^5.3 => 5.3.21 @storybook/addon-ondevice-actions: ^6.0.1-beta.5 => 6.0.1-beta.5 @storybook/addon-ondevice-backgrounds: ^6.0.1-beta.5 => 6.0.1-beta.5 @storybook/addon-ondevice-controls: ^6.0.1-beta.5 => 6.0.1-beta.5 @storybook/addon-ondevice-notes: ^6.0.1-beta.5 => 6.0.1-beta.5 @storybook/react-native: ^6.0.1-beta.5 => 6.0.1-beta.5 @storybook/react-native-server: ^5.3.23 => 5.3.23

[dannyhw]

@astriskit I've never seen this, could you please provide steps for reproducing this?

[astriskit]

@dannyhw - thanks for quick action on this; have updated the info btw. Also, a nice tool, no doubt - 6-alpha is coming along nicely too. Cheers to that too.

[dannyhw]

@astriskit ok I will try to reproduce, if you already have a reproduction you could share with me that would help a lot also.

[astriskit]

@dannyhw - currently this is in a project that I'm working on; I'll try to reproduce it in a sandbox and share here.

[dannyhw]

I've seen this happen sometimes when flipper is open, it has to do with the react native modal component I think.

and thats great! a reproduction would be helpful to narrow it down.

[TaufanP]

I'm having the same issue, on both emulator and real device (all Android).

[TaufanP]

I'm having the same issue, on both emulator and real device (all Android).

I managed to get it fixed by modifying the generated files from npx -p @storybook/cli sb init --type react_native

This is how my files look like

storybook/addons.js

import '@storybook/addon-actions';
import '@storybook/addon-links';
import '@storybook/addon-knobs';

storybook/rn-addons.js

import '@storybook/addon-ondevice-actions/register';
import '@storybook/addon-ondevice-knobs/register';

[dannyhw]

What specifically were the changes?

[TaufanP]

What specifically were the changes?

The origin of storybook/rn-addons.js was

import '@storybook/addon-ondevice-actions/manager';
import '@storybook/addon-ondevice-knobs/manager';

The origin of storybook/addons.js was

import '@storybook/addon-actions/manager';
import '@storybook/addon-links/manager';
import '@storybook/addon-knobs/manager';

[dannyhw]

outdated and resolved as far as I know