feat(windows): add example app (#1937)

Added example app for Windows

.eslintignore

@@ -2,7 +2,9 @@
 Example/examples/
 Example/android/
 Example/ios/
+Example/windows/
 screenshots/
 android/
 apple/
+windows/
 src/lib/extract/transform.js

Example/.gitignore

@@ -32,6 +32,10 @@ local.properties
 *.hprof
 .cxx/
 
+# Windows
+#
+*.binlog
+
 # node.js
 #
 node_modules/

Example/metro.config.js

@@ -7,7 +7,12 @@ const pack = require('../package.json');
 
 const root = path.resolve(__dirname, '..');
 
-const modules = [...Object.keys(pack.peerDependencies)];
+const fs = require('fs');
+const rnwPath = fs.realpathSync(
+  path.resolve(require.resolve('react-native-windows/package.json'), '..'),
+);
+
+const modules = [...Object.keys(pack.peerDependencies), 'react-native-windows'];
 
 module.exports = {
   projectRoot: __dirname,
@@ -20,6 +25,15 @@ module.exports = {
       modules.map(
         m => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`),
       ),
+      // This stops "react-native run-windows" from causing the metro server to
+      // crash if its already running
+      new RegExp(
+        `${path.join(__dirname, 'windows').replace(/[/\\]+/g, '/')}.*`,
+      ),
+      // This prevents "react-native run-windows" from hitting: EBUSY: resource busy or locked, open msbuild.ProjectImports.zip or other files produced by msbuild
+      new RegExp(`${rnwPath}/build/.*`),
+      new RegExp(`${rnwPath}/target/.*`),
+      /.*\.ProjectImports\.zip/,
     ),
 
     extraNodeModules: modules.reduce((acc, name) => {

Example/package.json

@@ -6,6 +6,7 @@
     "android": "react-native run-android",
     "ios": "react-native run-ios",
     "macos": "react-native run-macos",
+    "windows": "react-native run-windows",
     "start": "react-native start",
     "start-webpack": "webpack serve",
     "test": "jest",
@@ -16,6 +17,7 @@
     "react": "18.1.0",
     "react-dom": "^18.2.0",
     "react-native": "0.70.5",
+    "react-native-windows": "0.70.7",
     "react-native-reanimated": "^2.10.0",
     "react-native-svg": "link:../",
     "react-native-web": "^0.17.7"

Example/src/App.tsx

@@ -14,7 +14,7 @@ import {
   TouchableHighlight,
   TouchableOpacity,
 } from 'react-native';
-import {Modal} from 'react-native';
+import {Modal, Platform} from 'react-native';
 import {Svg, Circle, Line} from 'react-native-svg';
 
 import * as examples from './examples';
@@ -203,13 +203,17 @@ export default class SvgExample extends Component {
       <View style={styles.container}>
         <Text style={styles.welcome}>SVG library for React Apps</Text>
         <View style={styles.contentContainer}>{this.getExamples()}</View>
-        <Modal
-          transparent={false}
-          animationType="fade"
-          visible={this.state.modal}
-          onRequestClose={this.hide}>
-          {this.modalContent()}
-        </Modal>
+        {Platform.OS === 'windows' && this.state.modal ? (
+          <View style={styles.scroll}>{this.modalContent()}</View>
+        ) : (
+          <Modal
+            transparent={false}
+            animationType="fade"
+            visible={this.state.modal}
+            onRequestClose={this.hide}>
+            {this.modalContent()}
+          </Modal>
+        )}
       </View>
     );
   }

Example/src/examples/Text.windows.tsx

@@ -0,0 +1,183 @@
+import React, {Component} from 'react';
+
+import {
+  Svg,
+  G,
+  Text,
+  TSpan,
+  Path,
+  Defs,
+  LinearGradient,
+  Stop,
+} from 'react-native-svg';
+
+class TextExample extends Component {
+  static title = 'Text';
+  render() {
+    return (
+      <Svg height="30" width="100">
+        <Text x="50" y="9" fill="red" textAnchor="middle">
+          I love SVG!
+        </Text>
+      </Svg>
+    );
+  }
+}
+
+class TextRotate extends Component {
+  static title = 'Transform the text';
+  render() {
+    return (
+      <Svg height="60" width="200">
+        <Text x="0" y="15" fill="red" rotate="30" origin="20,40">
+          I love SVG
+        </Text>
+        <Text x="95" y="47" fill="blue" rotate="-25" origin="95, 20">
+          I love SVG
+        </Text>
+        <Text
+          x="126"
+          y="5"
+          fill="#f60"
+          rotate="106"
+          scale="1.36"
+          origin="140, 0">
+          I love SVG
+        </Text>
+      </Svg>
+    );
+  }
+}
+
+class TextStroke extends Component {
+  static title = 'Stroke the text';
+  render() {
+    return (
+      <Svg height="60" width="200">
+        <Defs>
+          <LinearGradient
+            id="text-stroke-grad"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="0%">
+            <Stop offset="0%" stopColor="blue" stopOpacity="0.5" />
+            <Stop offset="100%" stopColor="red" stopOpacity="1" />
+          </LinearGradient>
+        </Defs>
+        <Text
+          stroke="url(#text-stroke-grad)"
+          strokeWidth="2"
+          fill="none"
+          fontSize="30"
+          fontWeight="bold"
+          x="100"
+          y="20">
+          <TSpan textAnchor="middle">{['STROKE TEXT']}</TSpan>
+        </Text>
+      </Svg>
+    );
+  }
+}
+
+class TextFill extends Component {
+  static title = 'Fill the text with LinearGradient';
+  render() {
+    return (
+      <Svg height="60" width="200">
+        <Defs>
+          <LinearGradient id="text-fill-grad" x1="0%" y1="0%" x2="100%" y2="0%">
+            <Stop offset="0%" stopColor="rgb(255,255,0)" stopOpacity="0.5" />
+            <Stop offset="100%" stopColor="red" stopOpacity="1" />
+          </LinearGradient>
+        </Defs>
+
+        <Text
+          fill="url(#text-fill-grad)"
+          stroke="purple"
+          strokeWidth="1"
+          fontSize="20"
+          fontWeight="bold"
+          x="100"
+          y="20"
+          textAnchor="middle">
+          FILL TEXT
+        </Text>
+      </Svg>
+    );
+  }
+}
+
+const path = `
+M 10 20
+C 40 10 60  0 80 10
+C 100 20 120 30 140 20
+C 160 10 180 10 180 10
+`;
+class TextPathExample extends Component {
+  static title = 'Draw text along path';
+  render() {
+    return (
+      <Svg height="100" width="200">
+        <Defs>
+          <Path id="textpath" d={path} />
+        </Defs>
+        <G y="20">
+          <Text fill="blue">TextPath not implemented</Text>
+          <Path d={path} fill="none" stroke="red" strokeWidth="1" />
+        </G>
+      </Svg>
+    );
+  }
+}
+
+class TSpanExample extends Component {
+  static title = 'TSpan nest';
+  render() {
+    return (
+      <Svg height="160" width="200">
+        <Text y="20" dx="5 5" fill="black">
+          <TSpan x="10">tspan line 1</TSpan>
+          <TSpan x="10" dy="15">
+            tspan line 2
+          </TSpan>
+          <TSpan x="10" dx="10" dy="15">
+            tspan line 3
+          </TSpan>
+        </Text>
+        <Text x="10" y="60" fill="red" fontSize="14">
+          <TSpan dy="5 10 20">12345</TSpan>
+          <TSpan fill="blue" dy="15" dx="0 5 5">
+            <TSpan>6</TSpan>
+            <TSpan>7</TSpan>
+          </TSpan>
+          <TSpan dx="0 10 20" dy="0 20" fontWeight="bold" fontSize="12">
+            89a
+          </TSpan>
+        </Text>
+        <Text y="140" dx="0 5 5" dy="0 -5 -5" fill="black">
+          delta on text
+        </Text>
+      </Svg>
+    );
+  }
+}
+
+const icon = (
+  <Svg height="30" width="30" viewBox="0 0 100 100">
+    <Text x="0" y="80" fontSize="100" fill="blue">
+      字
+    </Text>
+  </Svg>
+);
+
+const samples = [
+  TextExample,
+  TextRotate,
+  TextStroke,
+  TextFill,
+  TextPathExample,
+  TSpanExample,
+];
+
+export {icon, samples};

Example/windows/.gitignore

@@ -0,0 +1,92 @@
+*AppPackages*
+*BundleArtifacts*
+
+#OS junk files
+[Tt]humbs.db
+*.DS_Store
+
+#Visual Studio files
+*.[Oo]bj
+*.user
+*.aps
+*.pch
+*.vspscc
+*.vssscc
+*_i.c
+*_p.c
+*.ncb
+*.suo
+*.tlb
+*.tlh
+*.bak
+*.[Cc]ache
+*.ilk
+*.log
+*.lib
+*.sbr
+*.sdf
+*.opensdf
+*.opendb
+*.unsuccessfulbuild
+ipch/
+[Oo]bj/
+[Bb]in
+[Dd]ebug*/
+[Rr]elease*/
+Ankh.NoLoad
+
+# Visual C++ cache files
+ipch/
+*.aps
+*.ncb
+*.opendb
+*.opensdf
+*.sdf
+*.cachefile
+*.VC.db
+*.VC.VC.opendb
+
+#MonoDevelop
+*.pidb
+*.userprefs
+
+#Tooling
+_ReSharper*/
+*.resharper
+[Tt]est[Rr]esult*
+*.sass-cache
+
+#Project files
+[Bb]uild/
+
+#Subversion files
+.svn
+
+# Office Temp Files
+~$*
+
+# vim Temp Files
+*~
+
+#NuGet
+packages/
+*.nupkg
+
+#ncrunch
+*ncrunch*
+*crunch*.local.xml
+
+# visual studio database projects
+*.dbmdl
+
+#Test files
+*.testsettings
+
+#Other files
+*.DotSettings
+.vs/
+*project.lock.json
+
+#Files generated by the VS build
+**/Generated Files/**
+