Support for Modal with transparent background

[adamski]

Are there plans (or hidden functionality?) to allow modal views with transparent background?

Otherwise I might send a PR if I find the time to do it.

[talkol]

I think that a lightbox might provide you with this functionality.. you can remove the blur background by setting 'none' over the blur type if I'm not mistaken

Modal.showLightBox

[adamski]

Thanks. I did try it but didn't know about blur background setting to 'none'. Is the lightbox available with react-native-navigation? I got it from react-native-controllers but would be nice to be able to use it the same way as other screens, or at least be able to pass props to it.

[talkol]

yeah.. missed it in navigation. will add

[talkol]

Added example about the transparent lightbox for future generations https://github.com/wix/react-native-controllers/commit/12e7343eff8c9edc37d3ff532052f5f8c587c167

[talkol]

@adamski LightBox added to react-native-navigation https://github.com/wix/react-native-navigation/commit/fdf215fd143a362b085d0089b025ffe68db4ad03

[adamski]

Great thanks

[alexmngn]

Hi @talkol LightBox doesn't behave the same behavior as a modal has (slide animation etc..). Is there any chance we could apply a transparent style to a Modal in a near future?

Another thing, it seems like the content of the Lightbox cannot be transparent, is this normal? I am using the react-native-linear-gradient component to create the gradient behind the button, it is supposed to be transparent and fit the full screen but doesn't renders transparent in a lightbox:

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
    }
});

Thanks

[talkol]

Hey @alexmngn

1) Modal is a native iOS view controller which usually includes a navigation bar, etc. IMO according to Apple's guidelines, these modals are always full screen. Since we rely on the native implementations, it means we receive the full screen implementation out-of-the-box. Maybe the better direction would be to add various show/hide animations to LightBox? for example the same slide-up/down we have in modal? If you agree, please open a new issue requesting more show/hide animations for LightBox and tag user artald (he implemented the native side of LightBox)

2) Regarding the transparent background for LightBox content. This is interesting. We want this supported. Please open a new issue for this and tag artald as before

[alexmngn]

@talkol Thanks for you answer. For the 1) though, React Native has a component called "Modal" which allows to create a modal with transparency. I'm not sure how they built this natively but, I guess it's possible! I'll create a ticket for 2).

[talkol]

@alexmngn I'm familiar with 'Modal' from React Native core. It's implementation is actually very similar to our LightBox (used with blur set to 'none') and slightly different appear animation (which we can easily add).

The term 'modal' as defined by Apple describes an element that covers pretty much the entire screen and looks like our Modal.