react-native-svgx

Work in progress, use under your own risk!!

• Currently: it renders the received image definition
• Currently: it accepts the width and height values
• Currently: it accepts custom styles for items by id
• Wanted: api for animation
• Note: I have recently needed this component in one personal project, efforts have been made only to cover the immediate need. But I expect to resume work and improve the functionalities soon.

Smart svg component for React Native. Render svg from json definition.

Features

• react-native-svgx is a wrapper for Expo.Svg or Svg from react-native-svg.

Notes

• For convert svg files to valid json we use react-native-prepare-svg.

Installation

  npm install --save react-native-svgx

Usage

See the Example app

 
// Svgx is a wrapper for Expo.Svg or Svg from react-native-svg
// you should provide the component for your type of project
// e.g: import { Svg } from 'react-native-svg'; or:
import { Svg, Constants } from 'expo';
import { Svgx } from 'svgx';
 
// the Svg definition of the wanted image
import { checkmark } from '../icons/iconsLib.json';
 
function Example() {
  const svgStyles = {
    // change the default image size
    height: 38,
    width: 38,
    // it supports specific styles for each shape 
    // in the image by usign the element id
    'checkmark-path': {
      fill: '#000000'
    },
    'circle-path': {
      fill: '#222222'
    }
  };
 
  return (
    <Svgx {...{
      component: Svg,
      data: checkmark,
      styles: svgStyles
    }} />
  );
}

In test

Support is expected for the following elements, they are currently under test.

• LinearGradient
• RadialGradient
• Polyline
• Polygon
• Ellipse
• Circle
• Symbol
• Line
• Path
• Rect
• Text
• Defs
• Stop
• Use
• G

JSON Model

The JSON data Model expected is the following:

License

MIT © Jose Antonio Sanchez