Merge remote-tracking branch 'upstream/master' into 5.3.0-conformance

# Conflicts:
#	lib/extract/extractViewBox.js
#	package.json

README.md

@@ -16,7 +16,7 @@
 
 #### Automatic
 
-*With Exponent, this is pre-installed. Jump ahead to [Usage](#Usage)*
+*With Expo, this is pre-installed. Jump ahead to [Usage](#Usage)*
 
 1. Install library from `npm`
 
@@ -32,12 +32,14 @@
     - react-native-svg >= 4.4.0 only supports react-native >= 0.38.0 and react >= 15.4.0
     - react-native-svg >= 4.5.0 only supports react-native >= 0.40.0 and react >= 15.4.0
     - react-native-svg >= 5.1.8 only supports react-native >= 0.44.0 and react == 16.0.0-alpha.6
+    - react-native-svg >= 5.2.0 only supports react-native >= 0.45.0 and react == 16.0.0-alpha.12
+    - react-native-svg >= 5.3.0 only supports react-native >= 0.46.0 and react == 16.0.0-alpha.12
+    
 2. Link native code
 
     ```bash
     react-native link react-native-svg
     ```
-    react-native@0.29.0 and 0.29.1 cannot work with Android link properly:[here](https://github.com/facebook/react-native/pull/8612)
 
     Or use `rnpm` instead:
 
@@ -126,6 +128,8 @@ class SvgExample extends Component {
 }
 ```
 
+[Try this on Snack](https://snack.expo.io/r1hCVAaEZ)
+
 ### Common props:
 
 Name            | Default    | Description
@@ -535,7 +539,7 @@ The SVG <Symbol> element is used to define reusable symbols. The shapes nested i
     height="150"
     width="110"
 >
-    <Symbol id="symbol" viewbox="0 0 150 110" width="100" height="50">
+    <Symbol id="symbol" viewBox="0 0 150 110" width="100" height="50">
         <Circle cx="50" cy="50" r="40" strokeWidth="8" stroke="red" fill="red"/>
         <Circle cx="90" cy="60" r="40" strokeWidth="8" stroke="green" fill="white"/>
     </Symbol>
@@ -779,7 +783,7 @@ You can use these events to provide interactivity to your react-native-svg compo
 
 ![TouchEvents](./screenShoots/touchevents.gif)
 
-For more examples of touch in action, checkout the [TouchEvents.js examples](Example/examples/TouchEvents.js).
+For more examples of touch in action, checkout the [TouchEvents.js examples](https://github.com/magicismight/react-native-svg-example/blob/master/examples/TouchEvents.js).
 
 ### Run example:
 

android/src/main/java/com/horcrux/svg/SvgPackage.java

@@ -44,11 +44,6 @@ public class SvgPackage implements ReactPackage {
                 new SvgViewManager());
     }
 
-    @Override
-    public List<Class<? extends JavaScriptModule>> createJSModules() {
-        return Collections.emptyList();
-    }
-
     @Override
     public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
         return Collections.<NativeModule>singletonList(new SvgViewModule(reactContext));

android/src/main/java/com/horcrux/svg/SvgView.java

@@ -47,6 +47,7 @@ public class SvgView extends View {
 
     private @Nullable Bitmap mBitmap;
     private EventDispatcher mEventDispatcher;
+    private long mGestureStartTime = TouchEvent.UNSET;
     private int mTargetTag;
 
     private final TouchEventCoalescingKeyHelper mTouchEventCoalescingKeyHelper =
@@ -124,6 +125,7 @@ public class SvgView extends View {
                 mTargetTag,
                 type,
                 ev,
+                mGestureStartTime,
                 ev.getX(),
                 ev.getY(),
                 mTouchEventCoalescingKeyHelper));
@@ -132,6 +134,7 @@ public class SvgView extends View {
     public void handleTouchEvent(MotionEvent ev) {
         int action = ev.getAction() & MotionEvent.ACTION_MASK;
         if (action == MotionEvent.ACTION_DOWN) {
+            mGestureStartTime = ev.getEventTime();
             dispatch(ev, TouchEventType.START);
         } else if (mTargetTag == -1) {
             // All the subsequent action types are expected to be called after ACTION_DOWN thus target
@@ -155,9 +158,11 @@ public class SvgView extends View {
             // Exactly onw of the pointers goes up
             dispatch(ev, TouchEventType.END);
             mTargetTag = -1;
+            mGestureStartTime = TouchEvent.UNSET;
         } else if (action == MotionEvent.ACTION_CANCEL) {
             dispatchCancelEvent(ev);
             mTargetTag = -1;
+            mGestureStartTime = TouchEvent.UNSET;
         } else {
             Log.w(
                 "IGNORE",

android/src/main/java/com/horcrux/svg/SvgViewManager.java

@@ -14,7 +14,7 @@ import android.util.SparseArray;
 
 import com.facebook.yoga.YogaMeasureMode;
 import com.facebook.yoga.YogaMeasureFunction;
-import com.facebook.yoga.YogaNodeAPI;
+import com.facebook.yoga.YogaNode;
 import com.facebook.react.uimanager.BaseViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
 
@@ -31,7 +31,7 @@ public class SvgViewManager extends BaseViewManager<SvgView, SvgViewShadowNode>
     private static final YogaMeasureFunction MEASURE_FUNCTION = new YogaMeasureFunction() {
         @Override
         public long measure(
-                YogaNodeAPI node,
+                YogaNode node,
                 float width,
                 YogaMeasureMode widthMode,
                 float height,

android/src/main/java/com/horcrux/svg/VirtualNode.java

@@ -171,7 +171,7 @@ public abstract class VirtualNode extends LayoutShadowNode {
     }
 
     protected @Nullable Path getClipPath(Canvas canvas, Paint paint) {
-        if (mClipPath != null && mCachedClipPath == null) {
+        if (mClipPath != null) {
             VirtualNode node = getSvgShadowNode().getDefinedClipPath(mClipPath);
 
             if (node != null) {

elements/Circle.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
+import createReactNativeComponentClass from 'react-native/Libraries/Renderer/shims/createReactNativeComponentClass';
 import Shape from './Shape';
 import {CircleAttributes} from '../lib/attributes';
 import {pathProps, numberProp} from '../lib/props';

elements/ClipPath.js

@@ -1,5 +1,6 @@
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
-import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
+import PropTypes from 'prop-types';
+import createReactNativeComponentClass from 'react-native/Libraries/Renderer/shims/createReactNativeComponentClass';
 import {ClipPathAttributes} from '../lib/attributes';
 
 export default class extends Component{

elements/Defs.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
+import createReactNativeComponentClass from 'react-native/Libraries/Renderer/shims/createReactNativeComponentClass';
 
 export default class extends Component {
     static displayName = 'Defs';

elements/Ellipse.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
+import createReactNativeComponentClass from 'react-native/Libraries/Renderer/shims/createReactNativeComponentClass';
 import Shape from './Shape';
 import {pathProps, numberProp} from '../lib/props';
 import {EllipseAttributes} from '../lib/attributes';

elements/G.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
+import createReactNativeComponentClass from 'react-native/Libraries/Renderer/shims/createReactNativeComponentClass';
 import Shape from './Shape';
 import {pathProps, fontProps} from '../lib/props';
 import {GroupAttributes} from '../lib/attributes';

elements/Image.js

@@ -1,6 +1,7 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { Image } from 'react-native';
-import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
+import createReactNativeComponentClass from 'react-native/Libraries/Renderer/shims/createReactNativeComponentClass';
 import {ImageAttributes} from '../lib/attributes';
 import {numberProp, touchableProps, responderProps} from '../lib/props';
 import Shape from './Shape';

elements/Line.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
+import createReactNativeComponentClass from 'react-native/Libraries/Renderer/shims/createReactNativeComponentClass';
 import {LineAttributes} from '../lib/attributes';
 import Shape from './Shape';
 import {pathProps, numberProp} from '../lib/props';

elements/LinearGradient.js

@@ -1,7 +1,8 @@
-import React, {PropTypes, Component} from 'react';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import {numberProp} from '../lib/props';
 import extractGradient from '../lib/extract/extractGradient';
-import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
+import createReactNativeComponentClass from 'react-native/Libraries/Renderer/shims/createReactNativeComponentClass';
 import {LinearGradientAttributes} from '../lib/attributes';
 
 export default class extends Component{

elements/Path.js

@@ -1,5 +1,6 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
-import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
+import PropTypes from 'prop-types';
+import createReactNativeComponentClass from 'react-native/Libraries/Renderer/shims/createReactNativeComponentClass';
 import {PathAttributes} from '../lib/attributes';
 import Shape from './Shape';
 import {pathProps} from '../lib/props';

elements/Pattern.js

@@ -1,4 +1,5 @@
-import {Component, PropTypes} from 'react';
+import {Component} from 'react';
+import PropTypes from 'prop-types';
 import {numberProp} from '../lib/props';
 
 export default class extends Component{

elements/Polygon.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import Path from './Path';
 import {pathProps} from '../lib/props';
 import extractPolyPoints from '../lib/extract/extractPolyPoints';

elements/Polyline.js

@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import Path from './Path';
 import {pathProps} from '../lib/props';
 import extractPolyPoints from '../lib/extract/extractPolyPoints';

elements/RadialGradient.js

@@ -1,7 +1,8 @@
-import React, {PropTypes, Component} from 'react';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import {numberProp} from '../lib/props';
 import extractGradient from '../lib/extract/extractGradient';
-import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
+import createReactNativeComponentClass from 'react-native/Libraries/Renderer/shims/createReactNativeComponentClass';
 import {RadialGradientAttributes} from '../lib/attributes';
 
 export default class extends Component{

elements/Rect.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import './Path'; // must import Path first, don`t know why. without this will throw an `Super expression must either be null or a function, not undefined`
-import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
+import createReactNativeComponentClass from 'react-native/Libraries/Renderer/shims/createReactNativeComponentClass';
 import {pathProps, numberProp} from '../lib/props';
 import {RectAttributes} from '../lib/attributes';
 import extractProps from '../lib/extract/extractProps';

elements/Stop.js

@@ -1,4 +1,5 @@
-import {Component, PropTypes} from 'react';
+import {Component} from 'react';
+import PropTypes from 'prop-types';
 import {numberProp} from '../lib/props';
 
 export default class extends Component{

elements/Svg.js

@@ -1,9 +1,9 @@
 import React, {
-    Component,
+    Component
-    PropTypes
 } from 'react';
+import PropTypes from 'prop-types';
 import {
-    View,
+    ViewPropTypes,
     requireNativeComponent,
     StyleSheet,
     findNodeHandle,
@@ -26,7 +26,7 @@ const styles = StyleSheet.create({
 class Svg extends Component{
     static displayName = 'Svg';
     static propTypes = {
-        ...View.propTypes,
+        ...ViewPropTypes,
         opacity: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

elements/Symbol.js

@@ -1,6 +1,7 @@
-import React, {Component, PropTypes} from 'react';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 import extractViewBox from '../lib/extract/extractViewBox';
-import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
+import createReactNativeComponentClass from 'react-native/Libraries/Renderer/shims/createReactNativeComponentClass';
 import {SymbolAttributes} from '../lib/attributes';
 
 export default class extends Component{

elements/TSpan.js

@@ -1,5 +1,6 @@
-import React, { PropTypes } from 'react';
+import React  from 'react';
-import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
+import PropTypes from 'prop-types';
+import createReactNativeComponentClass from 'react-native/Libraries/Renderer/shims/createReactNativeComponentClass';
 import extractText from '../lib/extract/extractText';
 import {numberProp, pathProps, fontProps} from '../lib/props';
 import {TSpanAttibutes} from '../lib/attributes';

elements/Text.js

@@ -1,5 +1,6 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
-import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
+import PropTypes from 'prop-types';
+import createReactNativeComponentClass from 'react-native/Libraries/Renderer/shims/createReactNativeComponentClass';
 import extractText from '../lib/extract/extractText';
 import {numberProp, pathProps, fontProps} from '../lib/props';
 import {TextAttributes} from '../lib/attributes';

elements/TextPath.js

@@ -1,5 +1,6 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
-import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
+import PropTypes from 'prop-types';
+import createReactNativeComponentClass from 'react-native/Libraries/Renderer/shims/createReactNativeComponentClass';
 import {TextPathAttributes} from '../lib/attributes';
 import extractText from '../lib/extract/extractText';
 import Shape from './Shape';

elements/Use.js

@@ -1,5 +1,6 @@
-import React, {PropTypes} from 'react';
+import React from 'react';
-import createReactNativeComponentClass from 'react-native/Libraries/Renderer/src/renderers/native/createReactNativeComponentClass';
+import PropTypes from 'prop-types';
+import createReactNativeComponentClass from 'react-native/Libraries/Renderer/shims/createReactNativeComponentClass';
 import extractProps from '../lib/extract/extractProps';
 import {pathProps, numberProp} from '../lib/props';
 import {UseAttributes} from '../lib/attributes';

ios/RNSVGNode.m

@@ -117,7 +117,7 @@
 
 - (CGPathRef)getClipPath:(CGContextRef)context
 {
-    if (self.clipPath && !_cachedClipPath) {
+    if (self.clipPath) {
         CGPathRelease(_cachedClipPath);
         _cachedClipPath = CGPathRetain([[[self getSvgView] getDefinedClipPath:self.clipPath] getPath:context]);
     }

lib/props.js

@@ -1,4 +1,4 @@
-import {PropTypes} from 'react';
+import PropTypes from 'prop-types';
 import {PanResponder} from 'react-native';
 
 const numberProp = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);

package.json

@@ -1,5 +1,5 @@
 {
-    "version": "5.1.7-transform",
+    "version": "5.3.0-conformance",
     "name": "react-native-svg",
     "description": "SVG library for react-native",
     "repository": {
@@ -22,8 +22,9 @@
         "lint": "eslint ./"
     },
     "peerDependencies": {
-        "react-native": ">=0.40.0 <0.43.0",
+        "react-native": ">=0.46.0",
-        "react": ">=15.4.0 <15.5.0"
+        "react": "16.0.0-alpha.12",
+        "prop-types": "^15.5.8"
     },
     "dependencies": {
         "color": "^0.11.1",
@@ -32,7 +33,8 @@
     "devDependencies": {
         "babel-eslint": "^6.1.2",
         "eslint": "^2.13.1",
-        "eslint-plugin-react": "^4.3.0"
+        "eslint-plugin-react": "^4.3.0",
+        "react-native": "^0.46.0"
     },
     "nativePackage": true
 }