Add examples and refactor code

Add examples and refactor code

.npmignore

@@ -0,0 +1,2 @@
+/node_modules
+.idea/

Circle.js

@@ -1,41 +0,0 @@
-import React, {
-    ART,
-    Component,
-    PropTypes
-} from 'react-native';
-import fillFilter from './lib/fillFilter';
-
-let {
-    Surface,
-    Shape
-} = ART;
-
-let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired;
-class Circle extends Component{
-    static displayName = 'Polygon';
-    static propTypes = {
-        cx: propType,
-        cy: propType,
-        r: propType
-    };
-    render() {
-        let {cx, cy, r} = this.props;
-        let d = `
-            M ${cx} ${cy}
-            m -${r}, 0
-            a ${r}, ${r} 0 1, 0 ${r * 2}, 0
-            a ${r}, ${r} 0 1, 0 ${-r * 2}, 0
-            Z
-        `;
-        return <Shape
-            {...this.props}
-            fill={fillFilter(this.props)}
-            cx={null}
-            cy={null}
-            r={null}
-            d={d}
-        />;
-    }
-}
-
-export default Circle;

Example/.flowconfig

@@ -0,0 +1,65 @@
+[ignore]
+
+# We fork some components by platform.
+.*/*.web.js
+.*/*.android.js
+
+# Some modules have their own node_modules with overlap
+.*/node_modules/node-haste/.*
+
+# Ugh
+.*/node_modules/babel.*
+.*/node_modules/babylon.*
+.*/node_modules/invariant.*
+
+# Ignore react and fbjs where there are overlaps, but don't ignore
+# anything that react-native relies on
+.*/node_modules/fbjs/lib/Map.js
+.*/node_modules/fbjs/lib/Promise.js
+.*/node_modules/fbjs/lib/fetch.js
+.*/node_modules/fbjs/lib/ExecutionEnvironment.js
+.*/node_modules/fbjs/lib/isEmpty.js
+.*/node_modules/fbjs/lib/crc32.js
+.*/node_modules/fbjs/lib/ErrorUtils.js
+
+# Flow has a built-in definition for the 'react' module which we prefer to use
+# over the currently-untyped source
+.*/node_modules/react/react.js
+.*/node_modules/react/lib/React.js
+.*/node_modules/react/lib/ReactDOM.js
+
+# Ignore commoner tests
+.*/node_modules/commoner/test/.*
+
+# See https://github.com/facebook/flow/issues/442
+.*/react-tools/node_modules/commoner/lib/reader.js
+
+# Ignore jest
+.*/node_modules/jest-cli/.*
+
+# Ignore Website
+.*/website/.*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+
+[options]
+module.system=haste
+
+munge_underscores=true
+
+module.name_mapper='^image![a-zA-Z0-9$_-]+$' -> 'GlobalImageStub'
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.png$' -> 'RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-0]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-0]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+
+[version]
+0.20.1

Example/.gitignore

@@ -0,0 +1,34 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IJ
+#
+.idea
+.gradle
+local.properties
+
+# node.js
+#
+node_modules/
+npm-debug.log

Example/.watchmanconfig

@@ -0,0 +1 @@
+{}

Example/android/app/build.gradle

