react-native-transition-view-async

react-native-transition-view-async

This transition view allows preparation of components before rendering animation. Suitable for showing animations for asynchronous presentation.

Demo

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

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:

• FadeTransitionChildView.js
• ShowcaseTransitionChildView.js
• SlowEnlargeTransitionChildView.js