Skip to content

Commit

Permalink
update example
Browse files Browse the repository at this point in the history
  • Loading branch information
@rudyhuynh
rudyhuynh committed May 5, 2018
1 parent 05b2d44 commit 6a286a3
Show file tree
Hide file tree
Showing 8 changed files with 135 additions and 51 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ A circular progress chart using react-native-svg
## Installation
````
npm install react-native-svg react-native-svg-circular-progress --save
react-native link
react-native link react-native-svg
````

## Usage
Expand Down
56 changes: 14 additions & 42 deletions example/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,55 +4,27 @@
* @flow
*/

import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import React, { Component } from "react";
import { Platform, StyleSheet, Text, View } from "react-native";
import { CircularProgress } from "react-native-svg-circular-progress";

const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
export default class App extends Component {
render() {
const percentage = 40;
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
<View style={styles.base}>
<Text style={styles.text}>Curcular Progress</Text>
<CircularProgress size={110} percentage={percentage}>
<View>
<Text>{percentage}%</Text>
</View>
</CircularProgress>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
base: { flex: 1, alignItems: "center", justifyContent: "center" },
text: { marginBottom: 10 }
});
1 change: 1 addition & 0 deletions example/android/app/build.gradle
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,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
Expand Down
4 changes: 3 additions & 1 deletion example/android/app/src/main/java/com/example/MainApplication.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import android.app.Application;

import com.facebook.react.ReactApplication;
import com.horcrux.svg.SvgPackage;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
Expand All @@ -22,7 +23,8 @@ public boolean getUseDeveloperSupport() {
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
new MainReactPackage(),
new SvgPackage()
);
}

Expand Down
2 changes: 2 additions & 0 deletions example/android/settings.gradle
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
rootProject.name = 'example'
include ':react-native-svg'
project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')

include ':app'
73 changes: 71 additions & 2 deletions example/ios/example.xcodeproj/project.pbxproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
};
objectVersion = 46;
objects = {

/* Begin PBXBuildFile section */
00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
Expand Down Expand Up @@ -38,6 +37,8 @@
5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };
2748AF6E552E4D3684AD1C40 /* libRNSVG.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00769DAD14D4438C9D8F0DB7 /* libRNSVG.a */; };
32A6CCE1570C48538ED2267D /* libRNSVG-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 34105F9C9C67444FB48B7A53 /* libRNSVG-tvOS.a */; };
/* End PBXBuildFile section */

/* Begin PBXContainerItemProxy section */
Expand Down Expand Up @@ -343,6 +344,9 @@
78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTBlob.xcodeproj; path = "../node_modules/react-native/Libraries/Blob/RCTBlob.xcodeproj"; sourceTree = "<group>"; };
D422987636D946559B31E6DE /* RNSVG.xcodeproj */ = {isa = PBXFileReference; name = "RNSVG.xcodeproj"; path = "../node_modules/react-native-svg/ios/RNSVG.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
00769DAD14D4438C9D8F0DB7 /* libRNSVG.a */ = {isa = PBXFileReference; name = "libRNSVG.a"; path = "libRNSVG.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
34105F9C9C67444FB48B7A53 /* libRNSVG-tvOS.a */ = {isa = PBXFileReference; name = "libRNSVG-tvOS.a"; path = "libRNSVG-tvOS.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
/* End PBXFileReference section */

/* Begin PBXFrameworksBuildPhase section */
Expand Down Expand Up @@ -371,6 +375,7 @@
832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */,
00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */,
139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
2748AF6E552E4D3684AD1C40 /* libRNSVG.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
Expand All @@ -386,6 +391,7 @@
2D02E4C61E0B4AEC006451C7 /* libRCTSettings-tvOS.a in Frameworks */,
2D02E4C71E0B4AEC006451C7 /* libRCTText-tvOS.a in Frameworks */,
2D02E4C81E0B4AEC006451C7 /* libRCTWebSocket-tvOS.a in Frameworks */,
32A6CCE1570C48538ED2267D /* libRNSVG-tvOS.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
Expand Down Expand Up @@ -557,6 +563,7 @@
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */,
139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
D422987636D946559B31E6DE /* RNSVG.xcodeproj */,
);
name = Libraries;
sourceTree = "<group>";
Expand Down Expand Up @@ -685,7 +692,7 @@
83CBB9F71A601CBA00E9B192 /* Project object */ = {
isa = PBXProject;
attributes = {
LastUpgradeCheck = 0610;
LastUpgradeCheck = 610;
ORGANIZATIONNAME = Facebook;
TargetAttributes = {
00E356ED1AD99517003FC87E = {
Expand Down Expand Up @@ -1181,6 +1188,15 @@
);
PRODUCT_NAME = "$(TARGET_NAME)";
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/example.app/example";
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
);
};
name = Debug;
};
Expand All @@ -1198,6 +1214,15 @@
);
PRODUCT_NAME = "$(TARGET_NAME)";
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/example.app/example";
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
);
};
name = Release;
};
Expand All @@ -1216,6 +1241,10 @@
);
PRODUCT_NAME = example;
VERSIONING_SYSTEM = "apple-generic";
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
);
};
name = Debug;
};
Expand All @@ -1233,6 +1262,10 @@
);
PRODUCT_NAME = example;
VERSIONING_SYSTEM = "apple-generic";
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
);
};
name = Release;
};
Expand All @@ -1259,6 +1292,15 @@
SDKROOT = appletvos;
TARGETED_DEVICE_FAMILY = 3;
TVOS_DEPLOYMENT_TARGET = 9.2;
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
);
};
name = Debug;
};
Expand All @@ -1285,6 +1327,15 @@
SDKROOT = appletvos;
TARGETED_DEVICE_FAMILY = 3;
TVOS_DEPLOYMENT_TARGET = 9.2;
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
);
};
name = Release;
};
Expand All @@ -1310,6 +1361,15 @@
SDKROOT = appletvos;
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/example-tvOS.app/example-tvOS";
TVOS_DEPLOYMENT_TARGET = 10.1;
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
);
};
name = Debug;
};
Expand All @@ -1335,6 +1395,15 @@
SDKROOT = appletvos;
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/example-tvOS.app/example-tvOS";
TVOS_DEPLOYMENT_TARGET = 10.1;
LIBRARY_SEARCH_PATHS = (
"$(inherited)",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
"\"$(SRCROOT)/$(TARGET_NAME)\"",
);
HEADER_SEARCH_PATHS = (
"$(inherited)",
"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
);
};
name = Release;
};
Expand Down
6 changes: 4 additions & 2 deletions example/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@
},
"dependencies": {
"react": "16.3.1",
"react-native": "0.55.3"
"react-native": "0.55.3",
"react-native-svg": "^6.3.1",
"react-native-svg-circular-progress": "^1.0.4"
},
"devDependencies": {
"babel-jest": "22.4.3",
Expand All @@ -19,4 +21,4 @@
"jest": {
"preset": "react-native"
}
}
}
42 changes: 39 additions & 3 deletions example/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1541,20 +1541,34 @@ collection-visit@^1.0.0:
map-visit "^1.0.0"
object-visit "^1.0.0"