@@ -0,0 +1,117 @@
+apply plugin: "com.android.application"
+
+import com.android.build.OutputFile
+
+/**
+ * The react.gradle file registers two tasks: bundleDebugJsAndAssets and bundleReleaseJsAndAssets.
+ * These basically call `react-native bundle` with the correct arguments during the Android build
+ * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
+ * bundle directly from the development server. Below you can see all the possible configurations
+ * and their defaults. If you decide to add a configuration block, make sure to add it before the
+ * `apply from: "react.gradle"` line.
+ *
+ * project.ext.react = [
+ *   // the name of the generated asset file containing your JS bundle
+ *   bundleAssetName: "index.android.bundle",
+ *
+ *   // the entry file for bundle generation
+ *   entryFile: "index.android.js",
+ *
+ *   // whether to bundle JS and assets in debug mode
+ *   bundleInDebug: false,
+ *
+ *   // whether to bundle JS and assets in release mode
+ *   bundleInRelease: true,
+ *
+ *   // the root of your project, i.e. where "package.json" lives
+ *   root: "../../",
+ *
+ *   // where to put the JS bundle asset in debug mode
+ *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
+ *
+ *   // where to put the JS bundle asset in release mode
+ *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
+ *
+ *   // where to put drawable resources / React Native assets, e.g. the ones you use via
+ *   // require('./image.png')), in debug mode
+ *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
+ *
+ *   // where to put drawable resources / React Native assets, e.g. the ones you use via
+ *   // require('./image.png')), in release mode
+ *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
+ *
+ *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
+ *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
+ *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
+ *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
+ *   // for example, you might want to remove it from here.
+ *   inputExcludes: ["android/**", "ios/**"]
+ * ]
+ */
+
+apply from: "react.gradle"
+
+/**
+ * Set this to true to create three separate APKs instead of one:
+ *   - A universal APK that works on all devices
+ *   - An APK that only works on ARM devices
+ *   - An APK that only works on x86 devices
+ * The advantage is the size of the APK is reduced by about 4MB.
+ * Upload all the APKs to the Play Store and people will download
+ * the correct one based on the CPU architecture of their device.
+ */
+def enableSeparateBuildPerCPUArchitecture = false
+
+/**
+ * Run Proguard to shrink the Java bytecode in release builds.
+ */
+def enableProguardInReleaseBuilds = false
+
+android {
+    compileSdkVersion 23
+    buildToolsVersion "23.0.1"
+
+    defaultConfig {
+        applicationId "com.artsvgexample"
+        minSdkVersion 16
+        targetSdkVersion 22
+        versionCode 1
+        versionName "1.0"
+        ndk {
+            abiFilters "armeabi-v7a", "x86"
+        }
+    }
+    splits {
+        abi {
+            enable enableSeparateBuildPerCPUArchitecture
+            universalApk true
+            reset()
+            include "armeabi-v7a", "x86"
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+    // applicationVariants are e.g. debug, release
+    applicationVariants.all { variant ->
+        variant.outputs.each { output ->
+            // For each separate APK per architecture, set a unique version code as described here:
+            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
+            def versionCodes = ["armeabi-v7a":1, "x86":2]
+            def abi = output.getFilter(OutputFile.ABI)
+            if (abi != null) {  // null for the universal-debug, universal-release variants
+                output.versionCodeOverride =
+                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
+            }
+        }
+    }
+}
+
+dependencies {
+    compile fileTree(dir: "libs", include: ["*.jar"])
+    compile "com.android.support:appcompat-v7:23.0.1"
+    compile "com.facebook.react:react-native:0.18.+"
+}

Example/android/app/proguard-rules.pro

@@ -0,0 +1,67 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Disabling obfuscation is useful if you collect stack traces from production crashes
+# (unless you are using a system that supports de-obfuscate the stack traces).
+-dontobfuscate
+
+# React Native
+
+# Keep our interfaces so they can be used by other ProGuard rules.
+# See http://sourceforge.net/p/proguard/bugs/466/
+-keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip
+-keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters
+
+# Do not strip any method/class that is annotated with @DoNotStrip
+-keep @com.facebook.proguard.annotations.DoNotStrip class *
+-keepclassmembers class * {
+    @com.facebook.proguard.annotations.DoNotStrip *;
+}
+
+-keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * {
+  void set*(***);
+  *** get*();
+}
+
+-keep class * extends com.facebook.react.bridge.JavaScriptModule { *; }
+-keep class * extends com.facebook.react.bridge.NativeModule { *; }
+-keepclassmembers,includedescriptorclasses class * { native <methods>; }
+-keepclassmembers class *  { @com.facebook.react.uimanager.UIProp <fields>; }
+-keepclassmembers class *  { @com.facebook.react.uimanager.ReactProp <methods>; }
+-keepclassmembers class *  { @com.facebook.react.uimanager.ReactPropGroup <methods>; }
+
+-dontwarn com.facebook.react.**
+
+# okhttp
+
+-keepattributes Signature
+-keepattributes *Annotation*
+-keep class com.squareup.okhttp.** { *; }
+-keep interface com.squareup.okhttp.** { *; }
+-dontwarn com.squareup.okhttp.**
+
+# okio
+
+-keep class sun.misc.Unsafe { *; }
+-dontwarn java.nio.file.*
+-dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement
+-dontwarn okio.**
+
+# stetho
+
+-dontwarn com.facebook.stetho.**

Example/android/app/react.gradle

@@ -0,0 +1,106 @@
+import org.apache.tools.ant.taskdefs.condition.Os
+
+def config = project.hasProperty("react") ? project.react : [];
+
+def bundleAssetName = config.bundleAssetName ?: "index.android.bundle"
+def entryFile = config.entryFile ?: "index.android.js"
+
+// because elvis operator
+def elvisFile(thing) {
+    return thing ? file(thing) : null;
+}
+
+def reactRoot = elvisFile(config.root) ?: file("../../")
+def jsBundleDirDebug = elvisFile(config.jsBundleDirDebug) ?:
+        file("$buildDir/intermediates/assets/debug")
+def jsBundleDirRelease = elvisFile(config.jsBundleDirRelease) ?:
+        file("$buildDir/intermediates/assets/release")
+def resourcesDirDebug = elvisFile(config.resourcesDirDebug) ?:
+        file("$buildDir/intermediates/res/merged/debug")
+def resourcesDirRelease = elvisFile(config.resourcesDirRelease) ?:
+        file("$buildDir/intermediates/res/merged/release")
+def inputExcludes = config.inputExcludes ?: ["android/**", "ios/**"]
+
+def jsBundleFileDebug = file("$jsBundleDirDebug/$bundleAssetName")
+def jsBundleFileRelease = file("$jsBundleDirRelease/$bundleAssetName")
+
+task bundleDebugJsAndAssets(type: Exec) {
+    // create dirs if they are not there (e.g. the "clean" task just ran)
+    doFirst {
+        jsBundleDirDebug.mkdirs()
+        resourcesDirDebug.mkdirs()
+    }
+
+    // set up inputs and outputs so gradle can cache the result
+    inputs.files fileTree(dir: reactRoot, excludes: inputExcludes)
+    outputs.dir jsBundleDirDebug
+    outputs.dir resourcesDirDebug
+
+    // set up the call to the react-native cli
+    workingDir reactRoot
+    if (Os.isFamily(Os.FAMILY_WINDOWS)) {
+        commandLine "cmd", "/c", "react-native", "bundle", "--platform", "android", "--dev", "true", "--entry-file",
+            entryFile, "--bundle-output", jsBundleFileDebug, "--assets-dest", resourcesDirDebug
+    } else {
+        commandLine "react-native", "bundle", "--platform", "android", "--dev", "true", "--entry-file",
+            entryFile, "--bundle-output", jsBundleFileDebug, "--assets-dest", resourcesDirDebug
+    }
+
+    enabled config.bundleInDebug ?: false
+}
+
+task bundleReleaseJsAndAssets(type: Exec) {
+    // create dirs if they are not there (e.g. the "clean" task just ran)
+    doFirst {
+        jsBundleDirRelease.mkdirs()
+        resourcesDirRelease.mkdirs()
+    }
+
+    // set up inputs and outputs so gradle can cache the result
+    inputs.files fileTree(dir: reactRoot, excludes: inputExcludes)
+    outputs.dir jsBundleDirRelease
+    outputs.dir resourcesDirRelease
+
+    // set up the call to the react-native cli
+    workingDir reactRoot
+    if (Os.isFamily(Os.FAMILY_WINDOWS)) {
+        commandLine "cmd","/c", "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",
+            entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease
+    } else {
+        commandLine "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",
+            entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease
+    }
+
+    enabled config.bundleInRelease ?: true
+}
+
+void runBefore(String dependentTaskName, Task task) {
+    Task dependentTask = tasks.findByPath(dependentTaskName);
+    if (dependentTask != null) {
+        dependentTask.dependsOn task
+    }
+}
+
+gradle.projectsEvaluated {
+
+    // hook bundleDebugJsAndAssets into the android build process
+
+    bundleDebugJsAndAssets.dependsOn mergeDebugResources
+    bundleDebugJsAndAssets.dependsOn mergeDebugAssets
+
+    runBefore('processArmeabi-v7aDebugResources', bundleDebugJsAndAssets)
+    runBefore('processX86DebugResources', bundleDebugJsAndAssets)
+    runBefore('processUniversalDebugResources', bundleDebugJsAndAssets)
+    runBefore('processDebugResources', bundleDebugJsAndAssets)
+
+    // hook bundleReleaseJsAndAssets into the android build process
+
+    bundleReleaseJsAndAssets.dependsOn mergeReleaseResources
+    bundleReleaseJsAndAssets.dependsOn mergeReleaseAssets
+
+    runBefore('processArmeabi-v7aReleaseResources', bundleReleaseJsAndAssets)
+    runBefore('processX86ReleaseResources', bundleReleaseJsAndAssets)
+    runBefore('processUniversalReleaseResources', bundleReleaseJsAndAssets)
+    runBefore('processReleaseResources', bundleReleaseJsAndAssets)
+
+}

Example/android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,23 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="com.artsvgexample">
+
+    <uses-permission android:name="android.permission.INTERNET" />
+
+    <application
+      android:allowBackup="true"
+      android:label="@string/app_name"
+      android:icon="@mipmap/ic_launcher"
+      android:theme="@style/AppTheme">
+      <activity
+        android:name=".MainActivity"
+        android:label="@string/app_name"
+        android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
+        <intent-filter>
+            <action android:name="android.intent.action.MAIN" />
+            <category android:name="android.intent.category.LAUNCHER" />
+        </intent-filter>
+      </activity>
+      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+    </application>
+
+</manifest>

Example/android/app/src/main/java/com/artsvgexample/MainActivity.java

@@ -0,0 +1,39 @@
+package com.artsvgexample;
+
+import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactPackage;
+import com.facebook.react.shell.MainReactPackage;
+
+import java.util.Arrays;
+import java.util.List;
+
+public class MainActivity extends ReactActivity {
+
+    /**
+     * Returns the name of the main component registered from JavaScript.
+     * This is used to schedule rendering of the component.
+     */
+    @Override
+    protected String getMainComponentName() {
+        return "ArtSvgExample";
+    }
+
+    /**
+     * Returns whether dev mode should be enabled.
+     * This enables e.g. the dev menu.
+     */
+    @Override
+    protected boolean getUseDeveloperSupport() {
+        return BuildConfig.DEBUG;
+    }
+
+   /**
+   * A list of packages used by the app. If the app uses additional views
+   * or modules besides the default ones, add more packages here.
+   */
+    @Override
+    protected List<ReactPackage> getPackages() {
+      return Arrays.<ReactPackage>asList(
+        new MainReactPackage());
+    }
+}

Example/android/app/src/main/res/values/strings.xml

@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">ArtSvgExample</string>
+</resources>

Example/android/app/src/main/res/values/styles.xml

@@ -0,0 +1,8 @@
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+        <!-- Customize your theme here. -->
+    </style>
+
+</resources>

Example/android/build.gradle

@@ -0,0 +1,20 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    repositories {
+        jcenter()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:1.3.1'
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+allprojects {
+    repositories {
+        mavenLocal()
+        jcenter()
+    }
+}

Example/android/gradle.properties

@@ -0,0 +1,20 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+# Default value: -Xmx10248m -XX:MaxPermSize=256m
+# org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+android.useDeprecatedNdk=true

Example/android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip

Example/android/gradlew

@@ -0,0 +1,164 @@
+#!/usr/bin/env bash
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS=""
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn ( ) {
+    echo "$*"
+}
+
+die ( ) {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+esac
+
+# For Cygwin, ensure paths are in UNIX format before anything is touched.
+if $cygwin ; then
+    [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"`
+fi
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >&-
+APP_HOME="`pwd -P`"
+cd "$SAVED" >&-
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin, switch paths to Windows format before running java
+if $cygwin ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=$((i+1))
+    done
+    case $i in
+        (0) set -- ;;
+        (1) set -- "$args0" ;;
+        (2) set -- "$args0" "$args1" ;;
+        (3) set -- "$args0" "$args1" "$args2" ;;
+        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules
+function splitJvmOpts() {
+    JVM_OPTS=("$@")
+}
+eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS
+JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME"
+
+exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@"

Example/android/gradlew.bat

@@ -0,0 +1,90 @@
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS=
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto init
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto init
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:init
+@rem Get command-line arguments, handling Windowz variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+if "%@eval[2+2]" == "4" goto 4NT_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+goto execute
+
+:4NT_args
+@rem Get arguments from the 4NT Shell from JP Software
+set CMD_LINE_ARGS=%$
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

Example/android/settings.gradle

@@ -0,0 +1,3 @@
+rootProject.name = 'ArtSvgExample'
+
+include ':app'

Example/examples.js

@@ -0,0 +1,17 @@
+import * as Svg from './examples/Svg';
+import * as Rect from './examples/Rect';
+import * as Circle from './examples/Circle';
+import * as Ellipse from './examples/Ellipse';
+import * as Line from './examples/Line';
+import * as Polygon from './examples/Polygon';
+import * as Polyline from './examples/Polyline';
+
+export {
+    Svg,
+    Rect,
+    Circle,
+    Ellipse,
+    Line,
+    Polygon,
+    Polyline
+};

Example/examples/Circle.js

@@ -0,0 +1,83 @@
+import React, {
+    Component
+} from 'react-native';
+
+import Svg, {
+    Circle
+} from 'react-native-art-svg';
+
+class CircleExample extends Component{
+    static title = 'Circle';
+    render() {
+        return <Svg
+            height="100"
+            width="100"
+        >
+            <Circle
+                cx="50"
+                cy="50"
+                r="50"
+                fill="pink"
+            />
+        </Svg>;
+    }
+}
+
+class StrokeCircle extends Component{
+    static title = 'Stroke Circle';
+    render() {
+        return <Svg
+            height="100"
+            width="100"
+        >
+            <Circle
+                cx="50"
+                cy="50"
+                r="45"
+                stroke="purple"
+                strokeWidth="2.5"
+            />
+        </Svg>;
+    }
+}
+
+class StrokeOpacityCircle extends Component{
+    static title = 'Circle with strokeOpacity';
+    render() {
+        return <Svg
+            height="100"
+            width="100"
+        >
+            <Circle
+                cx="50"
+                cy="50"
+                r="40"
+                stroke="purple"
+                strokeOpacity="0.5"
+                strokeWidth="10"
+                fill="pink"
+            />
+        </Svg>;
+    }
+}
+
+const icon = <Svg
+    height="20"
+    width="20"
+>
+    <Circle
+        cx="10"
+        cy="10"
+        r="8"
+        stroke="purple"
+        strokeWidth="1"
+        fill="pink"
+    />
+</Svg>;
+
+const samples = [CircleExample, StrokeCircle, StrokeOpacityCircle];
+
+export {
+    icon,
+    samples
+}

Example/examples/Ellipse.js

@@ -0,0 +1,76 @@
+import React, {
+    Component
+} from 'react-native';
+
+import Svg, {
+    Ellipse
+} from 'react-native-art-svg';
+
+class EllipseExample extends Component{
+    static title = 'Ellipse';
+    render() {
+        return <Svg
+            height="100"
+            width="110"
+        >
+            <Ellipse
+                cx="55"
+                cy="55"
+                rx="50"
+                ry="30"
+                stroke="purple"
+                strokeWidth="2"
+                fill="yellow"
+            />
+        </Svg>;
+    }
+}
+
+class PileEllipses  extends Component{
+    static title = 'The following example creates three ellipses on top of each other';
+    render() {
+        return <Svg
+            height="120"
+            width="200"
+        >
+            <Ellipse cx="98" cy="60" rx="90" ry="30" fill="purple" />
+            <Ellipse cx="94" cy="45" rx="80" ry="25" fill="lime" />
+            <Ellipse cx="92" cy="30" rx="70" ry="20" fill="yellow" />
+        </Svg>;
+    }
+}
+
+class CombinedEllipses extends Component{
+    static title = 'The following example combines two ellipses (one yellow and one white)';
+    render() {
+        return <Svg
+            height="100"
+            width="200"
+        >
+            <Ellipse cx="100" cy="50" rx="90" ry="30" fill="yellow" />
+            <Ellipse cx="95" cy="50" rx="75" ry="20" fill="white" />
+        </Svg>;
+    }
+}
+
+const icon = <Svg
+    height="20"
+    width="20"
+>
+    <Ellipse
+        cx="10"
+        cy="10"
+        rx="8"
+        ry="4"
+        stroke="purple"
+        strokeWidth="1"
+        fill="yellow"
+    />
+</Svg>;
+
+const samples = [EllipseExample, PileEllipses, CombinedEllipses];
+
+export {
+    icon,
+    samples
+}

Example/examples/Line.js

@@ -0,0 +1,47 @@
+import React, {
+    Component
+} from 'react-native';
+
+import Svg, {
+    Line
+} from 'react-native-art-svg';
+
+class LineExample extends Component{
+    static title = 'Line';
+    render() {
+        return <Svg
+            height="100"
+            width="100"
+        >
+            <Line
+                x1="0"
+                y1="0"
+                x2="100"
+                y2="100"
+                stroke="red"
+                strokeWidth="2"
+            />
+        </Svg>;
+    }
+}
+
+const icon = <Svg
+    height="20"
+    width="20"
+>
+    <Line
+        x1="0"
+        y1="0"
+        x2="20"
+        y2="20"
+        stroke="red"
+        strokeWidth="1"
+    />
+</Svg>;
+
+const samples = [LineExample];
+
+export {
+    icon,
+    samples
+}

Example/examples/Polygon.js

@@ -0,0 +1,83 @@
+import React, {
+    Component
+} from 'react-native';
+
+import Svg, {
+    Polygon,
+    Group
+} from 'react-native-art-svg';
+
+class PolygonExample extends Component{
+    static title = 'The following example creates a polygon with three sides';
+    render() {
+        return <Svg
+            height="100"
+            width="100"
+        >
+            <Polygon
+                points="40,5 70,80 25,95"
+                fill="lime"
+                stroke="purple"
+                strokeWidth="1"
+            />
+        </Svg>;
+    }
+}
+
+
+class FourSidePolygon extends Component{
+    static title = 'The following example creates a polygon with four sides';
+    render() {
+        return <Svg
+            height="100"
+            width="100"
+        >
+            <Polygon
+                points="70,5 90,75 45,90 25,80"
+                fill="lime"
+                stroke="purple"
+                strokeWidth="1"
+            />
+        </Svg>;
+    }
+}
+
+class StrarPolygon extends Component{
+    static title = 'Use the <Polygon /> element to create a star';
+    render() {
+        return <Svg
+            height="105"
+            width="105"
+        >
+            <Group scale="0.5">
+                <Polygon
+                    points="100,10 40,198 190,78 10,78 160,198"
+                    fill="lime"
+                    stroke="purple"
+                    strokeWidth="5"
+                />
+            </Group>
+        </Svg>;
+    }
+}
+
+const icon = <Svg
+    height="20"
+    width="20"
+>
+    <Group scale="0.1">
+        <Polygon
+            points="100,10 40,198 190,78 10,78 160,198"
+            fill="lime"
+            stroke="purple"
+            strokeWidth="10"
+        />
+    </Group>
+</Svg>;
+
+const samples = [PolygonExample, FourSidePolygon, StrarPolygon];
+
+export {
+    icon,
+    samples
+}

Example/examples/Polyline.js

@@ -0,0 +1,77 @@
+import React, {
+    Component
+} from 'react-native';
+
+import Svg, {
+    Polyline
+} from 'react-native-art-svg';
+
+class PolylineExample extends Component{
+    static title = 'The <Polyline> element is used to create any shape that consists of only straight lines';
+    render() {
+        return <Svg
+            height="100"
+            width="100"
+        >
+            <Polyline
+                points="10,10 20,12 30,20 40,60 60,70 95,90"
+                fill="none"
+                stroke="black"
+                strokeWidth="3"
+            />
+        </Svg>;
+    }
+}
+
+class StraightLines extends Component{
+    static title = 'Another example with only straight lines';
+    render() {
+        return <Svg
+            height="100"
+            width="100"
+        >
+            <Polyline
+                points="0,20 20,20 20,40 40,40 40,60 60,60 60,80"
+                fill="none"
+                stroke="red"
+                strokeWidth="2"
+            />
+        </Svg>;
+    }
+}
+
+class PolylineFill extends Component{
+    static title = 'Fill Polyline';
+    render() {
+        return <Svg
+            height="100"
+            width="100"
+        >
+            <Polyline
+                points="10,10 20,12 30,20 40,60 60,70 95,90"
+                fill="red"
+                stroke="black"
+                strokeWidth="3"
+            />
+        </Svg>;
+    }
+}
+
+const icon = <Svg
+    height="20"
+    width="20"
+>
+    <Polyline
+        points="2,2 4,2.5 6,4 8,12 12,14 20,18"
+        fill="none"
+        stroke="black"
+        strokeWidth="1"
+    />
+</Svg>;
+
+const samples = [PolylineExample, StraightLines, PolylineFill];
+
+export {
+    icon,
+    samples
+}

Example/examples/Rect.js

@@ -0,0 +1,138 @@
+import React, {
+    Component
+} from 'react-native';
+
+import Svg, {
+    Rect
+} from 'react-native-art-svg';
+
+class RectExample extends Component{
+    static title = 'Rect';
+    render() {
+        return <Svg
+            width="200"
+            height="60"
+        >
+            <Rect
+                x="25"
+                y="5"
+                width="150"
+                height="50"
+                fill="rgb(0,0,255)"
+                strokeWidth="3"
+                stroke="rgb(0,0,0)"
+            />
+        </Svg>;
+    }
+}
+
+class RectStrokeFill extends Component{
+    static title = '`stroke` and `fill` Rect';
+    render() {
+        return <Svg
+            width="100"
+            height="100"
+        >
+            <Rect
+                x="20"
+                y="20"
+                width="75"
+                height="75"
+                fill="blue"
+                fillOpacity="0.1"
+                stroke="pink"
+                strokeWidth="5"
+                strokeOpacity="0.9"
+            />
+        </Svg>;
+    }
+}
+
+class RoundedRect extends Component{
+    static title = 'A rectangle with rounded corners';
+    render() {
+        return <Svg
+            width="100"
+            height="100"
+        >
+            <Rect
+                x="20"
+                y="20"
+                rx="20"
+                ry="20"
+                width="75"
+                height="75"
+                fill="blue"
+                stroke="pink"
+                strokeWidth="5"
+            />
+        </Svg>;
+    }
+}
+
+class EllipseRect extends Component{
+    static title = 'Rect with different `rx` and `ry`';
+    render() {
+        return <Svg
+            width="100"
+            height="100"
+        >
+            <Rect
+                x="20"
+                y="20"
+                rx="40"
+                ry="20"
+                width="75"
+                height="75"
+                fill="blue"
+                stroke="pink"
+                strokeWidth="5"
+            />
+        </Svg>;
+    }
+}
+
+class RoundOverflowRect extends Component{
+    static title = 'Rect with `rx` or `ry` overflowed';
+    render() {
+        return     <Svg
+            width="100"
+            height="100"
+        >
+            <Rect
+                x="20"
+                y="20"
+                ry="40"
+                width="75"
+                height="75"
+                fill="blue"
+                stroke="pink"
+                strokeWidth="5"
+            />
+        </Svg>;
+    }
+}
+
+const icon = <Svg
+    width="20"
+    height="20"
+>
+    <Rect
+        x="3"
+        y="5"
+        width="14"
+        height="10"
+        fill="rgb(0,0,255)"
+        strokeWidth="2"
+        stroke="rgb(255,0,0)"
+    />
+</Svg>;
+
+const samples = [RectExample, RectStrokeFill, RoundedRect, EllipseRect, RoundOverflowRect];
+
+export {
+    icon,
+    samples
+}
+
+

Example/examples/Svg.js

@@ -0,0 +1,95 @@
+import React, {
+    Component
+} from 'react-native';
+
+import Svg, {
+    Circle,
+    Rect
+} from 'react-native-art-svg';
+
+class SvgExample extends Component{
+    static title = 'SVG';
+    render() {
+        return <Svg
+            height="100"
+            width="100"
+        >
+            <Circle
+                cx="50"
+                cy="50"
+                r="45"
+                stroke="blue"
+                strokeWidth="2.5"
+                fill="green"
+            />
+            <Rect
+                x="15"
+                y="15"
+                width="70"
+                height="70"
+                stroke="red"
+                strokeWidth="2"
+                fill="yellow"
+            />
+        </Svg>;
+    }
+}
+
+class SvgOpacity extends Component{
+    static title = 'SVG with `opacity` prop';
+    render() {
+        return <Svg
+            height="100"
+            width="100"
+            opacity="0.2"
+        >
+            <Circle
+                cx="50"
+                cy="50"
+                r="45"
+                stroke="blue"
+                strokeWidth="2.5"
+                fill="green"
+            />
+            <Rect
+                x="15"
+                y="15"
+                width="70"
+                height="70"
+                stroke="red"
+                strokeWidth="2"
+                fill="yellow"
+            />
+        </Svg>;
+    }
+}
+
+const icon = <Svg
+    height="20"
+    width="20"
+>
+    <Circle
+        cx="10"
+        cy="10"
+        r="8"
+        stroke="blue"
+        strokeWidth="1"
+        fill="green"
+    />
+    <Rect
+        x="4"
+        y="4"
+        width="12"
+        height="12"
+        stroke="red"
+        strokeWidth="1"
+        fill="yellow"
+    />
+</Svg>;
+
+const samples = [SvgExample, SvgOpacity];
+
+export {
+    icon,
+    samples
+}

Example/index.android.js

@@ -0,0 +1 @@
+import './main';

Example/index.ios.js

@@ -0,0 +1 @@
+import './main';

Example/ios/ArtSvgExample.xcodeproj/project.pbxproj

@@ -0,0 +1,792 @@
+// !$*UTF8*$!
+{
+	archiveVersion = 1;
+	classes = {
+	};
+	objectVersion = 46;
+	objects = {
+
+/* Begin PBXBuildFile section */
+		00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
+		00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
+		00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302C01ABCB91800DB3ED1 /* libRCTImage.a */; };
+		00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */; };
+		00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */; };
+		00E356F31AD99517003FC87E /* ArtSvgExampleTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* ArtSvgExampleTests.m */; };
+		106F01161C50C16F00B58F21 /* libART.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 106F010B1C50C16200B58F21 /* libART.a */; };
+		133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 78C398B91ACF4ADC00677621 /* libRCTLinking.a */; };
+		139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139105C11AF99BAD00B5F7CC /* libRCTSettings.a */; };
+		139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 139FDEF41B06529B00C62182 /* libRCTWebSocket.a */; };
+		13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.m */; };
+		13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; };
+		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
+		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
+		146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };
+		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
+/* End PBXBuildFile section */
+
+/* Begin PBXContainerItemProxy section */
+		00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 134814201AA4EA6300B7C361;
+			remoteInfo = RCTActionSheet;
+		};
+		00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 134814201AA4EA6300B7C361;
+			remoteInfo = RCTGeolocation;
+		};
+		00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 58B5115D1A9E6B3D00147676;
+			remoteInfo = RCTImage;
+		};
+		00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 58B511DB1A9E6C8500147676;
+			remoteInfo = RCTNetwork;
+		};
+		00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 832C81801AAF6DEF007FA2F7;
+			remoteInfo = RCTVibration;
+		};
+		00E356F41AD99517003FC87E /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */;
+			proxyType = 1;
+			remoteGlobalIDString = 13B07F861A680F5B00A75B9A;
+			remoteInfo = ArtSvgExample;
+		};
+		106F010A1C50C16200B58F21 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 106F01061C50C16200B58F21 /* ART.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 0CF68AC11AF0540F00FF9E5C;
+			remoteInfo = ART;
+		};
+		139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 134814201AA4EA6300B7C361;
+			remoteInfo = RCTSettings;
+		};
+		139FDEF31B06529B00C62182 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 3C86DF461ADF2C930047B81A;
+			remoteInfo = RCTWebSocket;
+		};
+		146834031AC3E56700842450 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 83CBBA2E1A601D0E00E9B192;
+			remoteInfo = React;
+		};
+		78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 134814201AA4EA6300B7C361;
+			remoteInfo = RCTLinking;
+		};
+		832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 58B5119B1A9E6C1200147676;
+			remoteInfo = RCTText;
+		};
+/* End PBXContainerItemProxy section */
+
+/* Begin PBXFileReference section */
+		008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = main.jsbundle; sourceTree = "<group>"; };
+		00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = "../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj"; sourceTree = "<group>"; };
+		00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = "../node_modules/react-native/Libraries/Geolocation/RCTGeolocation.xcodeproj"; sourceTree = "<group>"; };
+		00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = "../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj"; sourceTree = "<group>"; };
+		00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = "../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj"; sourceTree = "<group>"; };
+		00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = "../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj"; sourceTree = "<group>"; };
+		00E356EE1AD99517003FC87E /* ArtSvgExampleTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = ArtSvgExampleTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
+		00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+		00E356F21AD99517003FC87E /* ArtSvgExampleTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = ArtSvgExampleTests.m; sourceTree = "<group>"; };
+		106F01061C50C16200B58F21 /* ART.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = ART.xcodeproj; path = "../node_modules/react-native/Libraries/ART/ART.xcodeproj"; sourceTree = "<group>"; };
+		139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = "../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj"; sourceTree = "<group>"; };
+		139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocket.xcodeproj; path = "../node_modules/react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj"; sourceTree = "<group>"; };
+		13B07F961A680F5B00A75B9A /* ArtSvgExample.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = ArtSvgExample.app; sourceTree = BUILT_PRODUCTS_DIR; };
+		13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = ArtSvgExample/AppDelegate.h; sourceTree = "<group>"; };
+		13B07FB01A68108700A75B9A /* AppDelegate.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AppDelegate.m; path = ArtSvgExample/AppDelegate.m; sourceTree = "<group>"; };
+		13B07FB21A68108700A75B9A /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/LaunchScreen.xib; sourceTree = "<group>"; };
+		13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = ArtSvgExample/Images.xcassets; sourceTree = "<group>"; };
+		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = ArtSvgExample/Info.plist; sourceTree = "<group>"; };
+		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = ArtSvgExample/main.m; sourceTree = "<group>"; };
+		146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = "<group>"; };
+		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
+		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
+/* End PBXFileReference section */
+
+/* Begin PBXFrameworksBuildPhase section */
+		00E356EB1AD99517003FC87E /* Frameworks */ = {
+			isa = PBXFrameworksBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+		13B07F8C1A680F5B00A75B9A /* Frameworks */ = {
+			isa = PBXFrameworksBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				106F01161C50C16F00B58F21 /* libART.a in Frameworks */,
+				146834051AC3E58100842450 /* libReact.a in Frameworks */,
+				00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */,
+				00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */,
+				00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */,
+				133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */,
+				00C302E91ABCBA2D00DB3ED1 /* libRCTNetwork.a in Frameworks */,
+				139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */,
+				832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */,
+				00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */,
+				139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXFrameworksBuildPhase section */
+
+/* Begin PBXGroup section */
+		00C302A81ABCB8CE00DB3ED1 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		00C302B61ABCB90400DB3ED1 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		00C302BC1ABCB91800DB3ED1 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				00C302C01ABCB91800DB3ED1 /* libRCTImage.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		00C302D41ABCB9D200DB3ED1 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		00C302E01ABCB9EE00DB3ED1 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		00E356EF1AD99517003FC87E /* ArtSvgExampleTests */ = {
+			isa = PBXGroup;
+			children = (
+				00E356F21AD99517003FC87E /* ArtSvgExampleTests.m */,
+				00E356F01AD99517003FC87E /* Supporting Files */,
+			);
+			path = ArtSvgExampleTests;
+			sourceTree = "<group>";
+		};
+		00E356F01AD99517003FC87E /* Supporting Files */ = {
+			isa = PBXGroup;
+			children = (
+				00E356F11AD99517003FC87E /* Info.plist */,
+			);
+			name = "Supporting Files";
+			sourceTree = "<group>";
+		};
+		106F01071C50C16200B58F21 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				106F010B1C50C16200B58F21 /* libART.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		139105B71AF99BAD00B5F7CC /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				139105C11AF99BAD00B5F7CC /* libRCTSettings.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		139FDEE71B06529A00C62182 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				139FDEF41B06529B00C62182 /* libRCTWebSocket.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		13B07FAE1A68108700A75B9A /* ArtSvgExample */ = {
+			isa = PBXGroup;
+			children = (
+				008F07F21AC5B25A0029DE68 /* main.jsbundle */,
+				13B07FAF1A68108700A75B9A /* AppDelegate.h */,
+				13B07FB01A68108700A75B9A /* AppDelegate.m */,
+				13B07FB51A68108700A75B9A /* Images.xcassets */,
+				13B07FB61A68108700A75B9A /* Info.plist */,
+				13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
+				13B07FB71A68108700A75B9A /* main.m */,
+			);
+			name = ArtSvgExample;
+			sourceTree = "<group>";
+		};
+		146834001AC3E56700842450 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				146834041AC3E56700842450 /* libReact.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		78C398B11ACF4ADC00677621 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				78C398B91ACF4ADC00677621 /* libRCTLinking.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
+			isa = PBXGroup;
+			children = (
+				106F01061C50C16200B58F21 /* ART.xcodeproj */,
+				146833FF1AC3E56700842450 /* React.xcodeproj */,
+				00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */,
+				00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */,
+				00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */,
+				78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */,
+				00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */,
+				139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */,
+				832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
+				00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */,
+				139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
+			);
+			name = Libraries;
+			sourceTree = "<group>";
+		};
+		832341B11AAA6A8300B99B32 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				832341B51AAA6A8300B99B32 /* libRCTText.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		83CBB9F61A601CBA00E9B192 = {
+			isa = PBXGroup;
+			children = (
+				13B07FAE1A68108700A75B9A /* ArtSvgExample */,
+				832341AE1AAA6A7D00B99B32 /* Libraries */,
+				00E356EF1AD99517003FC87E /* ArtSvgExampleTests */,
+				83CBBA001A601CBA00E9B192 /* Products */,
+			);
+			indentWidth = 2;
+			sourceTree = "<group>";
+			tabWidth = 2;
+		};
+		83CBBA001A601CBA00E9B192 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				13B07F961A680F5B00A75B9A /* ArtSvgExample.app */,
+				00E356EE1AD99517003FC87E /* ArtSvgExampleTests.xctest */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+/* End PBXGroup section */
+
+/* Begin PBXNativeTarget section */
+		00E356ED1AD99517003FC87E /* ArtSvgExampleTests */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "ArtSvgExampleTests" */;
+			buildPhases = (
+				00E356EA1AD99517003FC87E /* Sources */,
+				00E356EB1AD99517003FC87E /* Frameworks */,
+				00E356EC1AD99517003FC87E /* Resources */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+				00E356F51AD99517003FC87E /* PBXTargetDependency */,
+			);
+			name = ArtSvgExampleTests;
+			productName = ArtSvgExampleTests;
+			productReference = 00E356EE1AD99517003FC87E /* ArtSvgExampleTests.xctest */;
+			productType = "com.apple.product-type.bundle.unit-test";
+		};
+		13B07F861A680F5B00A75B9A /* ArtSvgExample */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "ArtSvgExample" */;
+			buildPhases = (
+				13B07F871A680F5B00A75B9A /* Sources */,
+				13B07F8C1A680F5B00A75B9A /* Frameworks */,
+				13B07F8E1A680F5B00A75B9A /* Resources */,
+				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+			);
+			name = ArtSvgExample;
+			productName = "Hello World";
+			productReference = 13B07F961A680F5B00A75B9A /* ArtSvgExample.app */;
+			productType = "com.apple.product-type.application";
+		};
+/* End PBXNativeTarget section */
+
+/* Begin PBXProject section */
+		83CBB9F71A601CBA00E9B192 /* Project object */ = {
+			isa = PBXProject;
+			attributes = {
+				LastUpgradeCheck = 0610;
+				ORGANIZATIONNAME = Facebook;
+				TargetAttributes = {
+					00E356ED1AD99517003FC87E = {
+						CreatedOnToolsVersion = 6.2;
+						TestTargetID = 13B07F861A680F5B00A75B9A;
+					};
+				};
+			};
+			buildConfigurationList = 83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "ArtSvgExample" */;
+			compatibilityVersion = "Xcode 3.2";
+			developmentRegion = English;
+			hasScannedForEncodings = 0;
+			knownRegions = (
+				en,
+				Base,
+			);
+			mainGroup = 83CBB9F61A601CBA00E9B192;
+			productRefGroup = 83CBBA001A601CBA00E9B192 /* Products */;
+			projectDirPath = "";
+			projectReferences = (
+				{
+					ProductGroup = 106F01071C50C16200B58F21 /* Products */;
+					ProjectRef = 106F01061C50C16200B58F21 /* ART.xcodeproj */;
+				},
+				{
+					ProductGroup = 00C302A81ABCB8CE00DB3ED1 /* Products */;
+					ProjectRef = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */;
+				},
+				{
+					ProductGroup = 00C302B61ABCB90400DB3ED1 /* Products */;
+					ProjectRef = 00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */;
+				},
+				{
+					ProductGroup = 00C302BC1ABCB91800DB3ED1 /* Products */;
+					ProjectRef = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */;
+				},
+				{
+					ProductGroup = 78C398B11ACF4ADC00677621 /* Products */;
+					ProjectRef = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */;
+				},
+				{
+					ProductGroup = 00C302D41ABCB9D200DB3ED1 /* Products */;
+					ProjectRef = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */;
+				},
+				{
+					ProductGroup = 139105B71AF99BAD00B5F7CC /* Products */;
+					ProjectRef = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */;
+				},
+				{
+					ProductGroup = 832341B11AAA6A8300B99B32 /* Products */;
+					ProjectRef = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */;
+				},
+				{
+					ProductGroup = 00C302E01ABCB9EE00DB3ED1 /* Products */;
+					ProjectRef = 00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */;
+				},
+				{
+					ProductGroup = 139FDEE71B06529A00C62182 /* Products */;
+					ProjectRef = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */;
+				},
+				{
+					ProductGroup = 146834001AC3E56700842450 /* Products */;
+					ProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */;
+				},
+			);
+			projectRoot = "";
+			targets = (
+				13B07F861A680F5B00A75B9A /* ArtSvgExample */,
+				00E356ED1AD99517003FC87E /* ArtSvgExampleTests */,
+			);
+		};
+/* End PBXProject section */
+
+/* Begin PBXReferenceProxy section */
+		00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTActionSheet.a;
+			remoteRef = 00C302AB1ABCB8CE00DB3ED1 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTGeolocation.a;
+			remoteRef = 00C302B91ABCB90400DB3ED1 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		00C302C01ABCB91800DB3ED1 /* libRCTImage.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTImage.a;
+			remoteRef = 00C302BF1ABCB91800DB3ED1 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTNetwork.a;
+			remoteRef = 00C302DB1ABCB9D200DB3ED1 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTVibration.a;
+			remoteRef = 00C302E31ABCB9EE00DB3ED1 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		106F010B1C50C16200B58F21 /* libART.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libART.a;
+			remoteRef = 106F010A1C50C16200B58F21 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		139105C11AF99BAD00B5F7CC /* libRCTSettings.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTSettings.a;
+			remoteRef = 139105C01AF99BAD00B5F7CC /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		139FDEF41B06529B00C62182 /* libRCTWebSocket.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTWebSocket.a;
+			remoteRef = 139FDEF31B06529B00C62182 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		146834041AC3E56700842450 /* libReact.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libReact.a;
+			remoteRef = 146834031AC3E56700842450 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		78C398B91ACF4ADC00677621 /* libRCTLinking.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTLinking.a;
+			remoteRef = 78C398B81ACF4ADC00677621 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		832341B51AAA6A8300B99B32 /* libRCTText.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTText.a;
+			remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+/* End PBXReferenceProxy section */
+
+/* Begin PBXResourcesBuildPhase section */
+		00E356EC1AD99517003FC87E /* Resources */ = {
+			isa = PBXResourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+		13B07F8E1A680F5B00A75B9A /* Resources */ = {
+			isa = PBXResourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
+				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXResourcesBuildPhase section */
+
+/* Begin PBXShellScriptBuildPhase section */
+		00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "Bundle React Native code and images";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "../node_modules/react-native/packager/react-native-xcode.sh";
+		};
+/* End PBXShellScriptBuildPhase section */
+
+/* Begin PBXSourcesBuildPhase section */
+		00E356EA1AD99517003FC87E /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				00E356F31AD99517003FC87E /* ArtSvgExampleTests.m in Sources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+		13B07F871A680F5B00A75B9A /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				13B07FBC1A68108700A75B9A /* AppDelegate.m in Sources */,
+				13B07FC11A68108700A75B9A /* main.m in Sources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXSourcesBuildPhase section */
+
+/* Begin PBXTargetDependency section */
+		00E356F51AD99517003FC87E /* PBXTargetDependency */ = {
+			isa = PBXTargetDependency;
+			target = 13B07F861A680F5B00A75B9A /* ArtSvgExample */;
+			targetProxy = 00E356F41AD99517003FC87E /* PBXContainerItemProxy */;
+		};
+/* End PBXTargetDependency section */
+
+/* Begin PBXVariantGroup section */
+		13B07FB11A68108700A75B9A /* LaunchScreen.xib */ = {
+			isa = PBXVariantGroup;
+			children = (
+				13B07FB21A68108700A75B9A /* Base */,
+			);
+			name = LaunchScreen.xib;
+			path = ArtSvgExample;
+			sourceTree = "<group>";
+		};
+/* End PBXVariantGroup section */
+
+/* Begin XCBuildConfiguration section */
+		00E356F61AD99517003FC87E /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				BUNDLE_LOADER = "$(TEST_HOST)";
+				FRAMEWORK_SEARCH_PATHS = (
+					"$(SDKROOT)/Developer/Library/Frameworks",
+					"$(inherited)",
+				);
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
+				INFOPLIST_FILE = ArtSvgExampleTests/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.2;
+				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/ArtSvgExample.app/ArtSvgExample";
+			};
+			name = Debug;
+		};
+		00E356F71AD99517003FC87E /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				BUNDLE_LOADER = "$(TEST_HOST)";
+				COPY_PHASE_STRIP = NO;
+				FRAMEWORK_SEARCH_PATHS = (
+					"$(SDKROOT)/Developer/Library/Frameworks",
+					"$(inherited)",
+				);
+				INFOPLIST_FILE = ArtSvgExampleTests/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.2;
+				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				TEST_HOST = "$(BUILT_PRODUCTS_DIR)/ArtSvgExample.app/ArtSvgExample";
+			};
+			name = Release;
+		};
+		13B07F941A680F5B00A75B9A /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				DEAD_CODE_STRIPPING = NO;
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
+					"$(SRCROOT)/../node_modules/react-native/React/**",
+				);
+				INFOPLIST_FILE = ArtSvgExample/Info.plist;
+				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
+				OTHER_LDFLAGS = "-ObjC";
+				PRODUCT_NAME = ArtSvgExample;
+			};
+			name = Debug;
+		};
+		13B07F951A680F5B00A75B9A /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
+					"$(SRCROOT)/../node_modules/react-native/React/**",
+				);
+				INFOPLIST_FILE = ArtSvgExample/Info.plist;
+				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
+				OTHER_LDFLAGS = "-ObjC";
+				PRODUCT_NAME = ArtSvgExample;
+			};
+			name = Release;
+		};
+		83CBBA201A601CBA00E9B192 /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu99;
+				GCC_DYNAMIC_NO_PIC = NO;
+				GCC_OPTIMIZATION_LEVEL = 0;
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
+				GCC_SYMBOLS_PRIVATE_EXTERN = NO;
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
+					"$(SRCROOT)/../node_modules/react-native/React/**",
+				);
+				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				MTL_ENABLE_DEBUG_INFO = YES;
+				ONLY_ACTIVE_ARCH = YES;
+				SDKROOT = iphoneos;
+			};
+			name = Debug;
+		};
+		83CBBA211A601CBA00E9B192 /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
+				COPY_PHASE_STRIP = YES;
+				ENABLE_NS_ASSERTIONS = NO;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu99;
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				HEADER_SEARCH_PATHS = (
+					"$(inherited)",
+					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
+					"$(SRCROOT)/../node_modules/react-native/React/**",
+				);
+				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				MTL_ENABLE_DEBUG_INFO = NO;
+				SDKROOT = iphoneos;
+				VALIDATE_PRODUCT = YES;
+			};
+			name = Release;
+		};
+/* End XCBuildConfiguration section */
+
+/* Begin XCConfigurationList section */
+		00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "ArtSvgExampleTests" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				00E356F61AD99517003FC87E /* Debug */,
+				00E356F71AD99517003FC87E /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+		13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "ArtSvgExample" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				13B07F941A680F5B00A75B9A /* Debug */,
+				13B07F951A680F5B00A75B9A /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+		83CBB9FA1A601CBA00E9B192 /* Build configuration list for PBXProject "ArtSvgExample" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				83CBBA201A601CBA00E9B192 /* Debug */,
+				83CBBA211A601CBA00E9B192 /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+/* End XCConfigurationList section */
+	};
+	rootObject = 83CBB9F71A601CBA00E9B192 /* Project object */;
+}

