React-native-navigation: Black Screen rendering on IOS 12 with RNN 7.x

[juddey]

🐛 Bug Report

To Reproduce

1. RNN installed at 6.12.2
2. Upgrade to 7.1.0
3. Run on IOS 6 device using ios 12 in either debug or release mode

Expected behavior

I'd keep the white background saw prior to the upgrade

Actual Behavior

A dark black background presents in multiple screens Example screen:

If I rollback to 6.12.2 the black screen reverts to white background (which is as expected)

• React Native Navigation version: 7.1, 7.2
• React Native version: 63.2
• Platform(s) (iOS, Android, or both?): IOS
• Device info: Device, Debug and Release, IOS 12
  

  Reproducible Demo

Happy to provide a repro if you think that this is not just a configuration issue, or just something strange with old hardware.

[jinshin1013]

Could you try setting both layout.componentBackgroundColor and layout.backgroundColor to white in your default options or screens?

[juddey]

Thanks, I shall try this and report back findings.

[juddey]

No luck with either of those settings with 7.2. Pasted code below in case I have not understood where in the options hash I should put the layout key.

const warmer = {
  root: {
    stack: {
      children: [
        {
          component: {
            name: 'chapel.startup',
            options: {
              topBar: { visible: false }
            }
          }
        }
      ]
    },
    options: {
      layout: {
        backgroundColor: Colors.white,
        componentBackgroundColor: Colors.white
      }
    }
  }
}

[guyca]

Hey @juddey 👋
That should have worked, have you tried specifying these in default options? Also, I would try only specifying componentBackgroundColor.

[juddey]

hey thanks @guyca, setting the backgroundColor prop on setDefaultOptions fixed the issue. I'll close this out now.

[guyca]

@juddey Alternatively you can set background color directly on the components in JSX.