Q:

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.
 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"
  },
});

A:

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

