[Text] Ensure that the text background is transparent by default

[ide]

For a very simple view I was observing that the text background was black and had to manually be set to transparent. This ensures that text nodes have a transparent background by default.

Test Plan: This example component no longer renders what looks like a black block, and instead displays legible text.

var Example = React.createClass({
  render: function() {
      return (
        <View style={styles.container}>
          <Text>hello</Text>
        </View>
      );
  },
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
};

[josebalius]

@ide While this waits to be merged, how do you set the background to transparent at the moment?

[brentvatne]

@josebalius - just backgroundColor: 'transparent'

[josebalius]

@brentvatne For some reason that doesn't seem to work for me :/ It works on almost everything but <Text>

[brentvatne]

@josebalius - strange, can you paste the code here?

[josebalius]

Sure

Stylesheet:

const PAGE_BG = "#118ac2";

let styles = StyleSheet.create({
    mainContainer: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        backgroundColor: PAGE_BG
    },
    buttonText: {
        fontSize: 15,
        color: '#111',
        alignSelf: 'center',
        fontWeight: 'bold'
    },
    button: {
        height: 45,
        flexDirection: 'row',
        backgroundColor: 'white',
        borderColor: 'white',
        borderWidth: 1,
        borderRadius: 3,
        marginBottom: 10,
        marginTop: 20,
        alignSelf: 'stretch',
        justifyContent: 'center'
    },
    line: {height: 0, borderColor: "#FFF", borderWidth: 0.5, backgroundColor: PAGE_BG},
    input: {height: 40, color: "#FFF", marginTop: 0, backgroundColor: 'transparent'},
    inputPass: {height: 40, color: "#FFF", marginTop: 20, backgroundColor: 'transparent'},
    account: {alignSelf: 'center', color: '#FFF', backgroundColor: 'transparent'},
    create: {alignSelf: 'center', color: '#FFF', marginTop: 10, fontWeight: 'bold', backgroundColor: 'transparent'}
});

Component's render:

<View style={styles.mainContainer}>

                <Image source={require('image!login_bg')} height="670" width={Dimensions.get('window').width} style={{padding: 30, marginTop: (Dimensions.get('window').height / 2 + 100)}}>

                    <TextInput style={styles.input} placeholder="Username" placeholderTextColor="#FFFFFF" />

                    <View style={styles.line} />

                    <TextInput style={styles.inputPass} placeholder="Password" placeholderTextColor="#FFFFFF" password={true} />

                    <View style={styles.line} />

                    <TouchableHighlight onPress={(e) => this.login()} style={styles.button}>
                        <Text style={styles.buttonText}>Sign In</Text>
                    </TouchableHighlight>

                    <Text style={styles.account}>Don't have an account?</Text>

                    <Text style={styles.create}>Create one here!</Text>

                </Image>


            </View>

styles.create / styles.account are the ones not working, the other two with transparent properties are fine.

[josebalius]

@amasad Nvm I had padding on the Image element which was invalid (although it worked). Removed the padding and added an inner view layer with the padding and the text component's transparency started to work.