circle progress bar for react native android using circle-view
npm install --save react-native-circle-view// file: android/settings.gradle
...
include ':reactcircleview', ':app'
project(':reactcircleview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-circle-view')// file: android/build.gradle
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}// file: android/app/build.gradle
...
dependencies {
...
compile project(':reactcircleview')
}...
import me.nucleartux.circleview.ReactCircleViewPackage; // import
public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {
private ReactInstanceManager mReactInstanceManager;
private ReactRootView mReactRootView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.addPackage(new ReactCircleViewPackage()) // register react circleview package here
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "AwesomeProject", null);
setContentView(mReactRootView);
}
...// file: index.android.js
var React = require('react-native');
var CircleProgressView = require('react-native-circle-view');
var { AppRegistry,StyleSheet,Text,View } = React;
var AwesomeProject = React.createClass({
render: function() {
return (
<View style={styles.container}>
<CircleProgressView
style={styles.progress}
сontourColor="#f4f4f4"
rimColor="#f4f4f4"
barColor={["#15e064", "#17aecc", "#15e064"]}
value={90}
maxValue={100}
сontourSize={280}
rimWidth={120}
barWidth={100}
/>
</View>
);
}
});
var styles = StyleSheet.create({
progress: {
width: 250,
height: 250
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);- Please report any issues or send patches to get fixes in