https://github.com/DispatcherInc/react-native-seekbar-android

A React Native wrapper Android's SeekBar.
https://github.com/DispatcherInc/react-native-seekbar-android

Last synced: 5 days ago
JSON representation

A React Native wrapper Android's SeekBar.

• Host: GitHub
• URL: https://github.com/DispatcherInc/react-native-seekbar-android
• Owner: DispatcherInc
• Created: 2015-11-07T03:11:37.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2015-11-07T03:35:20.000Z (about 9 years ago)
• Last Synced: 2024-08-16T17:53:50.326Z (4 months ago)
• Language: Java
• Size: 0 Bytes
• Stars: 11
• Watchers: 4
• Forks: 3
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-native - react-native-seekbar-android ★10 - A React Native wrapper Android's SeekBar (Components / UI)
• awesome-reactnative-ui - react-native-seekbar-android
• awesome-react-native - react-native-seekbar-android ★10 - A React Native wrapper Android's SeekBar (Components / UI)
• awesome-reactnative-ui - react-native-seekbar-android
• awesome-react-native - react-native-seekbar-android ★10 - A React Native wrapper Android's SeekBar (Components / UI)
• awesome-react-native-ui - react-native-seekbar-android ★10 - A React Native wrapper Android's SeekBar (Components / UI)
• awesome-react-native - react-native-seekbar-android ★10 - A React Native wrapper Android's SeekBar (Components / UI)

README

        
# react-native-seekbar-android

A React Native wrapper Android's SeekBar.

## Example

```js

var SeekBarAndroid = require('react-native-seekbar-android');

var SeekBarExample = React.createClass({

  getInitialState: function() {

    return {

      value: 17,

      max: 200,

      initialValue: 20

    };

  },  

  render: function() {

    return (

          

            

              {this.state.value}

               { this.setState({value: val}); }} />              

                

    );

  }

});

```

## Install

### Step 1 - Install the npm package

```sh

$ npm install react-native-seekbar-android --save

```

### Step 2 - Update Gradle Settings

```gradle

// file: android/settings.gradle

...

include ':react-native-seekbar-android', ':app'

project(':react-native-seekbar-android').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-seekbar-android')

```

### Step 3 - Update app Gradle Build

```gradle

// file: android/app/build.gradle

...

dependencies {

    ...

    compile project(':react-native-seekbar-android')

}

```

### Step 4 - Register React Package

```java

...

import com.dispatcher.rnseekbar.RNSeekBarPackage; // <-- import

public class MainActivity extends FragmentActivity 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 RNSeekBarPackage()) // <-- Register package here

                .setUseDeveloperSupport(BuildConfig.DEBUG)

                .setInitialLifecycleState(LifecycleState.RESUMED)

                .build();

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

        setContentView(mReactRootView);

    }

...