/react-native-animatable-button

best animated button for react native

Primary LanguageTypeScript

react-native-animatable-button

npm version

Installation

npm install react-native-animatable-button --save

Overview

  • States
  • Opacity animation
  • Tap animations
  • Fully customizable

Props

Button Props

Props Type Description Required Default
accessibilityLabel string custom access label not required reactNativeAnimetableButton
buttonContainerStyle Object must be provided Object not STYLE not required see below
selectedState string selected id of provided states not required default
states [key: string]: IButtonState state object not required default state
disabled boolean enable/disable button not required false
touchFeedbaack boolean enable/disable tap opacity animate not required true
touchFeedbaackDelay boolean set delayPressIn prop of TOpacity not required 0

Button Animation Props

Props Type Description Required Default
animationDelay number delay of animations not required 0
animationDuration number animation duration time not required 400
animationEasing EasingFunction easing options not required Easing.bezier(0.4, 0.2, 0.4, 1.3)
onPressAnimationEnable boolean tap animation config not required true
onPressAnimationScaleValue number number of scale to not required 1.05
onPressAnimationType button - inside scale all button or inside not required button
startAnimationDelay number delay of start animation not required 0
startAnimationDuration number animation duration time for start not required 400
startAnimationEnable boolean enable/disable start animation not required true
backgroundAnimation animated - slide set background option not required animated

Button State Props

Props Type Description Required Default
buttonInsideContainerStyle Object must be provided Object not STYLE not required see below
icon ImageURISource - any icon uri or source not required -
iconStyle ImageStyle icon style not required see below
iconPosition left - right position of icon not required left
text string button text not required -
textStyle TextStyle text style not required see below
spinner boolean enable/disable spinner not required false
spinnerProps ActivityIndicatorProperties spinner Props not required -
syncIconAndTextAnimation boolean enable/disable animation diff not required false
asyncIconAndTextAnimationDiff number [0 - 100] percent of diff not required 50

buttonContainerStyle

{
  backgroundColor: 'rgba(0,0,0,0)',
  borderRadius: 5,
  borderWidth: 1,
  height: ButtonSize.height,
  overflow: 'hidden'
}

buttonInsideContainerStyle

{
  alignItems: 'center',
  backgroundColor: 'rgba(0,0,0,0)',
  flexDirection: 'row',
  height: ButtonSize.height,
  justifyContent: 'center',
  overflow: 'hidden',
  paddingHorizontal: 10
}

textStyle

{
  paddingHorizontal: 5
}

iconStyle

{
  flex: 1,
  resizeMode: 'contain'
}

Note

Master props and state props are combined when provided.

Usage example

constructor() {
  super();

  this.state = {
  activeState: 'idle2'
  }
}

render () {
  <Button	
    touchFeedback={false}
    onPress={this.onPress.bind(this)}
    selectedState={this.state.activeState}
    buttonContainerStyle={{
      height: 40
    }}
    buttonInsideContainerStyle={{
      backgroundColor: 'rgba(100,100,100,0.5)'
    }}
    onPress={() => { 
      console.log('master pressed');
      if (this.state.activeState === 'idle2') this.setState({ activeState: 'idle' });	
    }}
    states={{
      laodList: {
        text:"Load List",
        buttonInsideContainerStyle:{
          backgroundColor: 'rgba(255,0,0,0.5)'
        },
        onPress: () => { 
          console.log('loadList pressed'); 
          this.setState({ activeState: 'loading' })
          
          return false; 
        }
      },
      // when tap laodList logs => loadList pressed; master pressed

      loading: {
        text:"loading",
        buttonInsideContainerStyle:{
          backgroundColor: 'rgba(0,255,0,0.5)'
        },
        spinner: true,
        onPress: () => { console.log('loading pressed'); return true; }
      },
      // when tap loading logs => loading pressed;

      idle: {
        text:"idle",
        onPress: () => { 
          console.log('idle pressed');
          this.setState({ activeState: 'loadList' })
        }
      },
      // when tap idle logs => idle pressed; master pressed

      idle2: {
        text:"idle2",
      }
      // when tap idle2 logs => master pressed
    }}
  />
}

Description

if you are return false or undefined in sub onPress functions when call master onPress function.