Skip to content

Commit 6a286a3

Browse files
rudyhuynhrudyhuynh
committed
update example
1 parent 05b2d44 commit 6a286a3

File tree

8 files changed

+135
-51
lines changed

8 files changed

+135
-51
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ A circular progress chart using react-native-svg
77
## Installation
88
````
99
npm install react-native-svg react-native-svg-circular-progress --save
10-
react-native link
10+
react-native link react-native-svg
1111
````
1212

1313
## Usage

‎example/App.js‎

Lines changed: 14 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -4,55 +4,27 @@
44
* @flow
55
*/
66

7-
import React, { Component } from 'react';
8-
import {
9-
Platform,
10-
StyleSheet,
11-
Text,
12-
View
13-
} from 'react-native';
7+
import React, { Component } from "react";
8+
import { Platform, StyleSheet, Text, View } from "react-native";
9+
import { CircularProgress } from "react-native-svg-circular-progress";
1410

15-
const instructions = Platform.select({
16-
ios: 'Press Cmd+R to reload,\n' +
17-
'Cmd+D or shake for dev menu',
18-
android: 'Double tap R on your keyboard to reload,\n' +
19-
'Shake or press menu button for dev menu',
20-
});
21-
22-
type Props = {};
23-
export default class App extends Component<Props> {
11+
export default class App extends Component {
2412
render() {
13+
const percentage = 40;
2514
return (
26-
<View style={styles.container}>
27-
<Text style={styles.welcome}>
28-
Welcome to React Native!
29-
</Text>
30-
<Text style={styles.instructions}>
31-
To get started, edit App.js
32-
</Text>
33-
<Text style={styles.instructions}>
34-
{instructions}
35-
</Text>
15+
<View style={styles.base}>
16+
<Text style={styles.text}>Curcular Progress</Text>
17+
<CircularProgress size={110} percentage={percentage}>
18+
<View>
19+
<Text>{percentage}%</Text>
20+
</View>
21+
</CircularProgress>
3622
</View>
3723
);
3824
}
3925
}
4026

4127
const styles = StyleSheet.create({
42-
container: {
43-
flex: 1,
44-
justifyContent: 'center',
45-
alignItems: 'center',
46-
backgroundColor: '#F5FCFF',
47-
},
48-
welcome: {
49-
fontSize: 20,
50-
textAlign: 'center',
51-
margin: 10,
52-
},
53-
instructions: {
54-
textAlign: 'center',
55-
color: '#333333',
56-
marginBottom: 5,
57-
},
28+
base: { flex: 1, alignItems: "center", justifyContent: "center" },
29+
text: { marginBottom: 10 }
5830
});

‎example/android/app/build.gradle‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ android {
137137
}
138138

139139
dependencies {
140+
compile project(':react-native-svg')
140141
compile fileTree(dir: "libs", include: ["*.jar"])
141142
compile "com.android.support:appcompat-v7:23.0.1"
142143
compile "com.facebook.react:react-native:+" // From node_modules

‎example/android/app/src/main/java/com/example/MainApplication.java‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import android.app.Application;
44

55
import com.facebook.react.ReactApplication;
6+
import com.horcrux.svg.SvgPackage;
67
import com.facebook.react.ReactNativeHost;
78
import com.facebook.react.ReactPackage;
89
import com.facebook.react.shell.MainReactPackage;
@@ -22,7 +23,8 @@ public boolean getUseDeveloperSupport() {
2223
@Override
2324
protected List<ReactPackage> getPackages() {
2425
return Arrays.<ReactPackage>asList(
25-
new MainReactPackage()
26+
new MainReactPackage(),
27+
new SvgPackage()
2628
);
2729
}
2830

‎example/android/settings.gradle‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
rootProject.name = 'example'
2+
include ':react-native-svg'
3+
project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
24

35
include ':app'

‎example/ios/example.xcodeproj/project.pbxproj‎

Lines changed: 71 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
};
66
objectVersion = 46;
77
objects = {
8-
98
/* Begin PBXBuildFile section */
109
00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302AC1ABCB8CE00DB3ED1 /* libRCTActionSheet.a */; };
1110
00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302BA1ABCB90400DB3ED1 /* libRCTGeolocation.a */; };
@@ -38,6 +37,8 @@
3837
5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
3938
832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
4039
ADBDB9381DFEBF1600ED6528 /* libRCTBlob.a in Frameworks */ = {isa = PBXBuildFile; fileRef = ADBDB9271DFEBF0700ED6528 /* libRCTBlob.a */; };
40+
2748AF6E552E4D3684AD1C40 /* libRNSVG.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00769DAD14D4438C9D8F0DB7 /* libRNSVG.a */; };
41+
32A6CCE1570C48538ED2267D /* libRNSVG-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 34105F9C9C67444FB48B7A53 /* libRNSVG-tvOS.a */; };
4142
/* End PBXBuildFile section */
4243

