Have ideas to improve npm?Join in the discussion! »

    react-native-micro-animated-button

    0.0.28 • Public • Published

    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.

    Keywords

    none

    Install

    npm i react-native-micro-animated-button

    DownloadsWeekly Downloads

    196

    Version

    0.0.28

    License

    MIT

    Unpacked Size

    17.7 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar