Native Styling

Last update: Edit

1 Introduction

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

Mendix apps use layouts to dictate how pages can look and function. For native 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.

2 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 as well)
  • 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 as well)
  • 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 (the image property set also contains layout properties as well)
  • 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

2.1 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:

custom class

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 = {
	text: {
		// TextStyle properties
		color: "#00FF00",
	}
});

For more information on creating your own classes, see the Creating Your Own Classes section in How To Use Native Styling. That document also shows how to use custom classes as design properties.

3 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.

3.1 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.

3.2 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:

list view

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:

Element Style Properties Description
container All ViewStyle properties
container numColumns This is the number of columns that the list should render (this defaults to 1).
listItem All ViewStyle properties

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

4 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.

4.1 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>
Element Style Properties Description
container All ViewStyle properties
text All TextStyle properties

The default class to style all texts is named Text.

4.2 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>
Element Style Properties Description
container All ViewStyle properties
image All ImageStyle properties

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

4.3 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>
Element Style Properties Description
container All ViewStyle properties
text All TextStyle properties

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

5 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.

5.1 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>
Element Style Properties Description
container All ViewStyle properties

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

5.2 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:

tab container

This is how the widget’s code is structured:

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

The widget’s style properties are as follows:

Element Style Properties Description
container All ViewStyle properties
tabBar All ViewStyle properties
tabBar bounces This is a Boolean value indicating whether the tab bar bounces when scrolling.
tabBar pressColor This is a color for material ripple (Android only).
tabBar pressOpacity This is opacity for a pressed tab.
tabBar scrollEnabled This is a Boolean value enabling scrollable tabs.
tabBar tabBarPosition This is the position of the tab bar in the tab view, and possible values are top and bottom (defaults to top).
indicator All ViewStyle properties
tab All ViewStyle properties
label All TextStyle properties

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

5.3 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>
Element Style Properties Description
container All ViewStyle properties

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

6 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.

6.1 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:

text box

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>
Element Style Properties Description
container All ViewStyle properties
input All TextStyle properties
input autoCapitalize This automatically capitalizes certain characters when the user types:

* characters: capitalizes all characters
* words: capitalizes the first letter of each word
* sentences: capitalizes the first letter of each sentence (default)
* none: capitalizes nothing
input placeholderTextColor This is the text color of the placeholder string.
input selectionColor This is the highlight and cursor color of the text input.
input underlineColorAndroid This is the color of the input underline.
inputError Same properties as input
label All TextStyle properties
label numberOfLines This is the maximum number of lines to wrap the label text. If the text is any longer, it will be cut off with an ellipsis (this defaults to 1).
validationMessage All TextStyle properties

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

6.2 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:

text area

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

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

This is how a drop down widget could look in an iOS app:

drop down ios

This is how a drop down widget could look in an Android app:

drop down android

The widget’s style properties are as follows:

<container>
	<label>Drop down enumeration</label>
	<value>Content invalid</value>
	<validationMessage>Validation feedback enumeration</validationMessage>
</container>
<container>
	<label>Drop down enumeration</label>
	<value></value>
</container>
<picker>
	<pickerBackdropIOS/>
	<pickerTopIOS><button>close</button></pickerTopIOS>
	<pickerIOS>
		<pickerItemIOS>First</pickerItemIOS>
		<pickerItemIOS>Second</pickerItemIOS>
		<pickerItemIOS>Third</pickerItemIOS>
	</pickerIOS>
</picker>
Element Style Properties Description
container All ViewStyle properties
label All TextStyle properties
label numberOfLines The maximum number of lines to wrap the label text. If the text is any longer it will be cut off with an ellipsis. Defaults to 1.
pickerIOS All ViewStyle properties
pickerItemIOS All TextStyle properties
pickerBackdropIOS All ViewStyle properties
pickerTopIOS All ViewStyle properties
value All TextStyle properties
validationMessage All TextStyle properties

The default class to style all drop down inputs is named DropDown.

6.4 Check Box

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

