Updated hello world sample to include ReactXP extension example.

msfterictraut · msfterictraut · commit e3f400f5c596 · 2017-05-10T11:14:56.000-07:00
diff --git a/samples/hello-world/android/app/build.gradle b/samples/hello-world/android/app/build.gradle
@@ -126,6 +126,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-svg')
     compile fileTree(dir: "libs", include: ["*.jar"])
     compile "com.android.support:appcompat-v7:23.0.1"
     compile "com.facebook.react:react-native:+"  // From node_modules
diff --git a/samples/hello-world/android/app/src/main/java/com/rxphelloworld/MainApplication.java b/samples/hello-world/android/app/src/main/java/com/rxphelloworld/MainApplication.java
@@ -3,6 +3,7 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.horcrux.svg.RNSvgPackage;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
 import com.facebook.react.shell.MainReactPackage;
@@ -22,7 +23,8 @@ public boolean getUseDeveloperSupport() {
     @Override
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
-          new MainReactPackage()
+          new MainReactPackage(),
+            new RNSvgPackage()
       );
     }
   };
diff --git a/samples/hello-world/android/settings.gradle b/samples/hello-world/android/settings.gradle
@@ -1,3 +1,5 @@
 rootProject.name = 'RXPHelloWorld'
+include ':react-native-svg'
+project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
 
 include ':app'
diff --git a/samples/hello-world/ios/RXPHelloWorld.xcodeproj/project.pbxproj b/samples/hello-world/ios/RXPHelloWorld.xcodeproj/project.pbxproj
diff --git a/samples/hello-world/ios/RXPHelloWorld.xcodeproj/xcshareddata/xcschemes/RXPHelloWorld-tvOS.xcscheme b/samples/hello-world/ios/RXPHelloWorld.xcodeproj/xcshareddata/xcschemes/RXPHelloWorld-tvOS.xcscheme
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "0820"
+   LastUpgradeVersion = "0830"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "NO"
diff --git a/samples/hello-world/ios/RXPHelloWorld.xcodeproj/xcshareddata/xcschemes/RXPHelloWorld.xcscheme b/samples/hello-world/ios/RXPHelloWorld.xcodeproj/xcshareddata/xcschemes/RXPHelloWorld.xcscheme
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "0620"
+   LastUpgradeVersion = "0830"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "NO"
diff --git a/samples/hello-world/ios/RXPHelloWorld/Info.plist b/samples/hello-world/ios/RXPHelloWorld/Info.plist
@@ -9,7 +9,7 @@
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>
-	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
 	<key>CFBundleInfoDictionaryVersion</key>
 	<string>6.0</string>
 	<key>CFBundleName</key>
@@ -24,6 +24,19 @@
 	<string>1</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSExceptionDomains</key>
+		<dict>
+			<key>localhost</key>
+			<dict>
+				<key>NSExceptionAllowsInsecureHTTPLoads</key>
+				<true/>
+			</dict>
+		</dict>
+	</dict>
+	<key>NSLocationWhenInUseUsageDescription</key>
+	<string></string>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -38,19 +51,5 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
-	<key>NSLocationWhenInUseUsageDescription</key>
-	<string></string>
-	<key>NSAppTransportSecurity</key>
-	<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
-	<dict>
-		<key>NSExceptionDomains</key>
-		<dict>
-			<key>localhost</key>
-			<dict>
-				<key>NSExceptionAllowsInsecureHTTPLoads</key>
-				<true/>
-			</dict>
-		</dict>
-	</dict>
 </dict>
 </plist>
diff --git a/samples/hello-world/ios/RXPHelloWorldTests/Info.plist b/samples/hello-world/ios/RXPHelloWorldTests/Info.plist
@@ -7,7 +7,7 @@
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>
-	<string>org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)</string>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
 	<key>CFBundleInfoDictionaryVersion</key>
 	<string>6.0</string>
 	<key>CFBundleName</key>
diff --git a/samples/hello-world/package.json b/samples/hello-world/package.json
@@ -24,6 +24,7 @@
     "react-addons-test-utils": "^15.4.1",
     "react-dom": "^15.4.1",
     "react-native": "^0.42.0",
-    "react-native-windows": "^0.33.0"
+    "react-native-windows": "^0.33.0",
+    "reactxp-imagesvg": "^0.2.0"
   }
 }
diff --git a/samples/hello-world/src/App.tsx b/samples/hello-world/src/App.tsx
@@ -4,10 +4,12 @@
 
 import RX = require('reactxp');
 
