How to give a transparent background to a fullScreen modal in react navigation (3.x).The solution given here is not working in new version of react-navigation. I want a transparent color in a new fullscreen modal which is presented over another screen.
const MainNavigator = createStackNavigator(
{
BrowserHome: { screen: BrowserHome },
ImageDetailModal: {
screen: ImageDetail,
navigationOptions: {
header: null
}
}
},
{
mode: "modal",
cardStyle: {
backgroundColor: "transparent",
opacity: 1
}
}
);
const AppContainer = createAppContainer(MainNavigator);
export default AppContainer;
While my Image detail component which is presented over 'BrowserHome' component is:
export default class ImageDetail extends React.Component {
render() {
const modalColor = this.props.navigation.getParam("modalColor");
return (
<View
style={{ flex: 1, flexDirection: "column", justifyContent: "flex-end" }}
>
<View
style={{
height: "50%",
width: "100%",
backgroundColor: "red",
justifyContent: "center"
}}
>
<Text>Testing a modal with transparent background</Text>
</View>
</View>
);
}
}
You can now remove the cardStyle
object and set instead transparentCard: true
:
const MainNavigator = createStackNavigator(
{
BrowserHome: { screen: BrowserHome },
ImageDetailModal: {
screen: ImageDetail,
navigationOptions: {
header: null
}
}
},
{
mode: "modal",
transparentCard: true
})
https://reactnavigation.org/docs/en/stack-navigator.html#stacknavigatorconfig