Awesome Open Source
Awesome Open Source

Build Status npm npm

React Native Button component

React Native Button component for iOS & Android.

Example Example

Provided Components

This library provided the following button components:

ButtonComponent
CircleButton
RoundButton
RectangleButton

Installation

  1. npm install --save react-native-button-component
  2. react-native link react-native-button-component
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
  5. Click the + and select the libART.a and click Add

Some Simple Examples

One State Button
Multiple States Button
Spinner Button
Progress Button
Circle Button

Documents

Props & Button Options
Options for Progress Button
Options for Spinner Button
Options for Circle Button

Usage - Basic

Button with one state

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

import ButtonComponent, { CircleButton, RoundButton, RectangleButton } from 'react-native-button-component';

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

Usage - With Your Configurations

Button with one state

<ButtonComponent
  text="Button"
  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')}
>
</ButtonComponent>

Button with multiple states - different config for different states

import ButtonComponent, { CircleButton, RoundButton, RectangleButton } from 'react-native-button-component';

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

Button with multiple states - one config for different states

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

License

MIT


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,532,221
Reactjs (75,207
Android (41,557
Ios (19,545
React Native (11,774
Button (775
React Native Button (9
Related Projects