i am struggling to place text in the format shown below:
{item.Sampling_Request_ID} {item.Facility_Name}
{item.Sampling_Due_Date} {item.Water_Source_Name}
i have attempted to align the text as indicated in the example, but I am facing difficulties and need guidance on how to achieve it. the desired text format is illustrated in the example provided.
here is the method I am using to try and achieve this:
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>
);
}