Native Mobile Styling

Introduction

This reference guide will contextualize the style elements Mendix uses in native mobile apps, as well as explain the classes and style properties of Mendix’s widgets. To learn the basics of native styling, you can consult How to Implement Native Mobile Styling and then follow How to Style Your Mendix Native Mobile App.

Mendix apps use layouts to dictate how pages can look and function. For native mobile apps specifically, you can use a native layout to easily integrate navigation and settings optimized for native functionality. For more information on layouts, see Layout.

To keep widgets responsive, Mendix apps use Flexbox. Using Flexbox, a component can set the layout of its child components. This allows your app to retain a consistent layout across multiple form factors. For more information on layout, see React Native’s Flexbox documentation.

You can use the height and width properties to set a widget component’s dimensions. For more information on size, see React Native’s Height and Width documentation.

Style Objects

A widget is composed of various elements, and each can be styled individually. You can customize your widgets using style objects. A style object is a JavaScript object with a set of attributes specific for each widget. Some of the attributes reuse properties of other elements, such as React Native’s ViewStyle, TextStyle, ImageStyle, and Colors elements. You can consult the following property sets for more information on styling properties as you customize your app:

• ViewStyle – React Native’s View Style property set helps you alter borders, opacity, and other general aspects of your app (the view style property set also contains layout, shadow, and transform properties)
• TextStyle – React Native’s Text property set will allow you to style text – using these props you can control text’s font, selection status, and more (the text property set also contains layout properties)
• ImageStyle – React Native’s Image property set will allow you to style images from network sources, a local library, and temporary local images – using these properties you can alter an image’s size, border, and more, while the image property set also contains layout properties (the resizeMode value repeat is not supported)
• Colors – React Native’s Color Reference property set will allow you to alter colors – you can customize colors using red-green-blue notation, change hue or saturation, and more

Class Names

Each style object has a name, referred to as the object’s class name. You can create new custom classes, and then apply styling to a single widget by setting a class name onto a widget class property. Here you can see the code for creating a customClassName:

// A custom styling class
export const customClassName = {
	container: {
		// ViewStyle properties
		paddingTop: 5
	},
	text: {
		// TextStyle properties
		fontWeight: "bold"
	}
}

That custom class can be easily accessed in Mendix Studio Pro:

When you want to apply styling to one instance of a widget, you can extend that widget’s default class. Each widget’s default class is named in the Data Widgets section below. The example below shows how to extend a default class:

export const ActionButton = {
	container: {
		// ViewStyle properties
		borderWidth: 3
	},
	caption: {
		// TextStyle properties
		fontSize: 20
	},
};

Add-on widgets each have their own default styling classes based on their full widget IDs (found in {widget name}.xml), and can be created by replacing the dots with underscores. The example below shows a pluggable widget’s default styling class:

export const com_mendix_widget_native_badge_Badge = (Badge = {
	caption: {
		// TextStyle properties
		color: "#00FF00",
	}
});

For more information on creating your own classes, see the Creating Your Own Classes section in Style Your Mendix Native Mobile App. That document also shows how to use custom classes as design properties.

Data Widgets

Data widgets are essential to many Mendix apps. These widgets will allow your users to create and handle data objects, and can be customized to fit your app’s needs.

Data View Widget

The data view widget shows the contents of one data object. For more information about this widget, see Data View.This widget has no user interface, so it does not support any styling.

List View Widget

The list view shows a list of objects arranged vertically or horizontally. For more information about this widget, see List View. This is not the default list view, but how a list view widget could look in an app:

This is how the widget’s code is structured:

<container>
	<listItem>content</listItem>
	<listItem>content</listItem>
</container>

The widget’s style properties are as follows:

The default class to style all list views is named ListView.

Common Widgets

Common widgets are used in almost all app pages. Because of their ubiquity, learning to style common widgets will make a large difference for your apps.

Text

The text widget shows text which can optionally contain parameters. For more information on these widgets, see Text Widgets. The widget’s style properties are as follows:

