React-Native NavigatorIOS bug not working with background image

Question

It appears that the NavigatorIOS is not displaying the current content when there is a full screen background image as a sibling to it.

Can you please let me know if there is a workaround, I don't want to move the background image into each and every of my component pages.

Here the example code:

https://rnplay.org/apps/wrntpQ

    'use strict';

    var React = require('react-native');
    var {
        AppRegistry,
        StyleSheet,
        Text,
        View,
        Image,
        NavigatorIOS
        } = React;

    var SampleComponent = React.createClass({
        render: function() {
            return (
                <View style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'transparent'
          }}>
                    <Text style={{color: 'red'}}>Hello</Text>
                </View>
            );
        }
    });

    AppRegistry.registerComponent('SampleComponent', () => SampleComponent);

    var SampleApp = React.createClass({
        render: function() {
            return (
                <View style={styles.container}>
                    <View style={styles.bgContainer}>
                        <Image
                            style={styles.logo}
                            source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}/>
                    </View>
                    <NavigatorIOS
                        style={styles.navigator}
                        initialRoute={{
                      component: SampleComponent,
                      title: 'My View Title'
                            }} />
                </View>
            );
        }
    });

    /*
     // It works if you put the following line in line 39
     <SampleComponent style={styles.navigator} />

     // But it doesn't work when you put the following lines in 39
     <NavigatorIOS
     style={styles.navigator}
     initialRoute={{
     component: SampleComponent,
     title: 'My View Title'
     }} />
     */

    var styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
        },
        bgContainer: {
            position: 'absolute',
            left: 0,
            top: 0,
            right: 0,
            bottom: 0
        },
        logo: {
            flex: 1,
            // remove width and height to override fixed static size
            width: null,
            height: null,
            // make the background transparent so you actually see the image
            backgroundColor: 'transparent'
        },
        navigator: {
            flex: 1,
            backgroundColor: 'transparent'
        },
        welcome: {
            fontSize: 20,
            textAlign: 'center',
            margin: 10,
        },
        instructions: {
            textAlign: 'center',
            color: '#333333',
            marginBottom: 5,
        },
    });

    AppRegistry.registerComponent('SampleApp', () => SampleApp);

    module.exports = SampleApp;

Answer 1

I was told that this isn't currently supported.

They strongly suggest that you use Navigator instead of NavigatorIOS (see the comparison docs here and then you won't have this issue. NavigatorIOS is not actively being worked on -- it is a "Community Responsibility" because it is essentially unused by Facebook and by other core contributors, and the community hasn't been particularly interested in pushing it forward either (very few pull requests), so it would be unsafe to build your app around this.