https://github.com/ronak301/react-native-submit-button

Animated Submit button. Works on both android and ios.
https://github.com/ronak301/react-native-submit-button

android animated button ios react-native submit-button

Last synced: about 1 month ago
JSON representation

Animated Submit button. Works on both android and ios.

• Host: GitHub
• URL: https://github.com/ronak301/react-native-submit-button
• Owner: ronak301
• License: mit
• Created: 2017-01-08T16:31:26.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-11-21T17:59:24.000Z (about 7 years ago)
• Last Synced: 2024-04-26T02:34:01.483Z (9 months ago)
• Topics: android, animated, button, ios, react-native, submit-button
• Language: JavaScript
• Homepage:
• Size: 845 KB
• Stars: 122
• Watchers: 9
• Forks: 17
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

• awesome-react-native - react-native-submit-button ★96 - Animated Submit button. Works on both android and ios (Components / UI)
• awesome-reactnative-ui - react-native-submit-button - native-submit-button/master//example/images/out.gif?raw=true "Animated Submit Button")| (Others)
• awesome-react-native - react-native-submit-button ★96 - Animated Submit button. Works on both android and ios (Components / UI)
• awesome-reactnative-ui - react-native-submit-button - native-submit-button/master//example/images/out.gif?raw=true "Animated Submit Button")| (Others)
• awesome-react-native - react-native-submit-button ★96 - Animated Submit button. Works on both android and ios. (Components / UI)
• awesome-react-native - react-native-submit-button ★96 - Animated Submit button. Works on both android and ios (Components / UI)

README

        
# react-native-submit-button

An Animated Submit Button. Works on both android and IOS. 

- folds when in progress

- expands back when its ready

![Alt text](/example/images/out.gif?raw=true "Animated Submit Button")

## Inspiration

https://dribbble.com/shots/1426764-Submit-Button

## Running Example

 - git clone `https://github.com/ronak301/react-native-submit-button.git` 

 - cd example

 - npm install

 - react-native link

 - react-native run-ios

## Installation

 - npm install --save react-native-submit-button

 - if RN > 0.29 `react-native link` else `rnpm link` 

## Usage

```

import SubmitButton from 'react-native-submit-button';

class SubmitButtonExample extends Component {

  render() {

    return (

      

        

      

    ); 

  } 

}

```

## Props

| Property | Type | Default | Description |

|---------------|----------|--------------|----------------------------------------------------------------|

| primaryColor | `string` | `rgb(30, 205, 151)` | optional user-defined primary color |

| secondaryColor | `string` | `white` | optional user-defined secondary color |

| buttonState | `string` | `normal` | button state can be one of `normal`, `success`, `error` |

| width | `number` | 180 | optional user-defined width for button |

| height | `number` | 54 | optional user-defined height for button |

| buttonText | `string` | 'Submit' | optional user-defined text on button |

| buttonTextWhenReady | `string` | | optional user-defined text on button when success (either provide this or give iconName to be shown once submitted successfully ) , this will get priority over icon name |

| iconName | `string` | 'check' | optional any icon name from fontello icons , to be shown once we got success. |

| textStyle | `object` | | optional text styles to override existing styles |

| buttonStyle | `object` | | optional button styles to override existing styles |

| animationDuration | `number` | 200 | number in `ms`. Time to fold button. |

| errorColor | `string` |  `#ff6666` | error color |

| onSubmit | `function` | | function to call on button press |

| onSuccess | `function` | | function to call on success |

| onError | `function` | | function to call on error |

# License

 - [MIT](https://github.com/ronak301/react-native-submit-button/blob/master/LICENSE.txt).  © Ronak Kothari