+import ProgressIndicator from './ProgressIndicator';
 import ToggleSwitch from './ToggleSwitch';
 
 interface AppState {
     toggleValue?: boolean;
+    progressValue?: number;
 }
 
 const styles = {
@@ -39,12 +41,16 @@ const styles = {
     toggleTitle: RX.Styles.createTextStyle({
         fontSize: 16,
         color: 'black'
+    }),
+    progressMargin: RX.Styles.createViewStyle({
+        margin: 16
     })
 };
 
 class App extends RX.Component<null, AppState> {
     private _translationValue: RX.Animated.Value;
     private _animatedStyle: RX.Types.AnimatedTextStyleRuleSet;
+    private _progressTimerToken: number;
 
     constructor() {
         super();
@@ -59,7 +65,8 @@ class App extends RX.Component<null, AppState> {
         });
 
         this.state = {
-            toggleValue: true
+            toggleValue: true,
+            progressValue: 0
         };
     }
 
@@ -72,6 +79,12 @@ class App extends RX.Component<null, AppState> {
         );
 
         animation.start();
+
+        this._startProgressIndicator();
+    }
+
+    componentWillUnmount() {
+        this._stopProgressIndicator();
     }
 
     render(): JSX.Element | null {
@@ -97,10 +110,34 @@ class App extends RX.Component<null, AppState> {
                     value={ this.state.toggleValue }
                     onChange={ this._onChangeToggle }
                 />
+
+                <RX.Text style={ styles.toggleTitle }>
+                    Here is an SVG image using a ReactXP extension
+                </RX.Text>
+                <ProgressIndicator
+                    style={ styles.progressMargin }
+                    progress={ this.state.progressValue }
+                    fillColor={ '#ccc' }
+                    size={ 32 }
+                />
             </RX.View>
         );
     }
 
+    private _startProgressIndicator() {
+        this._progressTimerToken = window.setInterval(() => {
+            const newProgressValue = (this.state.progressValue + 0.02) % 1;
+            this.setState({ progressValue: newProgressValue });
+        }, 1000 / 15);
+    }
+
+    private _stopProgressIndicator() {
+        if (this._progressTimerToken) {
+            window.clearInterval(this._progressTimerToken);
+            this._progressTimerToken = undefined;
+        }
+    }
+
     // Note that we define this as a variable rather than a normal method. Using this
     // method, we prebind the method to this component instance. This prebinding ensures
     // that each time we pass the variable as a prop in the render function, it will
diff --git a/samples/hello-world/src/ProgressIndicator.tsx b/samples/hello-world/src/ProgressIndicator.tsx
@@ -0,0 +1,47 @@
+/**
+* ProgressIndicator.tsx
+* Copyright: Microsoft 2017
+*
+* Circular progress indicator that shows off the use of ImageSVG
+* ReactXP extension.
+*/
+
+import RX = require('reactxp');
+import { default as RXImageSvg, SvgPath as RXSvgPath } from 'reactxp-imagesvg';
+
+export interface ProgressIndicatorProps extends RX.CommonStyledProps<RX.Types.ImageStyleRuleSet>  {
+    progress: number;
+    fillColor: string;
+    size: number;
+}
+
+class ProgressIndicator extends RX.Component<ProgressIndicatorProps, {}> {
+    render() {
+        const size = this.props.size;
+        const progress = this.props.progress;
+        const radius = size / 2;
+        const deg = progress  * 360;
+        const radians = Math.PI * (deg - 90) / 180;
+        const endX = radius + radius * Math.cos(radians);
+        const endY = radius + radius * Math.sin(radians);
+        const path = 'M' + radius + ',' + radius +
+                     ' L' + radius + ',0' +
+                     ' A' + radius + ',' + radius + ' 0 ' + (deg > 180 ? 1 : 0) + ',1 ' + endX + ',' + endY +
+                     'z';
+        return (
+            <RXImageSvg
+                viewBox={ '0 0 ' + size + ' ' + size }
+                style={ this.props.style }
+                width={ size }
+                height={ size }
+            >
+                <RXSvgPath
+                    fillColor={ this.props.fillColor }
+                    d={ path }
+                />
+            </RXImageSvg>
+        );
+    }
+}
+
+export default ProgressIndicator;

Original file line number	Diff line number	Diff line change
`@@ -126,6 +126,7 @@ android {`
`126`	`126`	`}`
`127`	`127`
`128`	`128`	`dependencies {`
	`129`	`+ compile project(':react-native-svg')`
`129`	`130`	`compile fileTree(dir: "libs", include: ["*.jar"])`
`130`	`131`	`compile "com.android.support:appcompat-v7:23.0.1"`
`131`	`132`	`compile "com.facebook.react:react-native:+" // From node_modules`
Original file line number	Diff line number	Diff line change
`@@ -24,6 +24,7 @@`
`24`	`24`	`"react-addons-test-utils": "^15.4.1",`
`25`	`25`	`"react-dom": "^15.4.1",`
`26`	`26`	`"react-native": "^0.42.0",`
`27`		`- "react-native-windows": "^0.33.0"`
	`27`	`+ "react-native-windows": "^0.33.0",`
	`28`	`+ "reactxp-imagesvg": "^0.2.0"`
`28`	`29`	`}`
`29`	`30`	`}`