index.js

import React, { Component } from "react";
import { View } from "react-native";
import PropTypes from "prop-types";
import xmldom from "@xmldom/xmldom";
import resolveAssetSource from "react-native/Libraries/Image/resolveAssetSource";

import Svg, {
  Circle,
  Ellipse,
  G,
  LinearGradient,
  RadialGradient,
  Line,
  Path,
  Polygon,
  Polyline,
  Rect,
  Text,
  TSpan,
  Defs,
  Stop,
} from "react-native-svg";

import * as utils from "./utils";

const ACCEPTED_SVG_ELEMENTS = [
  "svg",
  "g",
  "circle",
  "path",
  "rect",
  "defs",
  "line",
  "linearGradient",
  "radialGradient",
  "stop",
  "ellipse",
  "polygon",
  "polyline",
  "text",
  "tspan",
];

// Attributes from SVG elements that are mapped directly.
const SVG_ATTS = ["viewBox", "width", "height"];
const G_ATTS = ["id"];

const CIRCLE_ATTS = ["cx", "cy", "r"];
const PATH_ATTS = ["d"];
const RECT_ATTS = ["width", "height"];
const LINE_ATTS = ["x1", "y1", "x2", "y2"];
const LINEARG_ATTS = LINE_ATTS.concat(["id", "gradientUnits"]);
const RADIALG_ATTS = CIRCLE_ATTS.concat(["id", "gradientUnits"]);
const STOP_ATTS = ["offset"];
const ELLIPSE_ATTS = ["cx", "cy", "rx", "ry"];

const TEXT_ATTS = ["fontFamily", "fontSize", "fontWeight", "textAnchor"];

const POLYGON_ATTS = ["points"];
const POLYLINE_ATTS = ["points"];

const COMMON_ATTS = [
  "fill",
  "fillOpacity",
  "stroke",
  "strokeWidth",
  "strokeOpacity",
  "opacity",
  "strokeLinecap",
  "strokeLinejoin",
  "strokeDasharray",
  "strokeDashoffset",
  "x",
  "y",
  "rotate",
  "scale",
  "origin",
  "originX",
  "originY",
  "transform",
  "clipPath",
];

let ind = 0;

function fixYPosition(y, node) {
  if (node.attributes) {
    const fontSizeAttr = Object.keys(node.attributes).find(
      (a) => node.attributes[a].name === "font-size"
    );
    if (fontSizeAttr) {
      return (
        "" + (parseFloat(y) - parseFloat(node.attributes[fontSizeAttr].value))
      );
    }
  }
  if (!node.parentNode) {
    return y;
  }
  return fixYPosition(y, node.parentNode);
}

class SvgUri extends Component {
  constructor(props) {
    super(props);

    this.state = { fill: props.fill, svgXmlData: props.svgXmlData };

    this.createSVGElement = this.createSVGElement.bind(this);
    this.obtainComponentAtts = this.obtainComponentAtts.bind(this);
    this.inspectNode = this.inspectNode.bind(this);
    this.fetchSVGData = this.fetchSVGData.bind(this);

    this.isComponentMounted = false;

    // Gets the image data from an URL or a static file
    if (props.source) {
      const source = resolveAssetSource(props.source) || {};
      this.fetchSVGData(source.uri);
    }
  }

  componentWillMount() {
    this.isComponentMounted = true;
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.source) {
      const source = resolveAssetSource(nextProps.source) || {};
      const oldSource = resolveAssetSource(this.props.source) || {};
      if (source.uri !== oldSource.uri) {
        this.fetchSVGData(source.uri);
      }
    }

    if (nextProps.svgXmlData !== this.props.svgXmlData) {
      this.setState({ svgXmlData: nextProps.svgXmlData });
    }

