All files / overlay Overlay.js

0% Statements 0/45
0% Branches 0/30
0% Functions 0/4
0% Lines 0/14
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                                                                                                                                                                                                           
import PropTypes from 'prop-types';
import React from 'react';
import {
  View,
  StyleSheet,
  Dimensions,
  Platform,
  ViewPropTypes as RNViewPropTypes,
} from 'react-native';
 
const dimensions = Dimensions.get('window');
const windowWidth = dimensions.width;
const windowHeight = dimensions.height;
 
const ViewPropTypes = RNViewPropTypes || View.propTypes;
 
const Overlay = props => {
  const {
    children,
    isVisible,
    containerStyle,
    overlayStyle,
    windowBackgroundColor,
    overlayBackgroundColor,
    borderRadius = parseInt(borderRadius) || 3,
    width,
    height,
    fullScreen,
    ...rest
  } = props;
  if (!isVisible) return null;
  return (
    <View
      style={[
        styles.container,
        windowBackgroundColor && { backgroundColor: windowBackgroundColor },
        containerStyle,
      ]}
      {...rest}
    >
      <View
        style={[
          styles.overlay,
          { borderRadius },
          overlayBackgroundColor && { backgroundColor: overlayBackgroundColor },
          width && { width },
          height && { height },
          fullScreen && { width: windowWidth, height: windowHeight },
          overlayStyle,
        ]}
      >
        {children}
      </View>
    </View>
  );
};
 
Overlay.propTypes = {
  children: PropTypes.any.isRequired,
  isVisible: PropTypes.bool.isRequired,
  containerStyle: ViewPropTypes.style,
  overlayStyle: ViewPropTypes.style,
  windowBackgroundColor: PropTypes.string,
  overlayBackgroundColor: PropTypes.string,
  borderRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  fullScreen: PropTypes.bool,
};
 
const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: windowWidth,
    height: windowHeight,
    backgroundColor: 'rgba(0, 0, 0, .4)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  overlay: {
    borderRadius: 5,
    width: windowWidth - 80,
    height: windowHeight - 180,
    backgroundColor: 'white',
    padding: 10,
    ...Platform.select({
      ios: {
        shadowColor: 'rgba(0, 0, 0, .3)',
        shadowOffset: { width: 0, height: 1 },
        shadowRadius: 4,
      },
      android: {
        elevation: 2,
      },
    }),
  },
});
 
export default Overlay;