<container>
	<text>content</text>
</container>

The default class to style all texts is named Text.

Image

The image widget can be used to show a predefined image on a page, layout, or snippet. For more information on these widgets, see Image Widgets. The widget’s style properties are as follows:

<container>
	<image/>
</container>

The default class to style all static image styles is named Image. Please note that images loaded from the model are styled with ImageViewer as described in the Image Viewer section below.

Page Title

The page title widget shows the title of the page on which it is used. This can be the title defined on the page itself, or the override title defined when showing a page. For more information on this widget, consult Page Title. The widget’s style properties are as follows:

<container>
	<text>Page Title</text>
</container>

The default class to style all page titles is named PageTitle.

Layout Grid

The layout grid widget can be used to structure the content on your page. You are able to create rows and columns which you can configure to have fixed or dynamic sizing.

The widget’s style properties are divided over several objects: LayoutGrid, row, noGuttersRow, col, colFitToContent, col1, col2, col3, col4, col5, col6, col7, col8, col9, col10, col11, col12, and noGutters.

col is being applied when the Width property on a column is “Auto-fill”.

colFitToContent is being applied when the Width property on a column is “Auto-fit content”.

col1, col2, col3, col4, col5, col6, col7, col8, col9, col10, col11, col12 are applied when the Width on a column property is “Manual”. Only one class is applied based on the related Size property.

noGuttersRow (Row) and noGutters (Column) are being applied when the Spacing between columns property on a row is set to “No”.

The main LayoutGrid:

<container></container>

The row, noGuttersRow:

<container></container>

The col, colFitToContent, col1, col2, col3, col4, col5, col6, col7, col8, col9, col10, col11, col12, noGutters:

<container></container>

The resulting DOM looks like this:

<container>
	<row>
		<col></col>
	</row>
</container>

Container Widgets

Container widgets are a set of tools that allow you to provide structure for your page’s content. There is also a specific widget called container widget detailed below. For more information on these widgets, see Container Widgets.

Container

A container widget can be used to style or hide a group of widgets. This widget does not have a visual representation by default, though styling can be used to add spacing. The widget’s style properties are as follows:

<container>
	content
</container>

The default class to style all page titles is named Container.

Tab Container

Tab containers are used to show information categorized into multiple tab pages. Tab containers can help display information which exceeds a device’s screen space. This is how a default tab container widget could look in an app:

This is how the widget’s code is structured:

<container>
	<tabBar>
		<tab>
			<activeLabel>PAGE 1</activeLabel>
			<badgeContainer><badgeCaption /></badgeContainer>
		</tab>
		<tab>
			<label>PAGE 2</label>
		</tab>
		<indicator>
	<tabBar>
	content
</container>

The widget’s style properties are as follows:

The default class to style all tab containers is named TabContainer.

Scroll Container

A scroll container is used to make enable scrolling for a part of a page. This widget does not have a visual representation by default, though styling can be used to add spacing. The widget’s style properties are as follows:

<container>
	scrollable content
</container>

The default class to style all scroll containers is named ScrollContainer.

Input Widgets

Input widgets are typically used to show data to the user and allow them to edit data. For more information on these widgets, see Input Widgets.

Text Box

A text box can be used to display or edit a textual value. This is how a text box widget with validation feedback and a plain text box widget could look in an app:

The widget’s style properties are structured as follows:

<container>
	<label>Text box</label>
	<inputError>Content invalid</inputError>
	<validationMessage>Input validation feedback message</validationMessage>
</container>
<container>
	<label>Text box</label>
	<input>Valid text</input>
</container>

The default class to style all text boxes is named TextBox.

Text Area

A text box can be used to display or edit a textual value with multiple lines. This widget supports the same style properties and structure as the Text Box widget above. This is how a text area widget with validation feedback and a plain text area widget could look in an app:

The default class to style all text areas is named TextArea.

Drop-Down

A drop-down is an input widget that can be used to display and edit enumeration attributes.

