Close react native modal by clicking on overlay?

Question

Is it possible to close react native modal by clicking on overlay when transparent option is true? Documentation doesn\'t provide anything about it

Answer 1

I realize I'm very late to this party. But I just stumbled upon this thread and Gui Herzog's answer was exactly what I was looking for. If you don't want to add any outside dependencies that is the way to go. Thanks!

However, I wanted to include some optional negative/positive action buttons in my component and grabbed them from react-native-paper for the material style. That's when I realized react-native-paper probably have modals as well.

Here's their documentation: https://callstack.github.io/react-native-paper/modal.html
They also have a component for Dialogs https://callstack.github.io/react-native-paper/dialog.html

So I ended up with using the paper Dialog and it's well worth if if you're going to use the library throughout you app. Both Dialog and Modal handles the dismiss on click outside by default.

---

Here's a Dialog component created before realizing the Dialog component already exists.

I'll leave what I implemented here anyways as I think its a good template.

The component is in typescript. Make sure to have @types/react-native updated otherwise you might see some "No overload matches this call" errors.

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {Button, Modal, Portal} from 'react-native-paper';

interface Action {
  action: () => void;
  text: string;
}

interface Props {
  closePressed: () => void;
  negativeAction?: Action;
  positiveAction?: Action;
  title?: string;
  text: string;
  visible: boolean;
}

export const Dialog: React.FC = ({
  closePressed,
  negativeAction,
  positiveAction,
  title,
  text,
  visible,
}) => {
  return (
    
      
        
          {title && (
            
              {title}
            
          )}
          {text}
        
        
          {negativeAction && (
            
              {negativeAction.text}
            
          )}
          {positiveAction && (
            
              {positiveAction.text}
            
          )}
        
      
    
  );
};

const styles = StyleSheet.create({
  modalContainer: {
    borderRadius: 5,
    backgroundColor: 'white',
    padding: 10,
    margin: 20,
  },
  header: {padding: 20},
  contentText: {color: 'grey'},
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    paddingTop: 20,
  },
});