Skip to content

You are here: NativeContainer Widget Basics

NativeContainer Widget

The NativeContainer Widget helps you develop, use, and add native UI widgets using the NativeFunction API. The widgets that are defined by the Android and iOS platforms are known as native UI widgets. Using the NativeFunction APIs, you can make use of the native widgets directly in your applications.

For example, you can add the Button Widget defined by the Android platform into your application. The NativeContainer widget allows you to add only native controls and widgets to it.

Adding Native widgets: You can add cross platform widgets and platform specific widgets that are specific to iOS or Android, into the NativeContainer and customize it. FlexContainer widget does not support native widgets. To learn more about adding the widget to a form, refer NativeContainer widget Basics.

The NativeContainer widget capabilities can be broadly categorized into the following:


Properties Description
anchorpoint Specifies the anchor point of the widget bounds rectangle using the widget's coordinate space.

UI Appearance

Events Description
onDidMoveToParentViewController Invoked after the view controller is added or removed from the view controller container.
onLayoutSubviews Using the callback, you can lay out all subviews.
onOrientationChange Allows you to change the orientation of the form from portrait to landscape and vice versa.
onViewDidAppear Invoked when the native layout view appears.
onViewDidDisappear Invoked when the native layout view disappears.
onViewDidLoad Invoked after the view is loaded.
onViewWillAppear Invoked when the native layout view is about to appear on the screen.
onViewWillDisppear Invoked when the native layout view is about to appear on the screen.
onWillMoveToParentViewController Invoked just before the view controller is added or removed from the view controller container.

Data Management

Events Description
onCreated Helps you create and add native widgets/views to the NativeContainer Widget, which is passed as a parameter to the callback.
onCleanup Using the onCleanup event, you can clear the views/widgets created using the onCreated event, when the form is being hidden.

3D Touch

Methods Description
registerForPeekandPop Registers a widget to enable 3D Touch peek and pop gestures.
setOnPeek Sets and overrides the existing onPeekCallback for the widget.
setOnPop Overrides the existing onPopCallback for the widget.
unregisterForPeekandPop Unregisters a widget from 3D Touch peek and pop gestures.

User Input Handling

Methods Description
addGestureRecognizer Allows you to set a gesture recognizer for a specified gesture for a specified widget.
removeGestureRecognizer Allows you to remove the specified gesture recognizer for the specified widget.
setGestureRecognizer Allows you to set a gesture recognizer for a specified gesture for a specified widget.

Enabling RTL

Properties Description
retainContentAlignment Helps to retain the content alignment of the widget while applying RTL.
retainFlexPositionProperties Helps to retain the left, right and padding properties while applying RTL.
retainFlowHorizontalAlignment Enables you to change the horizontal flow of the widget from left to right.


Methods Description
getBadge Enables you to read the badge value (if any) attached to the specified widget.
setBadge Enables you to set the badge value to the given widget at the upper, right corner of the widget.
Properties Description
transform Contains an animation transformation that can be used to animate the widget.
type Denotes the type of the NativeContainer Widget in the JS layer.

Configurations Common To All Widgets

Properties Description
isVisible Controls the visibility of the NativeContainer Widget on the form.
id id is a unique identifier of the NativeContainer Widget consisting of alphanumeric characters.
Methods Description
convertPointFromWidget Allows you to convert the coordinate system from a widget to a point (receiver's coordinate system).
convertPointToWidget Allows you to convert the coordinate system from a point (receiver's coordinate system) to a widget.
getContainerView Returns the NativeContainer layout view.
removeFromParent Allows you to remove a child widget from a parent widget.
setEnabled Specifies the widget that must be enabled or disabled.
setFocus Specifies the widget on which there must be focus.
setVisibility Use this method to set the visibility of the widget.

NativeContainer Widget Basics

Note: You cannot add the widgets from the Default Library of Volt MX Iristo the NativeContainer Widget.

In the Widgets palette, the NativeContainer Widget appears only after a NativeFunction is imported to the Volt MX Iris and when the respective native canvas is selected. For example, if you have imported the NativeFunction corresponding to the Android native, the NativeContainer Widget appears only when Android canvas is selected. For more information on importing the NativeFunction, see Importing NativeFunction.

You can place the NativeContainer Widget in the FlexForm, FlexContainer, FlexScrollContainer, and Master Flex/FlexScroll containers. You cannot add the NativeContainer widget to other container widgets like Tab and TabPane, and also in a template. Even a Master Widget containing a NativeContainer Widget cannot be placed in a template.

The NativeContainer Widget adheres to the flex container semantics as the NativeContainer can be placed in all the flex container widgets. The NativeContainer Widget supports all positional and dimensional properties. For more information on flex container semantics, see Flex Container Rules.

The actual layout view displayed on the screen is platform-specific. The platform-specific layouts differ from platform to platform and are displayed only for the respective platforms. For Android, RelativeLayout is used whereas for iOS, Auto Layout is used. The following links provide more information on the platform-specific layouts.

All the APIs, constants, and properties of these layouts can be used on the Layout returned using the NativeContainer’s Events and Methods.