React Native Modal: Transparent Background & Layout Problem

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;