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
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
{
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',
},
},
},
},
}
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.
Most helpful comment
By setting android specific option
componentBackgroundColor: 'transparent'my iOS issue fixed!!!