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:

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