Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-native-submit-button with all npm packages installed. Try it out:

var reactNativeSubmitButton = require("react-native-submit-button")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-native-submit-button v1.0.5

Animated Submit button.

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

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
  • rnpm 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 (
      <View style={{flex:1}}>
        <SubmitButton />
      </View>
    ); 
  } 
}

Props

PropertyTypeDefaultDescription
primaryColorstringrgb(30, 205, 151)optional user-defined primary color
secondaryColorstringwhiteoptional user-defined secondary color
buttonStatestringnormalbutton state can be one of normal, success, error
widthnumber180optional user-defined width for button
heightnumber54optional user-defined height for button
buttonTextstring'Submit'optional user-defined text on button
buttonTextWhenReadystringoptional 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
iconNamestring'check'optional any icon name from fontello icons , to be shown once we got success.
textStyleobjectoptional text styles to override existing styles
buttonStyleobjectoptional button styles to override existing styles
animationDurationnumber200number in ms. Time to fold button.
errorColorstring#ff6666error color
onSubmitfunctionfunction to call on button press
onSuccessfunctionfunction to call on success
onErrorfunctionfunction to call on error

License

  • MIT. © Ronak Kothari
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free