Example/ios/ArtSvgExample.xcodeproj/xcshareddata/xcschemes/ArtSvgExample.xcscheme

@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Scheme
+   LastUpgradeVersion = "0620"
+   version = "1.3">
+   <BuildAction
+      parallelizeBuildables = "YES"
+      buildImplicitDependencies = "YES">
+      <BuildActionEntries>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "YES"
+            buildForArchiving = "YES"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+               BuildableName = "ArtSvgExample.app"
+               BlueprintName = "ArtSvgExample"
+               ReferencedContainer = "container:ArtSvgExample.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
+         <BuildActionEntry
+            buildForTesting = "YES"
+            buildForRunning = "YES"
+            buildForProfiling = "NO"
+            buildForArchiving = "NO"
+            buildForAnalyzing = "YES">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "00E356ED1AD99517003FC87E"
+               BuildableName = "ArtSvgExampleTests.xctest"
+               BlueprintName = "ArtSvgExampleTests"
+               ReferencedContainer = "container:ArtSvgExample.xcodeproj">
+            </BuildableReference>
+         </BuildActionEntry>
+      </BuildActionEntries>
+   </BuildAction>
+   <TestAction
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      buildConfiguration = "Debug">
+      <Testables>
+         <TestableReference
+            skipped = "NO">
+            <BuildableReference
+               BuildableIdentifier = "primary"
+               BlueprintIdentifier = "00E356ED1AD99517003FC87E"
+               BuildableName = "ArtSvgExampleTests.xctest"
+               BlueprintName = "ArtSvgExampleTests"
+               ReferencedContainer = "container:ArtSvgExample.xcodeproj">
+            </BuildableReference>
+         </TestableReference>
+      </Testables>
+      <MacroExpansion>
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "ArtSvgExample.app"
+            BlueprintName = "ArtSvgExample"
+            ReferencedContainer = "container:ArtSvgExample.xcodeproj">
+         </BuildableReference>
+      </MacroExpansion>
+   </TestAction>
+   <LaunchAction
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      launchStyle = "0"
+      useCustomWorkingDirectory = "NO"
+      buildConfiguration = "Debug"
+      ignoresPersistentStateOnLaunch = "NO"
+      debugDocumentVersioning = "YES"
+      allowLocationSimulation = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "ArtSvgExample.app"
+            BlueprintName = "ArtSvgExample"
+            ReferencedContainer = "container:ArtSvgExample.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+      <AdditionalOptions>
+      </AdditionalOptions>
+   </LaunchAction>
+   <ProfileAction
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      savedToolIdentifier = ""
+      useCustomWorkingDirectory = "NO"
+      buildConfiguration = "Release"
+      debugDocumentVersioning = "YES">
+      <BuildableProductRunnable
+         runnableDebuggingMode = "0">
+         <BuildableReference
+            BuildableIdentifier = "primary"
+            BlueprintIdentifier = "13B07F861A680F5B00A75B9A"
+            BuildableName = "ArtSvgExample.app"
+            BlueprintName = "ArtSvgExample"
+            ReferencedContainer = "container:ArtSvgExample.xcodeproj">
+         </BuildableReference>
+      </BuildableProductRunnable>
+   </ProfileAction>
+   <AnalyzeAction
+      buildConfiguration = "Debug">
+   </AnalyzeAction>
+   <ArchiveAction
+      buildConfiguration = "Release"
+      revealArchiveInOrganizer = "YES">
+   </ArchiveAction>
+</Scheme>