color-convert@^1.9.0:
color-convert@^1.9.0, color-convert@^1.9.1:
version "1.9.1"
resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
dependencies:
color-name "^1.1.1"

color-name@^1.1.1:
color-name@^1.0.0, color-name@^1.1.1:
version "1.1.3"
resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"

color-string@^1.5.2:
version "1.5.2"
resolved "https://registry.npmjs.org/color-string/-/color-string-1.5.2.tgz#26e45814bc3c9a7cbd6751648a41434514a773a9"
dependencies:
color-name "^1.0.0"
simple-swizzle "^0.2.2"

color-support@^1.1.3:
version "1.1.3"
resolved "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"

color@^2.0.1:
version "2.0.1"
resolved "https://registry.npmjs.org/color/-/color-2.0.1.tgz#e4ed78a3c4603d0891eba5430b04b86314f4c839"
dependencies:
color-convert "^1.9.1"
color-string "^1.5.2"

combined-stream@1.0.6, combined-stream@~1.0.5:
version "1.0.6"
resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz#723e7df6e801ac5613113a7e445a9b69cb632818"
Expand Down Expand Up @@ -2533,6 +2547,10 @@ is-arrayish@^0.2.1:
version "0.2.1"
resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"

is-arrayish@^0.3.1:
version "0.3.1"
resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.1.tgz#c2dfc386abaa0c3e33c48db3fe87059e69065efd"

is-buffer@^1.1.5:
version "1.1.6"
resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
Expand Down Expand Up @@ -3295,7 +3313,7 @@ lodash@^3.5.0:
version "3.10.1"
resolved "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"

lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.6.1:
lodash@^4.13.1, lodash@^4.14.0, lodash@^4.16.6, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.6.1:
version "4.17.10"
resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"

Expand Down Expand Up @@ -4142,6 +4160,18 @@ react-is@^16.3.1:
version "16.3.2"
resolved "https://registry.npmjs.org/react-is/-/react-is-16.3.2.tgz#f4d3d0e2f5fbb6ac46450641eb2e25bf05d36b22"

react-native-svg-circular-progress@^1.0.4:
version "1.0.4"
resolved "https://registry.npmjs.org/react-native-svg-circular-progress/-/react-native-svg-circular-progress-1.0.4.tgz#e33ab82ac907d34837a5eb14675154ce72bcefb5"

react-native-svg@^6.3.1:
version "6.3.1"
resolved "https://registry.npmjs.org/react-native-svg/-/react-native-svg-6.3.1.tgz#06a573f17c59ce953a56fd62e776fd79d632d765"
dependencies:
color "^2.0.1"
lodash "^4.16.6"
pegjs "^0.10.0"

react-native@0.55.3:
version "0.55.3"
resolved "https://registry.npmjs.org/react-native/-/react-native-0.55.3.tgz#6ff1691bd0645d0480fba16377edb9dce5bd28c4"
Expand Down Expand Up @@ -4621,6 +4651,12 @@ simple-plist@^0.2.1:
bplist-parser "0.1.1"
plist "2.0.1"

simple-swizzle@^0.2.2:
version "0.2.2"
resolved "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
dependencies:
is-arrayish "^0.3.1"

slash@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
Expand Down

0 comments on commit 6a286a3

Please sign in to comment.