Since Studio Pro 8.11, the drop-down widget has a new style property called useUniformDesign: boolean which enables the uniform design in both platforms.

The widget’s render hierarchy is as follows for non-uniform:

<container>
	<label>Drop down enumeration</label>
	<value>Content invalid</value>
	<validationMessage>Validation feedback enumeration</validationMessage>
</container>
<picker>
	<pickerBackdropIOS/>
	<pickerTopIOS><button>close</button></pickerTopIOS>
	<pickerIOS>
		<pickerItemIOS>First</pickerItemIOS>
		<pickerItemIOS>Second</pickerItemIOS>
		<pickerItemIOS>Third</pickerItemIOS>
	</pickerIOS>
</picker>

The widget’s render hierarchy is as follows for uniform:

<container>
	<label>Drop down enumeration</label>
    <valueContainer>
        <value>First</value>
	<icon/>
    </valueContainer>
	<validationMessage>Validation feedback enumeration</validationMessage>
</container>
<menuWrapper>
	<selectedItemContainer>
		<selectedItem>First</selectedItem>    <= Selected
	</selectedItemContainer>
    <itemContainer>
        <item>Second</item>
    </itemContainer>
    <itemContainer>
        <item>Third</item>
    </itemContainer>
</menuWrapper>

Checkbox

A checkbox input widget can be used to display and edit Boolean attributes and is rendered as a switch. This is how a checkbox widget could look in an app:

The widget’s style properties structure is as follows:

<container>
	<label>Boolean switch</label>
	<inputError>
		<trackColorOff/>
		<thumbColorOff/>
	</inputError>
	<validationMessage>Feedback switch input</validationMessage>
</container>
<container>
	<label>Valid boolean</label>
	<input>
		<trackColorOn/>
		<thumbColorOn/>
	</input>
</container>

The default class to style all checkbox inputs is named Checkbox.

Date Picker

A date picker is an input widget that can be used to display and edit date or time attributes. This is how a date picker widget could look in an app:

The widget’s style properties are as follows:

<container>
	<label>Drop down enumeration</label>
	<value>Content invalid</value>
	<validationMessage>Validation feedback enumeration</validationMessage>
	<pickerBackdropIOS>iOS picker modal shadow container
		<pickerIOS>iOS picker
			<pickerTopIOS>iOS picker modal header</pickerTopIOS>
		</pickerIOS>
	</pickerBackdropIOS>
</container>

The default class to style all date picker inputs is named DatePicker.

Reference selector

The reference selector is an input widget that can be used to display and edit associations. For more information on this widget, see Reference Selector. This widget supports the same style properties and structure as the drop-down widget above.

The default class to style all reference selector inputs is named ReferenceSelector.

File Widgets

File widgets help your user app manage images and other files. For more information on these widgets, see File Widgets.

Image Viewer

An image viewer can be used to display an image. This widget supports the same style properties and structure as the Image widget above.

The default class to style all image viewers is named ImageViewer.

Button Widgets

Button widgets help your user perform actions. For more information about these widgets, see Button Widgets.

Action Button

An action button can perform various actions such as calling a nanoflow, opening a page.

The widget’s style properties are as follows:

<container>
	<icon/><caption>primary</caption>
</container>

The default class to style all actions buttons is named ActionButton. However, an action button in a header has the default class ActionButtonHeader.

Pages

To style pages, you can add classes to a page or its layout. The status bar and header are part of a page and can also be styled this way.

<page>
	<statusBar/>
	<header/>
	<container>
		application content
	</container>
</page>

The default classes for layouts and pages are Layout and Page.

Navigation

The navigation consists of the bottom bar (which allows users to navigate within your app) and the progress overlay (which can be used to show a loading indicator while waiting for something to load). This is how navigation could look like in an app:

The navigation style properties are as follows:

<app>
	<page/>
	<bottomBar/>
<app>
<progressOverlay>
	<background>
		<container>
			<activityIndicator/>
			<text/>
		</container>
	</background>
</progressOverlay>

