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
  • 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 (
      <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 normalsuccesserror
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