React-native-navigation: [v2] Modal screenBackgroundColor transparent bug

[yusufyildirim]

Issue Description

Hi,

I need a modal with transparent background. I set my modal's background to transparent but there is a bug I think. It comes transparent but turns to white.

Steps to Reproduce / Code Snippets / Screenshots

Here is the gif:

---

Environment

• React Native Navigation version: v2@alpha
• React Native version: 0.55.4
• Platform(s) (iOS, Android, or both?): iOS (Didn't test android)
• Device info (Simulator/Device? OS version? Debug/Release?): Simulator

[guyca]

When a modal is displayed, the previous controller is removed from hierarchy. If you'd to display a transparent Modal over the previous controller, you need to add `modalPresentationStyle: 'overCurrentContext' option to you modal.

[yusufyildirim]

I tried it before you said but nothing happened. I tried again and still same.

[guyca]

Interesting. can you include some code snippets?

[yusufyildirim]

Sure. This my my code for testing purpose. I just realized, this might be about stack i don't know. I'm gonna try without stack.

const tagModal = {
        stack: {
          children: [{
            component: {
              name: 'TagModal',
              passProps: { tag, onSuccess: this.onTagAdded },
              options: {
                screenBackgroundColor: 'transparent',
                modalPresentationStyle: 'overCurrentContext',
                topBar: {
                  visible: false,
                  animate: true,
                },
              },
            },
          }],
        },
      };

      navigation.showModal(tagModal);

[yusufyildirim]

Yupp this is about stack. Working well without stack layout. I mean, like this:

const tagModal = {
        component: {
          name: 'TagModal',
          passProps: { tag, onSuccess: this.onTagAdded },
          options: {
            screenBackgroundColor: 'transparent',
            modalPresentationStyle: 'overCurrentContext',
            topBar: {
              visible: false,
              animate: true,
            },
          },
        },
      };

      navigation.showModal(tagModal);

[guyca]

You added modalPresentationStyle to the wrong node. You need to add it to the root component presented in the modal, which in your case is the stack.

[yusufyildirim]

Yea I realized and tried it too but nothing changed :D I'm opening a model over a model btw, is this may cause a problem like this?

[yusufyildirim]

I even tried Navigation.setDefaultOptions({ modalPresentationStyle: 'overCurrentContext' }); 😂

[dorthwein]

this is still a bug

[muhammadsr]

Having the same issue here :(

[fabianunger]

Works fine without stack!
like so:

Navigation.showModal({
      component: {
        name: 'yourComponentName',
        options: {
          screenBackgroundColor: 'transparent',
          modalPresentationStyle: 'overCurrentContext',
        },
      },
    });

This does NOT work:

 Navigation.showModal({
      stack: {
        children: [{
          component: {
            name: 'yourComponentName',

            options: {
              modalPresentationStyle: 'overCurrentContext',
              screenBackgroundColor: 'transparent',
            }
          }
        }]
      }
    });

[fabianunger]

@dorthwein @muhammadsr Have you tried it without stack?

[muhammadsr]

@fabianunger Yeah. This does not work for me :(

   Navigation.showModal({
            component: {
                name: EDIT_DB_MODAL,
                options: {
                      screenBackgroundColor: 'transparent',
                      modalPresentationStyle: 'overCurrentContext',
                   }
            },
        });

[fabianunger]

@muhammadsr Which Versions / Platform do you use? Maybe you want to share some more code?

[muhammadsr]

react-native": "0.57.0",
"react": "16.5.1",
"react-native-navigation": "^2.0.2582",

Device info: Using the iOS iPhone X Simulator and my iPhone X phone to test this

@muhammadsr Which Versions / Platform do you use? Maybe you want to share some more code? Is EDIT_DB_MODAL a string?

Yes EDIT_DB_MODAL is just a string.

[Aleksion]

I'm hitting the same issue :( Doesn't work whether or not I do it with stack.

 Navigation.events().registerAppLaunchedListener(() => {
    Navigation.setDefaultOptions({
      topBar: {
        visible: false,
      },
    })
    Navigation.setRoot({
      root: {
        stack: {
          children: [
            {
              component: {
                name: defaultScreen,
              },
            },
          ],
        },
      },
    })
  })

// MyScreen.tsx

...
    onGoToReservation = () => {
        Navigation.showModal({
            component: {
                name: MAP_SCREENS.searchFilter,
                options: {
                    screenBackgroundColor: "transparent",
                    modalPresentationStyle: "overCurrentContext",
                    topBar: {
                        visible: false,
                        animate: true,
                    },
                } as any,
            },
        })
    }
...

[muhammadsr]

I created a PR that addresses the issue for non stacked modals
https://github.com/wix/react-native-navigation/pull/4159

[yogevbd]

Fixed in latest version

[muhammadsr]

I confirm the fix

[skumarcm]

I am still facing the issue on iOS.
It is working perfectly on android though.

[Olovorr]

Unfortunately as @skumarcm said, it doesn't seem to work on iOS 🙁

[kevinvangelder]

@Olovorr @skumarcm I was also still having this issue, but then I found this comment and it worked for me. https://github.com/wix/react-native-navigation/issues/4134#issuecomment-430277278

It seems that screenBackgroundColor is ignored and instead we should be using layout: { backgroundColor: 'transparent' }

[skumarcm]

@Olovorr @skumarcm I was also still having this issue, but then I found this comment and it worked for me. #4134 (comment)

It seems that screenBackgroundColor is ignored and instead we should be using layout: { backgroundColor: 'transparent' }

Awesome!! That works.
Thanks!!!

[sturmenta]

export const showModal = async props => {
  await Navigation.showModal({
    component: {
      name: 'modal', // screen name - previous registered
      passProps: props,
      options: {
        layout: { backgroundColor: 'transparent' },
        screenBackgroundColor: 'transparent',
        modalPresentationStyle: 'overCurrentContext',
        topBar: {
          visible: false,
          drawBehind: true,
        },
      },
    },
  });
};

"react-native-navigation": "^2.13.1"