navigationBarStyle or navTransparent and also navigationBarStyle={[STYLES.navBar]} is not working while trying to make the custom navigation bar transparent

[adarshTS]

Version

• react-native-router-flux v4.0.0-beta.14 (v3 is not supported)
• react-native v0.46.4
  -react-native-router-flux-nav-bar v1.1.0

Expected behaviour

transparent navigationbar background

Actual behaviour

white color background in the navigation bar

[aksonov]

Probably issue with react-navigation. Please check pure react-navigation examples and try to make transparent navbar there. If you are able to do it then send me the link.

[adarshTS]

Here's something that I found : https://github.com/react-community/react-navigation/issues/312
But it didn't work with my project and I didn't install react-navigation but still, I don't think that it will work

[aksonov]

Yes, I used this for navTransparent and it works well.

[aksonov]

But I didn't tried for custom nav bar.

[adarshTS]

yes navTransparent worked well for me in default navigation bar but it didnt work in custom nav bar

[aksonov]

Then you must check pure react-navigation first. It has navigationOptions.header option for custom navbar (header).

[adarshTS]

here are the few links that I found referring react-navigation @aksonov https://reactnavigation.org/docs/navigators/tab#tabBarVisible
https://reactnavigation.org/docs/navigators/stack#header
can I make my custom navbar transparent without changing from RNRF to React-navigation

[aksonov]

tabBarVisible? Try to do it with React-Navigation. If it is possible, it could be easy done with RNRF.

[adarshTS]

@aksonov What I observed is that when I change it to any other color the background of the navigation bar is changing but when we are trying to make it transparent it changes into white why is it so? for making it transparent I tried these : backgroundColor: 'transparent' and backgroundColor: 'rgba(52, 52, 52, 0.8)'

this is what I get now

[aksonov]

Could you try pure react-navigation? If it has this issue, it is react-navigation bug, create ticket there.

[adarshTS]

@aksonov will this help in making the navBar transparent
https://github.com/aksonov/react-native-router-flux/pull/1476

[aksonov]

@adarshTS It is unknown when it will be done for v4.

[aksonov]

Have you looked at react-navigation/react-navigation#716 ?