how set a View background color to red and it should be transparent - react-native

Question

I have a Imagebackground for my parentconatiner, I want to set backgroundColor of one of my childView to red and it should be transparent so that the parent container image is visible
it should be like this
sample image
here is my code
import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import colors from '../styles/colors';
import strings from '../localization/strings';
class Appointments extends Component {
render() {
return (
<View style={styles.Container}>
<View style={{ backgroundColor: 'rgba(52, 0, 0, 0.8)', shadowOpacity: 0.2, padding: 5 }}>
<View style={styles.childContainer}>
<Image style={{ justifyContent: 'flex-start', alignItems: 'flex-start' }} source={require('../assets/calender-Icon.png')}
/>
<View style={styles.dateTextContainer}>
<Text style={styles.childText}>Appointment</Text>
<Text style={[styles.childText, { fontSize: 26 }]}>Oct24, 2018</Text>
<Text style={[styles.childText, { fontSize: 16, fontWeight: 'bold' }]}>10:30 am</Text>
</View>
</View>
</View>
<View style={styles.borderText}>
<View style={{ flexDirection: 'row' }}>
<Image source={require('../assets/add-Icon.png')} />
<Text style={[styles.itemName, { fontSize: 16 }]}>New</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<Image source={require('../assets/seeAll-Icon.png')} />
<Text style={[styles.itemName, { fontSize: 16 }]}>See All</Text>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
Container: {
backgroundColor: colors.white,
borderRadius: 4,
borderWidth: 1,
borderColor: colors.red
},
childContainer: {
justifyContent: 'space-between',
alignItems: 'flex-start',
margin: 15,
flexDirection: 'row',
},
textStyle: {
fontSize: 16,
color: colors.black,
justifyContent: 'flex-end',
alignItems: 'flex-end',
fontWeight: 'bold'
},
childText: {
color: colors.white,
fontSize: 18,
},
dateTimeContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginHorizontal: 10,
alignItems: 'flex-end',
},
dateTextContainer: {
flexDirection: 'column',
marginHorizontal: 10,
justifyContent: 'flex-end',
alignItems: 'flex-end',
},
listItem: {
borderWidth: 1,
borderColor: colors.pureBlue,
alignItems: 'center',
justifyContent: 'center',
marginHorizontal: 5,
paddingVertical: 5,
margin: 30
},
itemName: {
fontSize: 14,
color: colors.black,
margin: 2,
paddingLeft: 4
},
border: {
borderRadius: 4,
borderWidth: 1,
borderColor: colors.light_gray,
marginHorizontal: 20
},
imageText: {
flexDirection: 'column',
margin: 10,
flexWrap: 'wrap',
flex: 1
},
borderText: {
flexDirection: 'row',
justifyContent: 'space-between',
margin: 10
}
});
export default Appointments;
I have tried rgba and opacity but still not working
please help me how to do this

Answer 1

You need to remove the backgroundColor of the Container to allow for transparency to go all the way through to the parent container, otherwise the transparency will only allow to see the white background behind
Container: {
// backgroundColor: colors.white,
...
},