layout in preview.js doesn't work

[likern]

I have very simple preview.js config

import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';

export const decorators = [withBackgrounds];
export const parameters = {
  layout: 'centered',
  backgrounds: [
    { name: 'plain', value: 'white', default: true },
    { name: 'warm', value: 'hotpink' },
    { name: 'cool', value: 'deepskyblue' }
  ]
};

but components are not centered.

Expected behavior
Components should be centered.

Screenshots

System:
Environment Info:

System:
OS: Linux 5.14 Fedora 34 (Workstation Edition) 34 (Workstation Edition)
CPU: (8) x64 Intel(R) Core(TM) i7-4770K CPU @ 3.50GHz
Binaries:
Node: 16.10.0 - ~/.nvm/versions/node/v16.10.0/bin/node
Yarn: 1.19.0 - ~/.nvm/versions/node/v16.10.0/bin/yarn
npm: 7.24.0 - ~/.nvm/versions/node/v16.10.0/bin/npm
Browsers:
Chrome: 94.0.4606.81
Firefox: 93.0
npmPackages:
@storybook/react-native: ^6.0.1-alpha.6 => 6.0.1-alpha.6

[dannyhw]

@likern I think this parameter might not be supported, however it would be simple to add. Where did you get this from? Some documentation you can point to?

[likern]

@dannyhw This is from https://storybook.js.org/docs/react/configure/story-layout documentation.

In general, as a user, I would expect all basic functionality to work the same as in original StoryBook.
For layout this might be these settings https://github.com/storybookjs/storybook/blob/next/examples/official-storybook/stories/core/layout.stories.js

[dannyhw]

@dannyhw This is from https://storybook.js.org/docs/react/configure/story-layout documentation.

In general, as a user, I would expect all basic functionality to work the same as in original StoryBook. For layout this might be these settings https://github.com/storybookjs/storybook/blob/next/examples/official-storybook/stories/core/layout.stories.js

@likern firstly thanks for the feedback I definitely understand where your coming from and Ideally that would be the case. Unfortunately the react native project was stagnant for some time and a lot of things were added to the web version in that time. Also these things have to reimplemented for react native since the ui is different.

Right now the focus is to get the overall features up to date and then hopefully the other things will happen over time.

This Issue will be added to the backlog and if any one wants to implement it in the meantime all PR's are welcome.

[rdgomt]

Hey guys! Would be nice to have this feature.

[dannyhw]

@rdgomt thanks for the feedback, its on my list for sure.

I would suggest for now a workaround is to use a global decorator that adds some styling such as flex and align center or just add some padding.

[raychanks]

I am interested in picking this up, but might need some guidance.

Should we include this feature in the addons/ondevice-backgrounds or should we create a separate addon for it?

Is the plan to only support layout: 'centered'? I notice there are 3 options in this link, supporting centered, fullscreen and padded, but I am not so sure about how to approach the fullscreen option.

[dannyhw]

I would say that this isn't related to backgrounds, I would follow the implementation that the web uses probably.

Fullscreen just means hiding all the UI, though I'm not sure if that's needed or not.

[raychanks]

I tried to play around a bit and attempted to modify the styles in this line based on the layout parameter. This seems to work fine without using the withBackgrounds decorator. However, if the withBackgrounds decorator is used, this approach failed to center the story component as the withBackgrounds decorator wraps the component with an additional layer of View here.

It seems that the web version does not wrap the story component with additional layers, but selecting the html element and modify it directly.

Am I looking at the wrong place or misunderstood something?