Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React Native: Backgrounds addon

See original GitHub issue

Describe the bug

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

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().

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/addon-actions@5.2.0-beta.0
│  ├─ @storybook/addons@5.2.0-beta.0
│  ├─ @storybook/api@5.2.0-beta.0
│  ├─ @storybook/client-api@5.2.0-beta.0
│  ├─ @storybook/components@5.2.0-beta.0
│  ├─ @storybook/core-events@5.2.0-beta.0
│  ├─ @storybook/theming@5.2.0-beta.0
├─ @storybook/addon-backgrounds@5.2.0-beta.0
│  ├─ @storybook/addons@5.2.0-beta.0
│  ├─ @storybook/api@5.2.0-beta.0
│  ├─ @storybook/client-logger@5.2.0-beta.0
│  ├─ @storybook/components@5.2.0-beta.0
│  ├─ @storybook/core-events@5.2.0-beta.0
│  ├─ @storybook/theming@5.2.0-beta.0
├─ @storybook/addon-knobs@5.2.0-beta.0
│  ├─ @storybook/addons@5.2.0-beta.0
│  ├─ @storybook/client-api@5.2.0-beta.0
│  ├─ @storybook/components@5.2.0-beta.0
│  ├─ @storybook/core-events@5.2.0-beta.0
│  ├─ @storybook/theming@5.2.0-beta.0
├─ @storybook/addon-ondevice-actions@5.2.0-beta.0
│  ├─ @storybook/addons@5.2.0-beta.0
│  ├─ @storybook/core-events@5.2.0-beta.0
├─ @storybook/addon-ondevice-backgrounds@5.2.0-beta.0
│  ├─ @storybook/addons@5.2.0-beta.0
├─ @storybook/addon-ondevice-knobs@5.2.0-beta.0
│  ├─ @storybook/addons@5.2.0-beta.0
│  ├─ @storybook/core-events@5.2.0-beta.0
├─ @storybook/addon-storyshots@5.2.0-beta.0
│  ├─ @storybook/addons@5.2.0-beta.0
├─ @storybook/addons@5.2.0-beta.0
│  ├─ @storybook/api@5.2.0-beta.0
│  ├─ @storybook/channels@5.2.0-beta.0
│  ├─ @storybook/client-logger@5.2.0-beta.0
├─ @storybook/api@5.2.0-beta.0
│  ├─ @storybook/channels@5.2.0-beta.0
│  ├─ @storybook/client-logger@5.2.0-beta.0
│  ├─ @storybook/core-events@5.2.0-beta.0
│  ├─ @storybook/router@5.2.0-beta.0
│  ├─ @storybook/theming@5.2.0-beta.0
├─ @storybook/channel-postmessage@5.2.0-beta.0
│  ├─ @storybook/channels@5.2.0-beta.0
│  ├─ @storybook/client-logger@5.2.0-beta.0
├─ @storybook/channel-websocket@5.2.0-beta.0
│  ├─ @storybook/channels@5.2.0-beta.0
├─ @storybook/channels@5.2.0-beta.0
├─ @storybook/client-api@5.2.0-beta.0
│  ├─ @storybook/addons@5.2.0-beta.0
│  ├─ @storybook/channel-postmessage@5.2.0-beta.0
│  ├─ @storybook/channels@5.2.0-beta.0
│  ├─ @storybook/client-logger@5.2.0-beta.0
│  ├─ @storybook/core-events@5.2.0-beta.0
│  ├─ @storybook/router@5.2.0-beta.0
├─ @storybook/client-logger@5.2.0-beta.0
├─ @storybook/components@5.2.0-beta.0
│  ├─ @storybook/client-logger@5.2.0-beta.0
│  ├─ @storybook/theming@5.2.0-beta.0
├─ @storybook/core-events@5.2.0-beta.0
├─ @storybook/react-native@5.2.0-beta.0
│  ├─ @storybook/addons@5.2.0-beta.0
│  ├─ @storybook/channel-websocket@5.2.0-beta.0
│  ├─ @storybook/channels@5.2.0-beta.0
│  ├─ @storybook/client-api@5.2.0-beta.0
│  ├─ @storybook/core-events@5.2.0-beta.0
├─ @storybook/router@5.2.0-beta.0
├─ @storybook/theming@5.2.0-beta.0
│  ├─ @storybook/client-logger@5.2.0-beta.0

Issue Analytics

State:
Created 4 years ago
Comments:6 (6 by maintainers)

Top GitHub Comments

2reactions

RWOverdijkcommented, Jul 17, 2019

Both issues have been fixed through #7437

1reaction

shilmancommented, Jul 18, 2019

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

Top Results From Across the Web

@storybook/addon-ondevice-backgrounds - npm

A react-native storybook addon to show different backgrounds for your preview. Latest version: 5.3.23, last published: 2 years ago.

storybook/addon-ondevice-backgrounds

A react-native storybook addon to show different backgrounds for your preview. ... With Storybook for React Native you can design and develop individual ......

Two Easy Ways to Add React Native Background Image

The ultimate guide to adding a react native background image to your application with two straightforward different approaches.

@storybook/addon-backgrounds | Yarn - Package Manager

Storybook Addon Backgrounds can be used to change background colors inside the preview in Storybook. Framework Support. React Storybook Screenshot ...

Channel Background Customization - React Native SDK Docs

Basic Custom Background#. You can change the background statically by wrapping MessageList and MessageInput with the ImageBackground component. Also make sure ...