The default class to style the navigation is named navigationStyle. There is no support for custom class styling on navigation.

Add-On Widgets

Add-on widgets are distributed through the Native Mobile Resources module, and are not shipped with Mendix Studio Pro. Other add-on widgets might also be distributed through app templates, as well as modules importing pages from other projects.

Activity Indicator

The activity indicator widget displays a circular loading indicator. This is how an activity indicator widget could look in an app:

The widget’s style properties are as follows:

<container>
	<indicator/>
</container>

The default class to style all activity indicators is named com_mendix_widget_native_activityindicator_ActivityIndicator.

App Events

The app events widget allows you to set actions when your app’s network status is changed, and can let you set limits on action calls. This widget has no user interface so does not support any styling.

Background Image

The background image widget enables layering one or more widgets on top of an image.

The widget’s style properties are as follows:

<container>
	<image />
</container>

The default class to style all background images is named com_mendix_widget_native_backgroundimage_BackgroundImage.

Badge

The badge widget displays text or values as a badge. This is how a badge widget could look in an app:

The widget’s style properties are as follows:

<container>
	<caption>New</caption>
</container>

The default class to style all badges is named com_mendix_widget_native_badge_Badge.

Barcode Scanner

The barcode scanner widget allows your app to scan barcodes and QR codes. This widget renders a camera view in a styleable container.

The widget’s style properties are as follows:

<container>
        <mask />
<container />

The default class to style all barcode scanner widgets is named com_mendix_widget_native_barcodescanner_BarcodeScanner.

Feedback

The feedback widget allows users to give direct feedback. This is how a feedback widget could look in an app:

The widget’s style properties are as follows:

The default class to style all feedback widgets is named com_mendix_widget_native_feedback_Feedback.

Floating Action Button

The floating action button widget lets you customize the appearance and functionality of floating action buttons. The widget’s style properties are as follows:

The default class to style all floating actions buttons is named com_mendix_widget_native_floatingactionbutton_FloatingActionButton.

Maps

The maps widget supports various digital map providers. This is how a maps widget could look in an app:

The widget’s style properties are as follows:

The default class to style all map widgets is named com_mendix_widget_native_maps_Maps.

Notifications

The notifications widget lets you display a custom message in your app. This widget has no user interface so does not support any styling.

Progress Bar

The progress bar widget shows percentage of progress. This is how a progress bar widget could look in an app:

The widget’s style properties are as follows:

<container>
	<bar><fill/></bar>
	<validationMessage/>
</container>

The default class to style all progress bars is named com_mendix_widget_native_progressbar_ProgressBar.

Progress Circle

The progress circle widget displays progress in a circle using positive or negative values. This is how a progress circle widget could look in an app:

The widget’s style properties are as follows:

<container>
	<circle><fill/></circle>
	<validationMessage/>
</container>

The default class to style all progress circles is named com_mendix_widget_native_progresscircle_ProgressCircle.

QR Code

The QR code widget generates a QR code based on a value, which a user can then scan. This is how a QR code widget could look in an app:

The widget’s style properties are as follows:

<container>
	<qrcode/>
</container>

The default class to style all QR codes is named com_mendix_widget_native_qrcode_QRCode.

Range Slider

The range slider widget allows you to change a range of values using a slider with maximum and minimum bound values. This is how a range slider widget could look in an app:

The widget’s style properties are as follows:

<container>
	<track><highlight/><marker/></track>
	<validationMessage/>
</container>

<container>
	<trackDisabled><highlightDisabled/><markerDisabled/></trackDisabled>
	<validationMessage/>
</container>

The default class to style all range slider inputs is named com_mendix_widget_native_rangeslider_RangeSlider.

Safe Area View

The safe area view widget prevents content from being rendered in unwanted areas, such as behind rounded screen corners or notches. This widget is only supported on iOS apps. Note that container styling will only be applied to the safe area.

The widget’s style properties are as follows:

<container>content</container>

