RNDM Render Plugin: React Native

About

This plugin provides the core functionality for the RNDM Render package.

Please Note: This plugin is also contained within the Core Preset package, which also includes other functionality such as React Native components and lodash methods. If you are looking to get started, we highly recommend the RNDM Client which includes the standard RNDM Render and the core plugin.

Installation

If you have not already done so, then please ensure you have installed the RNDM Render and RNDM Plugin: Core package.

From NPM

npm install --save @rndm/render-plugin-react-native

Post Installation

In order to allow this plugin to work, it must first be included in your project. You can do this inside your main index file:

import '@rndm/render-plugin-core';
import '@rndm/render-plugin-react-native';

Usage

The React Native Plugin transforms the React Native components into serialisable objects.

Example

const component = {
    type: 'react-native.View',
    props: {
        style: {
            width: 100,
            height: 100,
            backgroundColor: 'red',
            justifyContent: 'center',
            alignItems: 'center',
        },
        children: {
            type: 'react-native.Text',
            props: {
                style: {
                    color: 'white',
                },
                children: "Hello World",
            },
        },
    },
};

const Element = () => render(component)

For the full suite of available React Native methods, please checkout their awesome and powerful library.

(Note: This library is versioned alongside its corresponding Native Version version.)

Check out the Playground page to see how these features work.