Skip to content

You are here: Creating a ReactNativeContainer Using a Constructor: voltmx.ui.ReactNativeContainer

ReactNativeContainer Widget

ReactNativeContainer is a container widget that helps to display React Native content in your application.

ReactNativeContainer widget can be created only through code.

React Native is a framework that is used to create cross-platform mobile applications. A feature developed in the React Native framework is embedded into the Volt MX Iris form through the React Native Container. This feature is available from V8 SP4 onwards.

Adding React Native apps: You can integrate a feature developed in the React Native framework into Volt MX Iris apps, without the need of creating the same in the Volt MX Iris framework.

For more information related to the React Native App Integration to a Volt MX Iris app feature, refer these sections:

The ReactNativeContainer widget capabilities can be broadly categorized into the following items:

Layout

Properties Description
anchorPoint Specifies the anchor point of the widget bounds rectangle using the widget's coordinate space.
bottom Determines the bottom edge of the widget and is measured from the bottom bounds of the parent container.
centerX Determines the center of a widget measured from the left bounds of the parent container.
centerY Determines the center of a widget measured from the top bounds of the parent container.
height Determines the height of the widget and measured along the y-axis.
maxHeight Specifies the maximum height of the widget and is applicable only when the height property is not specified.
maxWidth Specifies the maximum width of the widget and is applicable only when the width property is not specified.
minHeight Specifies the minimum height of the widget and is applicable only when the height property is not specified.
minWidth Specifies the minimum width of the widget and is applicable only when the width property is not specified.
right Determines the lower right corner of the widget and is measured from the right bounds of the parent container.
top Determines the top edge of the widget and measured from the top bounds of the parent container.
width Determines the width of the widget and is measured along the x-axis.
zIndex Specifies the stack order of a widget.

ReactNativeContainer-specific Properties

Properties Description
nativeModulePackages If the embedded React Native app contains Native modules, then those modules are listed through the nativeModulePackages Property.
reactNativeAppID After you select a project from the ReactNativeProjects folder, the selected project's app name is passed in the reactNativeAppID property.

Configurations Common To All Widgets

Properties Description
id A unique identifier of ReactNativeContainer consisting of alpha numeric characters.
info A custom JSObject with the key value pairs that a developer can use to store the context with the widget.
isVisible Controls the visibility of a widget on the ReactNativeContainer.
parent Helps you access the parent of the widget.

ReactNativeContainer Widget Basics

Creating a ReactNativeContainer Using a Constructor: voltmx.ui.ReactNativeContainer

Before creating a ReactNativeContainer widget, you must first integrate a React Native app to a Volt MX Iris app. You can then create a ReactNativeContainer widget, and embed the React Native app into a form of the Volt MX Iris app through this container widget.

Here is a code example of how to create a ReactNativeContainer widget and then embed the React Native app into a form of the Volt MX Irisapp.

//Defining the properties of the ReactNativeContainer widget.  
var basicConfig = {
    "height": "85%",
    "id": "ReactNativeContainer1",
    "isVisible": true,
    "left": "5dp",
    "top": "55dp",
    "width": "100%",
    "reactNativeAppID": "reactNativeSampleApp",
    "zIndex": 1
}
var layoutConfig = {};
var pspConfig = {};
var ReactNativeContainer1 = new voltmx.ui.ReactNativeContainer(basicConfig, layoutConfig, pspConfig);

Furthermore, you can use some APIs to communicate between the React Native app's JavaScript framework and the Volt MX Iris app's Volt MX Iris framework. For more information about the React Native APIs, click here.

To gain a more hands-on experience on the React Native Integration process, download and use the TaskListSample app from GitHub.