IOS: setting scene backgroundColor to transparent not working

[esanguinetti]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.1 (v3 is not supported)
• react-native v0.55.4

Expected behaviour

Scene backgroundColor transparent on IOS

Actual behaviour

Scene backgroundColor is black on IOS.
The solution referenced in #2809
did not seem to work.

Steps to reproduce

For non-obvious bugs, please fork this component, modify Example project to reproduce your issue and include link here.
1.<Router getSceneStyle={() => ({
backgroundColor:'transparent',
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0})}>
<Scene..>
<Scene..>

2.
3.

[marcosmartinez7]

Same problem here!

[mwskwong]

This is because the transition config of react navigation (that's what this library based on) has set a black bg in default when the OS is ios. To solve that:

transitionEffect = () => ({
        containerStyle: {
            backgroundColor: "transparent"
        }
});

// some code...

<Stack
    key="rootStack"
    transitionConfig={this.transitionEffect}
>
 // some code ...
</Stack>

[daviscabral]

That's not an issue on RNRF, but might be fixed setting the opacity for your container:

        containerStyle: {
            backgroundColor: "transparent",
            opacity: 1
        }

Please reopen in case it not fix your problem.