The default class to style all safe area views is named com_mendix_widget_native_safeareaview_SafeAreaView.

Slider

The slider widget simply allows you to change a number value using a slider. This is how a slider widget could look in an app:

This widget supports the same style properties as the range slider widget above.

The default class to style all slider inputs is named com_mendix_widget_native_slider_Slider.

Ratings

The ratings widget allows users to rate an object from 0 to 5. This is how a ratings widget could look in an app:

The widget’s style properties are as follows:

<container>
	<icon/><icon/><icon/><icon/><icon/>
</container>

<containerDisabled>
	<icon/><icon/><icon/><icon/><icon/>
</containerDisabled>

The default class to style all rating inputs is named com_mendix_widget_native_rating_Rating.

Toggle Buttons

The toggle buttons widget allows you to set an enumeration attribute. This is how a toggle buttons widget could look in an app:

The widget’s style properties are as follows:

<container>
	<button><text>Standard</text></button>
	<activeButton><activeButtonText>Sattelite</activeButtonText></activeButton>
	<button><text>Hybrid</text></button>
	<validationMessage/>
</container>

<containerDisabled>
	<button><text>Standard</text></button>
	<activeButton><activeButtonText>Sattelite</activeButtonText></activeButton>
	<button><text>Hybrid</text></button>
	<validationMessage/>
</containerDisabled>

The default class to style all toggle buttons is named com_mendix_widget_native_togglebuttons_ToggleButtons.

Video Player

The video player widget allows you to play video based on a URL, and is limited to MP4 only. This is how a video player widget could look in an app:

The widget’s style properties are as follows:

The default class to style all video players is named com_mendix_widget_native_videoplayer_VideoPlayer.

Web View

The web view widget allows you to embed static or dynamic websites in your app. The widget’s style properties are as follows:

The default class to style all web views is named com_mendix_widget_native_webview_WebView.

Animation

The animation widget allows you to animate a container. You can make the content wiggle, move, change size, and more.

The widget’s style properties are as follows:

<container>
	{content}
</container>

The default class to style all animation widgets is named com_mendix_widget_native_animation_Animation.

Introduction Screen

This introduction screen widget displays paginated contents you can swipe through, and offers buttons on each page to proceed or go back:

The widget’s style properties are as follows:

<fullscreenContainer>
	content
	<paginationContainer>
		<dotStyle/><activeDotStyle/><dotStyle/>
	</paginationContainer>
	<paginationAbove.buttonsContainer>
		<buttonSkip.container>
			<icon/><caption>Skip</caption>
		</buttonSkip.container>
		<buttonPrevious.container>
			<icon/><caption>Back</caption>
		</buttonPrevious.container>
		<buttonNext.container>
			<icon/><caption>Next</caption>
		</buttonNext.container>
		<buttonDone.container>
			<icon/><caption>Done</caption>
		</buttonDone.container>
	</paginationAbove.buttonsContainer>
</fullscreenContainer>

<popupContainer>
	content
	<paginationBetween>
		<buttonSkip.container>
			<icon/><caption>Skip</caption>
		</buttonSkip.container>
		<buttonPrevious.container>
			<icon/><caption>Back</caption>
		</buttonPrevious.container>
		<paginationContainer>
			<paginationText>4 / 5</paginationText>
		</paginationContainer>
		<buttonNext.container>
			<icon/><caption>Next</caption>
		</buttonNext.container>
		<buttonDone.container>
			<icon/><caption>Done</caption>
		</buttonDone.container>
	</paginationBetween>
</popupContainer>

The default class to style all into screen widgets is named com_mendix_widget_native_introscreen_IntroScreen.

List View Swipe

The list view swipe widget can make a list view interactive by adding swipe gestures and extra buttons in the background behind a list item:

The widget’s style properties are as follows:

<container>
	<leftAction>
		{Left background}
	</leftAction>
	{Foreground}
	<rightAction>
		{Right background}
	</rightAction>
</container>

The default class to style all animation widgets is named com_mendix_widget_native_listviewswipe_ListViewSwipe.

