Skip to content

Commit 269cd3d

Browse files
kwaakkwaak
committed
Inital setup
1 parent b35a67d commit 269cd3d

File tree

9 files changed

+356
-0
lines changed

9 files changed

+356
-0
lines changed

‎README.md‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
# Circle progress view for react-native android
2+
3+
A react native android module to show a circle progress view based on Circle-Progress-View (https://github.com/jakob-grabner/Circle-Progress-View).
4+
5+
## Setup
6+
7+
* install module
8+
9+
```bash
10+
npm i --save react-native-android-circles
11+
```
12+
13+
* `android/build.gradle`
14+
15+
```gradle
16+
...
17+
allprojects {
18+
...
19+
repositories {
20+
...
21+
maven { url "https://jitpack.io" }
22+
}
23+
...
24+
25+
}
26+
```
27+
28+
* `android/settings.gradle`
29+
30+
```gradle
31+
...
32+
include ':react-native-android-circles'
33+
project(':react-native-android-circles').projectDir = new File(settingsDir, '../node_modules/react-native-android-circles')
34+
```
35+
36+
* `android/app/build.gradle`
37+
38+
```gradle
39+
...
40+
dependencies {
41+
...
42+
compile project(':react-native-android-circles')
43+
}
44+
```
45+
46+
* register module (in MainActivity.java)
47+
48+
```java
49+
import com.kwaak.react.CirclesPackage; // <--- import
50+
51+
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
52+
53+
......
54+
private static Activity mActivity = null;
55+
56+
@Override
57+
protected void onCreate(Bundle savedInstanceState) {
58+
super.onCreate(savedInstanceState);
59+
mReactRootView = new ReactRootView(this);
60+
61+
mActivity = this;
62+
mReactInstanceManager = ReactInstanceManager.builder()
63+
.setApplication(getApplication())
64+
.setBundleAssetName("index.android.bundle")
65+
.setJSMainModuleName("index.android")
66+
.addPackage(new MainReactPackage())
67+
.addPackage(new CirclesPackage()) // <------- add package
68+
.setUseDeveloperSupport(BuildConfig.DEBUG)
69+
.setInitialLifecycleState(LifecycleState.RESUMED)
70+
.build();
71+
72+
mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);
73+
74+
setContentView(mReactRootView);
75+
}
76+
77+
......
78+
79+
}
80+
```
81+
82+
## Usage
83+
84+
```js
85+
var Circle = require('react-native-android-circles');
86+
87+
<Circle
88+
style={{width: 250, height: 250}}}
89+
сontourColor="#f4f4f4"
90+
rimColor="#f4f4f4"
91+
barColor={["#15e064", "#17aecc", "#15e064"]}
92+
value={90}
93+
maxValue={100}
94+
сontourSize={280}
95+
rimWidth={120}
96+
barWidth={100}
97+
/>
98+
99+
```

‎build.gradle‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
buildscript {
2+
repositories {
3+
jcenter()
4+
}
5+
6+
dependencies {
7+
classpath 'com.android.tools.build:gradle:1.1.3'
8+
}
9+
}
10+
11+
apply plugin: 'com.android.library'
12+
13+
android {
14+
compileSdkVersion 23
15+
buildToolsVersion "23.0.1"
16+
17+
defaultConfig {
18+
minSdkVersion 16
19+
targetSdkVersion 22
20+
versionCode 1
21+
versionName "1.0"
22+
}
23+
lintOptions {
24+
abortOnError false
25+
}
26+
}
27+
28+
repositories {
29+
mavenCentral()
30+
maven { url "https://jitpack.io" }
31+
}
32+
33+
dependencies {
34+
compile "com.facebook.react:react-native:0.15.+"
35+
compile 'com.github.jakob-grabner:Circle-Progress-View:1.2.8'
36+
}

‎index.android.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
var { requireNativeComponent, PropTypes } = require('react-native');
2+
3+
var iface = {
4+
name: 'BlurryOverlay',
5+
propTypes: {
6+
radius: PropTypes.number,
7+
sampling: PropTypes.number,
8+
color: PropTypes.string,
9+
},
10+
};
11+
12+
module.exports = requireNativeComponent('RCTBlurryOverlay', iface);

‎package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "react-native-android-circles",
3+
"description": "A react native android package to show a circle progress view.",
4+
"version": "0.1.0",
5+
"main": "index.android.js",
6+
"author": {
7+
"name": "Kwaak"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git@github.com:kwaak/react-native-android-circles.git"
12+
},
13+
"license": "MIT",
14+
"peerDependencies": {
15+
"react-native": ">= 0.15.0"
16+
},
17+
"keywords": [
18+
"react-component",
19+
"react-native",
20+
"android"
21+
]
22+
}

‎src/main/AndroidManifest.xml‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
3+
package="com.kwaak.react" >
4+
</manifest>

