🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A React Native component used to create animated buttons for your mobile app.

Others React Native

Documentation

react-native-micro-animated-button

npm version

Installation

yarn add react-native-vector-icons react-native-micro-animated-button

react-native-vector-icons may require native linking, see package repository for more details (not needed if using Expo).

Definition

type props = {   activeOpacity?: number,   backgroundColor?: string,         // default = white   bounce?: boolean,                 // default = false   disabled?: boolean,               // default = false   disabledBackgroundColor?: string, // default = gray   disabledForegroundColor?: string, // default = white   errorBackgroundColor?: string,    // default = red   errorForegroundColor?: string,    // default = white   errorIcon?: string,   errorLabel?: string,   expandOnFinish?: boolean,         // default = false   foregroundColor?: string,         // default = blue   icon?: string,                    // default = icons names from iconSet   iconSet? any,                     // default = FontAwesome   iconSize?: number,                // default = 17   iconStyle?: Object,   initialState?: 'success' | 'error' | 'loading',   label?: string,   labelStyle?: Object,              // default = defaultLabelStyle   material?: boolean,               // use MaterialIcons instead of FontAwesome   maxWidth?: number,                // default = 240   minWidth?: number,                // default = 40   noBorder?: boolean,               // default = false   noFill?: boolean,                 // default = false   noRadius?: boolean,               // default = false   onError?: Function,   onLoad?: Function,   onPress?: Function,   onReset?: Function,   onSecondaryPress?: Function,   onSuccess?: Function,   renderErrorIcon?: any,            // default = <FontAwesome />   renderIndicator?: any,            // default = <ActivityIndicator />   renderLabel?: any,                // default = <Text />   renderSuccessIcon?: any,          // default = <FontAwesome />   scaleFactor?: number,             // default = 1.1   scaleOnSuccess?: boolean,         // default = false   shakeOnError?: boolean,           // default = false   static?: boolean,                 // default = false   style?: Object,                   // default = defaultStyle   successBackgroundColor?: string,  // default = green   successForegroundColor?: string,  // default = white   successIcon?: string,   successLabel?: string,   width?: number,                   // overwrites maxWidth and minWidth, use for fixed length };  const defaultStyle = {   alignItems: 'center',   borderRadius: 20,   borderWidth: 1,   height: 40,   justifyContent: 'center',   marginVertical: 10 };  const defaultLabelStyle = {   backgroundColor: 'transparent',   padding: 10 };  // methods button.success(); // Animate button to success state button.error();   // Animate button to error state button.load();    // Animate button to loading state button.reset();   // Animate button to initial/default state  // usage import Btn from 'react-native-micro-animated-button';  <Btn   label="Submit"   onPress={() => this.btn.success()}   ref={ref => (this.btn = ref)}   successIcon="check" />

Examples

Available here.


You May Also Like