Bottom Sheet

The bottom sheet widget creates a set of options while blocking interaction with the rest of the screen or a draggable surface anchored to the bottom of the screen. There are two customizable variations:

• Modal bottom sheet:

  

• Expanding bottom sheet:

  

The widget’s style properties are as follows:

<container />
<containerWhenExpandedFullscreen />
<modal />
<modalItems>
	<defaultStyle />
	<primaryStyle />
	<dangerStyle />
	<customStyle />
</modalItems>

The default class to style all bottom sheet widgets is named com_mendix_widget_native_bottomsheet_BottomSheet.

Popup Menu

The popup menu widget allows you to show a context menu exactly where the user taps.

The widget’s style properties are as follows:

<container/>
<buttonContainer/>
<custom>
	<containerStyle/>
	<itemStyle>
		</rippleColor>
	</itemStyle>
</custom>
<basic>
    <containerStyle/>
    <dividerColor/>
    <itemStyle>
        <ellipsizeMode/>
	</rippleColor>
        <defaultStyle/>
        <primaryStyle/>
        <dangerStyle/>
        <customStyle/>
    </itemStyle>
<basic/>

A main object has four objects.

BasicItemStyle

ItemStyle

CustomItemStyle

The default class to style all popup menus is named com_mendix_widget_native_popupmenu_PopupMenu.

Carousel

The carousel widget allows you to show swipeable items in a carousel.

The widget’s style properties are as follows:

</container>
<cardLayout>
    </slideItem>
    </inactiveSlideItem>
    </indicator>
    <pagination>
        </container>
        </dotStyle>
        </inactiveDotStyle>
        </dotContainerStyle>
        </text>
    </pagination>
</cardLayout>
<fullWidthLayout>
    </slideItem>
    </inactiveSlideItem>
    </indicator>
    <pagination>
        </container>
        </dotStyle>
        </inactiveDotStyle>
        </dotContainerStyle>
        </text>
    </pagination>
</fullWidthLayout>

Main object has to have three objects called container, cardLayout, and fullWidthLayout. cardLayout and fullWidthLayout will be applied automatically depending on selected layout in widget properties.

export myCarouselStyle = {
    container: ViewStyle  //
    cardLayout: ...LayoutStyle,
    fullWidthLayout: ...LayoutStyle
}

LayoutStyle

Pagination

The default class to style all popup menus is named com_mendix_widget_native_carousel_Carousel.

Line Chart

The line chart widget renders a scalable line graph based on static and dynamic data sets.

The widget consists of the following elements:

<container/>
<errorMessage/>
<chart/>
<grid/>
<xAxis>
	<label/>
</xAxis>
<yAxis>
	<label/>
</yAxis>
<legend>
	<container/>
	<item/>
	<indicator/>
	<label/>
</legend>
<lines>
	<customLineStyles>
		<any_custom_line_style_name>
			<line/>
			<markers/>
		</any_custom_line_style_name>
	</customLineStyles>
</lines>
<lineColorPalette/>

The default class to style all line chart widgets is named com_mendix_widget_native_linechart_LineChart.

Bar Chart

The bar chart widget renders a horizontal bar graph based on static and dynamic data sets.

The widget consists of the following elements:

<container/>
<errorMessage/>
<chart/>
<grid/>
<xAxis>
	<label/>
</xAxis>
<yAxis>
	<label/>
</yAxis>
<legend>
	<container/>
	<item/>
	<indicator/>
	<label/>
</legend>
<domain>
    </padding>
</domain>
<bars>
    </barsOffset>
    </barColorPalette>
	<customBarStyles>
		<any_custom_bar_style_name>
			</bar>
			</label>
		</any_custom_bar_style_name>
	</customBarStyles>
</bars>

The default class to style all bar chart widgets is named com_mendix_widget_native_barchart_BarChart.

Read More

• How to Style Your Mendix Native Mobile App
• How to Implement Native Mobile Styling
• Design Properties Documentation