https://github.com/nucleartux/react-native-circle-view

circle progress bar for react native android using circle-view
https://github.com/nucleartux/react-native-circle-view

Last synced: about 2 months ago
JSON representation

circle progress bar for react native android using circle-view

• Host: GitHub
• URL: https://github.com/nucleartux/react-native-circle-view
• Owner: nucleartux
• License: mit
• Archived: true
• Created: 2015-09-29T22:45:14.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-06-02T21:23:12.000Z (over 8 years ago)
• Last Synced: 2024-08-16T17:53:27.115Z (5 months ago)
• Language: Java
• Size: 13.7 KB
• Stars: 38
• Watchers: 4
• Forks: 7
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-circle-view ★37 - circle progress for react native android using CircleView (Components / UI)
• awesome-reactnative-ui - react-native-circle-view - view|<ul><li>Last updated : 2 months ago</li><li>Stars : 36</li><li>Open issues : 5</li></ul>|![]()| (Others)
• awesome-react-native - react-native-circle-view ★37 - circle progress for react native android using CircleView (Components / UI)
• awesome-react-native - react-native-circle-view ★37 - circle progress for react native android using CircleView (Components / UI)
• awesome-reactnative-ui - react-native-circle-view - view|<ul><li>Last updated : 2 months ago</li><li>Stars : 36</li><li>Open issues : 5</li></ul>|![]()| (Others)
• awesome-react-native - react-native-circle-view ★37 - circle progress for react native android using CircleView (Components / UI)
• awesome-react-native-ui - react-native-circle-view ★32 - circle progress for react native android using CircleView (Components / UI)

README

        
# react-native-circle-view

circle progress bar for react native android using circle-view

## Installation and How to use

#### Step 1 - NPM Install

```shell

npm install --save react-native-circle-view

```

#### Step 2 - Update Gradle Settings

```gradle

// file: android/settings.gradle

...

include ':reactcircleview', ':app'

project(':reactcircleview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-circle-view')

```

#### Step 3 - Update android Gradle Build

```gradle

// file: android/build.gradle

allprojects {

    repositories {

        ...

        maven { url "https://jitpack.io" }

    }

}

```

#### Step 4 - Update app Gradle Build

```gradle

// file: android/app/build.gradle

...

dependencies {

    ...

    compile project(':reactcircleview')

}

```

#### Step 5 - Register React Package

```java

...

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

    }

...

```

#### Step 6 - Require and use in Javascript

```js

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

            

                

            

        );

    }

});

var styles = StyleSheet.create({

  progress: {

    width: 250,

    height: 250

  },

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#F5FCFF',

  }

});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

```

## Credits

- [Circle-Progress-View](https://github.com/jakob-grabner/Circle-Progress-View)

## Notes

- Please report any issues or send patches to get fixes in