React Native: text going out of screen - react-native

Question

I have an issue with the text going out of the screen and not wrapping.
Here is the code and stylesheet. Appreciate if someone can let me know what's going on and how to fix.
Referred to this post but couldn't get it to work.
<View style={styles.columnContainer}>
<View style={styles.rowDetails}>
<Text style={styles.header}>Customer Details</Text>
</View>
<View style={styles.rowItem}>
<Icon name="user-o" style={styles.userIcon}/>
<Text style={styles.textCustomer}>
{this.props.currentTask.customer.title} {this.props.currentTask.customer.first_name} {this.props.currentTask.customer.last_name}
</Text>
<View style={{flex: 0.1, backgroundColor: 'orange'}}/>
</View>
<View style={styles.rowItem}>
<Icon name="map-marker" style={styles.addressIcon}/>
<View style={styles.row}>
{
this.props.currentTask.address ? (
<Text style={styles.textCustomer}>
{ this.props.currentTask.address.street ? `${this.props.currentTask.address.street}, ` : null }
{ this.props.currentTask.address.landmark ? `${this.props.currentTask.address.landmark}, ` : null }
{ this.props.currentTask.address.area ? `${this.props.currentTask.address.area}, ` : null }
{ city ? `${city}, ` : null }
{ state ? `${state}, ` : null }
{ country }
</Text>
) : (
<Text style={styles.textCustomer}>(No Address Selected)</Text>
)
}
</View>
{
this.props.currentTask.address ?
<Icon name="chevron-right" onPress={this.onPressAddress.bind(this)} style={styles.rightIcon}/> :
<Icon name="plus" onPress={this.onPressAddress.bind(this)} style={styles.rightIcon}/>
}
</View>
<View style={styles.rowItem}>
<Icon name="phone" style={styles.phoneIcon}/>
<View style={styles.row}>
{
this.props.currentTask.phone ? (
<Text style={styles.textCustomer}>
{this.props.currentTask.phone.phone_number} ({this.props.currentTask.phone.phone_type})
</Text>
) : (
<Text style={styles.textCustomer}>(No Phone Selected)</Text>
)
}
</View>
{
this.props.currentTask.phone ?
<Icon name="chevron-right" onPress={this.onPressPhone.bind(this)} style={styles.rightIcon}/> :
<Icon name="plus" onPress={this.onPressPhone.bind(this)} style={styles.rightIcon}/>
}
</View>
</View>
Stylesheet:
columnContainer:{
flex: 1,
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'flex-start',
},
rowDetails:{
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'flex-start',
},
//section header like Customer Details / Task Details
header:{
flex: 1,
paddingVertical: 8,
paddingHorizontal: 10
},
//every row item
rowItem:{
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start',
alignItems: 'flex-start',
paddingVertical: 8,
paddingLeft: 7,
paddingRight: 3,
marginBottom: 2,
backgroundColor: COLOR_TASK_DETAILS_ROW,
},
row: {
flex: 0.8,
flexDirection: 'column',
//flexWrap: 'wrap',
//backgroundColor: 'blue',
},
//right chevron icon
rightIcon: {
flex: 0.1,
//width: 20,
fontSize: 15,
color: COLOR_TASK_DETAILS_ICON_ARROW,
alignSelf: 'center',
backgroundColor: 'orange'
},
//***************************** customer details ****************************
userIcon: {
flex: 0.1,
//width: 20,
fontSize: 15,
color: COLOR_TASK_DETAILS_ICON,
//marginRight: 2,
marginLeft: 5,
alignSelf: 'center',
backgroundColor: 'orange'
},
textCustomer: {
flex: 1,
marginLeft: 5,
flexWrap: 'wrap',
textAlign: 'left',
backgroundColor: 'red',
},
addressIcon: {
flex: 0.1,
//width: 20,
fontSize: 18,
color: COLOR_TASK_DETAILS_ICON,
marginLeft: 7,
//marginRight: 2,
alignSelf: 'center',
backgroundColor: 'orange'
},
phoneIcon: {
flex: 0.1,
//width: 20,
fontSize: 18,
color: COLOR_TASK_DETAILS_ICON,
//marginRight: 2,
marginLeft: 5,
alignSelf: 'center',
backgroundColor: 'orange'
},