chore: align examples (software-mansion#1914)

WoLewicki · web-flow · commit 05c33d324516 · 2022-11-15T12:38:40.000+01:00
PR aligning example apps and fixing one bug. On web, if you don't pass a color to the elements, they are rendered with `black` fill. We recreate this behavior in examples, but maybe it should be the default behavior if `fill` is `undefined`. It would probably need to be changed on the native side somehow.

Another fix is to parse `fill` prop in `setNativeProps` since Fabric support has been added and `fill`  prop structure has been changed, it cannot be handled on the native side on `Android` due to complying to interfaces.
Another fix is passing `transform` prop in `Svg` to `G`  when it is not `react-native` style `transform` prop so it is always applied. It creates a problem mentioned in the comment in the code and should be addressed in later PRs.
diff --git a/Example/src/examples/Path.tsx b/Example/src/examples/Path.tsx
@@ -6,7 +6,7 @@ class PathExample extends Component {
   render() {
     return (
       <Svg height="100" width="100">
-        <Path d="M50 0 L15 100 L85 100 Z" />
+        <Path d="M50 0 L15 100 L85 100 Z" fill="black" />
         <Path
           fill="red"
           d="M38.459,1.66A0.884,0.884,0,0,1,39,2.5a0.7,0.7,0,0,1-.3.575L23.235,16.092,27.58,26.1a1.4,1.4,0,0,1,.148.3,1.3,1.3,0,0,1,0,.377,1.266,1.266,0,0,1-2.078.991L15.526,20.6l-7.58,4.35a1.255,1.255,0,0,1-.485,0,1.267,1.267,0,0,1-1.277-1.258q0-.01,0-0.02a1.429,1.429,0,0,1,0-.446C7.243,20.253,8.6,16.369,8.6,16.29L3.433,13.545A0.743,0.743,0,0,1,2.9,12.822a0.822,0.822,0,0,1,.623-0.773l8.164-2.972,3.018-8.5A0.822,0.822,0,0,1,15.427,0a0.752,0.752,0,0,1,.752.555l2.563,6.936S37.65,1.727,37.792,1.685A1.15,1.15,0,0,1,38.459,1.66Z"
diff --git a/Example/src/examples/Reusable.tsx b/Example/src/examples/Reusable.tsx
@@ -21,8 +21,8 @@ class UseExample extends Component {
       <Svg height="100" width="300">
         <Defs>
           <G id="reuse-shape">
-            <Circle cx="50" cy="50" r="50" />
-            <Rect x="50" y="50" width="50" height="50" />
+            <Circle cx="50" cy="50" r="50" fill="black" />
+            <Rect x="50" y="50" width="50" height="50" fill="black" />
             <Circle cx="50" cy="50" r="5" fill="blue" />
           </G>
         </Defs>
diff --git a/Example/src/examples/Text.tsx b/Example/src/examples/Text.tsx
@@ -144,7 +144,7 @@ class TSpanExample extends Component {
   render() {
     return (
       <Svg height="160" width="200">
-        <Text y="20" dx="5 5">
+        <Text y="20" dx="5 5" fill="black">
           <TSpan x="10">tspan line 1</TSpan>
           <TSpan x="10" dy="15">
             tspan line 2
@@ -163,7 +163,7 @@ class TSpanExample extends Component {
             89a
           </TSpan>
         </Text>
-        <Text y="140" dx="0 5 5" dy="0 -5 -5">
+        <Text y="140" dx="0 5 5" dy="0 -5 -5" fill="black">
           delta on text
         </Text>
       </Svg>
diff --git a/Example/src/examples/TouchEvents.tsx b/Example/src/examples/TouchEvents.tsx
@@ -79,6 +79,7 @@ class GroupExample extends Component {
         <G onPress={() => Alert.alert('Pressed on G')} scale="1.4">
           <Circle cx="80" cy="80" r="30" fill="green" x="20" scale="1.2" />
           <Text
+            fill="black"
             fontWeight="bold"
             fontSize="40"
             x="100"
diff --git a/Example/src/examples/Transforms.tsx b/Example/src/examples/Transforms.tsx
@@ -9,6 +9,8 @@ import {
   RadialGradient,
   Stop,
   SvgXml,
+  Defs,
+  G,
 } from 'react-native-svg';
 
 const patternXml = `
@@ -63,6 +65,28 @@ class PatternTransformExample extends Component {
             transform={[{translateX: 100}]}
           />
         </Svg>
+        <Svg height="100" width="100" viewBox="0 0 100 100">
+          <Defs>
+            <Pattern
+              id="stripe"
+              patternUnits="userSpaceOnUse"
+              patternContentUnits="userSpaceOnUse"
+              width="8"
+              height="12"
+              patternTransform="rotate(45)">
+              <Rect width="4" height="8" fill="white" x="0" y="0"></Rect>
+              <Rect width="4" height="12" fill="black" x="4" y="0"></Rect>
+            </Pattern>
+          </Defs>
+          <G transform="matrix(1 0 0 -1 0 140)">
+            <Rect
+              x="0"
+              y="0"
+              width="100"
+              height="100"
+              fill="url(#stripe)"></Rect>
+          </G>
+        </Svg>
         {Platform.OS !== 'web' && (
           <SvgXml width="100" height="100" xml={patternXml} />
         )}
diff --git a/FabricExample/src/App.tsx b/FabricExample/src/App.tsx
@@ -14,7 +14,6 @@ import {
   TouchableHighlight,
   TouchableOpacity,
 } from 'react-native';
-import {Modal} from 'react-native';
 import {Svg, Circle, Line} from 'react-native-svg';
 
 import * as examples from './examples';
diff --git a/FabricExample/src/examples/PanResponder.tsx b/FabricExample/src/examples/PanResponder.tsx
@@ -1,20 +1,20 @@
 import React, {PureComponent} from 'react';
 import {
-  PanResponder,
-  View,
   Animated,
+  PanResponder,
   TouchableWithoutFeedback,
+  View,
 } from 'react-native';
-import {Svg, G, Text, Path, Polyline, Line} from 'react-native-svg';
+import {G, Line, Path, Polyline, Svg, Text} from 'react-native-svg';
 
 const AnimatedSvg = Animated.createAnimatedComponent(Svg);
 
 const zeroDelta = {x: 0, y: 0};
 
 class PanExample extends PureComponent {
-  static title = 'Bind PanResponder on the SVG Shape - It does not work on Fabric since it uses `setNativeProps`';
+  static title = 'Bind PanResponder on the SVG Shape';
   panXY: any;
-  constructor(props, context) {
+  constructor(props: {}, context: {}) {
     super(props, context);
     const xy = new Animated.ValueXY();
     const {x: dx, y: dy} = xy;
@@ -29,7 +29,9 @@ class PanExample extends PureComponent {
         xy.setOffset(offset);
         xy.setValue(zeroDelta);
       },
-      onPanResponderMove: Animated.event([null, {dx, dy}]),
+      onPanResponderMove: Animated.event([null, {dx, dy}], {
+        useNativeDriver: false,
+      }),
       onPanResponderRelease: () => {
         xy.flattenOffset();
       },
diff --git a/FabricExample/src/examples/Path.tsx b/FabricExample/src/examples/Path.tsx
@@ -6,7 +6,7 @@ class PathExample extends Component {
   render() {
     return (
       <Svg height="100" width="100">
-        <Path d="M50 0 L15 100 L85 100 Z" />
+        <Path d="M50 0 L15 100 L85 100 Z" fill="black"/>
         <Path
           fill="red"
           d="M38.459,1.66A0.884,0.884,0,0,1,39,2.5a0.7,0.7,0,0,1-.3.575L23.235,16.092,27.58,26.1a1.4,1.4,0,0,1,.148.3,1.3,1.3,0,0,1,0,.377,1.266,1.266,0,0,1-2.078.991L15.526,20.6l-7.58,4.35a1.255,1.255,0,0,1-.485,0,1.267,1.267,0,0,1-1.277-1.258q0-.01,0-0.02a1.429,1.429,0,0,1,0-.446C7.243,20.253,8.6,16.369,8.6,16.29L3.433,13.545A0.743,0.743,0,0,1,2.9,12.822a0.822,0.822,0,0,1,.623-0.773l8.164-2.972,3.018-8.5A0.822,0.822,0,0,1,15.427,0a0.752,0.752,0,0,1,.752.555l2.563,6.936S37.65,1.727,37.792,1.685A1.15,1.15,0,0,1,38.459,1.66Z"
diff --git a/FabricExample/src/examples/Text.tsx b/FabricExample/src/examples/Text.tsx
@@ -144,7 +144,7 @@ class TSpanExample extends Component {
   render() {
     return (
       <Svg height="160" width="200">
-        <Text y="20" dx="5 5">
+        <Text y="20" dx="5 5" fill="black">
           <TSpan x="10">tspan line 1</TSpan>
           <TSpan x="10" dy="15">
             tspan line 2
@@ -163,7 +163,7 @@ class TSpanExample extends Component {
             89a
           </TSpan>
         </Text>
-        <Text y="140" dx="0 5 5" dy="0 -5 -5">
+        <Text y="140" dx="0 5 5" dy="0 -5 -5" fill="black">
           delta on text
         </Text>
       </Svg>
diff --git a/FabricExample/src/examples/TouchEvents.tsx b/FabricExample/src/examples/TouchEvents.tsx
@@ -10,6 +10,7 @@ import {
   Defs,
   ClipPath,
 } from 'react-native-svg';
+import {Alert} from 'react-native';
 
 class PressExample extends Component {
   static title =
@@ -22,15 +23,15 @@ class PressExample extends Component {
           cy="50%"
           r="38%"
           fill="red"
-          onPress={() => alert('Press on Circle')}
+          onPress={() => Alert.alert('Press on Circle')}
         />
         <Rect
           x="20%"
           y="20%"
           width="60%"
           height="60%"
           fill="blue"
-          onLongPress={() => alert('Long press on Rect')}
+          onLongPress={() => Alert.alert('Long press on Rect')}
         />
         <Path d="M50,5L20,99L95,39L5,39L80,99z" fill="pink" />
       </Svg>
@@ -75,14 +76,15 @@ class GroupExample extends Component {
   render() {
     return (
       <Svg height="120" width="120" viewBox="0 0 240 240">
-        <G onPress={() => alert('Pressed on G')} scale="1.4">
+        <G onPress={() => Alert.alert('Pressed on G')} scale="1.4">
           <Circle cx="80" cy="80" r="30" fill="green" x="20" scale="1.2" />
           <Text
+            fill="black"
             fontWeight="bold"
             fontSize="40"
             x="100"
             y="40"
-            onPress={() => alert('Pressed on Text')}>
+            onPress={() => Alert.alert('Pressed on Text')}>
             H
           </Text>
           <Rect x="20" y="20" width="40" height="40" fill="yellow" />
diff --git a/TestsExample/App.js b/TestsExample/App.js
@@ -2,6 +2,7 @@
 import React from 'react';
 
 import ColorTest from './src/ColorTest';
+import Test1374 from './src/Test1374';
 import Test1718 from './src/Test1718';
 import Test1813 from './src/Test1813';
 import Test1845 from './src/Test1845';
diff --git a/TestsExample/src/Test1374.tsx b/TestsExample/src/Test1374.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import Svg, {Circle, SvgXml} from 'react-native-svg';
+
+export default function App() {
+  const svgXmlWithTransform = `<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100" height="300" viewBox="0 0 100 100" transform="scale(1 -1)">
+  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
+</svg>`;
+  const svgXmlWithEmptyStyle = `<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+  <circle style=" " cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
+</svg>`;
+
+const svgg = `
+<svg width="400" height="200">
+  <polygon points="100 100, 180 100, 140 180" fill="black"></polygon>
+  <polygon points="100 100, 180 100, 140 180" fill="red" transform="translate(0, 280), scale(1, -1)"></polygon>
+</svg>
+`;
+
+  return (
+    <View style={{flex: 1}}>
+      <Svg
+    width={100}
+    height={100}
+    viewBox="0 0 100 100"
+    transform={[{scaleX: 1}, {scaleY: -1}]}
+      >
+      <Circle cx={50} cy={50} r={40} stroke="black" strokeWidth={3} fill="red" />
+    </Svg>
+    <SvgXml xml={svgXmlWithTransform}/>
+    <SvgXml xml={svgXmlWithEmptyStyle}/>
+    <SvgXml xml={svgg}/>
+      </View>
+  );
+}
diff --git a/src/elements/Shape.tsx b/src/elements/Shape.tsx
@@ -1,6 +1,7 @@
 import { Component } from 'react';
 import SvgTouchableMixin from '../lib/SvgTouchableMixin';
-import { findNodeHandle, NativeMethods } from 'react-native';
+import extractBrush from '../lib/extract/extractBrush';
+import { ColorValue, findNodeHandle, NativeMethods } from 'react-native';
 import {
   ColumnMajorTransformMatrix,
   TransformProps,
@@ -249,8 +250,13 @@ export default class Shape<P> extends Component<P> {
   setNativeProps = (
     props: Object & {
       matrix?: ColumnMajorTransformMatrix;
+      fill?: ColorValue;
     } & TransformProps,
   ) => {
+    if (props.fill) {
+      // @ts-ignore TODO: native `fill` prop differs from the one passed in props
+      props.fill = extractBrush(props.fill);
+    }
     this.root?.setNativeProps(props);
   };
   /*
diff --git a/src/elements/Svg.tsx b/src/elements/Svg.tsx
@@ -115,6 +115,7 @@ export default class Svg extends Shape<SvgProps> {
       width,
       height,
       focusable,
+      transform,
 
       // Inherited G properties
       font,
@@ -182,10 +183,18 @@ export default class Svg extends Shape<SvgProps> {
       props.onLayout = onLayout;
     }
 
-    // transform should not be passed down since it is already used in svgView
-    // and would be doubled in G causing double transformations
     const gStyle = Object.assign({}, style) as ViewStyle;
-    gStyle.transform = undefined;
+    // if transform prop is of RN style's kind, we want `SvgView` to handle it
+    // since it can be done here. Otherwise, if transform is of `svg` kind, e.g. string,
+    // we want G element to parse it since `Svg` does not include parsing of those custom transforms.
+    // It is problematic due to fact that we either move the `Svg` or just its `G` child, and in the
+    // second case, when the `G` leaves the area of `Svg`, it will just disappear.
+    if (Array.isArray(transform) && typeof transform[0] === 'object') {
+      gStyle.transform = undefined;
+    } else {
+      props.transform = undefined;
+      gStyle.transform = transform;
+    }
 
     const RNSVGSvg = Platform.OS === 'android' ? RNSVGSvgAndroid : RNSVGSvgIOS;
 
diff --git a/src/lib/extract/extractFill.ts b/src/lib/extract/extractFill.ts
@@ -8,7 +8,7 @@ const fillRules: { evenodd: number; nonzero: number } = {
   nonzero: 1,
 };
 
-const defaultFill = processColor('black');
+const defaultFill = { type: 0, payload: processColor('black') };
 
 export default function extractFill(
   o: extractedProps,
