Trying to set Opacity for Modal , Dim Background-CodePudding

I am having issues with the opacity. Trying to have it a bit dim when the Modal is triggered, it dims the background with some form of Opacity and all. How can I dim the background when the modal is triggered?

The image is looking thus :

Here is my source code

import {
  ImageBackground,
  Modal,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import {Picker} from '@react-native-picker/picker';
import React, {useState} from 'react';
import {useNavigation} from '@react-navigation/native';

const LocalPayments = () => {
  const navigation = useNavigation();
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={styles.container}>
      <View style={styles.space} />
      <ScrollView
        contentContainerStyle={{
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
        <ImageBackground
          source={{
            uri: 'asset:/logo/bg.JPG',
          }}
          imageStyle={{borderRadius: 6}}
          style={{
            top: -30,
            paddingTop: 95,
            alignSelf: 'center',
            width: 328,
            height: 115,
            borderadius: 9,
            justifyContent: 'center',
            alignSelf: 'center',
            alignItems: 'center',
          }}>
          <View>
            <Text style={styles.accText}>Wallet Balance</Text>
            <Text style={styles.text}> 250,000 </Text>
          </View>
        </ImageBackground>

        <View
          style={{
            borderRadius: 5,
            borderWidth: 1,
            overflow: 'hidden',
            height: 35,
            padding: 0,
            borderColor: '#00BB23',
          }}>
          {
            <Picker
              style={{
                width: 300,
                height: 55,
                borderBottomWidth: 1,
              }}
              itemStyle={{
                fontSize: 25,
                fontFamily: 'Poppins-Medium',
              }}>
              <Picker.Item label="Select Bank" value="accNum" />
            </Picker>
          }
        </View>

        <TextInput
          placeholder="Destination Account"
          onChangeText={creditAccount => this.setState({creditAccount})}
          style={styles.input}
        />

        <TextInput
          placeholder=" Amount"
          onChangeText={amount => this.setState({amount})}
          style={styles.input}
        />

        <TextInput
          placeholder=" Narration"
          onChangeText={description => this.setState({description})}
          style={styles.input}
        />

        <View
          style={{
            borderRadius: 5,
            borderWidth: 1,
            overflow: 'hidden',
            height: 35,
            padding: 0,
            top: 10,
            borderColor: '#00BB23',
          }}>
          {
            <Picker
              style={{
                width: 300,
                height: 55,
                borderBottomWidth: 1,
              }}
              itemStyle={{
                fontSize: 25,
                fontFamily: 'Poppins-Medium',
              }}>
              <Picker.Item label="Currency" value="accNum" />
              <Picker.Item label="NGN" value="NGN" />
            </Picker>
          }
        </View>

        <TouchableOpacity
          onPress={() => {
            setModalVisible(true);
          }}
          style={styles.button}>
          <Text style={styles.loginbtn}> Transfer </Text>
        </TouchableOpacity>
        <Modal
                hasBackdrop={true}
                backdropOpacity={0.2}
                backdropColor="black"
          transparent
          visible={modalVisible}
          onRequestClose={() => setModalVisible(false)}>
          <View style={styles.modal}>
            <Text>Hello From Modal</Text>
            <TouchableOpacity>
              <Text>Modal! Modal!</Text>
            </TouchableOpacity>
          </View>
        </Modal>
      </ScrollView>
    </View>
  );
};

export default LocalPayments;

const styles = StyleSheet.create({
  container: {
    paddingTop: 40,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
  },

  modal: {
    top: '50%',
    height: '50%',
    backgroundColor:'#fff'
  },
  accText: {
    top: -50,
    paddingTop: 10,
    justifyContent: 'center',
    alignItems: 'center',
    fontFamily: 'Poppins-Medium',
    fontSize: 12,
    color: 'white',
    textAlign: 'center',
  },
  text: {
    top: -50,
    fontSize: 20,
    color: 'white',
    textAlign: 'center',
    fontFamily: 'Poppins-Bold',
  },
  input: {
    top: 10,
    width: 300,
    height: 55,
    margin: 10,
    fontSize: 12,
    borderColor: '#00BB23',
    fontFamily: 'Poppins-Bold',
    borderRadius: 5,
    borderWidth: 1,
    marginBottom: 30,
  },

  button: {
    marginTop: 40,
    width: 150,
    height: 50,
    padding: 10,
    borderRadius: 10,
    backgroundColor: '#00BB23',
    alignItems: 'center',
  },

  Regbutton: {
    width: 150,
    height: 52,
    padding: 10,
    borderRadius: 10,
    backgroundColor: '#ffffff',
    alignItems: 'center',
    borderWidth: 2,
    borderColor: '#030303',
  },

  loginbtn: {
    color: '#ffff',
    fontSize: 15,
    fontFamily: 'Poppins-Medium',
  },

  AccountBalance: {
    fontSize: 13,
    fontWeight: 'bold',
    textAlign: 'left',
  },

  loginbtn2: {
    color: '#030303',
    fontSize: 20,
    fontWeight: 'bold',
  },

  logo: {
    width: 150,
    height: 150,
  },

  space: {
    top: 10,
    width: 10,
    height: 20,
  },

  space2: {
    width: 10,
    height: 10,
  },

  imageStyle: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 5,
    margin: 2,
    height: 15,
    width: 15,
    resizeMode: 'stretch',
    marginBottom: 8,
    marginTop: 8,
    alignItems: 'center',
  },
});

Been trying to get this resolved without any form of help. Please help is needed here.

CodePudding user response：

Try the following:

Create this separate file: BackgroundOpacity.js

import React, {memo} from 'react';
import {Platform, View} from 'react-native';

const BackgroundOpacity = ({display}) => {
  return (
    <View
      style={{
        display: Platform.OS === 'ios' ? 'none' : display ? 'flex' : 'none'
        flex: 1,
        position: 'absolute',
        top: 0,
        height: '200%'
        backgroundColor: 'black',
        opacity: 0.35,
        left: 0,
        right: 0,
        top: 0,
        marginTop: -200,
        zIndex: 3
      }}
    />
  );
};

export default memo(BackgroundOpacity);

Then implement it like this:

 .... some imports

 const LocalPayments = () => {
  const navigation = useNavigation();
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={styles.container}>
     <BackgroundOpacity
    display={
      Platform.OS === 'ios'
        ? false
        : modalVisible
    }
  />
      <View style={styles.space} />
      <ScrollView
        contentContainerStyle={{
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
    ... Rest of your code

So we created a reusable component that can be added anywhere when you have a modal. But the question is, why are we checking that it's always an android device when we use this backgroundOpacity?

Cause for some reasons, on iOS, whenever you have an opened modal, it will automatically add a background opacity on its own.