How to dim a background in react native modal?

Question

Following is my created react native Modal and still couldn't find how to dim the background and transparent around pop-up modal.I am not using any external libraries and trying to find solution without libraries.Is it possible to do with on this way?

My Modal Component

render() {
let modal = this.state.modalType=='skill'? <SkillModal /> : <TrialModal />;
return (
  <View style={styles.container}>
    <Modal
      animationType='slide'
      onRequestClose={() => console.log('no warning')}
      presentationStyle="FormSheet"
      transparent
      visible={this.state.showModal}
    >
      <View>
        <View style={styles.modalView} >
          <TouchableOpacity
            onPress={this.closeModalFunc}
          >
            <Text style={styles.closeText}>X</Text>
          </TouchableOpacity>
          <View>
            {modal}
          </View>
        </View>
      </View>
    </Modal>
  </View>
  );
}

Modal Component Style

import {StyleSheet} from 'react-native';
import colors from '../../../theme/colors';
import metrics from '../../../theme/metrics';
import {container} from '../../../theme/base';

const styles = StyleSheet.create({
container: {
 backgroundColor: colors.background.gray,
},
modalView: {
 backgroundColor: colors.background.white,
 margin: 40,
},
closeText: {
  backgroundColor: colors.background.purpleishBlue,
  color: colors.background.white,
  borderRadius: metrics.avatar.small,
  width: 32,
  padding: 6,
  alignSelf: 'flex-end',
  textAlign: 'center',
  borderWidth: 1,
  borderColor: colors.background.white,
 },
});

export default styles;

Have you tried making modal `transparent={false}`? – Ahsan Ali Jan 02 '18 at 09:50 — Ahsan Ali, Jan 02 '18 at 09:50
yeah!! but then modal gets full screen. – Asbar Ali Jan 02 '18 at 09:54 — Asbar Ali, Jan 02 '18 at 09:54
@AsbarAli - Have you solved this issue? – Sadhu May 07 '18 at 12:51 — Sadhu, May 07 '18 at 12:51

score 58 · Answer 1 · answered Jun 07 '18 at 14:50

I solve this one by create my own component MyPopup like below