Example/ios/ArtSvgExample/AppDelegate.h

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import <UIKit/UIKit.h>
+
+@interface AppDelegate : UIResponder <UIApplicationDelegate>
+
+@property (nonatomic, strong) UIWindow *window;
+
+@end

Example/ios/ArtSvgExample/AppDelegate.m

@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import "AppDelegate.h"
+
+#import "RCTRootView.h"
+
+@implementation AppDelegate
+
+- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
+{
+  NSURL *jsCodeLocation;
+
+  /**
+   * Loading JavaScript code - uncomment the one you want.
+   *
+   * OPTION 1
+   * Load from development server. Start the server from the repository root:
+   *
+   * $ npm start
+   *
+   * To run on device, change `localhost` to the IP address of your computer
+   * (you can get this by typing `ifconfig` into the terminal and selecting the
+   * `inet` value under `en0:`) and make sure your computer and iOS device are
+   * on the same Wi-Fi network.
+   */
+
+  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
+
+  /**
+   * OPTION 2
+   * Load from pre-bundled file on disk. The static bundle is automatically
+   * generated by "Bundle React Native code and images" build step.
+   */
+
+//   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+
+  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
+                                                      moduleName:@"ArtSvgExample"
+                                               initialProperties:nil
+                                                   launchOptions:launchOptions];
+
+  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
+  UIViewController *rootViewController = [UIViewController new];
+  rootViewController.view = rootView;
+  self.window.rootViewController = rootViewController;
+  [self.window makeKeyAndVisible];
+  return YES;
+}
+
+@end

