Apply styles on React Native SectionList - css

Question

How can I apply different styles to the delivered and pending section lists?
I would like to change the color text of the status data.
Like status data pending Text should be red.
And status data delivered Text should be green.
How can I do this?
or I Should put this data manually? s
Code Bellow:
const delivered = [
{
id: 1,
title: 'Lanche, MADERO',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 2,
title: 'McDonalds',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 3,
title: 'Bobs',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 4,
title: 'Burguer King',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 5,
title: 'Outback',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 6,
title: 'Esfiha',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 7,
title: 'Habibs',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 8,
title: 'McDonalds',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
];
const pending = [
{
id: 1,
title: 'Sushi Garden',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Pending',
},
{
id: 2,
title: 'Gendai Sushi',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Pending',
},
];
export default class LastOrders extends Component {
renderItem = ({item}) => (
<TouchableOpacity
onPress={() => {
const {navigation} = this.props;
navigation.navigate('OrderDetail');
}}>
<View style={styles.productContainer}>
<Text style={styles.productTitle}>{item.title}</Text>
<Text style={styles.productDescription}>{item.description}</Text>
<Text style={styles.productStatus}>{item.status}</Text>
</View>
</TouchableOpacity>
);
render() {
return (
<View style={styles.container}>
<SectionList
sections={[
{title: 'Entregas Pendentes', data: pending},
{title: 'Entregas Completas', data: delivered},
]}
renderItem={this.renderItem}
renderSectionHeader={({section}) => (
<View>
<Text style={styles.header}>{section.title}</Text>
</View>
)}
showsVerticalScrollIndicator={false}
keyExtractor={(item) => item.id}
/>
</View>
);
Styles Code Bellow:
import {StyleSheet} from 'react-native';
export default StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
list: {
padding: 20,
},
productContainer: {
backgroundColor: '#f5f5f5',
borderWidth: 1,
borderColor: '#fff',
borderRadius: 4,
padding: 20,
marginBottom: 20,
},
productTitle: {
fontSize: 18,
fontWeight: 'bold',
color: '#000',
},
productDescription: {
fontSize: 16,
color: '#999',
marginTop: 5,
lineHeight: 24,
},
productStatus: {
fontSize: 16,
color: 'red',
marginTop: 5,
lineHeight: 24,
},
header: {
fontWeight: 'bold',
fontSize: 20,
marginTop: 30,
marginLeft: 20,
},
});

Answer 1

You just have to set the style conditionally.
Your renderItem should be something like below, here I've compared the string directly, if you have some sort of ID for status better compare that.
renderItem = ({ item }) => (
<TouchableOpacity
onPress={() => {
const { navigation } = this.props;
navigation.navigate('OrderDetail');
}}>
<View style={styles.productContainer}>
<Text style={styles.productTitle}>{item.title}</Text>
<Text style={styles.productDescription}>{item.description}</Text>
<Text
style={
item.status === 'Situação: Pending'
? styles.productStatus
: styles.productStatusDelivered
}>
{item.status}
</Text>
</View>
</TouchableOpacity>
);
You will need a new style like this as well
productStatusDelivered: {
fontSize: 16,
color: 'green',
marginTop: 5,
lineHeight: 24,
},