React native numberOfLines style issue

Question

I'm trying to use the numberOfLines property to limit by text to 3 lines. It is working, however it is messing my page style. I lost the blue right arrows.

I create a snack for the code: https://snack.expo.io/rJwDB4L-B

As you can see the item number 3 is not displaying properly.

Answer 1

update with

import React, { Component } from 'react';
import { FlatList, View, StyleSheet, TouchableOpacity, Image, Text } from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';

class OpenWorkOrders extends Component {
  constructor(props) {
    super(props);
    // Set default values for test
    const test = [
      {id:1, unit:'101', dtSubmitted:'01/01/2020', description: 'Work Order Text Test', image:"https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
      {id:2, unit:'102', dtSubmitted:'01/01/2020', description: 'Work Order Text Test', image:"https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
      {id:3, unit:'103', dtSubmitted:'01/01/2020', description: 'Work Order Text Test. Test with a longe description. bla bla bla bla bla bla bla bla bla bla. aaaaaaaaa aaaaaaaaa v aaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaa aaaaaaaaaaaaaaaaaa', image:"https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
      {id:4, unit:'104', dtSubmitted:'01/01/2020', description: 'Work Order Text Test', image:"https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
      {id:5, unit:'105', dtSubmitted:'01/01/2020', description: 'Work Order Text Test', image:"https://www.smallbiztechnology.com/wp-content/uploads/2018/09/tools.png"},
    ];
    this.state = {
      workOrders: test,
    };
  }

  renderItem = ({ item }) => {
    return (
      <TouchableOpacity>
        <View style={styles.row}>
          <Image source={{ uri: item.image }} style={styles.pic} />
          <View style={{flex: 1}}>
            <View style={styles.nameContainer}>
              <Text style={styles.nameTxt}>Unit: {item.unit}</Text>
            </View>
            <View style={styles.end}>
              <Text style={styles.details} numberOfLines={3}>
                Date Submitted: {item.dtSubmitted}{'\n'}Description: {item.description}
              </Text>
            </View>
          </View>
          <TouchableOpacity>
            <AntDesign
              style={styles.icon}
              name="doubleright" size={15} color="#3232EA"
            />
          </TouchableOpacity>
        </View>
      </TouchableOpacity>
    );
  }

  render() {
    return (
      <View style={{ flex: 1 }} >
        <FlatList
          extraData={this.state}
          data={this.state.workOrders}
          keyExtractor={(item) => {
            return item.id;
          }}
          renderItem={this.renderItem}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
    row: {
      flexDirection: 'row',
      alignItems: 'center',
      borderColor: '#dcdcdc',
      backgroundColor: '#fff',
      borderBottomWidth: 1,
      padding: 10,
      justifyContent: 'space-between',
    },
    pic: {
      borderRadius: 25,
      width: 50,
      height: 50,
    },
    nameContainer: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      width: 270,
    },
    nameTxt: {
      marginLeft: 15,
      fontWeight: '600',
      color: '#222',
      fontSize: 15,
    },
    end: {
      flexDirection: 'column',
      marginRight: 40,
    },
    details: {
      fontWeight: '400',
      color: '#666',
      fontSize: 12,
      marginLeft: 15,
    },
    icon: {
      marginRight: 10
    }
});

export default OpenWorkOrders;