Image with nested text gets a white background for transparency.

[mintuz]

The following code when nested within react-native-router outputs the text within the image with a white background even though it should be transparent. When explicitly setting it to transparent it also outputs the text with a white background. If the code is used without react-native-router, the UI is correct.

var React = require('react-native');
var Dimensions = require('Dimensions');
var AspectRatioCalculator = require('../../utils/AspectRatioCalculator.js');
var EditProfile = require('./EditProfile.ios.js');

var {
  Text,
  View,
  Image,
  StyleSheet,
  TouchableHighlight
} = React;

var Profile = React.createClass({
  _styles: StyleSheet.create({
    image: {
      width: Dimensions.get('window').width,
      height: AspectRatioCalculator.ratio8_7(Dimensions.get('window').width)
    },
    imageText: {
      fontSize: 28,
      position: 'absolute',
      bottom: 10,
      left: 10,
      fontWeight: "100",
      letterSpacing: 1,
      backgroundColor: 'transparent'
    },
    innerContainer: {
      padding: 10
    },
    button: {
      padding: 10,
      backgroundColor: '#8BC34A',
      flex: 1
    },
    buttonText: {
      color: '#FFFFFF',
      fontSize: 18,
      textAlign: 'center',
      fontWeight: "100",
      letterSpacing: 1
    },
    profileHeader: {
      backgroundColor: '#8BC34A'
    }
  }),
  _handleEditProfileAction: function() {
    this.props.toRoute({
      name: "Edit Profile",
      component: EditProfile,
      headerStyle: this._styles.profileHeader
    });
  },
  render: function() {

    return (
        <View style={this._styles.container}>
        <Image
          style={this._styles.image}
          source={{uri: this.props.data.image}}
        >
          <Text style={this._styles.imageText}>
            Hello {this.props.data.name}
          </Text>
        </Image>
        <View style={this._styles.innerContainer}>
          <TouchableHighlight onPress={this._handleEditProfileAction}>
            <View style={this._styles.button}>
              <Text style={this._styles.buttonText}>
                Edit Profile
              </Text>
            </View>
          </TouchableHighlight>
          <View style={this._styles.detailsContainer}>
            <Text style={this._styles.buttonText}>
              Profile
            </Text>
          </View>
        </View>
      </View>
    );
  }
});

module.exports = Profile;