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

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

[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>
);