Storybook: `@storybook/react-native` doesn't fully support [email protected] and [email protected]

[bericp1]

Describe the bug

@storybook/react-native (both on latest which is 5.2.1 and the most recent alpha which is 5.3.0-alpha.4) _works_ but is buggy on app launch out of the box on [email protected] and [email protected].

On app launch you get 2 YellowBox warnings, one because componentWillReceiveProps has been renamed and the other for componentWillMount:

Which seem to be related to react-native-swipe-gestures's GestureRecognizer using deprecated lifecycle methods.

The bigger issue though is that on app launch, after you dismiss the YelloBox errors, the addons panel is shown right above the actual Preview viewport even though it hasn't been activated and the bottom toolbar indicates the Preview is what should be visible. Switching to Navigator or Addons and then switching back to Preview resolves the issue.

It's getting a little annoying now that [email protected]+ ships with "Fast Reload" which is enabled by default so any file change causes the app to reload and that triggers this UI bug.

To Reproduce

Steps to reproduce the behavior:

1. Create a fresh react native app using npx react-native init FooApp
2. Install storybook for react-native per the official documentation w/ the knobs and actions addons (not sure if those are required to trigger the bug)
3. Launch the storybook app
4. Observe YellowBox errors and UI bug where the addons panel renders on top of the Preview viewport.

Expected behavior

As with previous react / react-native versions, the Addons panel should not render overlayed on the Preview panel on launch and should only show when it's navigated to via the bottom toolbar.

Screenshots

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    Yarn: 1.17.3 - ~/.yarn/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Browsers:
    Chrome: 77.0.3865.90
    Safari: 13.0.1
  npmPackages:
    @storybook/addon-actions: 5.3.0-alpha.4 => 5.3.0-alpha.4
    @storybook/addon-knobs: 5.3.0-alpha.4 => 5.3.0-alpha.4
    @storybook/addon-ondevice-actions: 5.3.0-alpha.4 => 5.3.0-alpha.4
    @storybook/addon-ondevice-knobs: 5.3.0-alpha.4 => 5.3.0-alpha.4
    @storybook/addons: 5.3.0-alpha.4 => 5.3.0-alpha.4
    @storybook/react-native: 5.3.0-alpha.4 => 5.3.0-alpha.4
    @storybook/react-native-server: 5.3.0-alpha.4 => 5.3.0-alpha.4

Additional context

Not sure if this is [email protected] or [email protected] causing the issue. The latter was just released today so 🤷‍♂

[betoharres]

I've also received a bunch of yellow boxes and the sidebar overlay problem using @5.2.0 "stable" :( Thanks for making a detailed issue though @bericp1
I'm going to downgrade back to 5.1.1 to see if it helps.

I've also experienced problems with some UI but I can't confirm right now if it's related to storybook upgrade or react-native. I'll update this post later.

UPDATE: those bugs also appear even if you downgrade storybook version to 5.1.1;
I've also experienced problems with components not updating it's View when their props are updated - maybe it's related to the yellowbox shown from OP.

[benoitdion]

8235 should help with the yellow boxes. Haven't had a chance to investigate the layout issue yet though.

[betoharres]

Thanks a lot for helping @benoitdion :pray:

[shilman]

Good golly!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.6 containing PR #8235 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.