Storybook: React Native: Backgrounds addon

[RWOverdijk]

Describe the bug

The backgrounds addon for ondevice doesn't work as expected. I've seen several issues:

1. When combined with the knobs addon and importing the backgrounds addon first, an error is thrown:

TypeError: null is not an object ('evaluating this.state.selection').

I see duplicate dependencies (nested node_modules) so perhaps something hasn't been updated yet? For some reason this.state is null in the BackgroundPanel.render().

1. Once loaded, the background colour I set as a default is shown, but there's no panel for me to change the background colour and thus I can only ever see one of the colours. I do think the two issues are related.

To Reproduce

This is a new React Native project with all the latest versions of storybook (@next). It's all basic quick start stuff (addons file, and decorators).

Expected behavior

A way to toggle the background colour.

System:

• Device: iPhone X
• Framework: React Native
• Addons: Knobs and backgrounds
• Version: See additional

Additional context

A dump of all storybook related packages and their versions:

mixed/efteling-app [ yarn list | grep storybook                                                                                              feature/APP-2743-storybook * ] 10:49 AM
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]
├─ @storybook/[email protected]
├─ @storybook/[email protected]
│  ├─ @storybook/[email protected]

[shilman]

@RWOverdijk this might not solve anything but please upgrade all the packages to 5.2.0-beta.0. All bets are off when different versions are running together. That's probably not the issue here, but it's good to eliminate that variable anyway. 😉

[RWOverdijk]

@shilman Your release cycle is absolutely insane. 😄 I like it.

I updated everything and same thing.

I did find out something else though! The tab for backgrounds _does_ show up, but it's behind the notch. If I wrap the StorybookUI in a SafeAreaView I can see the tabs.

Is that considered a bug? Or is it in the docs and I missed it?

Anyway, it doesn't solve the problem as the tab is showing this (which I've done):

Which is weird, because it does show my default background color:

addDecorator(withBackgrounds)
addParameters({
  backgrounds: [
    { name: 'light', value: '#eeeeee', default: true },
    { name: 'dark', value: '#222222' },
  ]
})

I've tried all variations. Global decorators, global parameters, story-level decorator and parameters... No bueno. Keep seeing what's in that screenshot.

Update: I've updated the additional info of the issue to reflect the versions I'm running now.

[RWOverdijk]

Both issues have been fixed through #7437

[shilman]

Gadzooks!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.1 containing PR #7437 that references this issue. Upgrade today to try it out!

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

[RWOverdijk]

gadzooks
/ɡadˈzuːks/
_exclamation (ARCHAIC)_
an exclamation of surprise or annoyance.

:o

[shilman]

@RWOverdijk More the former than the later, I assure you 😘