@blueeast/bluerain-platform-reactxp

bluerain Platform-reactxp

Usage

Run the following command in the plugin directoy:

Installation

npm i --save @blueeast/bluerain-platform-reactxp

Then in your boot function, pass the plugin like this:

import BR from '@blueeast/bluerain-os';
import ReactxpPlugin from '@blueeast/bluerain-platform-reactxp';

BR.boot({
    platform: [ReactxpPlugin]
})

import BR from '@blueeast/bluerain-os';
    //  Higher Order Component(HOC)  for window

        ctx.Filters.add('bluerain.system.plugins.initialized', () =>{
            const  WithLayout = (Component) => {
            const withWindowInfo = ctx.Plugins.get('window-info').withWindowInfo;
            const LayoutComponent = (props) => {
                  const onLayout = () => {
                    const newDimentions = ctx.Dimensions.get('window');
                    const oldDimentions = props.window;
             if (newDimentions.width !== oldDimentions.width ||              newDimentions.height !== oldDimentions.height) {
  props.setWindowDimentions(newDimentions.width? newDimentions.width: oldDimentions.width,
                    newDimentions.height ? newDimentions.height: oldDimentions.height);
                    }
                };
                    return <Component Layout={onLayout} {...props}  />;
        };
                return withWindowInfo(LayoutComponent);
            };
            ctx.Components.addHocs('SystemLayout',WithLayout);
        });

Utils

It is used for setting mainView in App

   import BR from '@blueeast/bluerain-os';
      ctx.Utils.setMainView=(App) => {
           RX.UserInterface.setMainView(<App/>);
       };

It is used for styling the components

   import BR from '@blueeast/bluerain-os';
    ctx.Utils.createStyles = (styles, component) => {
        if (component === 'Link') {
            return RX.Styles.createLinkStyle(styles);
        }

        if (component === 'Image') {
            return RX.Styles.createImageStyle(styles);
        }

        if (component === 'Button') {
            return RX.Styles.createButtonStyle(styles);
        }

        if (component === 'ScrollView') {
            return RX.Styles.createScrollViewStyle(styles);
        }

        if (component === 'Picker') {
            return RX.Styles.createPickerStyle(styles);
        }

        if (component === 'Text') {
            return RX.Styles.createTextStyle(styles) && RX.Styles.createAnimatedTextStyle(styles);
        }

        if (component === 'TextInput') {
            return (
                RX.Styles.createTextInputStyle(styles) && RX.Styles.createAnimatedTextInputStyle(styles)
            );
        }
        return RX.Styles.createViewStyle(styles);
    };

Components

This plugin registers following components in the Component registry, so they can be reused later by other apps and plugins:

• ActivityIndicator
• GestureView
• Button
• Image
• Input
• TextInput
• View
• Picker
• WebView
• Text

APIs

• Accessibility
• UserPresence
• Clipboard
• Platform
• AppState
• Dimensions
• Geolocation
• Settings
• Linking
• NetInfo
• Stylesheet