React Native: text going out of screen

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'
  },