Example/ios/ArtSvgExample/Base.lproj/LaunchScreen.xib

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="7702" systemVersion="14D136" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7701"/>
+        <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view contentMode="scaleToFill" id="iN0-l3-epB">
+            <rect key="frame" x="0.0" y="0.0" width="480" height="480"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Powered by React Native" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
+                    <rect key="frame" x="20" y="439" width="441" height="21"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                    <nil key="highlightedColor"/>
+                </label>
+                <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="ArtSvgExample" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
+                    <rect key="frame" x="20" y="140" width="441" height="43"/>
+                    <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                    <nil key="highlightedColor"/>
+                </label>
+            </subviews>
+            <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
+            <constraints>
+                <constraint firstItem="kId-c2-rCX" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="bottom" multiplier="1/3" constant="1" id="5cJ-9S-tgC"/>
+                <constraint firstAttribute="centerX" secondItem="kId-c2-rCX" secondAttribute="centerX" id="Koa-jz-hwk"/>
+                <constraint firstAttribute="bottom" secondItem="8ie-xW-0ye" secondAttribute="bottom" constant="20" id="Kzo-t9-V3l"/>
+                <constraint firstItem="8ie-xW-0ye" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="MfP-vx-nX0"/>
+                <constraint firstAttribute="centerX" secondItem="8ie-xW-0ye" secondAttribute="centerX" id="ZEH-qu-HZ9"/>
+                <constraint firstItem="kId-c2-rCX" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="fvb-Df-36g"/>
+            </constraints>
+            <nil key="simulatedStatusBarMetrics"/>
+            <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
+            <point key="canvasLocation" x="548" y="455"/>
+        </view>
+    </objects>
+</document>

