React-native-navigation: [v2] `transparent: true` vs. `background: { color: 'transparent' }`

[ilovett]

If default has background.color: 'red' and component has transparent: true the red background will still be displayed.

    static get options() {
        return {
            topBar: {
                drawBehind: true,
                transparent: true,
                background: {
                    color: 'transparent'
                }
            }
        };
    }

Perhaps move transparent to background.transparent = true

[ilovett]

Also there appears to be a border left over even if topBar.noBorder = true

Also tried elevation: 0 which did not make the border shadow go away

[sapjax]

https://github.com/wix/react-native-navigation/issues/3400
Did you using showModal with this options.

[ilovett]

I did this just using a basic screen component, no modals involved... my defaults had a background.color = 'red' and I had to override the default in the component with background.color = 'transparent'

[salisuabubakar]

I had the same issue. Any solution please. Thanks

[wilsontr]

Seeing the same thing here.

topBar: {
  noBorder: true,
  visible: true,
  drawBehind: true,
  transparent: true,
  title: {
    text: 'Foobar',
    color: 'white',
  },
  background: {
    color: 'transparent',
  },              
},

The top bar background shows up as black, in this case.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[guyca]

Hey guys, we're deprecating the transparent property as it really does duplicate topBar.background.color property.

[guyca]

transparent property was removed in v2.0.2570. The blur and translucent properties changed as well and are now part of the background node:

options: {
  topBar: {
    background: {
      color: 'transparent',
      translucent: true,
      blur: false
    }
  }
}