Yajur-Grover · marlenecota · May 9, 2024 · May 22, 2024
diff --git a/testFabric/App.tsx b/testFabric/App.tsx
@@ -20,6 +20,7 @@ import { TouchableWithoutFeedbackExamplePage } from './examples/TouchableWithout
 import { PressableExamplePage } from './examples/PressableExamplePage';
 import { FlatListExamplePage } from './examples/FlatListExamplePage';
 import { VirtualizedListExamplePage } from './examples/VirtualizedListExamplePage';
+import { SvgExamplePage } from './examples/SvgExamplePage';
 
 
 // import {useTheme} from '@react-navigation/native';
@@ -108,6 +109,11 @@ export const App: React.FunctionComponent<{}> = () => {
           component={VirtualizedListExamplePage}
           options={({navigation}) => ({header: () => <BreadcrumbBar navigation={navigation}/>})}
         />
+        <StackScreen
+          name='SVG'
+          component={SvgExamplePage}
+          options={({navigation}) => ({header: () => <BreadcrumbBar navigation={navigation}/>})}
+        />
       </StackNavigator>
     </NavigationContainer>
   )

diff --git a/testFabric/RNGalleryList.ts b/testFabric/RNGalleryList.ts
@@ -15,6 +15,7 @@ import {ViewExamplePage} from './examples/ViewExamplePage';
 import {ImageExamplePage} from './examples/ImageExamplePage';
 import {ScrollViewExamplePage} from './examples/ScrollViewExample';
 import { VirtualizedListExamplePage } from './examples/VirtualizedListExamplePage';
+import { SvgExamplePage } from './examples/SvgExamplePage';
 
 interface IRNGalleryExample {
   key: string;
@@ -219,6 +220,12 @@ export const RNGalleryList: Array<IRNGalleryExample> = [
     icon: '\uE70F',
     type: 'Layout',
   },
+  {
+    key: 'SVG',
+    component: SvgExamplePage,
+    icon: '\uE734',
+    type: 'Media'
+  },
 ];
 
 export default RNGalleryList;
diff --git a/testFabric/examples/SvgExamplePage.tsx b/testFabric/examples/SvgExamplePage.tsx
@@ -0,0 +1,63 @@
+'use strict';
+import React from 'react';
+import {Example} from '../components/Example';
+import {Page} from '../components/Page';
+import Svg, {Circle, Rect} from 'react-native-svg';
+
+export const SvgExamplePage: React.FunctionComponent<{}> = () => {
+  const example1jsx = `<Svg height="200px" width="200px" viewBox="0 0 100 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>`;
+
+  return (
+    <Page
+      title="SVG"
+      description="A component which renders vector graphics."
+      componentType="Community"
+      pageCodeUrl="https://github.com/microsoft/react-native-gallery/blob/main/src/examples/SvgExamplePage.tsx"
+      documentation={[
+        {
+          label: 'Svg',
+          url: 'https://github.com/software-mansion/react-native-svg',
+        },
+      ]}>
+      <Example title="A simple Image from web source." code={example1jsx}>
+        <Svg height="200px" width="200px" viewBox="0 0 100 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>
+      </Example>
+    </Page>
+  );
+};
diff --git a/testFabric/package.json b/testFabric/package.json
@@ -14,26 +14,27 @@
   "dependencies": {
     "lowlight": "^1.17.0",
     "react": "18.2.0",
-    "react-native": "0.74.0-nightly-20231201-c30f2b620",
-    "react-native-windows": "0.0.0-canary.761"
+    "react-native": "0.74.0",
+    "react-native-windows": "0.74.1",
+    "react-native-svg": "marlenecota/react-native-svg#windows-fabric"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
-    "@react-native/babel-preset": "0.74.0-nightly-20231201-c30f2b620",
-    "@react-native/eslint-config": "0.74.0-nightly-20231201-c30f2b620",
-    "@react-native/metro-config": "0.74.0-nightly-20231201-c30f2b620",
-    "@react-native/typescript-config": "0.74.0-nightly-20231201-c30f2b620",
+    "@react-native/babel-preset": "0.74.81",
+    "@react-native/eslint-config": "0.74.81",
+    "@react-native/metro-config": "0.74.81",
+    "@react-native/typescript-config": "0.74.81",
+    "@rnx-kit/jest-preset": "^0.1.16",
     "@types/react": "^18.2.6",
     "@types/react-test-renderer": "^18.0.0",
     "babel-jest": "^29.6.3",
     "eslint": "^8.19.0",
     "jest": "^29.6.3",
     "prettier": "2.8.8",
     "react-test-renderer": "18.2.0",
-    "typescript": "5.0.4",
-    "@rnx-kit/jest-preset": "^0.1.16"
+    "typescript": "5.0.4"
   },
   "engines": {
     "node": ">=18"

diff --git a/testFabric/windows/testFabric.Package/packages.lock.json b/testFabric/windows/testFabric.Package/packages.lock.json
@@ -24,14 +24,17 @@
       },
       "Microsoft.WindowsAppSDK": {
         "type": "Transitive",
-        "resolved": "1.5.231202003-experimental1",
-        "contentHash": "LAwPjWf2OfJx8NRz6bknPu71Tw85nfr/PkVWgl8Hl2T9uLjk+Ajs4ppQd6+27+M6ILaO5rOSbcv+hCtOo+VAYQ==",
+        "resolved": "1.5.240227000",
+        "contentHash": "6rESOsREi8534J7IDpNfFYPvxQaSleXKt4A7ZYPeQyckNMQ0o1W0jZ420bJbEMz9Cw/S/8IbpPftLLZ9w/GTCQ==",
         "dependencies": {
           "Microsoft.Windows.SDK.BuildTools": "10.0.22621.756"
         }
       },
       "common": {
-        "type": "Project"
+        "type": "Project",
+        "dependencies": {
+          "boost": "[1.76.0, )"
+        }
       },
       "fmt": {
         "type": "Project"
@@ -49,7 +52,7 @@
           "Common": "[1.0.0, )",
           "Folly": "[1.0.0, )",
           "Microsoft.JavaScript.Hermes": "[0.1.18, )",
-          "Microsoft.WindowsAppSDK": "[1.5.231202003-experimental1, )",
+          "Microsoft.WindowsAppSDK": "[1.5.240227000, )",
           "ReactCommon": "[1.0.0, )",
           "boost": "[1.76.0, )"
         }
