Search code examples
javascriptiosreact-nativenavigatornavigator-ios

Transparent NavigatorIOS doesn't work

I would like to display a 100% transparent Navigator bar, but I have something like light pink instead of the background color :

enter image description here

Here is my code : 

<NavigatorIOS
ref='nav'
tintColor="white"
style={{flex: 1}}
initialRoute={{
  title: 'Splash',
  navigationBarHidden: true,
  component: SplashScene
}}/>

Thanks a lot for your help,

Margot

Solution

  • The NavigatorIOS component is not supported by the React Native team, it is just the Apple iOS navigation bar available in react-native and you only have access to the same options available in xcode. You cannot handle full transparency for the bar in xcode when building a native iOS app without react-native. So you cannot do it with react-native either sadly.

    You can use the react-native-bar library for a more customizable navigation bar. You will be able to do it with react-native-navbar doing so:
    <NavigationBar tintColor="transparent" />

    You can also see this link if you need more help
    The final result will be something like in this image