I want to put a different style on my first React-Native Flatlist item

Question

class Card extends Component {
    render() {
        return (
            <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('Post', { "title": this.props.item.title, "body": this.props.item.body })}>
                <View style={{
                    flexDirection: 'row',
                    backgroundColor: 'white',
                    borderBottomWidth: 1,
                    borderRightWidth: 1,
                    borderLeftWidth: 1,
                    borderColor: 'rgba(200,200,200,0.3)',
                    borderRadius: 6,

                    width: '86%',
                    maxHeight: 120,
                    minHeight: 120,

                    alignSelf: 'center',
                    marginBottom: 5
                }}>
                    <Image style={{
                        width: 100,
                        maxHeight: 100,
                        minHeight: 100,
                        borderRadius: 20,
                        }}
                        source={{ uri: 'https://im.ziffdavisinternational.com/ign_br/screenshot/default/screenshot-2_5s54.png',
                        }}
                    />

                    <View style={{
                        width: '66%',
                        padding: 5}}
                        >
                        <Text style={{
                            fontSize: 14,
                            fontWeight: 'bold',
                            fontFamily: 'verdana',
                        }}
                        numberOfLines={2}
                        >
                            {this.props.item.title}
                        </Text>
                        <Text style={{
                            fontSize: 12,
                            marginTop: 5
                        }} numberOfLines={3}
                        >
                            {this.props.item.body}
                        </Text>
                    </View>
                </View>
            </TouchableWithoutFeedback>
        );
    }
}
export default withNavigation(Card);

Answer 1

In the parent component where the Flatlist is, Voce could pick up the index of the item.

Ex:

renderItem={(item, index) => <Card bgColor={ index === 0 ? '#COREMHEXA' : #'COREMHEXA' } />}

Ai by props inside the Voce Card component can access the bgcolor property and insert it.

Ex:

<View style={{backgroundColor: bgColor }} />