4344
/* Begin PBXContainerItemProxy section */
@@ -343,6 +344,9 @@
343344
78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
344345
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
345346
ADBDB91F1DFEBF0600ED6528 /* RCTBlob.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTBlob.xcodeproj; path = "../node_modules/react-native/Libraries/Blob/RCTBlob.xcodeproj"; sourceTree = "<group>"; };
347+
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; };
348+
00769DAD14D4438C9D8F0DB7 /* libRNSVG.a */ = {isa = PBXFileReference; name = "libRNSVG.a"; path = "libRNSVG.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
349+
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; };
346350
/* End PBXFileReference section */
347351

348352
/* Begin PBXFrameworksBuildPhase section */
@@ -371,6 +375,7 @@
371375
832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */,
372376
00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */,
373377
139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
378+
2748AF6E552E4D3684AD1C40 /* libRNSVG.a in Frameworks */,
374379
);
375380
runOnlyForDeploymentPostprocessing = 0;
376381
};
@@ -386,6 +391,7 @@
386391
2D02E4C61E0B4AEC006451C7 /* libRCTSettings-tvOS.a in Frameworks */,
387392
2D02E4C71E0B4AEC006451C7 /* libRCTText-tvOS.a in Frameworks */,
388393
2D02E4C81E0B4AEC006451C7 /* libRCTWebSocket-tvOS.a in Frameworks */,
394+
32A6CCE1570C48538ED2267D /* libRNSVG-tvOS.a in Frameworks */,
389395
);
390396
runOnlyForDeploymentPostprocessing = 0;
391397
};
@@ -557,6 +563,7 @@
557563
832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
558564
00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */,
559565
139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
566+
D422987636D946559B31E6DE /* RNSVG.xcodeproj */,
560567
);
561568
name = Libraries;
562569
sourceTree = "<group>";
@@ -685,7 +692,7 @@
685692
83CBB9F71A601CBA00E9B192 /* Project object */ = {
686693
isa = PBXProject;
687694
attributes = {
688-
LastUpgradeCheck = 0610;
695+
LastUpgradeCheck = 610;
689696
ORGANIZATIONNAME = Facebook;
690697
TargetAttributes = {
691698
00E356ED1AD99517003FC87E = {
@@ -1181,6 +1188,15 @@
11811188
);
11821189
PRODUCT_NAME = "$(TARGET_NAME)";
11831190
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/example.app/example";
1191+
LIBRARY_SEARCH_PATHS = (
1192+
"$(inherited)",
1193+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1194+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1195+
);
1196+
HEADER_SEARCH_PATHS = (
1197+
"$(inherited)",
1198+
"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
1199+
);
11841200
};
11851201
name = Debug;
11861202
};
@@ -1198,6 +1214,15 @@
11981214
);
11991215
PRODUCT_NAME = "$(TARGET_NAME)";
12001216
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/example.app/example";
1217+
LIBRARY_SEARCH_PATHS = (
1218+
"$(inherited)",
1219+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1220+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1221+
);
1222+
HEADER_SEARCH_PATHS = (
1223+
"$(inherited)",
1224+
"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
1225+
);
12011226
};
12021227
name = Release;
12031228
};
@@ -1216,6 +1241,10 @@
12161241
);
12171242
PRODUCT_NAME = example;
12181243
VERSIONING_SYSTEM = "apple-generic";
1244+
HEADER_SEARCH_PATHS = (
1245+
"$(inherited)",
1246+
"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
1247+
);
12191248
};
12201249
name = Debug;
12211250
};
@@ -1233,6 +1262,10 @@
12331262
);
12341263
PRODUCT_NAME = example;
12351264
VERSIONING_SYSTEM = "apple-generic";
1265+
HEADER_SEARCH_PATHS = (
1266+
"$(inherited)",
1267+
"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
1268+
);
12361269
};
12371270
name = Release;
12381271
};
@@ -1259,6 +1292,15 @@
12591292
SDKROOT = appletvos;
12601293
TARGETED_DEVICE_FAMILY = 3;
12611294
TVOS_DEPLOYMENT_TARGET = 9.2;
1295+
LIBRARY_SEARCH_PATHS = (
1296+
"$(inherited)",
1297+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1298+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1299+
);
1300+
HEADER_SEARCH_PATHS = (
1301+
"$(inherited)",
1302+
"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
1303+
);
12621304
};
12631305
name = Debug;
12641306
};
@@ -1285,6 +1327,15 @@
12851327
SDKROOT = appletvos;
12861328
TARGETED_DEVICE_FAMILY = 3;
12871329
TVOS_DEPLOYMENT_TARGET = 9.2;
1330+
LIBRARY_SEARCH_PATHS = (
1331+
"$(inherited)",
1332+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1333+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1334+
);
1335+
HEADER_SEARCH_PATHS = (
1336+
"$(inherited)",
1337+
"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
1338+
);
12881339
};
12891340
name = Release;
12901341
};
@@ -1310,6 +1361,15 @@
13101361
SDKROOT = appletvos;
13111362
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/example-tvOS.app/example-tvOS";
13121363
TVOS_DEPLOYMENT_TARGET = 10.1;
1364+
LIBRARY_SEARCH_PATHS = (
1365+
"$(inherited)",
1366+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1367+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1368+
);
1369+
HEADER_SEARCH_PATHS = (
1370+
"$(inherited)",
1371+
"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
1372+
);
13131373
};
13141374
name = Debug;
13151375
};
@@ -1335,6 +1395,15 @@
13351395
SDKROOT = appletvos;
13361396
TEST_HOST = "$(BUILT_PRODUCTS_DIR)/example-tvOS.app/example-tvOS";
13371397
TVOS_DEPLOYMENT_TARGET = 10.1;
1398+
LIBRARY_SEARCH_PATHS = (
1399+
"$(inherited)",
1400+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1401+
"\"$(SRCROOT)/$(TARGET_NAME)\"",
1402+
);
1403+
HEADER_SEARCH_PATHS = (
1404+
"$(inherited)",
1405+
"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
1406+
);
13381407
};
13391408
name = Release;
13401409
};

