Storybook: Default text and background are the same color on react native 0.58

[ryanmagoon]

Describe the bug
In react native 58+, the default background color is black instead of white, and so the default UI theming that comes out of the box with storybook UI is invisible

To Reproduce
Steps to reproduce the behavior:
Follow the instructions to install storybook on a newly created react native project
react-native init newProject
cd newProject
npx -p @storybook/cli sb init

Expected behavior
Expected the default text color to not be the same as the background

Screenshots

Code snippets
adding this to the style file for the preview list component shows the ui

flex: {
    backgroundColor: 'white',
    flex: 1
  },

System:

• MacOS
• Device: Macbook pro 2015
• Framework: react native
• Version: 4.1.11

[kdenz]

For me I realized it's caused by this line in AppDelegate.m for 0.58.x
It becomes
rootView.backgroundColor = [UIColor blackColor];
whereas previously it's
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

Now I changed it to
rootView.backgroundColor = [UIColor whiteColor];
and it defaults to white again

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[fo-fo]

Non-intrusive workaround is to wrap the StorybookUIRoot component inside a View with its background color set to white:

const WrappedStorybook = () => (
  <View style={{ flex: 1, backgroundColor: "white" }}>
    <StorybookUIRoot />
  </View>
);

[kaiwen-zhang-ck]

what a hack. is there official issue to change this? why is default black?

[shilman]

This has been fixed in https://github.com/storybooks/storybook/releases/tag/v5.1.0-alpha.19
by https://github.com/storybooks/storybook/pull/6315