Example/ios/ArtSvgExample/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "images" : [
+    {
+      "idiom" : "iphone",
+      "size" : "29x29",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "29x29",
+      "scale" : "3x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "40x40",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "40x40",
+      "scale" : "3x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "60x60",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "60x60",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

Example/ios/ArtSvgExample/Info.plist

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<false/>
+	<key>NSLocationWhenInUseUsageDescription</key>
+	<string></string>
+  <key>NSAppTransportSecurity</key>
+  <dict>
+    <!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
+    <key>NSAllowsArbitraryLoads</key>
+    <true/>
+  </dict>
+</dict>
+</plist>

Example/ios/ArtSvgExample/main.m

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import <UIKit/UIKit.h>
+
+#import "AppDelegate.h"
+
+int main(int argc, char * argv[]) {
+  @autoreleasepool {
+    return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
+  }
+}

Example/ios/ArtSvgExampleTests/ArtSvgExampleTests.m

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import <UIKit/UIKit.h>
+#import <XCTest/XCTest.h>
+
+#import "RCTLog.h"
+#import "RCTRootView.h"
+
+#define TIMEOUT_SECONDS 240
+#define TEXT_TO_LOOK_FOR @"Welcome to React Native!"
+
+@interface ArtSvgExampleTests : XCTestCase
+
+@end
+
+@implementation ArtSvgExampleTests
+
+- (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test
+{
+  if (test(view)) {
+    return YES;
+  }
+  for (UIView *subview in [view subviews]) {
+    if ([self findSubviewInView:subview matching:test]) {
+      return YES;
+    }
+  }
+  return NO;
+}
+
+- (void)testRendersWelcomeScreen
+{
+  UIViewController *vc = [[[[UIApplication sharedApplication] delegate] window] rootViewController];
+  NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS];
+  BOOL foundElement = NO;
+
+  __block NSString *redboxError = nil;
+  RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) {
+    if (level >= RCTLogLevelError) {
+      redboxError = message;
+    }
+  });
+
+  while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) {
+    [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
+    [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]];
+
+    foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) {
+      if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) {
+        return YES;
+      }
+      return NO;
+    }];
+  }
+
+  RCTSetLogFunction(RCTDefaultLogFunction);
+
+  XCTAssertNil(redboxError, @"RedBox error: %@", redboxError);
+  XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS);
+}
+
+
+@end