@@ -61,13 +64,23 @@
           "boost": "[1.76.0, )"
         }
       },
+      "rnsvg": {
+        "type": "Project",
+        "dependencies": {
+          "Microsoft.ReactNative": "[1.0.0, )",
+          "Microsoft.VCRTForwarders.140": "[1.0.2-rc, )",
+          "Microsoft.WindowsAppSDK": "[1.5.240227000, )",
+          "boost": "[1.76.0, )"
+        }
+      },
       "testfabric": {
         "type": "Project",
         "dependencies": {
           "Microsoft.JavaScript.Hermes": "[0.1.18, )",
           "Microsoft.ReactNative": "[1.0.0, )",
           "Microsoft.VCRTForwarders.140": "[1.0.2-rc, )",
-          "Microsoft.WindowsAppSDK": "[1.5.231202003-experimental1, )",
+          "Microsoft.WindowsAppSDK": "[1.5.240227000, )",
+          "RNSVG": "[1.0.0, )",
           "boost": "[1.76.0, )"
         }
       }
@@ -80,8 +93,8 @@
       },
       "Microsoft.WindowsAppSDK": {
         "type": "Transitive",
-        "resolved": "1.5.231202003-experimental1",
-        "contentHash": "LAwPjWf2OfJx8NRz6bknPu71Tw85nfr/PkVWgl8Hl2T9uLjk+Ajs4ppQd6+27+M6ILaO5rOSbcv+hCtOo+VAYQ==",
+        "resolved": "1.5.240227000",
+        "contentHash": "6rESOsREi8534J7IDpNfFYPvxQaSleXKt4A7ZYPeQyckNMQ0o1W0jZ420bJbEMz9Cw/S/8IbpPftLLZ9w/GTCQ==",
         "dependencies": {
           "Microsoft.Windows.SDK.BuildTools": "10.0.22621.756"
         }
@@ -95,8 +108,8 @@
       },
       "Microsoft.WindowsAppSDK": {
         "type": "Transitive",
-        "resolved": "1.5.231202003-experimental1",
-        "contentHash": "LAwPjWf2OfJx8NRz6bknPu71Tw85nfr/PkVWgl8Hl2T9uLjk+Ajs4ppQd6+27+M6ILaO5rOSbcv+hCtOo+VAYQ==",
+        "resolved": "1.5.240227000",
+        "contentHash": "6rESOsREi8534J7IDpNfFYPvxQaSleXKt4A7ZYPeQyckNMQ0o1W0jZ420bJbEMz9Cw/S/8IbpPftLLZ9w/GTCQ==",
         "dependencies": {
           "Microsoft.Windows.SDK.BuildTools": "10.0.22621.756"
         }
@@ -110,8 +123,8 @@
       },
       "Microsoft.WindowsAppSDK": {
         "type": "Transitive",
-        "resolved": "1.5.231202003-experimental1",
-        "contentHash": "LAwPjWf2OfJx8NRz6bknPu71Tw85nfr/PkVWgl8Hl2T9uLjk+Ajs4ppQd6+27+M6ILaO5rOSbcv+hCtOo+VAYQ==",
+        "resolved": "1.5.240227000",
+        "contentHash": "6rESOsREi8534J7IDpNfFYPvxQaSleXKt4A7ZYPeQyckNMQ0o1W0jZ420bJbEMz9Cw/S/8IbpPftLLZ9w/GTCQ==",
         "dependencies": {
           "Microsoft.Windows.SDK.BuildTools": "10.0.22621.756"
         }
@@ -125,8 +138,8 @@
       },
       "Microsoft.WindowsAppSDK": {
         "type": "Transitive",
-        "resolved": "1.5.231202003-experimental1",
-        "contentHash": "LAwPjWf2OfJx8NRz6bknPu71Tw85nfr/PkVWgl8Hl2T9uLjk+Ajs4ppQd6+27+M6ILaO5rOSbcv+hCtOo+VAYQ==",
+        "resolved": "1.5.240227000",
+        "contentHash": "6rESOsREi8534J7IDpNfFYPvxQaSleXKt4A7ZYPeQyckNMQ0o1W0jZ420bJbEMz9Cw/S/8IbpPftLLZ9w/GTCQ==",
         "dependencies": {
           "Microsoft.Windows.SDK.BuildTools": "10.0.22621.756"
         }
@@ -140,8 +153,8 @@
       },
       "Microsoft.WindowsAppSDK": {
         "type": "Transitive",
-        "resolved": "1.5.231202003-experimental1",
-        "contentHash": "LAwPjWf2OfJx8NRz6bknPu71Tw85nfr/PkVWgl8Hl2T9uLjk+Ajs4ppQd6+27+M6ILaO5rOSbcv+hCtOo+VAYQ==",
+        "resolved": "1.5.240227000",
+        "contentHash": "6rESOsREi8534J7IDpNfFYPvxQaSleXKt4A7ZYPeQyckNMQ0o1W0jZ420bJbEMz9Cw/S/8IbpPftLLZ9w/GTCQ==",
         "dependencies": {
           "Microsoft.Windows.SDK.BuildTools": "10.0.22621.756"
         }
@@ -155,8 +168,8 @@
       },
       "Microsoft.WindowsAppSDK": {
         "type": "Transitive",
-        "resolved": "1.5.231202003-experimental1",
-        "contentHash": "LAwPjWf2OfJx8NRz6bknPu71Tw85nfr/PkVWgl8Hl2T9uLjk+Ajs4ppQd6+27+M6ILaO5rOSbcv+hCtOo+VAYQ==",
+        "resolved": "1.5.240227000",
+        "contentHash": "6rESOsREi8534J7IDpNfFYPvxQaSleXKt4A7ZYPeQyckNMQ0o1W0jZ420bJbEMz9Cw/S/8IbpPftLLZ9w/GTCQ==",
         "dependencies": {
           "Microsoft.Windows.SDK.BuildTools": "10.0.22621.756"
         }
@@ -170,8 +183,8 @@
       },
       "Microsoft.WindowsAppSDK": {
         "type": "Transitive",
-        "resolved": "1.5.231202003-experimental1",
-        "contentHash": "LAwPjWf2OfJx8NRz6bknPu71Tw85nfr/PkVWgl8Hl2T9uLjk+Ajs4ppQd6+27+M6ILaO5rOSbcv+hCtOo+VAYQ==",
+        "resolved": "1.5.240227000",
+        "contentHash": "6rESOsREi8534J7IDpNfFYPvxQaSleXKt4A7ZYPeQyckNMQ0o1W0jZ420bJbEMz9Cw/S/8IbpPftLLZ9w/GTCQ==",
         "dependencies": {
           "Microsoft.Windows.SDK.BuildTools": "10.0.22621.756"
         }

diff --git a/testFabric/windows/testFabric.Package/testFabric.Package.wapproj b/testFabric/windows/testFabric.Package/testFabric.Package.wapproj
@@ -2,7 +2,7 @@
 <Project ToolsVersion="Current" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <Import Project="$(SolutionDir)\ExperimentalFeatures.props" Condition="Exists('$(SolutionDir)\ExperimentalFeatures.props')" />
   <PropertyGroup>
-    <ProjectGuid>{fafe1d01-f8d2-47e8-b97e-60dd4097c84c}</ProjectGuid>
+    <ProjectGuid>{e33d4078-6349-4d2d-959f-fc0904b54e93}</ProjectGuid>
     <DefaultLanguage>en-US</DefaultLanguage>
     <EntryPointProjectUniqueName>..\testFabric\testFabric.vcxproj</EntryPointProjectUniqueName>
     <DebuggerType>NativeOnly</DebuggerType>