How to use the reactxp.Styles function in reactxp

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.

interface RootViewProps extends RX.CommonProps {
    onLayout?: (e: RX.Types.ViewOnLayoutEvent) => void;
}

interface RootViewState {
    viewTitle: string;
    navContext: NavModels.RootNavContext;
}

const _styles = {
    root: RX.Styles.createViewStyle({
        flex: 1,
        alignSelf: 'stretch'
    }),
    stackViewBackground: RX.Styles.createViewStyle({
        flex: 1,
        alignSelf: 'stretch',
        backgroundColor: Colors.white
    })
};

export default class RootView extends ComponentBase {
    private _navigator: Navigator | null = null;

    protected _buildState(props: RootViewProps, initState: boolean): Partial | undefined {
        let newNavContext = NavContextStore.getNavContext();

        let partialState: Partial = {
            viewTitle: this._getViewTitle(newNavContext),
            navContext: newNavContext
        };

render() {
    const { style, width, height } = this.props;
    const lottieStyles = RX.Styles.createViewStyle({
      width,
      height,
      overflow: 'hidden',
      margin: '0 auto',
    }, style);
    return (
       {
          this.node = node;
        }}
        style={lottieStyles}
      />
    );
  }
}

}),

  name: RX.Styles.createTextStyle({
    fontWeight: 'bold',
    fontSize: 36,
    color: '#42B74F'
  }),

  links: RX.Styles.createViewStyle({
    justifyContent: 'center',
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 10,
  }),

  link: RX.Styles.createLinkStyle({
    marginRight: 5,
    marginLeft: 5,
    color: '#0070E0',
  }),
};

export class App extends RX.Component {
  render() {
    return (
      
        
          Welcome to ReactXP
          To get started, edit /src/App.js

/**
 * RootView.tsx
 *
 * Display first screen of the image list sample application.
 */

import * as React from 'react';
import * as RX from 'reactxp';

import ImageStore from '../stores/ImageStore';
import SearchField from '../controls/SearchField';
import ImageList from './ImageList';

const _styles = {
    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() {