    if (nextProps.fill !== this.props.fill) {
      this.setState({ fill: nextProps.fill });
    }
  }

  componentWillUnmount() {
    this.isComponentMounted = false;
  }

  async fetchSVGData(uri) {
    let responseXML = null,
      error = null;
    try {
      const response = await fetch(uri);
      responseXML = await response.text();
    } catch (e) {
      error = e;
      console.error("ERROR SVG", e);
    } finally {
      if (this.isComponentMounted) {
        this.setState({ svgXmlData: responseXML }, () => {
          const { onLoad } = this.props;
          if (onLoad && !error) {
            onLoad();
          }
        });
      }
    }

    return responseXML;
  }

  // Remove empty strings from children array
  trimElementChilden(children) {
    for (child of children) {
      if (typeof child === "string") {
        if (child.trim().length === 0)
          children.splice(children.indexOf(child), 1);
      }
    }
  }

  createSVGElement(node, childs) {
    this.trimElementChilden(childs);
    let componentAtts = {};
    const i = ind++;
    switch (node.nodeName) {
      case "svg":
        componentAtts = this.obtainComponentAtts(node, SVG_ATTS);
        if (this.props.width) {
          componentAtts.width = this.props.width;
        }
        if (this.props.height) {
          componentAtts.height = this.props.height;
        }

        return (
          <Svg key={i} {...componentAtts}>
            {childs}
          </Svg>
        );
      case "g":
        componentAtts = this.obtainComponentAtts(node, G_ATTS);
        return (
          <G key={i} {...componentAtts}>
            {childs}
          </G>
        );
      case "path":
        componentAtts = this.obtainComponentAtts(node, PATH_ATTS);
        return (
          <Path key={i} {...componentAtts}>
            {childs}
          </Path>
        );
      case "circle":
        componentAtts = this.obtainComponentAtts(node, CIRCLE_ATTS);
        return (
          <Circle key={i} {...componentAtts}>
            {childs}
          </Circle>
        );
      case "rect":
        componentAtts = this.obtainComponentAtts(node, RECT_ATTS);
        return (
          <Rect key={i} {...componentAtts}>
            {childs}
          </Rect>
        );
      case "line":
        componentAtts = this.obtainComponentAtts(node, LINE_ATTS);
        return (
          <Line key={i} {...componentAtts}>
            {childs}
          </Line>
        );
      case "defs":
        return <Defs key={i}>{childs}</Defs>;
      case "linearGradient":
        componentAtts = this.obtainComponentAtts(node, LINEARG_ATTS);
        return (
          <LinearGradient key={i} {...componentAtts}>
            {childs}
          </LinearGradient>
        );
      case "radialGradient":
        componentAtts = this.obtainComponentAtts(node, RADIALG_ATTS);
        return (
          <RadialGradient key={i} {...componentAtts}>
            {childs}
          </RadialGradient>
        );
      case "stop":
        componentAtts = this.obtainComponentAtts(node, STOP_ATTS);
        return (
          <Stop key={i} {...componentAtts}>
            {childs}
          </Stop>
        );
      case "ellipse":
        componentAtts = this.obtainComponentAtts(node, ELLIPSE_ATTS);
        return (
          <Ellipse key={i} {...componentAtts}>
            {childs}
          </Ellipse>
        );
      case "polygon":
        componentAtts = this.obtainComponentAtts(node, POLYGON_ATTS);
        return (
          <Polygon key={i} {...componentAtts}>
            {childs}
          </Polygon>
        );
      case "polyline":
        componentAtts = this.obtainComponentAtts(node, POLYLINE_ATTS);
        return (
          <Polyline key={i} {...componentAtts}>
            {childs}
          </Polyline>
        );
      case "text":
        componentAtts = this.obtainComponentAtts(node, TEXT_ATTS);
        return (
          <Text key={i} {...componentAtts}>
            {childs}
          </Text>
        );
      case "tspan":
        componentAtts = this.obtainComponentAtts(node, TEXT_ATTS);
        if (componentAtts.y) {
          componentAtts.y = fixYPosition(componentAtts.y, node);
        }
        return (
          <TSpan key={i} {...componentAtts}>
            {childs}
          </TSpan>
        );
      default:
        return null;
    }
  }

  obtainComponentAtts({ attributes }, enabledAttributes) {
    const styleAtts = {};

    if (this.state.fill && this.props.fillAll) {
      styleAtts.fill = this.state.fill;
    }

    Array.from(attributes).forEach(({ nodeName, nodeValue }) => {
      Object.assign(
        styleAtts,
        utils.transformStyle({
          nodeName,
          nodeValue,
          fillProp: this.state.fill,
        })
      );
    });

    const componentAtts = Array.from(attributes)
      .map(utils.camelCaseNodeName)
      .map(utils.removePixelsFromNodeValue)
      .filter(utils.getEnabledAttributes(enabledAttributes.concat(COMMON_ATTS)))
      .reduce((acc, { nodeName, nodeValue }) => {
        acc[nodeName] =
          this.state.fill && nodeName === "fill" && nodeValue !== "none"
            ? this.state.fill
            : nodeValue;
        return acc;
      }, {});
    Object.assign(componentAtts, styleAtts);

    return componentAtts;
  }

  inspectNode(node) {
    // Only process accepted elements
    if (!ACCEPTED_SVG_ELEMENTS.includes(node.nodeName)) {
      return <View />;
    }

    // Process the xml node
    const arrayElements = [];

    // if have children process them.
    // Recursive function.
    if (node.childNodes && node.childNodes.length > 0) {
      for (let i = 0; i < node.childNodes.length; i++) {
        const isTextValue = node.childNodes[i].nodeValue;
        if (isTextValue) {
          arrayElements.push(node.childNodes[i].nodeValue);
        } else {
          const nodo = this.inspectNode(node.childNodes[i]);
          if (nodo != null) {
            arrayElements.push(nodo);
          }
        }
      }
    }

    return this.createSVGElement(node, arrayElements);
  }

  render() {
    try {
      if (this.state.svgXmlData == null) {
        return null;
      }

      const inputSVG = this.state.svgXmlData
        .substring(
          this.state.svgXmlData.indexOf("<svg "),
          this.state.svgXmlData.indexOf("</svg>") + 6
        )
        .replace(/<!-(.*?)->/g, "");

      const doc = new xmldom.DOMParser().parseFromString(inputSVG);

      const rootSVG = this.inspectNode(doc.childNodes[0]);

      return <View style={this.props.style}>{rootSVG}</View>;
    } catch (e) {
      console.error("ERROR SVG", e);
      return null;
    }
  }
}

SvgUri.propTypes = {
  style: PropTypes.object,
  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  svgXmlData: PropTypes.string,
  source: PropTypes.any,
  fill: PropTypes.string,
  onLoad: PropTypes.func,
  fillAll: PropTypes.bool,
};

module.exports = SvgUri;