Basic

The most simple and essential components to build a screen.

There are four Basic components available:

View

The most fundamental component for building a UI. View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, <div>, android.view, etc.

A View is designed to be nested inside other views and can have zero to many children of any type.

Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to View.

accessible

When enabled, the element will be defined as accessible (defaults to false).

accessibilityLabel

Text in this input will override what the user's screen reader would read by default.

accessibilityHint

Additional explanation of what happens when a user interacts with an accessibility element.

accessibilityRole

Defines the role of the element for the user's screen reader.

accessibilityElementsHidden

Enable to hide accessibility elements within the View (defaults to false).

accessibilityIgnoresInvertColors

Enable to prevent the color of the View from being inverted if color inversion is turned on.

accessibilityLiveRegion

Determine how accessibility services should inform the user of any changes made to the View.

importantForAccessibility

Determines the View's importance for accessibility and also how accessibility events work.

hitSlop

Defines how far away a touch event will be registered from the View.

pointerEvents

Determines if a View can handle touch events.

removeClippedSubviews

Used for scrolling content that contains offscreen subviews (subviews must have overflow: hidden).

collapsable

Enable to automatically remove the View from the native hierarchy if it's unneeded in order to optimize performance.

needsOffscreenAlphaCompositing

Determine if the View should be rendered offscreen and composited with alpha in order to preserve original colors and blending behavior.

renderToHardwareTextureAndroid

Determine if the View and its children should be rendered into one hardware texture on the GPU.

shouldRasterizeIOS

Enable to render the View as a bitmap before compositing.

Icon

A visual indicator to describe an action or an intent.

Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to Icon.

Icon

The icon selected from the icon picker.

Size

The width and height of the icon.

Color

The color of the icon.

The current list of available icons sets are:

Text

A basic component to display text.

Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to Text.

Max # of Lines

Set the maximum number of lines to be displayed when Truncate Text is set.

Truncate Text

Determine how the text will be truncated if the Max # of Lines property is set in conjunction.

Truncate Text property supports the following values:

Value

Description

head

The line is displayed so that the end fits in the container and the missing text at the beginning of the line is indicated by an ellipsis glyph. e.g., "...wxyz".

middle

The line is displayed so that the beginning and end fit in the container and the missing text in the middle is indicated by an ellipsis glyph. "ab...yz".

tail

Default value

The line is displayed so that the beginning fits in the container and the missing text at the end of the line is indicated by an ellipsis glyph. e.g., "abcd..."

clip

Lines are not drawn past the edge of the text container.

❗️

Note about using Truncate Text property on Android devices

On Android, when Max # of Lines is set to a value higher than 1, only the tail from Truncate Text value will work correctly.

❗️

Note about using Truncate Text property in Web Preview

On Web, only the tail from Truncate Text value is supported.

Star Rating

A visual component to collect and display measurable feedback from app users.

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to Star Rating.

Size

The width and height of the icon.

Max Stars

The number of stars to display.


Additional Resources


Did this page help you?