How to use reactxp - 10 common examples

isVisible: boolean;
    shouldUpdate: boolean;
}

enum FocusDirection {
    Up = -1,
    Down = 1
}

const _styles = {
    scrollContainer: RX.Styles.createScrollViewStyle({
        flex: 1,
        position: 'relative',
        flexDirection: 'column'
    }),
    staticContainer: RX.Styles.createViewStyle({
        flex: 1,
        flexDirection: 'column'
    })
};

const _isNativeAndroid = RX.Platform.getType() === 'android';
const _isNativeIOS = RX.Platform.getType() === 'ios';
const _isNativeMacOs = RX.Platform.getType() === 'macos';
const _isWeb = RX.Platform.getType() === 'web';

// How many items with unknown heights will we allow? A larger value will fill the view more
// quickly but will result in a bunch of long-running work that can cause frame skips during
// animations.
const _maxSimultaneousMeasures = 16;

// Recycled cells remain mounted to reduce the allocations and deallocations.

bottom: 0,
        top: 0
    }),
    disabledScene: Styles.createViewStyle({
        top: 0,
        bottom: 0,
        flex: 1
    }),
    transitioner: Styles.createViewStyle( {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: 'transparent',
        overflow: 'hidden',
        alignItems: 'stretch'
    }),
    sceneStyle: Styles.createViewStyle({
        flex: 1,
        shadowOffset: { height: 0, width: 0 },
        shadowRadius: 40,
        shadowColor: 'rgba(0, 0, 0, 0.2)'
    })
};

// Transition types
export type TransitionToCallback = () => void;
export type ReplaceAtIndexCallback = () => void;

export interface TransitionToQueueItem {
    // The destination route index.
    destIndex: number;

    // The callback to call after this transition is finished.

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 ||
                this.props.isFocused !== nextProps.isFocused ||
                this.props.isSelected !== nextProps.isSelected;
        }

        render() {
            // If we don't have an item to render, return null here

top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        borderRadius: 15
    }),
    toggleKnob: RX.Styles.createViewStyle({
        top: 2,
        height: 26,
        width: 26,
        borderRadius: 13,
        backgroundColor: 'white'
    })
};

export class ToggleSwitch extends RX.Component {
    private _knobLeftAnimationValue: RX.Animated.Value;
    private _knobLeftAnimationStyle: RX.Types.AnimatedViewStyleRuleSet;

    private _toggleColorAnimationValue: RX.Animated.Value;
    private _toggleColorAnimationStyle: RX.Types.AnimatedViewStyleRuleSet;

    constructor(props: ToggleSwitchProps) {
        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
        });

// 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'])
        });
    }