CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-native-ios
Shahanshah Alam
Shahanshah Alam

Reputation: 605

different color for every item of flatlist based on condition

I want color of every item based on condition like:-

enter image description here

I will have my condition like :- let check = item.project_status.

and check can be completed, in-progress and incomplete.

and red for incomplete, yellow for in-progress and green for completed.

Here is my flatlist code:-

  <FlatList
        style={{height:constants.DesignHeight - 100}}
            data={props.DATA}
            renderItem={({ item }) =>
            
                <TouchableOpacity onPress={props.onPress} style={styles.flatlistContainer}>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                        <Text style={styles.text}>{item.project_name}  </Text>
                        <Text style={styles.text2}>Start: {moment(item.start_date).format("DD/MM/YYYY")}</Text>
                    </View>
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between'  }}>
                        <Text style={styles.text}>Assigned to: {item.project_manager.name}  </Text>
                        <Text style={styles.text2}>End: {moment(item.end_date).format("DD/MM/YYYY")}</Text>
                    </View>
                    <View>

                    </View>
                </TouchableOpacity>
            }
            KeyExtractor={(item) => item.id}
           // ItemSeparatorComponent={() => renderSeparator()}
        />

const styles = StyleSheet.create({
flatlistContainer: {
    width: '100%',
},
text: {
    fontSize: constants.vw(20),
    lineHeight: constants.vw(30),
},

text2: {
    fontSize: constants.vw(16),
    lineHeight: constants.vw(30),
}

})

How can I achieve this?

Thanks!!!

Upvotes: 2

Views: 604

Answers (1)

tiwtiwtiwtiwaaaaa
tiwtiwtiwtiwaaaaa

Reputation: 108

i think you can make a style for each project status and you can use it

const styles = StyleSheet.create({
...
incomplete: {
  color: 'red'
},
inprogress: {
  color: 'yellow'
},
completed: {
  color: 'green'
}
}})

and you can use it on style tag like this

<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
      <Text style={[styles.text, styles[item.project_status]}>{item.project_name}  </Text>
      <Text style={[styles.text2, styles[item.project_status]}>Start: {moment(item.start_date).format("DD/MM/YYYY")}</Text>
</View>

Upvotes: 2

Related Questions