Example/ios/ArtSvgExampleTests/Info.plist

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>BNDL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+</dict>
+</plist>

Example/main.js

@@ -0,0 +1,251 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ */
+'use strict';
+import React, {
+    AppRegistry,
+    Component,
+    StyleSheet,
+    Text,
+    View,
+    ScrollView,
+    PixelRatio,
+    TouchableHighlight,
+    TouchableOpacity,
+    Animated,
+    Easing
+} from 'react-native';
+
+import * as elements from 'react-native-art-svg';
+import * as examples from './examples';
+import _ from 'lodash';
+import Modal from 'react-native-root-modal';
+
+let {
+    Svg,
+    Circle,
+    Line
+} = elements;
+
+const hairline = 1 / PixelRatio.get();
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#F5FCFF',
+        paddingTop: 20,
+        alignItems: 'center',
+        overflow: 'hidden'
+    },
+    content: {
+        alignSelf: 'stretch',
+        alignItems: 'center',
+        borderTopWidth: hairline,
+        borderTopColor: '#ccc',
+        borderBottomWidth: hairline,
+        borderBottomColor: '#ccc'
+    },
+    welcome: {
+        padding: 10,
+        color: '#f60',
+        fontSize: 18,
+        fontWeight: 'bold'
+    },
+    link: {
+        marginHorizontal: 10,
+        alignSelf: 'stretch'
+    },
+    title: {
+        marginLeft: 10
+    },
+    cell: {
+        height: 30,
+        paddingHorizontal: 10,
+        alignSelf: 'stretch',
+        alignItems: 'center',
+        flexDirection: 'row',
+        borderTopWidth: hairline,
+        borderTopColor: '#ccc',
+        marginTop: -hairline,
+        backgroundColor: 'transparent'
+    },
+    modal: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.2)'
+    },
+    close: {
+        position: 'absolute',
+        right: 20,
+        top: 40
+    },
+    scroll: {
+        position: 'absolute',
+        top: 30,
+        right: 10,
+        bottom: 20,
+        left: 10,
+        backgroundColor: '#fff'
+    },
+    scrollContent: {
+        borderTopWidth: hairline,
+        borderTopColor: '#ccc'
+    },
+    example: {
+        paddingVertical: 25,
+        alignSelf: 'stretch',
+        alignItems: 'center',
+        borderBottomWidth: hairline,
+        borderBottomColor: '#ccc'
+    },
+    sampleTitle: {
+        marginHorizontal: 15,
+        fontSize: 16,
+        color: '#666'
+    }
+});
+
+const names = _.filter(_.map(elements, (ele, key) => key), (name) => name !== 'default');
+
+class ArtSvgExample extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            modal: false,
+            scale: new Animated.Value(0)
+        };
+    }
+
+    getSamples = (samples) => {
+        return samples.map((Sample, i) => <View
+            style={styles.example}
+            key={`sample-${i}`}
+        >
+            <Text style={styles.sampleTitle}>
+                {Sample.title}
+            </Text>
+            <Sample />
+        </View>);
+    };
+
+    show = (name) => {
+        if (this.state.modal) {
+            return;
+        }
+
+        let example = examples[name];
+        if (example) {
+            let samples = example.samples;
+            this.state.scale.setValue(0);
+            Animated.spring(this.state.scale, {
+                toValue: 1
+            }).start();
+
+            this.setState({
+                modal: true,
+                content: <View>
+                    {this.getSamples(samples)}
+                </View>
+            });
+        }
+    };
+
+    hide = () => {
+        this.state.scale.setValue(1);
+        Animated.timing(this.state.scale, {
+            toValue: 0,
+            easing: Easing.in(Easing.back(2))
+        }).start(() => this.setState({
+            modal: false,
+            content: null
+        }));
+    };
+
+    getExamples = () => {
+        return names.map(name => {
+            var icon;
+            let example = examples[name];
+            if (example) {
+                icon = example.icon;
+            }
+            return <TouchableHighlight
+                style={styles.link}
+                underlayColor="#ccc"
+                key={`example-${name}`}
+                onPress={() => this.show(name)}
+            >
+                <View
+                    style={styles.cell}
+                >
+                    {icon}
+                    <Text style={styles.title}>{name}</Text>
+                </View>
+            </TouchableHighlight>
+        });
+    };
+
+    render() {
+        return <View style={styles.container}>
+            <Animated.Modal
+                visible={this.state.modal}
+                style={[styles.modal, {
+                    transform: [{scale: this.state.scale}]
+                }]}
+            >
+                <ScrollView
+                    style={styles.scroll}
+                    contentContainerStyle={styles.scrollContent}
+                >
+                    {this.state.content}
+                </ScrollView>
+                <View
+                    style={styles.close}
+                >
+                    <TouchableOpacity
+                        activeOpacity={0.7}
+                        onPress={this.hide}
+                    >
+                        <Svg
+                            height="20"
+                            width="20"
+                        >
+                            <Circle
+                                cx="10"
+                                cy="10"
+                                r="10"
+                                fill="red"
+                            />
+                            <Line
+                                x1="4"
+                                y1="4"
+                                x2="16"
+                                y2="16"
+                                stroke="#fff"
+                                strokeWidth="2"
+                            />
+                            <Line
+                                x1="4"
+                                y1="16"
+                                x2="16"
+                                y2="4"
+                                stroke="#fff"
+                                strokeWidth="2"
+                            />
+                        </Svg>
+                    </TouchableOpacity>
+                </View>
+            </Animated.Modal>
+            <Text style={styles.welcome}>
+                SVG by ART!
+            </Text>
+            <View style={styles.content}>
+                {this.getExamples()}
+            </View>
+        </View>;
+    }
+}
+
+AppRegistry.registerComponent('ArtSvgExample', () => ArtSvgExample);

Example/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "ArtSvgExample",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "start": "react-native start"
+  },
+  "dependencies": {
+    "react-native": "^0.18.1"
+  }
+}

README.md

@@ -1,2 +1,9 @@
 ### react-native-art-svg
 
+
+TODO:
+1. fill-rule:evenodd
+2. gradients
+3. text
+4. other elements
+5. animations https://github.com/maxwellito/vivus

Svg.js

@@ -1,25 +0,0 @@
-import {
-    ART
-} from 'react-native';
-import Circle from './Circle';
-import Ellipse from './Ellipse';
-import Polygon from './Polygon';
-import Polyline from './Polyline';
-
-let {
-    Surface,
-    Shape,
-    Group
-} = ART;
-
-export {
-    Surface as Svg,
-    Circle,
-    Ellipse,
-    Group,
-    Shape as Path,
-    Polygon,
-    Polyline
-};
-
-export default Surface;

elements/Circle.js

@@ -0,0 +1,25 @@
+import React, {
+    Component,
+    PropTypes
+} from 'react-native';
+import Ellipse from './Ellipse';
+
+let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired;
+class Circle extends Component{
+    static displayName = 'Circle';
+    static propTypes = {
+        cx: propType,
+        cy: propType,
+        r: propType
+    };
+    render() {
+        return <Ellipse
+            {...this.props}
+            r={null}
+            rx={this.props.r}
+            ry={this.props.r}
+        />
+    }
+}
+
+export default Circle;

elements/Ellipse.js

@@ -3,16 +3,16 @@ import React, {
     PropTypes,
     ART
 } from 'react-native';
