## React Native Button component

React Native Button component for iOS & Android.

![Example](https://jacklam718.github.io/react-native-button-component/build/video/circle-button-demo.gif)
![Example](https://jacklam718.github.io/react-native-button-component/build/video/button-demo.gif)


## Provided Components
This library provided the following button components:
```
ButtonComponent
CircleButton
RoundButton
RectangleButton
```

#### Note:
CircleButton, RoundButton, RectangleButton is on top of ButtonComponent.
So I recommend you should use CircleButton, RoundButton, RectangleButton, rather than directly use ButtonComponent because those button components may have preset some options.


## Installation
1. `npm install --save react-native-button-component`
2. `react-native link` or `rnpm link`

##### Note
If you didn't see this item `libART.a` under the `Link Binary With Libraries` or you get this error `No component found for view with name "ARTSurfaceView"`
Please open Xcode project and add `libART.a` under `Build Phases -> Link Binary With Libraries`

The detailed steps:
1. Open Xcode project
2. Build Phases -> Link Binary With Libraries
3. Click the `+` button and Click `Add Other...`
4. Open with `node_modules/react-native/Libraries/ART/ART.xcodeproj`


## Third Party React Native Components
##### This component used these components:
[react-native-circular-progress](https://github.com/jacklam718/react-native-circular-progress)

[react-native-linear-gradient](https://github.com/react-native-community/react-native-linear-gradient)

[react-native-spinkit](https://github.com/maxs15/react-native-spinkit)

## Some Simple Examples
<a href="https://github.com/jacklam718/react-native-button-component/blob/master/example/ButtonComponentExample/js/containers/OneStateButtons.js" target="_blank">
  One State Button
</a>
<br>
<a href="https://github.com/jacklam718/react-native-button-component/blob/master/example/ButtonComponentExample/js/containers/MultipleStatesButtons.js" target="_blank">
  Multiple States Button
</a>
<br>
<a href="https://github.com/jacklam718/react-native-button-component/blob/master/example/ButtonComponentExample/js/containers/SpinnerButtons.js" target="_blank">
  Spinner Button
</a>
<br>
<a href="https://github.com/jacklam718/react-native-button-component/blob/master/example/ButtonComponentExample/js/containers/ProgressButtons.js" target="_blank">
  Progress Button
</a>
<br>
<a href="https://github.com/jacklam718/react-native-button-component/blob/master/example/ButtonComponentExample/js/containers/CircleButtons.js" target="_blank">
  Circle Button
</a>

## Documents
<a href="https://github.com/jacklam718/react-native-button-component/blob/master/docs/props-and-button-state-attributes.md" target="_blank">
  Props & Button Options
</a>
<br />
<a href="https://github.com/jacklam718/react-native-button-component/blob/master/docs/progress-button-state-attributes.md" target="_blank">
  Options for Progress Button
</a>
<br />
<a href="https://github.com/jacklam718/react-native-button-component/blob/master/docs/spinner-button-state-attributes.md" target="_blank">
  Options for Spinner Button
</a>
<br />
<a href="https://github.com/jacklam718/react-native-button-component/blob/master/docs/circle-button-attributes.md" target="_blank">
  Options for Circle Button
</a>

## Usage - Basic

#### Button with one state
```javascript
import ButtonComponent, { CircleButton, RoundButton, RectangleButton } from 'react-native-button-component';

// You can use CircleButton, RoundButton, RectangleButton to instead ButtonComponent
<ButtonComponent
  onPress={() => {}}
  image={require('button-image.png')}
  text="Button"
>
</ButtonComponent>
```

#### Button with multiple states
```javascript
import ButtonComponent, { CircleButton, RoundButton, RectangleButton } from 'react-native-button-component';

// You can use CircleButton, RoundButton, RectangleButton to instead ButtonComponent
<ButtonComponent
  buttonState={this.state.uploadButtonState}
  states={{
    upload: {
      onPress: () => {
        this.imageUploader.upload();
        this.state.setState({ uploadButtonState: 'uploading' });
      },
      image: require('upload-image.png'),
      text: 'Upload Image',
    },
    uploading: {
      onPress: () => {
        this.imageUploader.cancelUpload();
        this.state.setState({ uploadButtonState: 'upload' });
      },
      spinner: true,
      text: 'Uploding Image...',
    },
  }}
>
</ButtonComponent>
```

## Usage - With Your Configurations

#### Button with one state
```javascript
<ButtonComponent
  type="primary"
  shape="rectangle",
  backgroundColors=['#4DC7A4', '#66D37A'],
  gradientStart={{x: 0.5, y: 1}},
  gradientEnd={{x: 1, y: 1}},
  height: 80,
  onPress={() => {}}
  image={require('button-image.png')}
  text="Button"
>
</ButtonComponent>
```

#### Button with multiple states - different config for different states
```javascript
import ButtonComponent, { CircleButton, RoundButton, RectangleButton } from 'react-native-button-component';

// You can use CircleButton, RoundButton, RectangleButton to instead ButtonComponent
<ButtonComponent
  buttonState={this.state.uploadButtonState}
  gradientStart={{x: 0.5, y: 1}},
  gradientEnd={{x: 1, y: 1}},
  states={{
    upload: {
      backgroundColors: ['#4DC7A4', '#66D37A'],
      image: require('upload-image.png'),
      text: 'Upload Image',
      onPress: () => {
        this.imageUploader.upload();
        this.state.setState({ uploadButtonState: 'uploading' });
      },
    },
    uploading: {
      gradientStart: {x: 0.8, y: 1},
      gradientEnd: {x: 1, y: 1},
      backgroundColors: ['#ff4949', '#fe6060'],
      spinner: true,
      text: 'Uploding Image...',
      onPress: () => {
        this.imageUploader.cancelUpload();
        this.state.setState({ uploadButtonState: 'upload' });
      },
    },
  }}
>
</ButtonComponent>
```

#### Button with multiple states - one config for different states
```javascript
<ButtonComponent
  buttonState={this.state.uploadButtonState}
  gradientStart={{x: 0.5, y: 1}},
  gradientEnd={{x: 1, y: 1}},
  backgroundColors=['#4DC7A4', '#66D37A'],
  states={{
    upload: {
      image: require('upload-image.png'),
      text: 'Upload Image',
      onPress: () => {
        this.imageUploader.upload();
        this.state.setState({ uploadButtonState: 'uploading' });
      },
    },
    uploading: {
      spinner: true,
      text: 'Uploding Image...',
      onPress: () => {
        this.imageUploader.cancelUpload();
        this.state.setState({ uploadButtonState: 'upload' });
      },
    },
  }}
>
</ButtonComponent>
```

## License
MIT
