React Native Card Background Color

Question

I'm a beginner to React and React Native, coming from a Vue background. I'm making my first app, and confused on how to change the background color of a Card element.

This is my code:

import React, { Component } from 'react';
import { View, Text, StyleSheet, StatusBar, Platform } from 'react-native';
import { Card } from 'react-native-elements';

export default class Home extends Component {

    render() {

        return (
            <View style={ styles.container }>
                <Card style={ styles.card__today }>
                    <View style={{ display: "flex", flexDirection: "row", justifyContent: "space-between", backgroundColor: 'orange'}}>
                        <View>
                            <Text>First</Text>
                        </View>
                        <View>
                            <Text>Second</Text>
                        </View>
                    </View>
                    <View style={{ display: "flex", flexDirection: "row", justifyContent: "space-evenly", backgroundColor: "red" }}>
                        <View>
                            <Text>First</Text>
                        </View>
                        <View>
                            <Text>Second</Text> 
                        </View>
                        <View>
                            <Text>Third</Text>
                        </View>
                    </View>
                </Card>
            </View>
        );
    }
}


const styles = StyleSheet.create({

    container: {
        paddingTop: Platform.OS === 'ios' ? 0 : StatusBar.currentHeight,
        backgroundColor : 'skyblue',
        height: '100%',
    },

    card__today: {
        display: "flex",
        flexDirection: "column", 
        backgroundColor: "red"
    },

})

And here is a screenshot of how it currently looks:

As you can see, both of the flex items in the card take their respective background colors, but the Card element itself is not. I was wondering why the behavior is different, and how I can change the background color of the Card?

Things I've already tried:

• writing the styles inline like the other Views
• Using the wrapperStyle and containerStyle props as referenced here: https://react-native-elements.github.io/react-native-elements/docs/card.html

Both to no avail.

Thanks!

Answer 1

As mentioned below I tried for both ios and android and its working fine with containerStyle. check again using containerStyle instead of style

<Card containerStyle={styles.card__today}>

Feel free for doubts.