React-native-navigation: [V2 ] modalPresentationStyle prop is not working on showModal

[husseinAbdulnabi]

Issue Description

Presenting modal with transparent background with custom using modalPresentationStyle is not working properly, it was working two weeks ago

Steps to Reproduce / Code Snippets / Screenshots

this.props.navigation.showModal({
      component: {
        name: Screens.SortFiltersScreen,
        passProps: {
          source: "Home",
          onResultRequest: this._presentBusinessesList
        },
        options: {
          modalPresentationStyle:
            "overFullScreen" // try any other style, all the same result 
        }
      }
    })

---

Environment

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

[pribeh]

Yes, thanks for posting. Others are experiencing the same using:

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

See: https://github.com/wix/react-native-navigation/issues/3413#issuecomment-429538465

[pribeh]

Amazing

[ywongweb]

Not sure if this fix has been released, but I am still experiencing this bug on iOS v2.0.2623

[guyca]

@ywongweb Can you please PR a layout where this breaks to the playground app? Possible to ModalScreen.js

[ywongweb]

@guyca
My bad, I probably had the keys in the wrong place. It is working on iOS 2.0.2623

Working sample code:

    Navigation.showModal({
      component: {
        name: 'modal121',
        id: 'myModal',
        options: {
          layout: {
            backgroundColor: 'rgba(0,0,0,0.9)',
          },
          modalPresentationStyle: 'overCurrentContext',
        },
      },
    })

[pribeh]

@ywongweb have you tried the following?

static options() {
  return {
    layout: {
      backgroundColor: 'transparent',
  },
  screenBackgroundColor: 'transparent',
  modalPresentationStyle: 'overCurrentContext',
  };
}

Try adding screenBackgroundColor: 'transparent' and see if that helps.

[tobias-leinss]

I am on rnn 2.1.2 (if that is really the latest) and

layout: {
backgroundColor: 'transparent' or the appropriate color
}
does it for me. Thanks @pribeh

[adybuciuman]

If I set

 Navigation.showModal({
    component: {
      name: ComponentName,
      id: ComponentID
      passProps: { isModalScreen: true },
      options: {
        layout: { backgroundColor: 'transparent' },
        screenBackgroundColor: 'transparent',
        modalPresentationStyle: 'overCurrentContext',
      }
    }
  });

this crash happens

[emilioheinz]

@adybuciuman You can use overFullScreen instead of overCurrentContext.

[TimonSotiropoulos]

@emilioheinz thanks for solving this, just a note that the docs on the website on Modals actually still say to use 'overCurrentContext' ->

https://wix.github.io/react-native-navigation/docs/modal

Probably why people (like me) are still running into this issue =D

[emilioheinz]

@emilioheinz thanks for solving this, just a note that the docs on the website on Modals actually still say to use 'overCurrentContext' ->

https://wix.github.io/react-native-navigation/docs/modal

Probably why people (like me) are still running into this issue =D

Sorry but I'm not able to access the link provided in your comment.