background color in cardview title (react-native) - react-native

Question

I am trying to create a cardview in react-native with a title and body. however, i want to add a background color to the tittle but not able to do it.
i was able to create the cardview with a title header but not able to add a background color that covers the entire portion of the header.
see image attached for an example of what i want to implement.
As you can see, the card view has a tittle of summary and the title/header portion has a gray background. below the header is the body which contain the content of the cardview. i want to implement the same in react-native. can someone help? thanks in advance
//This is an example of Card View//
import React from 'react';
//import react in our code.
import { Text, View, StyleSheet } from 'react-native';
//import all the components we are going to use.
import { Card } from 'react-native-elements';
//import Card
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Card title="Local Modules">
{/*react-native-elements Card*/}
<Text style={styles.paragraph}>
This is a card from the react-native-elements
</Text>
</Card>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: 40,
backgroundColor: '#ecf0f1',
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e',
},
});

Answer 1

Try this:
<Card title={
<View style={{ backgroundColor: 'red'}}>
<Text>Local Modules</Text>
</View>
}
...
/>

Answer 2

Edit your code like this :
//This is an example of Card View//
import React from 'react';
//import react in our code.
import { Text, View, StyleSheet } from 'react-native';
//import all the components we are going to use.
import { Card } from 'react-native-elements';
//import Card
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Card title="Local Modules">
<View style={styles.header}>
<Text> Summary </Text>
</View>
<Text style={styles.paragraph}>
This is a card from the react-native-elements
</Text>
</Card>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: 40,
backgroundColor: '#ecf0f1',
},
header: {
backgroundColor : '#C4C4C4'
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e',
},
});