React Native Modal: Transparent Background & Layout Problem - react-native

Question

I am using the React Native Modal, I want the background of the Modal
to be transparent and I want the Modal display to behalf of the
screen
How to achieve the same requirement, where I am going wrong?
Below is the code for the same, please have a look at this:
import React, { Component } from 'react'
import { Modal, View, Text, Dimensions, Platform, TouchableOpacity, Alert, StyleSheet, Button } from 'react-native'
import Icon from 'react-native-vector-icons/Entypo'
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;
export class MyComponent extends Component {
render = () => {
const message = 'Do you want to upload the video now or wait until you are connected to wi-fi?'
return (
<Modal
animationType='slide'
transparent={true}
style={{backgroundColor: 'black'}}
>
<View style={styles.content}>
<View style={styles.closeBtn}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('PreInspection_VideoPlayer')} style={styles.closeBtn}>
<Icon name="cross" color="#000" size={26} />
</TouchableOpacity>
</View>
<Text style={{
fontSize: 18,
fontFamily: 'Montserrat-Bold',
paddingTop: Platform.OS === 'android' ? 40 : 20,
paddingVertical: 10
}}>Warning! 🚨</Text>
<View style={{ paddingHorizontal: 40 }}>
<Text style={{ fontSize: 18, justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}>{message}</Text>
</View>
<Button
title='Upload My Video'
style={styles.bigButtons}
onPress={() => { Alert.alert('Uploading Video') }}
/>
<Button
title='Upload Video Later'
style={styles.bigButtons}
onPress={() => { Alert.alert('Uploading Video Later') }}
/>
</View>
</Modal>
)
}
}
const styles = StyleSheet.create({
closeBtn: {
padding: 10
},
bigButtons: {
width: 240,
marginTop: 20
},
content: {
backgroundColor: 'red',
width: windowWidth * 0.8,
height: windowHeight * 0.7,
alignSelf: 'center',
top: windowHeight * 0.15,
borderRadius: windowHeight * 0.03,
alignItems: 'center',
justifyContent: 'center'
},
})
Any help would be appreciated. Thanks in advance :)

Answer 1

You can achieve this easily with React Native Community Modal
Here is an example:
import React, { useState } from "react";
import { Text, View, Dimensions } from "react-native";
import Modal from "react-native-modal";
const { width: ScreenWidth, height: ScreenHeight } = Dimensions.get("window");
const ModalExample = props => {
const [visibility, setVisibility] = useState(true);
return (
<View>
<Modal
backdropColor="transparent"
isVisible={visibility}
style={{
alignItems: "center",
justifyContent: "center"
}}
onBackdropPress={() => setVisibility(false)}
>
<View
style={{
borderRadius: 16,
alignItems: "center",
justifyContent: "center",
width: ScreenWidth * 0.7,
backgroundColor: "#fdfdfd",
height: ScreenHeight * 0.5
}}
>
<Text>I am the modal content!</Text>
</View>
</Modal>
</View>
);
};
export default ModalExample;