├── .idea
├── .name
├── React-Native-CircularProgress.iml
├── inspectionProfiles
│ ├── Project_Default.xml
│ └── profiles_settings.xml
├── jsLibraryMappings.xml
├── libraries
│ └── React_Native_CircularProgress_node_modules.xml
├── misc.xml
├── modules.xml
├── vcs.xml
└── workspace.xml
├── .npmignore
├── LICENSE
├── README.md
├── demo.gif
├── index.js
└── package.json
/.idea/.name:
--------------------------------------------------------------------------------
1 | React-Native-CircularProgress
--------------------------------------------------------------------------------
/.idea/React-Native-CircularProgress.iml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/.idea/inspectionProfiles/Project_Default.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/.idea/inspectionProfiles/profiles_settings.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/.idea/jsLibraryMappings.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/.idea/libraries/React_Native_CircularProgress_node_modules.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
44 |
45 |
46 |
47 |
48 |
49 |
56 |
57 |
58 |
59 | true
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 | true
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 | 1451879081153
171 |
172 | 1451879081153
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
215 |
216 |
217 |
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
232 |
233 |
234 |
235 |
236 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | workspace.xml
3 | dataSources.ids
4 | datasources.xml
5 | node_modules
6 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 andy9775
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## React-Native-CircularProgress
2 | A pure React Native Component for circular progress bars for iOS.
3 |
4 | ## Demo
5 |
6 |
7 | 
8 |
9 | ## Installation
10 | 1. Install library `npm i --save react-native-progress-circular`
11 | 2. Include in your project `var CircularProgressDisplay = require('react-native-progress-circular');`
12 |
13 | ## Issues
14 | As of react-native 0.17:
15 | Due to react-native not yet supporting individual corner radius properties on android, support is lacking.
16 |
17 | ## Basic Usage
18 |
19 | ```javascript
20 |
21 | 'use strict';
22 | var React = require('react-native');
23 | var CircularProgressDisplay = require('react-native-progress-circular');
24 | var {View, Text} = React;
25 |
26 | module.exports = React.createClass({
27 | getInitialState(){
28 |
29 | return { progress:0};
30 | },
31 | componentDidMount(){
32 | // automatically increment the progress
33 | var time = 150;
34 | var count = 0;
35 | setInterval(() => {
36 | if (++count < 15){
37 | return;
38 | }
39 | var progress = this.state.progress + Math.round((Math.random() * 4));
40 | if (progress >100) {
41 | progress = 0;
42 | count = 0;
43 | }
44 | this.setState({progress: progress});
45 | }, time);
46 | },
47 | render() {
48 | var progress = this.state.progress;
49 | // displayed inside of the component
50 | var innerDisplay = (
51 |
53 | {progress + "%"}
54 |
55 | );
56 |
57 | return (
58 |
59 |
63 |
64 | );
65 |
66 | }
67 | });
68 | ```
69 |
70 | ## Hollow Progress Bar Props
71 | - **`size`** _(Number:ReactComponent)_ - The size of the component. The resulting components height and width
72 | are equal
73 | - **`progressBarWidth`** _(Integer)_ - The width of the circular progress bar.
74 | - **`progressBarColor`** _(String)_ - The color of the progress bar.
75 | - **`backgroundColor`** _(String)_ - The color of the center of the component and the zero progress area.
76 | - **`outlineWidth`** _(Integer)_ - If this prop is present, the resulting component has a round border of this width.
77 | - **`outlineColor`** _(String)_ - The color of the border outlining the component.
78 | - **`rotate`** _(Integer)_ - The current progress to track specified in degrees. E.G. 270. Can take a value between 0
79 | and 360, inclusive.
80 | - **`innerComponent`** _(ReactComponent)_ - A component to display inside of the round hollow progress bar. Can be used
81 | display an inner progress bar, or track the current progress with a `` component.
82 |
83 | ## Filled Progress Bar Props
84 | - **`size`** _(Number:ReactComponent)_ - The size of the component. The resulting components height and width
85 | are equal
86 | - **`rotate`** _(Integer)_ - The current progress to track specified in degrees. E.G. 270. Can take a value between 0
87 | and 360, inclusive.
88 | - **`backgroundColor`** _(String)_ - The color of the center of the component and the zero progress area. This is the color
89 | of the component when no progress has been made.
90 | - **`progressBarColor`** _(String)_ - The color of the progress bar. This is the color when progress has been made.
91 |
92 | ---
93 |
94 | **MIT Licensed**
95 |
--------------------------------------------------------------------------------
/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andy9775/React-Native-CircularProgress/345231b2cab6462a3a01d2e4b9dda397600c8bb9/demo.gif
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Coded by: Andy (github.com/andy9775)
3 | */
4 | 'use strict';
5 |
6 | import React, { Component } from 'react';
7 | import {View} from 'react-native';
8 | import PropTypes from 'prop-types';
9 |
10 | class Filled extends Component {
11 |
12 | render() {
13 | var size = this.props.size,
14 | componentColor = this.props.componentColor,
15 | progressBarColor = this.props.progressBarColor,
16 | leftProgressBarRotate = 0, rightProgressBarRotate = 0,
17 | rotate = this.props.rotate >= 360 ? 360 : this.props.rotate,
18 | rightProgressBarColor = this.props.progressBarColor;
19 |
20 | if (rotate < 180) {
21 | rightProgressBarRotate = rotate;
22 | leftProgressBarRotate = 0;
23 | } else {
24 | rightProgressBarRotate = 0;
25 | leftProgressBarRotate = rotate - 180;
26 | rightProgressBarColor = progressBarColor;
27 | }
28 |
29 |
30 | var leftProgressDisplay = (
31 |
34 |
36 |
38 |
39 | );
40 |
41 |
42 | var rightProgressDisplay = (
43 |
45 |
47 |
48 | {rotate < 180 ? () :
50 | (
53 | )}
54 | );
55 |
56 | return (
57 |
58 | {leftProgressDisplay}
59 | {rightProgressDisplay}
60 |
61 | );
62 | }
63 | }
64 |
65 | Filled.propTypes = {
66 | size: PropTypes.number,
67 | rotate: PropTypes.number,
68 | componentColor: PropTypes.string,
69 | progressColor: PropTypes.string
70 | }
71 |
72 | class Hollow extends Component {
73 |
74 | render(){
75 | var rotateValue = this.props.rotate >= 360 ? 360 : this.props.rotate;
76 |
77 | var size = this.props.size,
78 | progressBarWidth = this.props.progressBarWidth,
79 | backgroundColor = this.props.backgroundColor,
80 | progressBarColor = this.props.progressBarColor,
81 | outlineWidth = this.props.outlineWidth || 0,
82 | outlineColor = this.props.outlineColor || 'transparent',
83 | leftRotate = 0, rightRotate = 0;
84 |
85 | if (rotateValue < 180) {
86 | rightRotate = rotateValue;
87 | } else {
88 | leftRotate = rotateValue - 180;
89 | }
90 | var leftProgressBar = (
91 |
95 |
100 |
101 |
103 |
104 | );
105 |
106 | var rightProgressBar = (
107 |
111 |
112 |
113 |
118 |
119 | );
120 |
121 | var leftProgressOverlay = (
122 |
126 |
127 |
129 |
130 | );
131 |
132 | var rightProgressOverlay = (
133 |
137 |
138 |
140 |
141 | );
142 |
143 | var innerView = this.props.innerComponent ? (
144 |
149 | {this.props.innerComponent}
150 |
151 | ) : ();
152 |
153 | var views;
154 | if (rotateValue < 180) {
155 | views = [leftProgressBar, leftProgressOverlay, rightProgressBar, rightProgressOverlay];
156 | } else {
157 | views = [leftProgressBar, leftProgressOverlay, rightProgressBar];
158 | }
159 | return (
160 |
163 | {views}
164 | {innerView}
165 |
166 | );
167 | }
168 | }
169 |
170 | Hollow.propTypes = {
171 | size: PropTypes.number,
172 | progressBarWidth: PropTypes.number,
173 | backgroundColor: PropTypes.string,
174 | progressBarColor: PropTypes.string,
175 | outlineWidth: PropTypes.number,
176 | outlineColor: PropTypes.string,
177 | rotate: PropTypes.number,
178 | innerComponent: PropTypes.element
179 | }
180 |
181 | module.exports = {Hollow, Filled};
182 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-native-progress-circular",
3 | "version": "0.2.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"No test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/andy9775/React-Native-CircularProgress.git"
12 | },
13 | "keywords": [
14 | "react-native-component",
15 | "react-component",
16 | "react-native",
17 | "ios",
18 | "progress bar"
19 | ],
20 | "author": "Andy Chrzaszcz",
21 | "license": "MIT",
22 | "bugs": {
23 | "url": "https://github.com/andy9775/React-Native-CircularProgress/issues"
24 | },
25 | "homepage": "https://github.com/andy9775/React-Native-CircularProgress#readme"
26 | }
27 |
--------------------------------------------------------------------------------
