react-native-transition-view-async
This transition view allows preparation of components before rendering animation. Suitable for showing animations for asynchronous presentation.
Prerequisites
React Native 0.25 or higher
Installation
npm i react-native-transition-view-async --save
Usage
1. Bootstrap Transition View
import {
TransitionView,
FadeTransitionChildView,
ShowcaseTransitionChildView,
SlowEnlargeTransitionChildView,
} from 'react-native-transition-view-async'
[...]
render()
{
return (
<View style={{flexDirection: 'row', flex: 1}}>
<TransitionView
ref={(v) => {this.transitionView = v;}}
style={{flex: 1}}>
</TransitionView>
</View>
)
}
2. Enqueue View & Consume View
"Enqueue" pushes new component into queue. Transition does not take place yet.
this.transitionView.enqueue(<View ... />, {OPTIONS})
Running "consume()" function triggers the following transitions:
a. Fading out of current component
b. Fading in of the next component in queue
this.transitionView.consume()
Options Table
| Key | Type | Value(s) | Mandatory? | |
|---|
| SpecificTransitionChildView | React Component Class | Any inheritance of TransitionChildView: TransitionChildView, FadeTransitionChildView, ShowcaseTransitionChildView, SlowEnlargeTransitionChildView | No (Default: TransitionChildView) | |
| | | | |
| | | | |
3. Use case: Screensaver
[...]
onChange()
{
const SpecificTransitionChildView = SlowEnlargeTransitionChildView;
this.transitionView.enqueue((
<View style={{flex: 1, flexDirection: 'row'}}>
<Image style={{flex: 1, alignSelf: 'stretch', resizeMode: 'stretch'}}
source={{uri: `https://picsum.photos/2000/2000&t=${new Date().getTime()}`}}
onLoad={() => {
this.transitionView.consume();
setTimeout(() => {
this.onChange();
}, 3000);
}}
/>
</View>
), {
SpecificTransitionChildView: SpecificTransitionChildView,
});
}
[...]
4. Custom Transitions
All the custom transition components should inherit <TransitionChildView>.
To understand how the transition animations are made, refer to our transition examples:
