CODEWITHSUNDEEP
javascriptcssreactjsreact-nativeflexbox
shira
shira

Reputation: 394

react native : there is way to place text like my example?

i need to place some text like the example below:

{item.Sampling_Request_ID}   {item.Facility_Name}

{item.Sampling_Due_Date}     {item.Water_Source_Name}

i try to fix the place as the example but its not works for me and i must know the way to achieve it. in my example u can see the text that should be like my needs.

this is my way that try do that :

function renderItem({ item, index }) {
    let name = '';

    if (item.Facility_Name) {
      name = item.Consumer_Name;
    } else {
      name = item.Consumer_Name;
    }
    return (
      <TouchableOpacity
        style={{
          flex: 1,
          paddingVertical: 15,
          paddingHorizontal: 10,
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
          borderWidth: 1,
          borderColor: 'white',
          backgroundColor: index % 2 == 0 ? '#dde6eb' : '#d1f0da',
        }}
        onPress={() => selectItem(data)}
      >
        <View
          style={{
            flex: 1,
            alignItems: 'flex-start',
          }}
        >
          <Text style={styles.lightText}>
           {item.Facility_Name}
          </Text>
        </View>
        <View
          style={{
            alignItems: 'flex-end',
          }}
        >
          <Text style={styles.lightText}>{item.Sampling_Request_ID}</Text>
        </View>
         <View
          style={{
            flex: 1,
          }}
        >
          <Text style={styles.lightText}>{item.Water_Source_Name}</Text>
        </View>
<View
          style={{
            flex: 1,
          }}
        >
          <Text style={styles.lightText}>{item.Sampling_Due_Date}</Text>
        </View>
     
      </TouchableOpacity>
    );
  }

Upvotes: 0

Views: 60

Answers (3)

Mulweli Mushiana
Mulweli Mushiana

Reputation: 371

You can group Sampling_Request_ID & Facility_Name in one parent View that has a frexDirection set to row then group Sampling_Due_Date & Water_Source_Name in their View too. The following code should work as you described

function renderItem({ item, index }) {
  let name = "";

  if (item.Facility_Name) {
    name = item.Consumer_Name;
  } else {
    name = item.Consumer_Name;
  }
  return (
    <TouchableOpacity
      style={{
        flex: 1,
        paddingVertical: 15,
        paddingHorizontal: 10,
        //flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: "center",
        borderWidth: 1,
        borderColor: "white",
        backgroundColor: index % 2 == 0 ? "#dde6eb" : "#d1f0da",
      }}
      onPress={() => selectItem(data)}
    >
      <View
        style={{
          flex: 1,
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <View
          style={{
          }}
        >
          <Text style={styles.lightText}>{item.Sampling_Request_ID}</Text>
        </View>
        <View
          style={{
            flex: 1,
          }}
        >
          <Text style={styles.lightText}>{item.Facility_Name}</Text>
        </View>
      </View>
      <View
        style={{
          flex: 1,
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <View
          style={{
            flex: 1,
          }}
        >
          <Text style={styles.lightText}>{item.Sampling_Due_Date}</Text>
        </View>
        <View
          style={{
            flex: 1,
          }}
        >
          <Text style={styles.lightText}>{item.Water_Source_Name}</Text>
        </View>
      </View>
    </TouchableOpacity>
  );
}

Upvotes: 0

Farid Ansari
Farid Ansari

Reputation: 841

Try out in the following way. I hope it works.

 <TouchableOpacity
    style={{flex: 1}}
    onPress={onPress}
 >
    <View style = {{ width: '100%' }}>
      <View style = {{ flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
        <Text>{item.Sampling_Request_ID}</Text>
        <Text>{item.Facility_Name}</Text>
      </View>
      <View style = {{ flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
        <Text>{item.Sampling_Due_Date}< </Text>
        <Text>{item.Water_Source_Name}</Text>
      </View>
     </View>
 </TouchableOpacity>

Upvotes: 2

anthony willis mu&#241;oz
anthony willis mu&#241;oz

Reputation: 2478

Try with this

<TouchableOpacity
        style={{
          flex: 1,
          paddingVertical: 15,
          paddingHorizontal: 10,
          // flexDirection: 'row',
          // justifyContent: 'space-between',
          alignItems: 'center',
          borderWidth: 1,
          borderColor: 'white',
          backgroundColor: index % 2 == 0 ? '#dde6eb' : '#d1f0da',
        }}
        onPress={() => selectItem(data)}
      >
        <View
          style={{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'space-between'
          }}
        >
          <Text style={styles.lightText}>
           {item.Sampling_Request_ID}
          </Text>
          <Text style={styles.lightText}>{item.Facility_Name}</Text>
        </View>
        <View
          style={{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'space-between'
          }}
        >
          <Text style={styles.lightText}>
           {item.Sampling_Due_Date}
          </Text>
          <Text style={styles.lightText}>{item.Water_Source_Name}</Text>
        </View>
       
     
      </TouchableOpacity>

Upvotes: 0

Related Questions