Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Circle progress view for react-native android

npm

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
 npm i --save react-native-android-circles
  • android/build.gradle
...
allprojects {
    ...
    repositories {
      ...
      maven { url "https://jitpack.io" }
    }
    ...

}
  • android/settings.gradle
...
include ':react-native-android-circles'
project(':react-native-android-circles').projectDir = new File(settingsDir, '../node_modules/react-native-android-circles')
  • android/app/build.gradle
...
dependencies {
    ...
    compile project(':react-native-android-circles')
}
  • register module (in MainActivity.java)
import com.kwaak.reacttwo.CirclesPackage;  // <--- import

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

  ......
  private static Activity mActivity = null;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    mReactRootView = new ReactRootView(this);

    mActivity = this;
    mReactInstanceManager = ReactInstanceManager.builder()
      .setApplication(getApplication())
      .setBundleAssetName("index.android.bundle")
      .setJSMainModuleName("index.android")
      .addPackage(new MainReactPackage())
      .addPackage(new CirclesPackage())      // <------- add package
      .setUseDeveloperSupport(BuildConfig.DEBUG)
      .setInitialLifecycleState(LifecycleState.RESUMED)
      .build();

    mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);

    setContentView(mReactRootView);
  }

  ......

}

Usage

var Circles = require('react-native-android-circles');

  <Circles
    style={{width: 250, height: 250}}}
    сontourColor="#f4f4f4"
    rimColor="#f4f4f4"
    barColors={["#15e064", "#17aecc", "#15e064"]}
    value={90}
    maxValue={100}
    сontourSize={280}
    rimWidth={120}
    barWidth={100}
    animated={true}
  />

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()

About

A react native android package to show a circle progress view

Resources

License

Contributors 4

  •  
  •  
  •  
  •  
You can’t perform that action at this time.