Question: transluscent vs transparent

[mekwall]

It seems like setting the color to transluscent also changes some underlyign behavior in how the content behind it is rendered, while transparent doesn't do the same. Is this expected behavior and is it possible to make transparent work like transluscent in that it is rendered on top of the content behind it?

[kadiraydinli]

Hey @mekwall, this is a behavior that is expected to change the screen size when the color is set to translucent. You can see that React Native behaves the same way by using <Status Bar translucent={true} backgroundColor={"transparent"} /> in its own StatusBar. I think this is actually a situation related to React Native.

[mekwall]

Thanks for the quick reply @kadiraydinli! It's kinda what I figured. Would it be possible to add an option to act like translucent but for all colors? So, that when you use a color with transparency the content behind would be partly visible.

[kadiraydinli]

@mekwall As far as I have researched, it seems that it is not possible to make bar colors both translucent and colored. If you can find any examples where this has been done, it would be great if you could share it with me.

[aaronkingdom]

@mekwall As far as I have researched, it seems that it is not possible to make bar colors both translucent and colored. If you can find any examples where this has been done, it would be great if you could share it with me.

thanks your compent， now i can use like facebook， home page transparent and other page with translucent。。。

full transparent （fullscreen mode， gesture）

not tranparent。。。

just setting： SystemNavigationBar.setNavigationColor('translucent'); or SystemNavigationBar.setNavigationColor('transparent');

in your case， setting ，transparent in the navigationbar， and other compent with translucent color will do the same， i think

[aaronkingdom]

but a problem， it seems the stautsBar also become transparent no matter what it setting， when setting the navigationbar to transparent。。。 but its not a big problem

[pouyaemami]

I'm seeing the same issue on my end. Using setNavigationColor('transparent', 'light', 'navigation') will also make the status bar transparent and will actually push my content under the camera notch. When I use the React Native StatusBar component to do the same thing, the content is not being pushed under the camera. All I am trying to do is to set the background of the bottom navigation to transparent so that it looks better (rather than having a slight dark opacity)