class MyPopup extends React.PureComponent {

render() {
    return (
        <Modal 
            animationType="fade"
            transparent={true}
            visible={this.props.visible}
            >
                <View style={{flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.5)'}}>
                    {this.props.children}
                </View>
        </Modal>
    )
}}

Then I use it like

<MyPopup visible={this.state.modalVisible}>
<View style={{
    width: '90%',
    height: 50,
    borderColor: '#ccc',
    borderWidth: 1,
    borderStyle: 'solid',
    backgroundColor: 'white',
    elevation: 20,
    padding: 10,
    borderRadius: 4,
}}>
    <Text>Hello, This is my model with dim background color</Text>
</View>

hi, but the modal doesnt cover the status bar. do you have solution for that? — Alvin Theodora, Mar 28 '19 at 09:09

score 41 · Answer 2 · answered Sep 17 '19 at 10:43

41

I had the same problem as you and I solved it by setting transparent={true} in the Props of the modal and by setting a 50% transparency in the style of the Modal's main View: backgroundColor: 'rgba(0, 0, 0, 0.5)'

answered Sep 17 '19 at 10:43

Yassine Letaief

436
4
4

4

I think this is the most succinct and clear way to do it. It affects no other components and the logic is simple. – Abe Oct 08 '19 at 15:47
3

It's a good answer but keep in mind that it won't apply to the header of the phone if you have a background there. – Fryla- Cristian Marucci Aug 07 '20 at 16:16
This should be the accepted answer – Jankapunkt Mar 08 '22 at 16:29
I had to set `backgroundColor: 'rgba(0, 0, 0, 0.5)'` on the ScrollView nested inside the modal – Green Apr 12 '23 at 01:32

score 29 · Answer 3 · answered Jan 02 '18 at 10:30

29

You can programmatically set the opacity of your main View when Modal is visible.

<View style={[styles.container, this.state.showModal ? {backgroundColor: 'rgba(0,0,0,0.5)'} : '']}>

answered Jan 02 '18 at 10:30

Ahsan Ali

4,951
2
17
27

2

Thank you for your answer, I already tried it. but It doesn't make sense because background of the model is a parent component. – Asbar Ali Jan 02 '18 at 10:43
Where have you added this condition? You need to add this to your main parent `View` component. Not Modal's `View` – Ahsan Ali Jan 02 '18 at 11:00
1

Yeah I added to the main view.But nothing changed. 'Test screen' text is on the parent component. not in this current component. it will work if those texts are in the current component – Asbar Ali Jan 02 '18 at 11:09
this is the correct answer since animation doesn't work in the same order as the foreground – evanjmg May 11 '21 at 15:35

score 10 · Answer 4 · edited Apr 13 '21 at 20:44

10

I created a container style then I applied the rgba values for backgroundColor e.g:

modalContainer:{
    flex: 1,
    //backgroundColor: 'transparent',
    backgroundColor: 'rgba(0,0,0,0.7)',
    alignItems: 'center',
    justifyContent: 'center',
},

Then inside the modal I created my actual modal dialog with rounded corners (I achieved this by adding another element inside the modal content and gave it a white background with rounded corners).

edited Apr 13 '21 at 20:44

cchapman

3,269
10
50
68

answered Dec 16 '19 at 15:43

Trevor

1,561
1
20
28

I found by containing components I can control the style hierarchy in this way. – Trevor Dec 16 '19 at 15:44
This should be the accepted answer to this question – Ali Raza Dec 09 '22 at 11:49

score 10 · Answer 5 · answered Oct 15 '20 at 12:21

I managed to get a transparent dark background wich close the modal when you click on it.
I use a first external container in the modal element, which has full screen dimensions. In it, the inner container has a box size and is centered in the screen.

Here the code (react: v16.13, react-native: v0.63.2)

import React from 'react';
import {Modal, Text, TouchableWithoutFeedback, View} from 'react-native';
import {style} from './style';

const MyModal = ({visible, onDismiss}) => {
  return (
    <Modal visible={visible} transparent>
      <TouchableWithoutFeedback onPress={() => onDismiss()}>
        <View style={style.modal}>
          <TouchableWithoutFeedback>
            <View style={style.modalInner}>
              <Text>Something in the modal</Text>
            </View>
          </TouchableWithoutFeedback>
        </View>
      </TouchableWithoutFeedback>
    </Modal>
  );
};

export default MyModal;

The onDismiss is a callback toggling the value of the visible variable given to this component from his parent.

TouchableWithoutFeedback adds the onPress event handling on the containers. The external one respond on click, to close/dismiss the modal. The inner one do nothing (default behavior when onPress is not given).

With the style :

import {StyleSheet} from 'react-native';

export const style = StyleSheet.create({
  modal: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
  },

  modalInner: {
    height: 200,
    padding: 35,
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#FFF',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
});

Note that the parent element of my <MyModal> is the root <View> of my app, with the style {flex: 1}.

score 9 · Answer 6 · answered Jun 19 '20 at 04:31

With react-native-modal, you can use backdropOpacity property to dim background when modal is visible

import React, {useState} from 'react';
import {Button, Text, View} from 'react-native';
import Modal from 'react-native-modal';

function ModalTester() {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  render() {
return (
  <View style={{flex: 1}}>
    <Button title="Show modal" onPress={toggleModal} />

    <Modal isVisible={isModalVisible} backdropOpacity={0.3}>
      <View style={{flex: 1}}>
        <Text>Hello!</Text>

        <Button title="Hide modal" onPress={toggleModal} />
      </View>
    </Modal>
  </View>
);
  }
}

export default ModalTester;

score 6 · Answer 7 · answered Apr 12 '21 at 07:39

6

I just Wrap the whole modalView in another View and simply apply background to it

<View style={styles.modalbackdrop}>   
   <View style={styles.modalView}></View>
</View>

and apply following

backgroundColor: 'rgba(0, 0, 0, 0.8)',
height: '100%',

answered Apr 12 '21 at 07:39

Shadab Ali

369
3
10

score 0 · Answer 8 · answered Jun 12 '23 at 15:40

This worked for me:

<View style={{opacity: modalVisible? 0.5 : undefined}}>
    <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
           setModalVisible(!modalVisible);
        }}>
        ...
    </Modal>
</View>

score -1 · Answer 9 · answered Jan 25 '21 at 10:55

-1

You must add statusBarTranslucent props to Modal component and set it to true. Then you will get your desired output. No need to set transparent props to true or any other tedious styles.

answered Jan 25 '21 at 10:55

Anil Rai

104
2

According to react native docs that prop only changes if the modal should go under the status bar, the question is about the background. – p-syche Jan 25 '21 at 12:17

score -1 · Answer 10 · answered Nov 07 '22 at 17:33

-1

React native provides a prop you can apply to the component

activeOpacity={0.9}

Which you can set to whatever you'd like

answered Nov 07 '22 at 17:33

prog

173
1
3
12

How to dim a background in react native modal?

My Modal Component

Modal Component Style

10 Answers10

Linked