Reactnative make Dialog background transparent - react-native

Question

I am using Dialog to show a popup issue is i am not able to change its background color to transparent.
return (
<View style={styles.container}>
{
loading
? <ActivityIndicator color="#10cea8" size="large" />
: brands == null || brands.length < 1
?
<Text style={{ fontSize: 20, fontWeight: 'bold', color: 'grey' }}>
No restaurants found :(
</Text>
:
<ScrollView contentContainerStyle={{ paddingBottom: 24 }} style={{ paddingBottom: 24 }} keyboardShouldPersistTaps="handled">
<Dialog contentStyle={{ margin: 0, padding: 0, marginTop: 0, paddingTop: 0, backgroundColor: 'rgba(52, 52, 52, 0.9)' }}
visible={dialogVisible}
animationType={'slide'}
>
<View style={styles.pop}>
<Image
source={require('../../../public/images/logo.png')}
resizeMode={'contain'}
style={{
width: 200,
height: 130
}}
/>
<View style={{ height: 10 }}></View>
<Text style={{ textAlign: 'center', color: "white", fontSize: 21, }}>Happy to serve you !</Text>
<Text style={{ textAlign: 'center', color: "white", fontSize: 18 }}>Choose your nearest Branch.</Text>
<View style={{ height: 30 }}></View>
<TouchableOpacity onPress={() => setDialogVisible(false)} style={{ backgroundColor: 'white', width: '100%', height: 45, justifyContent: 'center' }}><Text style={{ textAlign: 'center', color: "#10cea8", fontSize: 18 }}>GOT IT</Text></TouchableOpacity>
</View>
</Dialog>
{
brands.length > 0 && brands.map((b, i) => {
return (
<TouchableOpacity key={`brand-${i}`}
onPress={() => {
navigation.navigate('Menus', {
Locations: b.Locations,
brandID: b.BrandID,
brandName: b.Name
})
}}>
<View style={styles.cardStyle} >
<ImageBackground
style={styles.backgroundImgStyle}
imageStyle={{ borderRadius: 15 }}
source={{ uri: b.CompanyURl }}
>
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Image
style={styles.logoStyle}
source={{ uri: b.Image }}
/>
<Text style={styles.title} >
{b.Name}
</Text>
<Text style={styles.description} >
{b.Address}
</Text>
</View>
</ImageBackground>
</View>
</TouchableOpacity>
)
})
}
</ScrollView>
}
</View>
)
}
export default Home;
const styles = StyleSheet.create({
pop: {
borderTopLeftRadius: 30,
borderTopRightRadius: 30,
borderBottomRightRadius: 30,
borderBottomLeftRadius: 30,
overflow: 'hidden',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#10cea8'
},
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
},
cardStyle: {
borderColor: '#B0A8A6',
width: Dimensions.get('window').width - 30,
height: 185,
borderRadius: 15,
justifyContent: 'center',
alignItems: 'center',
marginTop: 24
},
backgroundImgStyle: {
width: '100%',
height: '100%',
resizeMode: 'cover'
},
logoStyle: {
justifyContent: 'center',
alignItems: 'center',
width: 65,
height: 65
},
title: {
color: 'white',
fontSize: 20,
marginTop: 10,
lineHeight: 28,
fontWeight: 'bold'
},
description: {
color: 'white',
fontSize: 13,
lineHeight: 20,
fontWeight: '400'
}
});
As you can see i have set backgroundColor to rgba(52, 52, 52, 0.9) but its not going to transparent. if i change it to red or blue something it working but transparent not working on this.
[![enter image description here]
you can see the popup behind borderRadius its showing dark grey color. I need to make it full transparent.