chore: align examples (#1914)

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.

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"

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>

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>

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"

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} />
         )}