CODEWITHSUNDEEP
cssreact-native
jiexishede
jiexishede

Reputation: 2613

React native: Text component style

The Text component words beyond the father component margin and ignore the grandfather padding. In my opinion, the Text content should within father component.enter image description here

 render() {
    return (
      <View style={styles.container}>
        <View style={styles.importV}>
          <View style={styles.serVRow}>
            <Image
              style={styles.serILeft}
              source={require('./img/personYellow.png')}/>
            <Text
              style={styles.rowTContext}>Why these words is beyond the serVRow style View. The serVRow style View.</Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'black',
  },
  hollowWordText: {
    color: 'white',
    fontSize:52,
  },
  importV: {
    width: width,
    backgroundColor: '#fff',
    marginBottom: 7,
    padding: 15,
  },
  serVRow: {
    flexDirection: 'row',
    marginRight: 3,
    paddingBottom: 8,
    backgroundColor:'#f00'
  },
  serILeft: {
    marginRight: 10,
    alignSelf:'center',
  },
  rowTContext: {
    color: "#000",
    fontSize: 14,
    lineHeight: 20,
    backgroundColor:"purple"
  },
});

Upvotes: 0

Views: 529

Answers (2)

Ravi Raj
Ravi Raj

Reputation: 6687

I think there is a problem in Text component when it is rendered inside a container with flex-direction='row'.It is not obeying the parent paddings...

In these cases wrap your Text component inside a View(give flex:1) and try if its working

<View style={{flex:1}} >
 <Text>your text here</Text>
</View>

Upvotes: 0

Travis White
Travis White

Reputation: 1977

Add flex: 1 to rowTContext to ensure the purple fills available space but doesn't extend past parent container.

Upvotes: 1

Related Questions