react-native-ui-lib/src/components/overlay/index.js

<p align="center"> <img src="https://user-images.githubusercontent.com/1780255/105469025-56759000-5ca0-11eb-993d-3568c1fd54f4.png" height="250px" style="display:block"/> </p> <p align="center">UI Toolset & Components Library for React Native</p> <p a

import _pt from "prop-types";
import { isUndefined } from 'lodash';
import React, { PureComponent } from 'react';
import { StyleSheet, Image } from 'react-native';
import { Colors } from "../../style";
import View from "../view";

const gradientImageLow = require("./assets/GradientOverlayLow.png");

const gradientImageMed = require("./assets/GradientOverlayMedium.png");

const gradientImageHigh = require("./assets/GradientOverlayHigh.png");

const OVERLY_TYPES = {
  VERTICAL: 'vertical',
  TOP: 'top',
  BOTTOM: 'bottom',
  SOLID: 'solid'
};
export let OverlayIntensityType;

(function (OverlayIntensityType) {
  OverlayIntensityType["LOW"] = "low";
  OverlayIntensityType["MEDIUM"] = "medium";
  OverlayIntensityType["HIGH"] = "high";
})(OverlayIntensityType || (OverlayIntensityType = {}));

/**
 * @description: Overlay view with types (default, top, bottom, solid)
 * @extends: Image
 * @extendsLink: https://reactnative.dev/docs/image
 */
class Overlay extends PureComponent {
  static propTypes = {
    /**
       * The intensity of the gradient, default is 'LOW'.
       */
    intensity: _pt.oneOf(["low", "medium", "high"]),

    /**
       * The overlay color
       */
    color: _pt.string,

    /**
       * Custom overlay content to be rendered on top of the image
       */
    customContent: _pt.element
  };
  static displayName = 'Overlay';
  static overlayTypes = OVERLY_TYPES;
  static intensityTypes = OverlayIntensityType;

  getStyleByType(type = this.props.type) {
    const {
      color,
      intensity
    } = this.props;

    switch (type) {
      case OVERLY_TYPES.TOP:
        return [styles.top, color && {
          tintColor: color
        }];

      case OVERLY_TYPES.BOTTOM:
        return [styles.bottom, color && {
          tintColor: color
        }];

      case OVERLY_TYPES.SOLID:
        {
          if (isUndefined(color)) {
            const opacity = intensity === OverlayIntensityType.HIGH ? 0.75 : intensity === OverlayIntensityType.MEDIUM ? 0.55 : 0.4;
            return {
              backgroundColor: Colors.rgba(Colors.grey10, opacity)
            };
          } else if (color === Colors.white) {
            const opacity = intensity === OverlayIntensityType.HIGH ? 0.85 : intensity === OverlayIntensityType.MEDIUM ? 0.7 : 0.45;
            return {
              backgroundColor: Colors.rgba(Colors.white, opacity)
            };
          } else {
            return {
              backgroundColor: color
            };
          }
        }

      default:
        break;
    }
  }

  renderCustomContent = () => {
    const {
      customContent
    } = this.props;
    return <View pointerEvents="box-none" style={styles.customContent}>
        {customContent}
      </View>;
  };
  renderImage = (style, source) => {
    return <Image style={[styles.container, style]} resizeMode={'stretch'} source={source} />;
  };
  getImageSource = (type, intensity) => {
    if (type !== OVERLY_TYPES.SOLID) {
      if (intensity === OverlayIntensityType.MEDIUM) {
        return gradientImageMed;
      } else if (intensity === OverlayIntensityType.HIGH) {
        return gradientImageHigh;
      } else {
        return gradientImageLow;
      }
    }
  };

  render() {
    const {
      type,
      intensity,
      customContent
    } = this.props;
    const imageSource = this.getImageSource(type, intensity);

    if (type === OVERLY_TYPES.VERTICAL) {
      return <>
          {this.renderImage([this.getStyleByType(OVERLY_TYPES.TOP), styles.vertical], imageSource)}
          {this.renderImage([this.getStyleByType(OVERLY_TYPES.BOTTOM), styles.vertical], imageSource)}
          {customContent && this.renderCustomContent()}
        </>;
    }

    return <>
        {type && this.renderImage(this.getStyleByType(), imageSource)}
        {customContent && this.renderCustomContent()}
      </>;
  }

}

const styles = StyleSheet.create({
  container: { ...StyleSheet.absoluteFillObject,
    width: undefined
  },
  top: {
    bottom: undefined,
    top: 0,
    height: '75%'
  },
  bottom: {
    bottom: 0,
    top: undefined,
    height: '75%',
    transform: [{
      scaleY: -1
    }]
  },
  vertical: {
    height: '40%'
  },
  customContent: { ...StyleSheet.absoluteFillObject
  }
});
export default Overlay;