react-native-animatable-unmountable

Declarative transitions and animations for React Native (with unmount effect).

It extends react-native-animatable with possibility to define unmount transitions and animations.

Installation

$ npm install react-native-animatable-unmountable --save

Usage

See react-native-animatable for details. It can be used exactly same way.

import * as Animatable from 'react-native-animatable-unmountable';
MyCustomComponent = Animatable.animatableUnmountable(MyCustomComponent);

<Animatable.Text animation="zoomInUp">Zoom me up, Scotty</Animatable.Text>

Unmount animations

The key is to define mounted prop and have it set to true (mounted) or false (unmounted). When mounted prop changes value from true to false, unmount animation is triggered, then - after animation ends - the element gets hidden.

<Animatable.Text
  mounted={this.state.mounted}
  animation='flipInY'
  duration={2000}
  unmountAnimation='flipOutY'
  unmountDuration={2000}
>
  If you're going through hell, keep going
</Animatable.Text>

Additional props

| Prop | Description | Default | |---|---|---| |mounted|Set to false to unmount component and trigger unmount animation|true| |unmountAnimation|Name of the unmount animation.|None| |unmountDuration|For how long the unmount animation will run (milliseconds). |1000| |unmountDelay|Optionally delay the unmount animation (milliseconds).|0| |onUnmountAnimationBegin|A function that is called when the unmount animation has been started. |None| |onUnmountAnimationEnd|A function that is called when the unmount animation has been completed successfully or cancelled. Function is called with an endState argument, refer to endState.finished to see if the animation completed or not. |None| |innerRef|Reference to inner AnimatableComponent element. |None| |didMount|Triggered right after entrance animation ends. |None| |didUnmount|Triggered right after unmount (exit) animation ends. |None|

Example

• cd example
• expo start