Circle progress view for react-native android

A react native android module to show a circle progress view based on [Circle-Progress-View] (https://github.com/jakob-grabner/Circle-Progress-View).

Setup

• install module

1 npm i --save react-native-android-circles

• android/build.gradle

1...
2allprojects {
3    ...
4    repositories {
5      ...
6      maven { url "https://jitpack.io" }
7    }
8    ...
9
10}

• android/settings.gradle

1...
2include ':react-native-android-circles'
3project(':react-native-android-circles').projectDir = new File(settingsDir, '../node_modules/react-native-android-circles')

• android/app/build.gradle

1...
2dependencies {
3    ...
4    compile project(':react-native-android-circles')
5}

• register module (in MainActivity.java)

1import com.kwaak.reacttwo.CirclesPackage;  // <--- import
2
3public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
4
5  ......
6  private static Activity mActivity = null;
7
8  @Override
9  protected void onCreate(Bundle savedInstanceState) {
10    super.onCreate(savedInstanceState);
11    mReactRootView = new ReactRootView(this);
12
13    mActivity = this;
14    mReactInstanceManager = ReactInstanceManager.builder()
15      .setApplication(getApplication())
16      .setBundleAssetName("index.android.bundle")
17      .setJSMainModuleName("index.android")
18      .addPackage(new MainReactPackage())
19      .addPackage(new CirclesPackage())      // <------- add package
20      .setUseDeveloperSupport(BuildConfig.DEBUG)
21      .setInitialLifecycleState(LifecycleState.RESUMED)
22      .build();
23
24    mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);
25
26    setContentView(mReactRootView);
27  }
28
29  ......
30
31}

Usage

1var Circles = require('react-native-android-circles');
2
3  <Circles
4    style={{width: 250, height: 250}}}
5    сontourColor="#f4f4f4"
6    rimColor="#f4f4f4"
7    barColors={["#15e064", "#17aecc", "#15e064"]}
8    value={90}
9    maxValue={100}
10    сontourSize={280}
11    rimWidth={120}
12    barWidth={100}
13    animated={true}
14  />
15

Available props & methods

Props

  barColors: PropTypes.array,
  barWidth: PropTypes.number,
  blockCount: PropTypes.number,
  blockScale: PropTypes.number,
  contourColor: PropTypes.string,
  textColor: PropTypes.string,
  contourSize: PropTypes.number,
  delayMillis: PropTypes.number,
  fillColor: PropTypes.string,
  value: PropTypes.number,
  maxValue: PropTypes.number,
  rimColor: PropTypes.string,
  rimWidth: PropTypes.number,
  spinSpeed: PropTypes.number,
  startAngle: PropTypes.number,
  textScale: PropTypes.number,
  textSize: PropTypes.number,
  unit: PropTypes.string,
  unitVisible: PropTypes.bool,
  unitColor: PropTypes.string,
  unitScale: PropTypes.number,
  unitSize: PropTypes.number,
  animated:  PropTypes.bool,
  text: PropTypes.string,
  textMode: PropTypes.oneOf(['text', 'value', 'percent']),

Methods

  .spin()
  .stopSpinning()