A simple React Native component that detects outside tap events

WatchOutsideTap.js

import PropTypes from 'prop-types';
import React from 'react';
import styled from 'styled-components';

const Modal = styled.Modal.attrs(() => ({
  transparent: true,
}))``;

const Wrapper = styled.TouchableOpacity`
  flex: 1;
`;

const WatchOutsideTap = ({ children, onTapOutside }) => (
  <Modal>
    <Wrapper onPress={onTapOutside}>
      {children}
    </Wrapper>
  </Modal>
);

WatchOutsideTap.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]).isRequired,
  onTapOutside: PropTypes.func.isRequired,
};

export default WatchOutsideTap;