check box

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>
Element Style Properties Description
container All ViewStyle properties
input All TextStyle properties
input trackColorOn Custom color for the switch track when turned on.
input trackColorOff Custom color for the switch track when turned off.
input thumbColorOn Color of the foreground switch grip when turned on. If this is set on iOS, the switch grip will lose its drop shadow.
input thumbColorOff Color of the foreground switch grip when turned off. If this is set on iOS, the switch grip will lose its drop shadow.
inputError Same properties as input
label All TextStyle properties
label numberOfLines The maximum number of lines to wrap the label text. If the text is any longer it will be cut off with an ellipsis. Defaults to 1.
validationMessage All TextStyle properties

The default class to style all check box inputs is named Checkbox.

6.5 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:

date picker

The widget’s style properties are as follows:

<container>
	<label>Drop down enumeration</label>
	<value>Content invalid</value>
	<validationMessage>Validation feedback enumeration</validationMessage>
</container>
Element Style Properties Description
container All ViewStyle properties
label All TextStyle properties
label numberOfLines This is the maximum number of lines to wrap the label text. If the text is any longer, it will be cut off with an ellipsis ( this defaults to 1.)
value All TextStyle properties
placeholder All TextStyle properties
validationMessage All TextStyle properties

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

6.6 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.

7 File Widgets

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

7.1 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 NativeDynamicImage.

8 Button Widgets

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

8.1 Action Button

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

action button

The widget’s style properties are as follows:

<container>
	<icon/><caption>primary</caption>
</container>
Element Style Properties Description
container All ViewStyle properties
container rippleColor This is the color of the ripple on Android (this defaults to rgba(0, 0, 0, 0.2)).
caption All TextStyle properties
icon All ViewStyle properties
icon size This is the size of the button icon (this defaults to 12).
icon color This is the color of the button icon.

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

9 Navigation Widget

The navigation widget allows users to navigate within your app using buttons on the top and bottom bars of your app’s pages. This is how a navigation widget could look in an app:

navigation widget

The widget’s style properties are as follows:

<app>
	<topBar/>
	application content
	<bottomBar/>
<app>
Element Style Properties Description
topBar backgroundColor This is the color of the background.
topBar backButtonColor This is the text color of the back button.
topBar titleAlignment This is the text alignment of the title.
topBar titleColor This is the text color of the title.
topBar titleFontFamily This is the font type of the title.
topBar titleFontSize This is the font size of the title.
bottomBar backgroundColor This is the color of the background.
bottomBar fontFamily This is the font type of the bottom bar text.
bottomBar fontSize This is the font size of the bottom bar text.
bottomBar color This is the default icon and text color.
bottomBar selectedColor This is the selected icon and text color.

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

10 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 starter apps, as well as modules importing pages from other projects.

10.1 Activity Indicator

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

activity indicator

The widget’s style properties are as follows:

<container>
	<indicator/>
</container>
Element Style Properties Description
container All ViewStyle properties
indicator color This is the color of the indicator (this defaults to gray).
indicator size Possible values for indicator are large and small (this defaults to large).

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

10.2 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.

10.3 Badge

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

badge

The widget’s style properties are as follows:

<container>
	<text>New</text>
</container>
Element Style Properties Description
container All ViewStyle properties
text All TextStyle properties

The default class to style all badges is named com_mendix_widget_native_badge_Badge.

10.4 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.

Element Style Properties Description
container All ViewStyle properties

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

10.5 Feedback

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

feedback

The widget’s style properties are as follows:

Element Style Properties Description
floatingButton All ViewStyle properties
dialog All ViewStyle properties
title All TextStyle properties
textAreaInput All TextStyle properties
textAreaInput placeholderTextColor This is the text color of the placeholder string.
textAreaInput selectionColor This is the highlight and cursor color of the text input.
textAreaInput underlineColorAndroid This is the underline color for Android devices.
textAreaInput numberOfLines This is the height of the text area is based on this number of text lines.
switchLabel All TextStyle properties
switchInput All TextStyle properties
switchInput trackColorOn This is the custom color for the switch track when turned on.
switchInput trackColorOff This is the custom color for the switch track when turned off.
switchInput thumbColorOn This is the color of the foreground switch grip when turned on. If this is set on iOS, the switch grip will lose its drop shadow.
switchInput thumbColorOff This is the color of the foreground switch grip when turned off. If this is set on iOS, the switch grip will lose its drop shadow.
button borderColor This is the color of dialog button borders.
button borderWidth This is the width of dialog button borders.
button color This is the color of dialog button text.
buttonDisabled color This is the color of dialog button text when disabled.
activityIndicator color This is the color of the activity indicator that is shown while feedback is being submitted.

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

