Image is not displaying inside Lighbox React Native

Question

I'm trying to navigate between two scenes using Navigator in react-native. Below is codea for scenes "Example", "LightboxView1". I have put an image inside Lightbox in second scene "LightboxView1". When I run the code, Image doesnt display.

Also If I try to put the image in first scene's lightbox, I get this error "react.children.only expected to receive a single react element child"

var Example = React.createClass({

  navigate(id) {
    this.props.navigator.push({
        id: id,
        component: LightboxView1
    })
  },


  render: function() {

    return (
      <ScrollView style={styles.container}>
        <View style={styles.text}><Text>Test Text 1</Text></View>
        <Lightbox navigator={this.props.navigator}
          renderHeader={close => (
            <TouchableOpacity onPress={close}>
              <Text style={styles.closeButton}>Close</Text>
            </TouchableOpacity>
          )}>
          <View style={styles.customHeaderBox}><Text>I have a custom header</Text></View>
        </Lightbox>
       <TouchableHighlight onPress={ () => this.navigate('second') } style={ styles.button }>
         <Text>Second View</Text>
       </TouchableHighlight>
      </ScrollView>
    );
  },
});

var LightboxView1 = React.createClass({

  render: function() {
    return (
      <ScrollView style={styles.container}>
        <View style={styles.text}>
          <Text>Lighbox view 1: some example text</Text>
        </View>
        <Lightbox underlayColor="white" navigator={this.props.navigator}>
          <Image style={styles.contain} resizeMode="contain"
            source={{uri: 'http://www.yayomg.com/wp-content/uploads/2014/04/yayomg-pig-wearing-party-hat.jpg'}}
          />
         </Lightbox>
        <TouchableHighlight onPress={ () => this.props.navigator.pop()}>
            <Text>First View</Text>
        </TouchableHighlight>
      </ScrollView>
    );
  },
});

var LightBoxProject = React.createClass({

  _renderScene: function(route, navigator){
  if(route.component) {
    var Component = route.component;
    return (<Component navigator={navigator} route={route} {...route.passProps} />);
  }
   switch(route.id){
    case "first":
      return(<Exmaple navigator={navigator} />);
    case "second":
      return (<LightboxView1 navigator={navigator}/>);
  }
},

  render: function() {

    return (
      <Navigator
        ref="navigator"
        style={styles.navigator}
        renderScene={this._renderScene}
        initialRoute={{ id: 'first', component: Example}}
      />
    );
  }
});

Answer 1

I believe you didn't set the height and width of your image in styles.contain. The Image won't render until it's told its size.

As for the react.children.only error, wrap both the Image and the header in a single View and put it and it alone directly inside the Lightbox.

edit: since iOS 9 you by default cannot load resources via HTTP. To override this you need to add App Transport Security Exception to your Info.plist.