Transparent NavigatorIOS doesn't work

Question

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

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

Answer 1

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

Answer 2

Is this because of the background colour of your main view? If this is the case, then adding a marginTop of 64 to your container view should help.

import { Modal, Text, TextInput, TouchableHighlight, View, ListView, NavigatorIOS } from 'react-native';
import React, { Component, PropTypes } from 'react';

export default class NavigatorIOSApp extends Component {
  render() {
    return (
      <NavigatorIOS
        initialRoute={{
          component: MyScene,
          title: 'My Initial Scene',
        }}
        style={{flex: 1}}
      />
    );
  }
}

class MyScene extends Component {
  static propTypes = {
    title: PropTypes.string.isRequired,
    navigator: PropTypes.object.isRequired,
  }

  _onForward = () => {
    this.props.navigator.push({
      title: 'Scene ' + nextIndex,
    });
  }

  render() {
    return (
      <View style={{backgroundColor: 'red', flex: 1, marginTop: 64}}>
        <Text>Current Scene: { this.props.title }</Text>
        <TouchableHighlight onPress={this._onForward}>
          <Text>Tap me to load the next scene</Text>
        </TouchableHighlight>
      </View>
    )
  }
}