10.6 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:

Element Style Properties Description
container All ViewStyle properties
button All ViewStyle properties
button size This is the radius of the button.
button rippleColor This is the color of the ripple on Android.
buttonIcon All ImageStyle properties
secondaryButton All ViewStyle properties
secondaryButton size This is the radius of the secondary buttons.
secondaryButtonIcon All ImageStyle properties
secondaryButtonCaption All TextStyle properties
secondaryButtonCaptionContainer All ViewStyle properties

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

10.7 Maps

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

maps

The widget’s style properties are as follows:

Element Style Properties Description
container All ViewStyle properties
loadingOverlay All ViewStyle properties
loadingIndicator color This is the color of the loading indicator.
marker color This is the color of the location marker.
marker opacity This is the opacity of the location marker.

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

10.8 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.

10.9 Progress Bar

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

progress bar

The widget’s style properties are as follows:

<container>
	<bar><fill/></bar>
	<validationMessage/>
</container>
Element Style Properties Description
container All ViewStyle properties
bar All ViewStyle properties
fill backgroundColor This is the background color of the filled progress bar portion.
validationMessage All TextStyle properties

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

10.10 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:

progress circle

The widget’s style properties are as follows:

<container>
	<circle><fill/></circle>
	<validationMessage/>
</container>
Element Style Properties Description
container All ViewStyle properties
circle size This is the radius of the progress circle.
circle borderWidth This is the border width of the progress circle.
circle borderColor This is the color of the progress circle border.
fill backgroundColor This is the color of the circle’s filled portion.
fill width This is the width of the progress circle.
fill lineCapRounded This determines if the rotating line’s front tip is rounded off or not.
text All TextStyle properties
validationMessage All TextStyle properties

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

10.11 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:

qr code

The widget’s style properties are as follows:

<container>
	<qrcode/>
</container>
Element Style Properties Description
container All ViewStyle properties
qrcode size The size of the QR code.
qrcode color The color of the QR code.
qrcode backgroundColor The background color behind the QR code.

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

10.12 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:

range slider

The widget’s style properties are as follows:

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

<container>
	<trackDisabled><highlightDisabled/><markerDisabled/></trackDisabled>
	<validationMessage/>
</container>
Element Style Properties Description
container All ViewStyle properties
track All ViewStyle properties
trackDisabled All ViewStyle properties
highlight All ViewStyle properties
highlightDisabled All ViewStyle properties
marker All ViewStyle properties
markerActive All ViewStyle properties
markerDisabled All ViewStyle properties
validationMessage All TextStyle properties

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

10.13 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:

slider

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.

10.14 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:

ratings

The widget’s style properties are as follows:

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

<containerDisabled>
  <icon/><icon/><icon/><icon/><icon/>
</containerDisabled>
Element Style Properties Description
container All ViewStyle properties
containerDisabled All ViewStyle properties
icon All ViewStyle properties
icon size The size of the icon.
icon color The color of the icon.
icon selectedColor The color of the icon when selected.

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

10.15 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:

toggle buttons

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>
Element Style Properties Description
container All ViewStyle properties
containerDisabled All ViewStyle properties
button All ViewStyle properties
text All TextStyle properties
activeButton All ViewStyle properties
activeButtonText All TextStyle properties
validationMessage All TextStyle properties

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

10.16 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:

video player

The widget’s style properties are as follows:

Element Style Properties Description
container All ViewStyle properties
indicator color The loading indicator color.
video All ViewStyle properties
errorMessage All TextStyle properties

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

10.17 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:

Element Style Properties Description
container All ViewStyle properties
errorContainer All ViewStyle properties
errorText All TextStyle properties

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

11 Read More