All files / overlay Overlay.js

91.67% Statements 11/12
100% Branches 4/4
50% Functions 1/2
90.91% Lines 10/11
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117                        1x 1x 1x   1x                           3x 3x 2x                                                               1x                           1x                   1x                                                        
import React from 'react';
import PropTypes from 'prop-types';
import {
  View,
  StyleSheet,
  Dimensions,
  Platform,
  TouchableWithoutFeedback,
} from 'react-native';
 
import { ViewPropTypes } from '../config';
 
const dimensions = Dimensions.get('window');
const windowWidth = dimensions.width;
const windowHeight = dimensions.height;
 
const Overlay = props => {
  const {
    children,
    isVisible,
    containerStyle,
    overlayStyle,
    windowBackgroundColor,
    overlayBackgroundColor,
    onBackdropPress,
    borderRadius,
    width,
    height,
    fullScreen,
    ...rest
  } = props;
  if (!isVisible) return null;
  return (
    <TouchableWithoutFeedback onPress={onBackdropPress}>
      <View
        style={[
          styles.container,
          { backgroundColor: windowBackgroundColor },
          containerStyle,
        ]}
        {...rest}
      >
        <TouchableWithoutFeedback>
          <View
            style={[
              styles.overlay,
              {
                borderRadius,
                backgroundColor: overlayBackgroundColor,
                width,
                height,
              },
              fullScreen && { width: windowWidth, height: windowHeight },
              overlayStyle,
            ]}
          >
            {children}
          </View>
        </TouchableWithoutFeedback>
      </View>
    </TouchableWithoutFeedback>
  );
};
 
Overlay.propTypes = {
  children: PropTypes.any,
  isVisible: PropTypes.bool,
  containerStyle: ViewPropTypes.style,
  overlayStyle: ViewPropTypes.style,
  windowBackgroundColor: PropTypes.string,
  overlayBackgroundColor: PropTypes.string,
  onBackdropPress: PropTypes.func,
  borderRadius: PropTypes.number,
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  fullScreen: PropTypes.bool,
};
 
Overlay.defaultProps = {
  borderRadius: 3,
  fullScreen: false,
  windowBackgroundColor: 'rgba(0, 0, 0, .4)',
  overlayBackgroundColor: 'white',
  width: windowWidth - 80,
  height: windowHeight - 180,
  onBackdropPress: () => null,
};
 
const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: windowWidth,
    height: windowHeight,
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 5,
  },
  overlay: {
    borderRadius: 5,
    padding: 10,
    ...Platform.select({
      ios: {
        shadowColor: 'rgba(0, 0, 0, .3)',
        shadowOffset: { width: 0, height: 1 },
        shadowRadius: 4,
      },
      android: {
        elevation: 2,
      },
    }),
  },
});
 
export default Overlay;