├── settings.gradle ├── src └── main │ ├── AndroidManifest.xml │ └── java │ └── me │ └── nucleartux │ └── circleview │ ├── ReactCircleViewPackage.java │ └── ReactCircleViewManager.java ├── package.json ├── LICENSE ├── index.android.js ├── .npmignore ├── .gitignore └── README.md /settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'reactcircleview' 2 | include ':app' -------------------------------------------------------------------------------- /src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-circle-view", 3 | "version": "1.0.4", 4 | "description": "circle progress for react native android using CircleView", 5 | "main": "index.android.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/nucleartux/react-native-circle-view.git" 12 | }, 13 | "keywords": [ 14 | "react-component", 15 | "react", 16 | "react-native", 17 | "android", 18 | "mobile", 19 | "native" 20 | ], 21 | "peerDependencies": { 22 | "react-native": ">=0.5" 23 | }, 24 | "author": "Adrov Igor", 25 | "license": "MIT", 26 | "bugs": { 27 | "url": "https://github.com/nucleartux/react-native-circle-view/issues" 28 | }, 29 | "homepage": "https://github.com/nucleartux/react-native-circle-view#readme" 30 | } 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Layton Whiteley 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 | -------------------------------------------------------------------------------- /index.android.js: -------------------------------------------------------------------------------- 1 | var { requireNativeComponent, PropTypes } = require('react-native'); 2 | 3 | var iface = { 4 | name: 'CircleView', 5 | propTypes: { 6 | showTextWhileSpinning: PropTypes.bool, 7 | autoTextColor: PropTypes.bool, 8 | autoTextSize: PropTypes.bool, 9 | showUnit: PropTypes.bool, 10 | сontourColor: PropTypes.string, 11 | barColor: PropTypes.array, 12 | rimColor: PropTypes.string, 13 | value: PropTypes.number, 14 | maxValue: PropTypes.number, 15 | valueAnimated: PropTypes.number, 16 | contourSize: PropTypes.number, 17 | barWidth: PropTypes.number, 18 | rimWidth: PropTypes.number, 19 | unitSize: PropTypes.number, 20 | textSize: PropTypes.number, 21 | renderToHardwareTextureAndroid: PropTypes.bool, 22 | onLayout: PropTypes.bool, 23 | importantForAccessibility: PropTypes.string, 24 | accessibilityLabel: PropTypes.string, 25 | accessibilityLiveRegion: PropTypes.string, 26 | accessibilityComponentType: PropTypes.string, 27 | testID: PropTypes.string 28 | } 29 | }; 30 | 31 | module.exports = requireNativeComponent('RCTCircleView', iface); 32 | -------------------------------------------------------------------------------- /src/main/java/me/nucleartux/circleview/ReactCircleViewPackage.java: -------------------------------------------------------------------------------- 1 | package me.nucleartux.circleview; 2 | 3 | import com.facebook.react.ReactPackage; 4 | import com.facebook.react.bridge.JavaScriptModule; 5 | import com.facebook.react.bridge.NativeModule; 6 | import com.facebook.react.bridge.ReactApplicationContext; 7 | import com.facebook.react.uimanager.ViewManager; 8 | 9 | import java.util.Arrays; 10 | import java.util.Collections; 11 | import java.util.List; 12 | 13 | import android.util.Log; 14 | 15 | public class ReactCircleViewPackage implements ReactPackage { 16 | @Override 17 | public List createNativeModules(ReactApplicationContext reactContext) { 18 | return Collections.emptyList(); 19 | } 20 | 21 | @Override 22 | public List> createJSModules() { 23 | return Collections.emptyList(); 24 | } 25 | 26 | @Override 27 | public List createViewManagers(ReactApplicationContext reactContext) { 28 | Log.i("CircleProgressView", "create instance1"); 29 | return Arrays.asList( 30 | new ReactCircleViewManager() 31 | ); 32 | } 33 | } -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # OSX 26 | # 27 | .DS_Store 28 | 29 | # Xcode 30 | # 31 | build/ 32 | *.pbxuser 33 | !default.pbxuser 34 | *.mode1v3 35 | !default.mode1v3 36 | *.mode2v3 37 | !default.mode2v3 38 | *.perspectivev3 39 | !default.perspectivev3 40 | xcuserdata 41 | *.xccheckout 42 | *.moved-aside 43 | DerivedData 44 | *.hmap 45 | *.ipa 46 | *.xcuserstate 47 | project.xcworkspace 48 | android/.gradle/ 49 | 50 | npm-debug.log 51 | *.iml 52 | .idea 53 | local.properties 54 | 55 | # Created by https://www.gitignore.io/api/rade,gradle 56 | 57 | #!! ERROR: rade is undefined. Use list command to see defined gitignore types !!# 58 | 59 | ### Gradle ### 60 | .gradle 61 | gradle 62 | gradlew 63 | gradlew.bat 64 | 65 | # Ignore Gradle GUI config 66 | gradle-app.setting 67 | 68 | tmp 69 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | 29 | # OSX 30 | # 31 | .DS_Store 32 | 33 | # Xcode 34 | # 35 | build/ 36 | *.pbxuser 37 | !default.pbxuser 38 | *.mode1v3 39 | !default.mode1v3 40 | *.mode2v3 41 | !default.mode2v3 42 | *.perspectivev3 43 | !default.perspectivev3 44 | xcuserdata 45 | *.xccheckout 46 | *.moved-aside 47 | DerivedData 48 | *.hmap 49 | *.ipa 50 | *.xcuserstate 51 | project.xcworkspace 52 | android/.gradle/ 53 | # node.js 54 | # 55 | node_modules/ 56 | npm-debug.log 57 | *.iml 58 | .idea 59 | local.properties 60 | 61 | # Created by https://www.gitignore.io/api/rade,gradle 62 | 63 | #!! ERROR: rade is undefined. Use list command to see defined gitignore types !!# 64 | 65 | ### Gradle ### 66 | .gradle 67 | gradle 68 | gradlew 69 | gradlew.bat 70 | 71 | # Ignore Gradle GUI config 72 | gradle-app.setting 73 | 74 | # Avoid ignoring Gradle wrapper jar file (.jar files are usually ignored) 75 | !gradle-wrapper.jar -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-circle-view 2 | circle progress bar for react native android using circle-view 3 | 4 | ## Installation and How to use 5 | 6 | #### Step 1 - NPM Install 7 | 8 | ```shell 9 | npm install --save react-native-circle-view 10 | ``` 11 | #### Step 2 - Update Gradle Settings 12 | 13 | ```gradle 14 | // file: android/settings.gradle 15 | ... 16 | 17 | include ':reactcircleview', ':app' 18 | project(':reactcircleview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-circle-view') 19 | ``` 20 | 21 | #### Step 3 - Update android Gradle Build 22 | 23 | ```gradle 24 | // file: android/build.gradle 25 | allprojects { 26 | repositories { 27 | ... 28 | maven { url "https://jitpack.io" } 29 | } 30 | } 31 | ``` 32 | 33 | #### Step 4 - Update app Gradle Build 34 | 35 | ```gradle 36 | // file: android/app/build.gradle 37 | ... 38 | 39 | dependencies { 40 | ... 41 | compile project(':reactcircleview') 42 | } 43 | ``` 44 | 45 | #### Step 5 - Register React Package 46 | 47 | ```java 48 | ... 49 | import me.nucleartux.circleview.ReactCircleViewPackage; // import 50 | 51 | public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler { 52 | 53 | private ReactInstanceManager mReactInstanceManager; 54 | private ReactRootView mReactRootView; 55 | 56 | @Override 57 | protected void onCreate(Bundle savedInstanceState) { 58 | super.onCreate(savedInstanceState); 59 | mReactRootView = new ReactRootView(this); 60 | mReactInstanceManager = ReactInstanceManager.builder() 61 | .setApplication(getApplication()) 62 | .setBundleAssetName("index.android.bundle") 63 | .setJSMainModuleName("index.android") 64 | .addPackage(new MainReactPackage()) 65 | .addPackage(new ReactCircleViewPackage()) // register react circleview package here 66 | .setUseDeveloperSupport(BuildConfig.DEBUG) 67 | .setInitialLifecycleState(LifecycleState.RESUMED) 68 | .build(); 69 | mReactRootView.startReactApplication(mReactInstanceManager, "AwesomeProject", null); 70 | setContentView(mReactRootView); 71 | } 72 | ... 73 | 74 | ``` 75 | 76 | #### Step 6 - Require and use in Javascript 77 | 78 | ```js 79 | // file: index.android.js 80 | 81 | var React = require('react-native'); 82 | var CircleProgressView = require('react-native-circle-view'); 83 | var { AppRegistry,StyleSheet,Text,View } = React; 84 | 85 | var AwesomeProject = React.createClass({ 86 | render: function() { 87 | return ( 88 | 89 | 100 | 101 | ); 102 | } 103 | }); 104 | 105 | var styles = StyleSheet.create({ 106 | progress: { 107 | width: 250, 108 | height: 250 109 | }, 110 | container: { 111 | flex: 1, 112 | justifyContent: 'center', 113 | alignItems: 'center', 114 | backgroundColor: '#F5FCFF', 115 | } 116 | }); 117 | 118 | AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject); 119 | ``` 120 | 121 | ## Credits 122 | 123 | - [Circle-Progress-View](https://github.com/jakob-grabner/Circle-Progress-View) 124 | 125 | ## Notes 126 | - Please report any issues or send patches to get fixes in 127 | -------------------------------------------------------------------------------- /src/main/java/me/nucleartux/circleview/ReactCircleViewManager.java: -------------------------------------------------------------------------------- 1 | package me.nucleartux.circleview; 2 | 3 | import android.graphics.Color; 4 | import android.util.Log; 5 | 6 | import com.facebook.react.bridge.ReactApplicationContext; 7 | import com.facebook.react.uimanager.BaseViewPropertyApplicator; 8 | import com.facebook.react.uimanager.CatalystStylesDiffMap; 9 | import com.facebook.react.uimanager.SimpleViewManager; 10 | import com.facebook.react.uimanager.ThemedReactContext; 11 | import com.facebook.react.uimanager.UIProp; 12 | import com.facebook.react.uimanager.ViewManager; 13 | import com.facebook.react.views.text.ReactTextShadowNode; 14 | import at.grabner.circleprogress.CircleProgressView; 15 | 16 | import java.util.Arrays; 17 | import java.util.List; 18 | 19 | public class ReactCircleViewManager extends SimpleViewManager { 20 | public static final String REACT_CLASS = "RCTCircleView"; 21 | 22 | // @UIProp(UIProp.Type.STRING) 23 | // public static final String PROP_ICON = "text"; 24 | @UIProp(UIProp.Type.BOOLEAN) 25 | public static final String PROP_SHOW_TEXT_WHILE_SPINNING = "showTextWhileSpinning"; 26 | @UIProp(UIProp.Type.BOOLEAN) 27 | public static final String PROP_AUTO_TEXT_SIZE = "autoTextSize"; 28 | @UIProp(UIProp.Type.BOOLEAN) 29 | public static final String PROP_AUTO_TEXT_COLOR = "autoTextColor"; 30 | @UIProp(UIProp.Type.BOOLEAN) 31 | public static final String PROP_SHOW_UNIT = "showUnit"; 32 | @UIProp(UIProp.Type.NUMBER) 33 | public static final String PROP_TEXT_SIZE = "textSize"; 34 | @UIProp(UIProp.Type.NUMBER) 35 | public static final String PROP_UNIT_SIZE = "unitSize"; 36 | @UIProp(UIProp.Type.NUMBER) 37 | public static final String PROP_CONTOUR_SIZE = "contourSize"; 38 | @UIProp(UIProp.Type.NUMBER) 39 | public static final String PROP_RIM_WIDTH = "rimWidth"; 40 | @UIProp(UIProp.Type.NUMBER) 41 | public static final String PROP_BAR_WIDTH = "barWidth"; 42 | @UIProp(UIProp.Type.NUMBER) 43 | public static final String PROP_VALUE = "value"; 44 | @UIProp(UIProp.Type.NUMBER) 45 | public static final String PROP_MAX_VALUE = "maxValue"; 46 | @UIProp(UIProp.Type.NUMBER) 47 | public static final String PROP_VALUE_ANIMATED = "valueAnimated"; 48 | @UIProp(UIProp.Type.STRING) 49 | public static final String PROP_СONTOUR_COLOR = "сontourColor"; 50 | @UIProp(UIProp.Type.STRING) 51 | public static final String PROP_RIM_COLOR = "rimColor"; 52 | @UIProp(UIProp.Type.ARRAY) 53 | public static final String PROP_BAR_COLOR = "barColor"; 54 | // @UIProp(UIProp.Type.STRING) 55 | // public static final String PROP_SIZE = "fontSize"; 56 | 57 | @Override 58 | public String getName() { 59 | return REACT_CLASS; 60 | } 61 | 62 | @Override 63 | public CircleProgressView createViewInstance(ThemedReactContext context) { 64 | Log.i("CircleProgressView", "create instance"); 65 | 66 | return new CircleProgressView(context, null); 67 | } 68 | 69 | @Override 70 | public void updateView(final CircleProgressView view, 71 | final CatalystStylesDiffMap props) { 72 | 73 | BaseViewPropertyApplicator.applyCommonViewProperties(view, props); 74 | 75 | if (props.hasKey(PROP_SHOW_TEXT_WHILE_SPINNING)) { 76 | view.setShowTextWhileSpinning(props.getBoolean(PROP_SHOW_TEXT_WHILE_SPINNING, false)); 77 | } 78 | if (props.hasKey(PROP_AUTO_TEXT_SIZE)) { 79 | view.setAutoTextSize(props.getBoolean(PROP_AUTO_TEXT_SIZE, false)); 80 | } 81 | if (props.hasKey(PROP_AUTO_TEXT_COLOR)) { 82 | view.setAutoTextColor(props.getBoolean(PROP_AUTO_TEXT_COLOR, false)); 83 | } 84 | if (props.hasKey(PROP_SHOW_UNIT)) { 85 | view.setShowUnit(props.getBoolean(PROP_SHOW_UNIT, true)); 86 | } 87 | if (props.hasKey(PROP_TEXT_SIZE)) { 88 | view.setTextSize(props.getInt(PROP_TEXT_SIZE, 10)); 89 | } 90 | if (props.hasKey(PROP_UNIT_SIZE)) { 91 | view.setUnitSize(props.getInt(PROP_UNIT_SIZE, 10)); 92 | } 93 | if (props.hasKey(PROP_CONTOUR_SIZE)) { 94 | view.setContourSize(props.getFloat(PROP_CONTOUR_SIZE, 1)); 95 | } 96 | if (props.hasKey(PROP_BAR_WIDTH)) { 97 | view.setBarWidth(props.getInt(PROP_BAR_WIDTH, 1)); 98 | } 99 | if (props.hasKey(PROP_RIM_WIDTH)) { 100 | view.setRimWidth(props.getInt(PROP_RIM_WIDTH, 1)); 101 | } 102 | if (props.hasKey(PROP_MAX_VALUE)) { 103 | view.setMaxValue(props.getInt(PROP_MAX_VALUE, 100)); 104 | } 105 | if (props.hasKey(PROP_VALUE)) { 106 | view.setValue(props.getInt(PROP_VALUE, 0)); 107 | } 108 | if (props.hasKey(PROP_VALUE_ANIMATED)) { 109 | view.setValueAnimated(props.getInt(PROP_VALUE_ANIMATED, 42)); 110 | } 111 | if (props.hasKey(PROP_СONTOUR_COLOR)) { 112 | view.setContourColor(Color.parseColor(props.getString(PROP_СONTOUR_COLOR))); 113 | } 114 | if (props.hasKey(PROP_RIM_COLOR)) { 115 | view.setRimColor(Color.parseColor(props.getString(PROP_RIM_COLOR))); 116 | } 117 | if (props.hasKey(PROP_BAR_COLOR)) { 118 | int size = props.getArray(PROP_BAR_COLOR).size(); 119 | int[] colors = new int[size]; 120 | for (int i = 0; i < size; i++) { 121 | colors[i] = Color.parseColor(props.getArray(PROP_BAR_COLOR).getString(i)); 122 | } 123 | view.setBarColor(colors); 124 | } 125 | 126 | Log.i("CircleProgressView", "updateview finish"); 127 | super.updateView(view, props); 128 | } 129 | } --------------------------------------------------------------------------------