React-native-navigation: Show modal non-transparent background on iOS

Created on 2 Jun 2020  路  2Comments  路  Source: wix/react-native-navigation

Issue Description

I upgraded library from 2.29.0 to 6.7.1 , on android everything is OK , But on iOS modal's background is not transparent , it's solid white

Steps to Reproduce / Code Snippets / Screenshots

Navigation.showModal({
    component: {
      name: component,
      passProps: props,
      options: {
        layout: {backgroundColor: 'transparent'},
        screenBackgroundColor: 'transparent',
        modalPresentationStyle: 'overCurrentContext',
        animations: {showModal: {enable: false}, dismissModal: {enabled: false}},
        topBar: {visible: false},
      },
    },
  })

I tried overFullScreen too , same result

default options

{
  popGesture: false,
  layout: {
    direction: 'rtl',
    orientation: ['portrait'],
  },
  topBar: {
    elevation: 0,
    background: {
      color: variables.brandPrimary,
    },
    title: {
      color: variables.inverseTextColor,
      fontFamily: variables.fontFamilyBold,
      fontSize: variables.titleFontSize - 2,
      alignment: 'center',
    },
    backButton: {
      color: variables.inverseTextColor,
      showTitle: false,
    },
  },
  ...Platform.select({
    ios: {
      bottomTab: {
        iconInsets: {bottom: -4},
        fontSize: 13,
      },
    },
  }),
  statusBar: {
    style: 'light',
    backgroundColor: variables.brandPrimary,
    drawBehind: false,
    visible: true,
  },
  animations: {
    setRoot: {
      waitForRender: true,
      alpha: {
        from: 0,
        to: 1,
        duration: 200,
      },
    },
    pop: {
      topBar: {
        alpha: {
          from: 1,
          to: 0,
          duration: 150,
        },
      },
      content: {
        alpha: {
          from: 1,
          to: 0,
          duration: 150,
          interpolation: 'ease-in',
        },
      },
    },
    push: {
      waitForRender: true,
      content: {
        alpha: {
          from: 0,
          to: 1,
          duration: 150,
          interpolation: 'ease-out',
        },
      },
    },
  },
}

Environment

  • React Native Navigation version: 6.7.1
  • React Native version: ,.62.2
  • Platform(s) (iOS, Android, or both?): iOS
  • Device info (Simulator/Device? OS version? Debug/Release?): both simulator and device, debug and release

Most helpful comment

By setting android specific option componentBackgroundColor: 'transparent' my iOS issue fixed!!!

All 2 comments

By setting android specific option componentBackgroundColor: 'transparent' my iOS issue fixed!!!

Great to hear you found that :) As you can see in the doc here, it is now supported on both platforms.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

bjacog picture bjacog  路  3Comments

bdrobinson picture bdrobinson  路  3Comments

kiroukou picture kiroukou  路  3Comments

viper4595 picture viper4595  路  3Comments

birkir picture birkir  路  3Comments