Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/jacklam718/react-native-button-component

A Beautiful, Customizable React Native Button component for iOS & Android
https://github.com/jacklam718/react-native-button-component

android button ios javascript react react-native react-native-button

Last synced: 2 months ago
JSON representation

A Beautiful, Customizable React Native Button component for iOS & Android

Lists

README 

        
[![Build Status](https://travis-ci.org/jacklam718/react-native-button-component.svg?branch=master)](https://travis-ci.org/jacklam718/react-native-button-component)

[![npm](https://img.shields.io/npm/v/react-native-button-component.svg)]()

[![npm](https://img.shields.io/npm/dm/react-native-button-component.svg)]()



## 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

```



## 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

```javascript

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



// You can use CircleButton, RoundButton, RectangleButton to instead ButtonComponent

 {}}

  image={require('button-image.png')}

  text="Button"

>



```



#### Button with multiple states

```javascript

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



// You can use CircleButton, RoundButton, RectangleButton to instead ButtonComponent

 {

        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...',

    },

  }}

>



```



## Usage - With Your Configurations



#### Button with one state

```javascript

 {}}

  image={require('button-image.png')}

>



```



#### 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

 {

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

      },

    },

  }}

>



```



#### Button with multiple states - one config for different states

```javascript

 {

        this.imageUploader.upload();

        this.state.setState({ buttonState: 'uploading' });

      },

    },

    uploading: {

      text: 'Uploding Image...',

      spinner: true,

      onPress: () => {

        this.imageUploader.cancelUpload();

        this.state.setState({ buttonState: 'upload' });

      },

    },

  }}

>



```



## License

MIT