react-native-circular-progress
Advanced tools
react-native-circular-progress - npm Package Compare versions
Comparing version 0.0.1 to 0.0.2
| { | ||
| "name": "react-native-circular-progress", | ||
| "version": "0.0.1", | ||
| "version": "0.0.2", | ||
| "description": "React Native component for creating animated, circular progress with ReactART", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -5,2 +5,4 @@ # react-native-circular-progress | ||
| ## Example app | ||
|  | ||
@@ -14,6 +16,6 @@ ## Installation | ||
| Import CircularChart or AnimatedCircularChart. | ||
| Import CircularProgress or AnimatedCircularProgress. | ||
| ```js | ||
| import { AnimatedCircularChart } from 'react-native-progress-chart'; | ||
| import { AnimatedCircularProgress } from 'react-native-circular-progress'; | ||
| ``` | ||
@@ -24,3 +26,3 @@ | ||
| ```jsx | ||
| <AnimatedCircularChart | ||
| <AnimatedCircularProgress | ||
| size={120} | ||
@@ -36,3 +38,3 @@ width={15} | ||
| ```jsx | ||
| <AnimatedCircularChart | ||
| <AnimatedCircularProgress | ||
| size={200} | ||
@@ -50,3 +52,3 @@ width={3} | ||
| } | ||
| </AnimatedCircularChart> | ||
| </AnimatedCircularProgress> | ||
| ``` | ||
@@ -63,6 +65,7 @@ | ||
| - **backgroundColor** - color of a background for progress line | ||
| - **rotation** - by default, progress starts from the angle = 90⦝, you can change it by setting value from -360 to 360 | ||
| - **children(fill)** - you can pass function as a child to receive current fill | ||
| ## Working example | ||
| ## Working example app | ||
@@ -79,6 +82,3 @@ You can find working example in the `example` directory of this repository. You can run it by: | ||
| ## Screenshot of the example | ||
|  | ||
| ## Special thanks | ||
| Special thanks to [Chalk+Chisel](http://chalkchisel.com) for creating working environment where people grow. This component was created for one of the projects we're working on. |
@@ -1,3 +0,3 @@ | ||
| import React, { View, PropTypes, ReactNativeART } from 'react-native'; | ||
| import { Surface, Shape } from '../../react-native/Libraries/ART/ReactNativeART'; | ||
| import React, { View, PropTypes } from 'react-native'; | ||
| import { Surface, Shape, Path, Group } from '../../react-native/Libraries/ART/ReactNativeART'; | ||
| import MetricsPath from 'art/metrics/path'; | ||
@@ -9,6 +9,9 @@ | ||
| circlePath(cx, cy, r) { | ||
| return `M ${cx} ${cy}` | ||
| + `m ${r}, 0` | ||
| + `a ${r},${r} 0 1,1 -${r * 2},0` | ||
| + `a ${r},${r} 0 1,1 ${r * 2},0`; | ||
| return Path() | ||
| .moveTo(cx, cx) | ||
| .move(r, 0) | ||
| .arc(r * -2, 0, r, r) | ||
| .arc(r * 2, 0, r, r) | ||
| .close(); | ||
| } | ||
@@ -27,6 +30,5 @@ | ||
| render() { | ||
| const { size, width, tintColor, backgroundColor, style, children } = this.props; | ||
| const { size, width, tintColor, backgroundColor, style, rotation, children } = this.props; | ||
| const circlePath = this.circlePath(size / 2, size / 2, size / 2 - width / 2); | ||
| const pathMetrics = MetricsPath(circlePath); | ||
| const fill = this.extractFill(this.props.fill); | ||
@@ -39,12 +41,14 @@ | ||
| height={size}> | ||
| <Shape d={circlePath} | ||
| stroke={backgroundColor} | ||
| strokeCap="butt" | ||
| strokeDash={[pathMetrics.length, 700]} | ||
| strokeWidth={width} /> | ||
| <Shape d={circlePath} | ||
| stroke={tintColor} | ||
| strokeCap="butt" | ||
| strokeDash={[pathMetrics.length * fill / 100, 700]} | ||
| strokeWidth={width} /> | ||
| <Group rotation={rotation - 90} originX={size/2} originY={size/2}> | ||
| <Shape d={circlePath} | ||
| stroke={backgroundColor} | ||
| strokeCap="butt" | ||
| strokeDash={[(size - width) * Math.PI, 700]} | ||
| strokeWidth={width} /> | ||
| <Shape d={circlePath} | ||
| stroke={tintColor} | ||
| strokeCap="butt" | ||
| strokeDash={[(size - width) * Math.PI * fill / 100, 700]} | ||
| strokeWidth={width} /> | ||
| </Group> | ||
| </Surface> | ||
@@ -66,2 +70,3 @@ { | ||
| backgroundColor: PropTypes.string, | ||
| rotation: PropTypes.number, | ||
| children: PropTypes.func | ||
@@ -72,3 +77,4 @@ } | ||
| tintColor: 'black', | ||
| backgroundColor: '#e4e4e4' | ||
| backgroundColor: '#e4e4e4', | ||
| rotation: 90 | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.07%
367803
- Lines of code
- increased by4.67%
112