React-native-navigation: [v6] Support for transparent Modal w/ PageSheet modalPresentationStyle

[dominicstop]

Issue Description

Hello!! 😊 I have a pageSheet modal w/ a transparent bg (I use it to render a BlurView behind the modal ✨):

options: {
  modalPresentationStyle: 'pageSheet',
  layout: {
    backgroundColor: 'transparent'
  },
}

It used to worked on 5.1.1 and previous versions. But on 6.0.0 and newer (i've tried it on 6.4.0), the modal is not transparent anymore. Checking the docs, it says that the new way of showing a transparent modal 👏:

modalPresentationStyle: 'overCurrentContext',
layout: {
  backgroundColor: 'transparent'
}

Which is great!! ✨ But is there a way to use the pageSheet style and a transparent bg? I read the changelog for 6.0.0:

This release changes how layout.backgroundColor work on iOS to add parity with Android.

So i guess, it's somehow related to that? Is there a way to have a transparent bg w/ pageSheet again? Maybe i missed something in the docs (sorry 😭).

Thank you for the help!

Steps to Reproduce / Code Snippets / Screenshots

Version 5.1.1 / 6.0.0 and later:

---

Environment

• React Native Navigation version: 6.4.0
• React Native version: 0.61.4
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator, Debug

[jinshin1013]

Hey there try:

layout: {
    backgroundColor: 'transparent',
    componentBackgroundColor: 'transparent',
 }

Since v6, the behaviour slightly changed: reference

[dominicstop]

@jinshin1013 Hello!! Sorry for the late reply, thank you so much for the help 🥰✨

(i will try it and close the issue later, thanks again haha)

[FinnGu]

Hey there try:

layout: {
    backgroundColor: 'transparent',
    componentBackgroundColor: 'transparent',
 }

Since v6, the behaviour slightly changed: reference

Thank you @jinshin1013! Can you explain to me why you would need backgroundColor at all? In my application everything worked fine as soon as I replaced backgroundColor with componentBackgroundColor.

[ninjz]

I can confirm, just need to change backgroundColor to componentBackgroundColor. Would be good to change this in the docs

[kubilaytural]

Hey there try:

layout: {
    backgroundColor: 'transparent',
    componentBackgroundColor: 'transparent',
 }

Since v6, the behaviour slightly changed: reference

Thx