Transparent container doesn't work on Lightbox

[alexmngn]

Hi @artald It seems like the content of a Lightbox cannot be transparent. I am using the react-native-linear-gradient component within my main component rendered in the Lightbox to create a semi-transparent linear gradient behind the button, but I can't do so.

And when I try to set any type of transparent background to my container, it doesn't render anything at all:

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#ffffffaa',
        flex: 1
    }
});

Also, my main component is not rendered full screen even though I'm using flex: 1

So the issues are:

• The component is not rendered 100% of the screen with flex: 1, the only way to render this full screen would be to use Dimensions
• When I try to render a semi-transparent component within the main component, it renders it solid
• When the main component has any type of transparency (like backgroundColor: '#ffffffaa'), it doesn't render it at all

[artald]

Hi @alexmngn Thanks for letting us know. I will look into these issues.

[artald]

@talkol 53cea08 fixes the transparency issue.

Regarding the 100% screen sizing: even thought flex rules still apply here (if you set at least height or width), I don't think it is possible to fill the whole screen just by using flex: 1. Since we're creating a new RCTRootView which is not simply set as the root of a UIViewController, but is added to another view, a size must be provided - either width or height. So, for a full screen width/height LightBox you'd have to use the screen Dimensions. For a true full screen LightBox which actually covers the whole screen you can also use Dimensions, but preferably use a Modal.

If you don't have any comments regarding this, please include it on the next release. Thanks!

[drorbiran]

@artald, can we close this issue?

[artald]

@drorbiran I think so..