React-native-navigation: White Background for Overlay with Version 6.0.0

[sebastianpopp]

Issue Description

Hi @yogevbd,
I was looking at your changes in the latest version and was wondering what these lines were for. I'm using an overlay to display an AdMob banner in my app, but with that change, the background of the overlay can no longer be set transparent for iOS >= 13.0 but is instead white. I'm not quite sure what these changes were intended to do, so I didn't want to mess with it. 5.1.1 was working fine, 6.0.0 is not and if I revert the lines linked above, it's working again. Maybe we can find a solution so the overlay keeps working as well? Thank you for your help!

Steps to Reproduce / Code Snippets / Screenshots

export default class Banner extends Component {
  render() {
    return (
      <View
        style={{
          position: 'absolute',
          left: 0,
          bottom: 20,
          width: '100%',
          height: 60,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <AdMobBanner
          adSize="banner"
          adUnitID="ca-app-pub-xxxxxxxxxxxxxxx"
          testDevices={[AdMobBanner.simulatorId]}
          onAdFailedToLoad={error => console.info(error)}
        />
      </View>
    );
  }
}

Navigation.registerComponent('overlay.banner', () => Banner);

    Navigation.showOverlay({
      component: {
        name: 'overlay.banner',
        options: {
          overlay: {
            interceptTouchOutside: false,
          },
        },
      },
    });

---

Environment

• React Native Navigation version: 6.0.0 and 6.0.1
• React Native version: 0.61.5
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator iPhone 11 13.3

[sebastianpopp]

Sorry, I missed #5953, but I think this is still relevant. What is the advantage of not being able to configure the background color for iOS >= 13.0?

[alexandrepalagem]

Use layout.componentBackgroundColor to change background color of individual overlay

Navigation.showOverlay({
  component: {
    name: "overlay.banner",
    options: {
      layout: {
        componentBackgroundColor: "transparent" // <-- Add this line
      },
      overlay: {
        interceptTouchOutside: false
      }
    }
  }
});

[sebastianpopp]

Should have kept on reading the changes :/
Thank you for your help! That worked