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 Convert the JSX to react-native-svg component with

  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


  • 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.


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;