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.

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

1<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.

1<Animatable.Text
2  mounted={this.state.mounted}
3  animation='flipInY'
4  duration={2000}
5  unmountAnimation='flipOutY'
6  unmountDuration={2000}
7>
8  If you're going through hell, keep going
9</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