How to use the reactxp.Animated function in reactxp

// tslint:disable:override-calls-super
export class VirtualListView
    extends RX.Component, VirtualListViewState> {

    private _lastScrollTop = 0;
    private _layoutHeight = 0;
    private _layoutWidth = 0;

    // Cache the width for rendered items for reuse/optimization
    private _contentWidth = -1;

    private _isMounted = false;

    // Controls the full height of the scrolling view, independent of the view port height
    private _containerHeight = 0;
    private _containerHeightValue = RX.Animated.createValue(this._containerHeight);
    private _containerAnimatedStyle = RX.Styles.createAnimatedViewStyle({
        height: this._containerHeightValue
    });

    // A dictionary of items that maps item keys to item indexes.
    private _itemMap = new Map();

    private _scrollViewRef = createRef();

    // When we need to actually re-render, mark this until it's resolved
    private _isRenderDirty = false;

    // Number of pending item animations. We defer some actions while animations are pending.
    private _pendingAnimations = new Set();
    // We attempt to guess the size of items before we render them, but if we're wrong, we need to accumulate the guess
    // error so that we can correct it later.

constructor(props){
        super(props);

        // This value controls the left offset of the knob, which we will
        // animate when the user toggles the control.
        this._knobLeftAnimationValue = RX.Animated.createValue(props.value ? KNOB_LEFT_ON : KNOB_LEFT_OFF);
        this._knobLeftAnimationStyle = RX.Styles.createAnimatedViewStyle({
            left: this._knobLeftAnimationValue
        });

        // This value controls the background color of the control. Here we make
        // use of the interpolate method to smoothly transition between two colors.
        this._toggleColorAnimationValue = RX.Animated.createValue(this.props.value ? 1 : 0);
        this._toggleColorAnimationStyle = RX.Styles.createAnimatedTextInputStyle({
            backgroundColor: RX.Animated.interpolate(this._toggleColorAnimationValue, [0, 1], ['#66f', '#ddd'])
        });
    }

}

const _styles = {
    cellView: RX.Styles.createViewStyle({
        position: 'absolute'
    }),
    overflowVisible: RX.Styles.createViewStyle({
        overflow: 'visible'
    }),
    overflowHidden: RX.Styles.createViewStyle({
        overflow: 'hidden'
    })
};

const _isNativeMacOS = RX.Platform.getType() === 'macos';
const _skypeEaseInAnimationCurve = RX.Animated.Easing.CubicBezier(1, 0, 0.78, 1);
const _skypeEaseOutAnimationCurve = RX.Animated.Easing.CubicBezier(0.33, 0, 0, 1);
const _keyCodeEnter = 13;
const _keyCodeSpace = 32;
const _keyCodeReturn = 3;

export class VirtualListCell extends RX.Component, RX.Stateless> {
    // Helper class used to render child elements. If we know that none of the children changed - we would like to skip
    // the render completely, to improve performance.
    private static StaticRenderer = class  extends
            RX.Component, RX.Stateless> {
        constructor(props: StaticRendererProps) {
            super(props);
        }

        shouldComponentUpdate(nextProps: StaticRendererProps): boolean {
            return nextProps.shouldUpdate ||

componentDidUpdate(prevProps) {
        // If the value of the toggle changes, animate the toggle sliding
        // from one side to the other. In parallel, animate the opacity change.
        if (prevProps.value !== this.props.value) {
            RX.Animated.parallel([
                RX.Animated.timing(this._knobLeftAnimationValue, {
                    duration: ANIMATION_DURATION,
                    toValue: this.props.value ? KNOB_LEFT_ON : KNOB_LEFT_OFF,
                    easing: RX.Animated.Easing.InOut()
                }),

                RX.Animated.timing(this._toggleColorAnimationValue, {
                    duration: ANIMATION_DURATION,
                    toValue: this.props.value ? 1 : 0,
                    easing: RX.Animated.Easing.InOut()
                })
            ]) .start();
        }
    }

componentDidUpdate(prevProps: ToggleSwitchProps) {
        // If the value of the toggle changes, animate the toggle sliding
        // from one side to the other. In parallel, animate the opacity change.
        if (prevProps.value !== this.props.value) {
            RX.Animated.parallel([
                RX.Animated.timing(this._knobLeftAnimationValue, {
                    duration: ANIMATION_DURATION,
                    toValue: this.props.value ? KNOB_LEFT_ON : KNOB_LEFT_OFF,
                    easing: RX.Animated.Easing.InOut()
                }),

                RX.Animated.timing(this._toggleColorAnimationValue, {
                    duration: ANIMATION_DURATION,
                    toValue: this.props.value ? 1 : 0,
                    easing: RX.Animated.Easing.InOut()
                })
            ])
                .start();
        }
    }

constructor(props){
        super(props);

        // This value controls the left offset of the knob, which we will
        // animate when the user toggles the control.
        this._knobLeftAnimationValue = RX.Animated.createValue(props.value ? KNOB_LEFT_ON : KNOB_LEFT_OFF);
        this._knobLeftAnimationStyle = RX.Styles.createAnimatedViewStyle({
            left: this._knobLeftAnimationValue
        });

        // This value controls the background color of the control. Here we make
        // use of the interpolate method to smoothly transition between two colors.
        this._toggleColorAnimationValue = RX.Animated.createValue(this.props.value ? 1 : 0);
        this._toggleColorAnimationStyle = RX.Styles.createAnimatedTextInputStyle({
            backgroundColor: RX.Animated.interpolate(this._toggleColorAnimationValue, [0, 1], ['#66f', '#ddd'])
        });
    }

componentDidMount() {
        RX.Animated.timing(this._translationValue, {
            duration: 500,
            toValue: 0,
            easing: RX.Animated.Easing.OutBack()
        }).start();
    }

constructor(props) {
        super(props);
        this._translationValue = RX.Animated.createValue(-100);
        this._animatedStyle = RX.Styles.createAnimatedTextStyle({
            transform: [{ translateY: this._translationValue }]
        });
    }

constructor(props: MainPanelProps) {
        super(props);

        this._translationValue = RX.Animated.createValue(-100);
        this._animatedStyle = RX.Styles.createAnimatedTextStyle({
            transform: [{ translateY: this._translationValue }]
        });
    }

componentDidMount() {
        RX.Animated.timing(this._translationValue, {
            duration: 500,
            toValue: 0,
            easing: RX.Animated.Easing.OutBack()
        }).start();
    }