‎src/main/java/com/kwaak/react/CirclesManager.java‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
package com.kwaak.react;
2+
3+
import android.app.Activity;
4+
import com.facebook.react.uimanager.ReactProp;
5+
import com.facebook.react.uimanager.SimpleViewManager;
6+
import com.facebook.react.uimanager.ThemedReactContext;
7+
import at.grabner.circleprogress.CircleProgressView;
8+
9+
public class CirclesManager extends SimpleViewManager<CirclesView> {
10+
11+
12+
public CirclesManager() {
13+
}
14+
15+
public static final String REACT_CLASS = "RCTCircle";
16+
17+
@Override
18+
public String getName() {
19+
return REACT_CLASS;
20+
}
21+
22+
@Override
23+
public CirclesView createViewInstance(ThemedReactContext context) {
24+
//CirclesView c = new CirclesView(context);
25+
return new CircleProgressView(context, null);
26+
27+
return c;
28+
}
29+
30+
/*@ReactProp(name = "radius", defaultInt = 0)
31+
public void setRadius(CirclesView view, int radius) {
32+
view.setRadiusAndUpdate(radius);
33+
}
34+
35+
@ReactProp(name = "sampling", defaultInt = 0)
36+
public void setSampling(CirclesView view, int sampling) {
37+
view.setSamplingAndUpdate(sampling);
38+
}
39+
40+
@ReactProp(name = "color")
41+
public void setColor(CirclesView view, String color) {
42+
view.setColorAndUpdate(color);
43+
}*/
44+
}
45+

‎src/main/java/com/kwaak/react/CirclesModule.java‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
package com.kwaak.react;
2+
3+
import android.widget.Toast;
4+
5+
import com.facebook.react.bridge.NativeModule;
6+
import com.facebook.react.bridge.ReactApplicationContext;
7+
import com.facebook.react.bridge.ReactContext;
8+
import com.facebook.react.bridge.ReactContextBaseJavaModule;
9+
import com.facebook.react.bridge.ReactMethod;
10+
11+
import java.util.Map;
12+
13+
public class CirclesModule extends ReactContextBaseJavaModule {
14+
15+
private static final String DURATION_SHORT_KEY = "SHORT";
16+
private static final String DURATION_LONG_KEY = "LONG";
17+
18+
public CirclesModule(ReactApplicationContext reactContext) {
19+
super(reactContext);
20+
}
21+
}

‎src/main/java/com/kwaak/react/CirclesPackage.java‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
package com.kwaak.react;
2+
3+
import android.app.Activity;
4+
5+
import com.facebook.react.ReactPackage;
6+
import com.facebook.react.bridge.JavaScriptModule;
7+
import com.facebook.react.bridge.NativeModule;
8+
import com.facebook.react.bridge.ReactApplicationContext;
9+
import com.facebook.react.uimanager.ViewManager;
10+
11+
import java.util.ArrayList;
12+
import java.util.Arrays;
13+
import java.util.Collections;
14+
import java.util.List;
15+
16+
public class CirclesPackage implements ReactPackage {
17+
private Activity mActivity = null;
18+
19+
public CirclesPackage(Activity activity){
20+
mActivity = activity;
21+
}
22+
23+
@Override
24+
public List<NativeModule> createNativeModules(ReactApplicationContext reactApplicationContext) {
25+
List<NativeModule> modules = new ArrayList<>();
26+
27+
modules.add(new CirclesModule(reactContext));
28+
29+
return modules;
30+
}
31+
32+
@Override
33+
public List<Class<? extends JavaScriptModule>> createJSModules() {
34+
return Collections.emptyList();
35+
}
36+
37+
@Override
38+
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
39+
return Arrays.<ViewManager>asList(
40+
new CirclesManager(mActivity)
41+
);
42+
}
43+
}

‎src/main/java/com/kwaak/react/CirclesView.java‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
package com.kwaak.react;
2+
3+
import android.app.Activity;
4+
import android.content.Context;
5+
import android.graphics.Color;
6+
import android.util.Log;
7+
import android.view.ViewGroup;
8+
import android.widget.ImageView;
9+
10+
import jp.wasabeef.blurry.Blurry;
11+
12+
public class CirclesView {
13+
14+
private final String LOGTAG = "CirclesView";
15+
16+
private int radius;
17+
private int sampling;
18+
private String color;
19+
private Context context;
20+
21+
public static final int defaultRadius = 10;
22+
public static final int defaultSampling = 8;
23+
24+
public CirclesView(final Context context) {
25+
super(context);
26+
27+
this.context = context;
28+
29+
Render(activity);
30+
}
31+
32+
private void Render(Activity activity) {
33+
Log.i(LOGTAG, String.format("activity %s", activity));
34+
35+
final ViewGroup viewGroup = (ViewGroup) ((ViewGroup) activity.findViewById(android.R.id.content)).getChildAt(0);
36+
37+
Log.i(LOGTAG, String.format("viewGroup %s", viewGroup));
38+
Log.i(LOGTAG, String.format("this %s", this));
39+
40+
Blurry.Composer c = Blurry.with(activity)
41+
.radius(this.radius)
42+
.sampling(this.sampling);
43+
44+
if(this.color != null)
45+
c = c.color(Color.parseColor(this.color));
46+
47+
//c.async()
48+
c.capture(viewGroup)
49+
.into(this);
50+
}
51+
52+
public void setRadiusAndUpdate(int radius) {
53+
setRadius(radius);
54+
Render(activity);
55+
}
56+
57+
private void setRadius(int radius) {
58+
this.radius = radius;
59+
}
60+
61+
public void setSamplingAndUpdate(int sampling) {
62+
setSampling(sampling);
63+
Render(activity);
64+
}
65+
66+
private void setSampling(int sampling) {
67+
this.sampling = sampling;
68+
}
69+
70+
public void setColorAndUpdate(String color) {
71+
this.color = color;
72+
Render(activity);
73+
}
74+
}

0 commit comments

Comments
 (0)