React-native-navigation: modalPresentationStyle is always fullscreen and screenBackgroundColor is never transparent. [v2]

Created on 21 Jun 2018 · 8Comments · Source: wix/react-native-navigation

Issue Description

[ENTER DESCRIPTION HERE -]
Modal is always fullscreen and the background is not transparent even when changing screenBackgroundColor to transparent and modalPresentationStyle to anything other than fullScreen.

Steps to Reproduce / Code Snippets / Screenshots

My content view for prior to displaying the modal is such:

<ScrollView>
  <CartSummaryContainer/>
  <AddressFormContainer/>
</ScrollView>

In my AddressFormContainer I have a method for displaying the modal:

    togglePicker(picker){
        const { navbarIcon } = this.state;
        const { countryValue, regionValue } = this.props;
        const showCountry = picker === 'showCountry';
        const name = showCountry ? 'native.CountryPicker' : 'native.RegionPicker';
        Navigation.showModal({
            stack: {
                children: [{
                    component: {
                        name,
                        passProps: {
                            picker,
                            onChange: showCountry ? this.countryChange : this.regionChange,
                            value: showCountry ? countryValue : regionValue,
                            showDefaultOption: !!showCountry,
                            defaultOptionLabel: showCountry ? 'United States' || countryValue : null,

                        },

                    },
                }],
                options: {
                    topBar: {
                        buttonColor: 'black',
                        leftButtons: [
                            {
                                id: 'close',
                                icon: navbarIcon,
                            },
                        ],

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

            },

        });
    }

The result, regardless of what I change the modalPresentationStyle to, is a full screen modal. The screenBackgroundColor changes color, but if I make the value transparent it will have a white background. Here is gif of the event, the red background color in the inital CheckoutContainer is just to help visualize the elements:

modalissue2

Environment

React Native Navigation version: 2.0.2305
React Native version: 0.54.4
Platform(s) (iOS, Android, or both?): ios
Device info (Simulator/Device? OS version? Debug/Release?): Simulator/ 11.2/Debug

🏚 stale

Source

spencewine

👍2

All 8 comments

Running into this as well - overlay is a possible work around though

dorthwein on 13 Jul 2018

👎3

Is there a thread tracking background colors not working etc...

dorthwein on 16 Jul 2018

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] on 30 Aug 2018

The issue has been closed for inactivity.

stale[bot] on 7 Sep 2018

Same issue here.

rsokz on 19 Sep 2018

This still appears to be an issue. I cannot get the following to create a transparent background for a modal:

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

This is on "react-native-navigation": "^2.0.2580". It appears as if this was working at some point during a previous version of V2 but no longer.