‎example/package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88
},
99
"dependencies": {
1010
"react": "16.3.1",
11-
"react-native": "0.55.3"
11+
"react-native": "0.55.3",
12+
"react-native-svg": "^6.3.1",
13+
"react-native-svg-circular-progress": "^1.0.4"
1214
},
1315
"devDependencies": {
1416
"babel-jest": "22.4.3",
@@ -19,4 +21,4 @@
1921
"jest": {
2022
"preset": "react-native"
2123
}
22-
}
24+
}

‎example/yarn.lock‎

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1541,20 +1541,34 @@ collection-visit@^1.0.0:
15411541
map-visit "^1.0.0"
15421542
object-visit "^1.0.0"
15431543

1544-
color-convert@^1.9.0:
1544+
color-convert@^1.9.0, color-convert@^1.9.1:
15451545
version "1.9.1"
15461546
resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
15471547
dependencies:
15481548
color-name "^1.1.1"
15491549

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

1554+
color-string@^1.5.2:
1555+
version "1.5.2"
1556+
resolved "https://registry.npmjs.org/color-string/-/color-string-1.5.2.tgz#26e45814bc3c9a7cbd6751648a41434514a773a9"
1557+
dependencies:
1558+
color-name "^1.0.0"
1559+
simple-swizzle "^0.2.2"
1560+
15541561
color-support@^1.1.3:
15551562
version "1.1.3"
15561563
resolved "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
15571564

1565+
color@^2.0.1:
1566+
version "2.0.1"
1567+
resolved "https://registry.npmjs.org/color/-/color-2.0.1.tgz#e4ed78a3c4603d0891eba5430b04b86314f4c839"
1568+
dependencies:
1569+
color-convert "^1.9.1"
1570+
color-string "^1.5.2"
1571+
15581572
[email protected], combined-stream@~1.0.5:
15591573
version "1.0.6"
15601574
resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz#723e7df6e801ac5613113a7e445a9b69cb632818"
@@ -2533,6 +2547,10 @@ is-arrayish@^0.2.1:
25332547
version "0.2.1"
25342548
resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
25352549

2550+
is-arrayish@^0.3.1:
2551+
version "0.3.1"
2552+
resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.1.tgz#c2dfc386abaa0c3e33c48db3fe87059e69065efd"
2553+
25362554
is-buffer@^1.1.5:
25372555
version "1.1.6"
25382556
resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3295,7 +3313,7 @@ lodash@^3.5.0:
32953313
version "3.10.1"
32963314
resolved "https://registry.npmjs.org/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"
32973315

3298-
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:
3316+
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:
32993317
version "4.17.10"
33003318
resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
33013319

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

4163+
react-native-svg-circular-progress@^1.0.4:
4164+
version "1.0.4"
4165+
resolved "https://registry.npmjs.org/react-native-svg-circular-progress/-/react-native-svg-circular-progress-1.0.4.tgz#e33ab82ac907d34837a5eb14675154ce72bcefb5"
4166+
4167+
react-native-svg@^6.3.1:
4168+
version "6.3.1"
4169+
resolved "https://registry.npmjs.org/react-native-svg/-/react-native-svg-6.3.1.tgz#06a573f17c59ce953a56fd62e776fd79d632d765"
4170+
dependencies:
4171+
color "^2.0.1"
4172+
lodash "^4.16.6"
4173+
pegjs "^0.10.0"
4174+
41454175
[email protected]:
41464176
version "0.55.3"
41474177
resolved "https://registry.npmjs.org/react-native/-/react-native-0.55.3.tgz#6ff1691bd0645d0480fba16377edb9dce5bd28c4"
@@ -4621,6 +4651,12 @@ simple-plist@^0.2.1:
46214651
bplist-parser "0.1.1"
46224652
plist "2.0.1"
46234653

4654+
simple-swizzle@^0.2.2:
4655+
version "0.2.2"
4656+
resolved "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
4657+
dependencies:
4658+
is-arrayish "^0.3.1"
4659+
46244660
slash@^1.0.0:
46254661
version "1.0.0"
46264662
resolved "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"

0 commit comments

Comments
 (0)