From IT Skills
Jump to: navigation, search

SVG support to React Native on iOS and Android, and a compatibility layer for the web.

If remote SVG file contains CSS in <style> element, use SvgCssUri... The color prop define a kind of color variable that can be used by children elements via stroke="currentColor".

from file[edit]

How to show SVG file on React Native?... Convert .svg image to JSX with https://svg2jsx.herokuapp.com/ Convert the JSX to react-native-svg component with https://svgr.now.sh

  1. import SVG files in your React Native project ... like SVGR ... This makes it possible to use the same code for React Native and Web.
  2. create a new font (with Glyphs or this tutorial) and add my SVG files to it

bug for web[edit]

Element type is invalid: expected a string(for built-in components) or a class/function Error: Element type is invalid: expected... closed

  • SvgXml also works only for native


props[edit]

  • fill '#000' The fill prop refers to the color inside the shape.
  • fillOpacity 1 This prop specifies the opacity of the color or the content the current object is filled with.
  • stroke 'none' The stroke prop controls how the outline of a shape appears.
  • strokeLinecap 'square' either 'butt', 'square' or 'round'.
  • strokeLinejoin 'miter' either 'miter', 'bevel' or 'round'.
  • strokeDasharray
  • rotation
  • scale 1 Scale value on the current object.

implementaion[edit]

Andriod draws on Canvas that uses skia, not OpenGL

Path getPath(Canvas canvas, Paint paint) {
       Path path = new Path();
       double cx = relativeOnWidth(mCx);
       double cy = relativeOnHeight(mCy);
       double r = relativeOnOther(mR);
       path.addCircle((float) cx, (float) cy, (float) r, Path.Direction.CW);
       return path;
   }