-import fillFilter from './lib/fillFilter';
+import fillFilter from '../lib/fillFilter';
+import strokeFilter from '../lib/strokeFilter';
 
 let {
-    Surface,
     Shape
 } = ART;
 
 let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired;
 class Ellipse extends Component{
-    static displayName = 'Polygon';
+    static displayName = 'Ellipse';
     static propTypes = {
         cx: propType,
         cy: propType,
@@ -20,6 +20,7 @@ class Ellipse extends Component{
         ry: propType
     };
     render() {
+        let {props} = this;
         let {cx, cy, rx, ry} = this.props;
         let d = `
             M ${cx - rx} ${cy}
@@ -28,8 +29,11 @@ class Ellipse extends Component{
             Z
         `;
         return <Shape
-            {...this.props}
+            {...props}
-            fill={fillFilter(this.props)}
+            fill={fillFilter(props)}
+            stroke={strokeFilter(props)}
+            strokeCap={null}
+            strokeJoin={null}
             cx={null}
             cy={null}
             rx={null}

elements/Line.js

@@ -5,31 +5,34 @@ import React, {
 } from 'react-native';
 
 let {
-    Surface,
     Shape,
-    Group
 } = ART;
 
+import strokeFilter from '../lib/strokeFilter';
 let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired;
-
 class Line extends Component{
     static displayName = 'Line';
     static propTypes = {
         x1: propType,
         x2: propType,
         y1: propType,
-        y2: propType
+        y2: propType,
+        strokeLinecap: PropTypes.oneOf(['butt', 'square', 'round']),
+        strokeCap: PropTypes.oneOf(['butt', 'square', 'round'])
     };
     render() {
-        let {x1,y1,x2,y2} = this.props;
+        let {props} = this;
-        let d = `M${x1},${y1}L${x2},${y2}Z`;
+        let d = `M${props.x1},${props.y1}L${props.x2},${props.y2}Z`;
+
         return <Shape
-            {...this.props}
+            {...props}
             x1={null}
             y1={null}
             x2={null}
             y2={null}
-            fill="null"
+            fill={null}
+            stroke={strokeFilter(props)}
+            strokeCap={props.strokeLinecap || props.strokeCap || 'square'}
             d={d}
         />;
     }

elements/Path.js

@@ -0,0 +1,37 @@
+import React, {
+    ART,
+    Component,
+    PropTypes
+} from 'react-native';
+
+let {
+    Shape
+} = ART;
+
+import fillFilter from '../lib/fillFilter';
+import strokeFilter from '../lib/strokeFilter';
+let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+class Path extends Component{
+    static displayName = 'Path';
+    static propTypes = {
+        d: PropTypes.string,
+        x: propType,
+        y: propType,
+        strokeLinecap: PropTypes.oneOf(['butt', 'square', 'round']),
+        strokeCap: PropTypes.oneOf(['butt', 'square', 'round']),
+        strokeLinejoin: PropTypes.oneOf(['miter', 'bevel', 'round']),
+        strokeJoin: PropTypes.oneOf(['miter', 'bevel', 'round'])
+    };
+    render() {
+        let {props} = this;
+        return <Shape
+            {...props}
+            strokeCap={props.strokeLinecap || props.strokeCap || 'square'}
+            strokeJoin={props.strokeLinejoin || props.strokeJoin || 'miter'}
+            fill={fillFilter(props)}
+            stroke={strokeFilter(props)}
+        />;
+    }
+}
+
+export default Path;

elements/Polygon.js

@@ -3,12 +3,9 @@ import React, {
     PropTypes,
     ART
 } from 'react-native';
-let {
+import fillFilter from '../lib/fillFilter';
-    Surface,
+import strokeFilter from '../lib/strokeFilter';
-    Shape,
+import Path from './Path';
-    Group
-} = ART;
-import fillFilter from './lib/fillFilter';
 
 class Polygon extends Component{
     static displayName = 'Polygon';
@@ -18,9 +15,8 @@ class Polygon extends Component{
     render() {
         let props = this.props;
         let d = 'M' + props.points.trim().replace(/\s+/g, 'L') + 'z';
-        return <Shape
+        return <Path
             {...props}
-            fill={fillFilter(props)}
             points={null}
             d={d}
         />;

elements/Polyline.js

@@ -3,25 +3,26 @@ import React, {
     PropTypes,
     ART
 } from 'react-native';
-let {
+import Path from './Path';
-    Surface,
-    Shape
-} = ART;
-
 
 
+import strokeFilter from '../lib/strokeFilter';
+import fillFilter from '../lib/fillFilter';
 class Polyline extends Component{
     static displayName = 'Polyline';
     static propTypes = {
-        points: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+        points: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+        strokeLinecap: PropTypes.oneOf(['butt', 'square', 'round']),
+        strokeCap: PropTypes.oneOf(['butt', 'square', 'round']),
+        strokeLinejoin: PropTypes.oneOf(['miter', 'bevel', 'round']),
+        strokeJoin: PropTypes.oneOf(['miter', 'bevel', 'round'])
     };
     render() {
         let props = this.props;
         let d = 'M' + props.points.trim().replace(/\s+/g, 'L');
-        return <Shape
+        return <Path
             {...props}
             points={null}
-            fill={null}
             d={d}
         />;
     }

elements/Rect.js

@@ -0,0 +1,99 @@
+import React, {
+    Component,
+    PropTypes,
+    ART
+} from 'react-native';
+
+import fillFilter from '../lib/fillFilter';
+import strokeFilter from '../lib/strokeFilter';
+import Path from './Path';
+
+let propType = PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired;
+
+function processRadius(radius) {
+    radius = +radius;
+    return radius || 0;
+}
+
+class Rect extends Component{
+    static displayName = 'Rect';
+    static propTypes = {
+        x: propType,
+        y: propType,
+        width: propType,
+        height: propType,
+        rx: propType,
+        ry: propType,
+        strokeLinecap: PropTypes.oneOf(['butt', 'square', 'round']),
+        strokeCap: PropTypes.oneOf(['butt', 'square', 'round']),
+        strokeLinejoin: PropTypes.oneOf(['miter', 'bevel', 'round']),
+        strokeJoin: PropTypes.oneOf(['miter', 'bevel', 'round'])
+    };
+    static defaultProps = {
+        x: 0,
+        y: 0,
+        rx: 0,
+        ry: 0
+    };
+    render() {
+        let {props} = this;
+        let {
+            x,
+            y,
+            width,
+            height,
+            rx,
+            ry
+        } = props;
+
+        rx = processRadius(rx);
+        ry = processRadius(ry);
+
+        if ((rx && !ry) || (ry && !rx)) {
+            if (rx) {
+                ry = rx;
+            } else {
+                rx = ry;
+            }
+        }
+
+        if (rx > width / 2) {
+            rx = width / 2;
+        }
+        if (ry > height / 2) {
+            ry = height / 2;
+        }
+
+        let d = (rx || ry) ? `
+            M ${x}, ${y}
+            h ${width - 2 * rx}
+            a ${rx},${ry} 0 0 1 ${rx},${ry}
+            v ${height - 2 * ry}
+            a ${rx},${ry} 0 0 1 ${-rx},${ry}
+            h ${2 * rx - width}
+            a ${rx},${ry} 0 0 1 ${-rx},${-ry}
+            v ${2 * ry - height}
+            a ${rx},${ry} 0 0 1 ${rx},${-ry}
+            Z
+        ` : `
+             M ${x}, ${y}
+             h ${width}
+             v ${height}
+             h ${-width}
+             Z
+        `;
+
+        return <Path
+            {...props}
+            x={rx ? +rx:  null}
+            y={null}
+            rx={null}
+            ry={null}
+            width={null}
+            height={null}
+            d={d}
+        />;
+    }
+}
+
+export default Rect;

elements/Svg.js

@@ -0,0 +1,27 @@
+import React, {
+    ART,
+    Component
+} from 'react-native';
+
+let {
+    Surface
+} = ART;
+
+class Svg extends Component{
+    static displayName = 'Svg';
+    render() {
+        let opacity = +this.props.opacity;
+
+        return <Surface
+            {...this.props}
+            style={[
+                this.props.style,
+                !isNaN(opacity) && {
+                    opacity: opacity
+                }
+            ]}
+        />;
+    }
+}
+
+export default Svg;

index.js

@@ -0,0 +1,29 @@
+import React, {
+    ART,
+    Component
+} from 'react-native';
+import Rect from './elements/Rect';
+import Circle from './elements/Circle';
+import Ellipse from './elements/Ellipse';
+import Polygon from './elements/Polygon';
+import Polyline from './elements/Polyline';
+import Svg from './elements/Svg';
+import Path from './elements/Path';
+
+let {
+    Group
+} = ART;
+
+
+export {
+    Svg,
+    Circle,
+    Ellipse,
+    Group,
+    Path,
+    Polygon,
+    Polyline,
+    Rect
+};
+
+export default Svg;

lib/fillFilter.js

@@ -1,8 +1,4 @@
-let noneFill = ['transparent', 'none'];
+import rgba from './rgba';
 export default function (props) {
-    let fill = props.fill;
+    return rgba(props.fill, props.fillOpacity);
-    if (noneFill.indexOf('fill') !== -1) {
-        return null;
-    }
-    return fill;
 }

lib/rgba.js

@@ -0,0 +1,9 @@
+import Color from 'color';
+let noneFill = ['transparent', 'none'];
+export default function (color, opacity = 1) {
+    if (noneFill.indexOf(color) !== -1 || !color) {
+        return null;
+    } else {
+        return Color(color).alpha(+opacity).rgbaString();
+    }
+}

lib/strokeFilter.js

@@ -0,0 +1,4 @@
+import rgba from './rgba';
+export default function (props) {
+    return rgba(props.stroke, props.strokeOpacity);
+}

package.json

@@ -1,12 +1,12 @@
 {
-    "version": "1.0.1",
+    "version": "1.0.2",
     "name": "react-native-art-svg",
     "description": "react native svg library based on `ART`",
     "repository": {
         "type": "git",
-        "url": "git@github.com:magicismight/react-native-art-svg.git"
+        "url": "https://github.com/magicismight/react-native-art-svg"
     },
-    "main": "./Svg.js",
+    "main": "./index.js",
     "keywords": [
         "react-component",
         "react-native",
@@ -14,5 +14,8 @@
         "android",
         "svg",
         "art"
-    ]
+    ],
+    "dependencies": {
+        "color": "^0.11.1"
+    }
 }