How to use the reactxp.Component function in reactxp

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
        });

width: 320
    }),
    roundButton: RX.Styles.createViewStyle({
        margin: 16,
        borderRadius: 16,
        backgroundColor: '#7d88a9'
    }),
    buttonText: RX.Styles.createTextStyle({
        fontSize: 16,
        marginVertical: 6,
        marginHorizontal: 12,
        color: 'white'
    })
};

export class SecondPanel extends RX.Component {
    readonly state: SecondPanelState = {
        progressValue: 0,
        toggleValue: true
    };

    private _progressTimerToken: number | undefined;
    private _mountedVideo: RXVideo | undefined;

    componentDidMount() {
        this._startProgressIndicator();
    }

    componentWillUnmount() {
        this._stopProgressIndicator();
    }

value: string;
}

const _styles = {
    input: RX.Styles.createTextInputStyle({
        borderStyle: 'solid',
        borderColor: '#999',
        borderWidth: 1,
        fontSize: 16,
        padding: 5,
        margin: 10,
        height: 30
    })
};

export class SearchField extends RX.Component {
    readonly state: SearchFieldState = { value: '' };

    render() {
        return (
            
        );
    }

    private _handleChangeText = (value: string) => (

width: 320
    }),
    roundButton: RX.Styles.createViewStyle({
        margin: 16,
        borderRadius: 16,
        backgroundColor: '#7d88a9'
    }),
    buttonText: RX.Styles.createTextStyle({
        fontSize: 16,
        marginVertical: 6,
        marginHorizontal: 12,
        color: 'white'
    })
};

export class SecondPanel extends RX.Component {
    _progressTimerToken;

    constructor(props) {
        super(props);
        this.state = {
            toggleValue: true,
            progressValue: 0
        };
    }

    componentDidMount() {
        this._startProgressIndicator();
    }

    componentWillUnmount() {
        this._stopProgressIndicator();

* RN-specific implementation of the cross-platform Video abstraction.
 */

import * as React from 'react';
import * as RX from 'reactxp';
import { default as RNVideo, VideoInfo, VideoBufferInfo } from 'react-native-video';

import * as Types from '../common/Types';

export interface VideoState {
    isPlaying?: boolean;
    isMuted?: boolean;
    duration?: number;
}

class Video extends RX.Component {
    private _mountedComponent: RNVideo|null = null;

    constructor(props: Types.VideoProps) {
        super(props);

        this.state = {
            isPlaying: false,
            isMuted: false
        };
    }

    render() {
        const source = typeof this.props.source === 'number'
            ? this.props.source
            : { uri: this.props.source };
        return (

main: RX.Styles.createViewStyle({
        alignSelf: 'stretch',
        flex: 1
    }),
    images: RX.Styles.createViewStyle({
        marginTop: 10,
        padding: 10,
        alignSelf: 'stretch',
        flex: 1
    }),
    statusSpacer: RX.Styles.createViewStyle({
        marginTop: 22
    })
};

class RootView extends RX.Component {
    render() {
        return (
            
                
                
                    
                
            
        );
    }

    private _updateImages = (query: string) => (
        ImageStore.updateImages(query)

/**
 * ProgressIndicator.js
 * Copyright: Microsoft 2017
 *
 * Circular progress indicator that shows off the use of ImageSVG
 * ReactXP extension.
 */

import * as RX from 'reactxp';
import React from 'react';
import RXImageSvg, { SvgPath as RXSvgPath } from 'reactxp-imagesvg';

export class ProgressIndicator extends RX.Component {
    render() {
        const size = this.props.size;
        const path = this._buildPath();

        return (
            
                
            
        );
    }