react-native-svg/elements/Mask.js

SVG library for react-native

import React from "react";
import { requireNativeComponent } from "react-native";
import extractTransform from "../lib/extract/extractTransform";
import extractProps from "react-native-svg/lib/extract/extractProps";
import units from "../lib/units";
import Shape from "./Shape";

export default class Mask extends Shape {
    static displayName = "Mask";

    static defaultProps = {
        x: "0%",
        y: "0%",
        width: "100%",
        height: "100%",
    };

    render() {
        const { props } = this;
        const {
            maskTransform,
            transform,
            id,
            x,
            y,
            width,
            height,
            maskUnits,
            maskContentUnits,
            children,
        } = props;
        return (
            <RNSVGMask
                ref={this.refMethod}
                {...extractProps({ ...props, x: null, y: null }, this)}
                x={x}
                y={y}
                width={width}
                height={height}
                maskTransform={extractTransform(maskTransform || transform || props)}
                maskUnits={maskUnits !== undefined ? units[maskUnits] : 0}
                maskContentUnits={
                    maskContentUnits !== undefined ? units[maskContentUnits] : 1
                }
            >
                {children}
            </RNSVGMask>
        );
    }
}

const RNSVGMask = requireNativeComponent("RNSVGMask");