Styling
CSS
You change the looks and appearance of views (elements) in a NativeScript application similarly to how you do it in a web application using Cascading Style Sheets (CSS) or changing the style object of the elements in JavaScript. Only a subset of the CSS language is supported.
Similarly to the DOM Style Object, each View instance exposes a style property, which holds all the style properties for the view. When the view is displayed, all its style properties are applied to the underlying native widget.
Supported CSS Properties
This list of properties can be set in CSS or through the style property of each view:
CSS Property | JavaScript Property | Description |
---|---|---|
|
|
Sets a solid-color value to the matched view’s foreground. |
|
|
Sets a solid-color value or a linear gradient to the matched view’s background. |
|
|
Sets a solid-color value to the matched view’s background. |
|
|
Sets the placeholder (hint) font color to matched views. |
|
|
Sets an image url to the matched view’s background image. |
|
|
Sets if/how the background image should be repeated.
Possible values: |
|
|
Sets the starting position of the background image. You can set the position with absolute, percent or alignment values. More info here. |
|
|
Sets the size of the background image.
Possible values: |
|
|
Sets border colors to the matched view’s. |
|
|
Sets a top border color to the matched view’s. |
|
|
Sets a right border color to the matched view’s. |
|
|
Sets a bottom border color to the matched view’s. |
|
|
Sets a left border color to the matched view’s. |
|
|
Sets border widths to the matched view’s. |
|
|
Sets top border width to the matched view’s. |
|
|
Sets right border width to the matched view’s. |
|
|
Sets bottom border width to the matched view’s. |
|
|
Sets left border width to the matched view’s. |
|
|
Sets a border radius to the matched view’s. |
|
|
Sets a box shadow to the matched view’s. |
|
|
Sets the font properties (this includes |
|
|
Sets the font family of the matched view. |
|
|
Sets the font size of the matched view (only supports device-independent units). |
|
|
Sets the font style of the matched view.
Possible values: |
|
|
Sets the font weight of the matched view Possible values: |
|
|
Sets text alignment in the matched view.
Possible values: |
|
|
Sets the text formatting.
Possible values: |
|
|
Sets the text transform.
Possible values: |
|
|
Sets the text letter spacing. (On Android API Level 21 and above.) |
|
|
Sets the text line height |
|
|
Sets the z-index. (On Android API Level 21 and above.) |
|
|
Sets the clip-path. Supported shapes are circle, ellipse, rect and polygon. You can define your own shape using clippy |
|
|
Sets the vertical alignment of the current view within its parent.
Possible values: |
|
|
Sets the horizontal alignment of the current view within its parent.
Possible values: |
|
|
Sets the margin of the view within its parent. |
|
|
Sets the top margin of the view within its parent. |
|
|
Sets the right margin of the view within its parent. |
|
|
Sets the bottom margin of the view within its parent. |
|
|
Sets the left margin of the view within its parent. |
|
|
Sets the view width. |
|
|
Sets the view height. |
|
|
Sets the minimal view width. |
|
|
Sets the minimal view height. |
|
|
Sets the distance between the boundaries of the layout container and its children. |
|
|
Sets the top padding of a layout container. |
|
|
Sets the right padding of a layout container. |
|
|
Sets the bottom padding of a layout container. |
|
|
Sets the left padding of a layout container. |
|
|
Sets a text shadow on a label. |
|
|
Sets the view visibility.
Possible values: |
|
|
Sets the view opacity. The value is in the [0, 1] range. |
NativeScript Specific CSS Properties
In the context of mobile development, there are a number of properties that are mobile specific (and sometimes even platform specific e.g. Android or iOS). In NativeScript, these featured properties are still accessible through both the code (inline, JavaScript, and TypeScript) but are also exposed as CSS properties. Apart from the API references, the below list is providing most of the non-common CSS properties in NativeScript.
CSS Property | JavaScript Property | Platform | Compatibility | Description |
---|---|---|---|---|
|
|
Both |
|
Sets the text color of the tab titles. |
|
|
Both |
|
Sets the color of the text, while selecting some tabs. |
|
|
Both |
|
Sets the background color of the tabs. |
|
|
Both |
|
Sets the tab titles font size, without changing the font size of all contents of the tab. |
|
|
Both |
|
Sets the text transform individually for every |
|
|
Android |
|
Sets the underline color of the tabs in Android. |
|
|
Android |
|
Sets the elevation of the View in Android. |
`android-dynamic-elevation-offset ` |
|
Android |
|
Sets the elevation of the View in Android, which will be shown when an action was performed(e.g.
|
|
|
Both |
|
Sets the background color of the Switch when it is turned off. |
|
|
Both |
|
Gets or sets the underline color of the selected |
Currently, we can set only the |
On iOS, the TabStripItems can not be styled individually. |
Using the androidElevation
property on Android
Since {N} 5.4, a new Android-specific property, called androidElevation, is introduced. View’s elevation is represented by property and determines the visual appearance of its shadow. With a higher elevation value larger, softer shadows will be set to the View and a smaller shadow while using lower elevation.
<StackLayout class="home-panel">
<TextView
class="tvElevation"
editable="false"
textWrap="true"
text="TextView"
></TextView>
<label androidElevation="5" class="sampleLabel" textWrap="true" text="Label"></label>
<button androidElevation="7" class="sampleButton" text="Button"></button>
</StackLayout>
.tvElevation {
android-elevation: 5;
}
Since NativeScript 5.4, the buttons on Android have a default elevation (shadow) of 2, to provide Material Design elevation support.
Removing the shadow will allow you to create a transparent button.
To explicitly remove the elevation, set the android-elevation property to
|
Using the androidDynamicElevationOffset
property on Android
Another property introduced with {N} 5.4 is androidDynamicElevationOffset. This property allows setting an elevation, which will be shown when an action was performed. Those actions can be, for example, tap, touch etc.
Example:
<StackLayout class="home-panel">
<button
androidElevation="7"
androidDynamicElevationOffset="8"
class="sampleButton"
text="Button"
></button>
<button class="sampleButton2" text="Button"></button>
</StackLayout>
.sampleButton2 {
background-color: lightcyan;
android-elevation: 7;
android-dynamic-elevation-offset: 7;
}
Supported Selectors
Currently, the CSS support is limited only to the selectors and properties listed in the current documentation. |
NativeScript supports a subset of the CSS selector syntax. Here is how to use the supported selectors:
Type Selector
Like CSS element selectors, type selectors in NativeScript select all views of a given type.
Type selectors are case-insensitive, so you can use both button
and Button
.
button { background-color: gray }
Class Selector
Class selectors select all views with a given class.
The class is set using the className
property of the view.
To use |
ID Selector
ID selectors select all views with a given id.
The id
is set using the id
property of the view.
Attribute Selector
This selector will select all buttons that have the attribute testAttr
with some value.
Also, some more advanced scenarios are supported:
-
button[testAttr='flower'] {…} - Will apply CSS on every button that has the testAttr property set exactly to the value
flower
. -
button[testAttr~='flower'] {…} - Selects all buttons with a
testAttr
property that contains a space-separated list of words, one of which is "flower". -
button[testAttr|='flower'] {…} - Selects all buttons with a
testAttr
property value that begins with "flower". The value has to be a whole word, either alone likebtn['testAttr'] = 'flower'
, or followed by hyphen (-), likebtn['testAttr'] = 'flower-house'
. -
button[testAttr^='flower'] {…} - Selects all buttons with a
testAttr
property value that begins with "flower". The value does not have to be a whole word. -
button[testAttr$='flower'] {…} - Selects all buttons with a
testAttr
property value that ends with "flower". The value does not have to be a whole word. -
button[testAttr*='flo'] {…} - Selects all buttons with a
testAttr
property value that contains "flo". The value does not have to be a whole word.
Attribute selectors could be used alone or could be combined with all types of CSS selectors.
Pseudo Selector
A pseudo-selector or also pseudo-class is used to define a special state of an element.
Currently, NativeScript supports only :highlighted
pseudo-selector.
Hierarchical Selector (CSS Combinators)
A CSS selector could contain more than one simple selector, and between selectors a combinator symbol could be included.
-
(space) - Descendant selector. For example, the following code will select all buttons inside StackLayouts (no matter) at which level.
StackLayout Button {
background-color: blue;
}
-
(>) — A direct child selector. Using the previous example, if the CSS is changed to:
StackLayout > Button {
background-color: blue;
}
The background-color rule will not be applied. In order to apply the selector, the WrapLayout element would need to be removed so that the Button is a direct child of the StackLayout.
-
(+) - An adjacent sibling selector, allows us to select all elements, which are siblings of a specified element.
Direct Sibling by Type
<StackLayout class="direct-sibling--type">
<label text="Direct sibling by type"></label>
<button text="Test Button"></button>
<label text="Test Label"></label>
<button text="Test Button"></button>
<label text="Test Label"></label>
<button text="Test Button"></button>
<label text="Test Label"></label>
</StackLayout>
StackLayout Button + Label {
background-color: green;
color: white;
}
CSS Overview
Applying CSS Styles
The CSS styles can be set on 3 different levels:
-
Application-wide CSS: Applies to every application page
-
Page-specific CSS: Applies to the page’s UI views
-
Component-specific CSS: Applies for a component only
-
Inline CSS: Applies directly to a UI view
If there is CSS declared on different levels—all will be applied. The inline CSS will have the highest priority and the application CSS will have the lowest priority.
It is also possible to apply Platform-specific CSS
Application-wide CSS
When the application starts, NativeScript checks if the file app.css exists. If it does, any CSS styles that it contains are loaded and used across all application pages. This file is a convenient place to store styles that will be used on multiple pages.
You can change the name of the file from which the application-wide CSS is loaded. You need to do the change before the application is started, usually in the app.js or app.ts file as shown below:
import { Application } from '@nativescript/core'
Application.setCssFileName('style.css')
Application.run({ moduleName: 'main-page' })
platformNativeScriptDynamic({ bootInExistingPage: false, cssFile: 'style.css' })
The path to the CSS file is relative to the application root folder. |
You could also check the name of the application-wide CSS file by using the getCssFileName() method as shown below:
import { Application } from '@nativescript/core'
const fileName = Application.getCssFileName()
console.log(`fileName ${fileName}`)
Page Specific CSS
When the page’s XML declaration file is loaded, NativeScript looks for a CSS file with the same name (if such exists), reads any CSS styles that it finds, and automatically loads and applies them to the page. For example, a page named mypage.xml will automatically load any CSS in mypage.css. The CSS file must exist in the same folder as the XML file to be automatically applied.
If you import any custom components on your page, the CSS from those components will be applied to the page, too. As best practice, scope the CSS of custom components so that component styles do not "leak" on to pages.
<StackLayout class="mywidget">
<Label text="Custom component layout" class="label" />
</StackLayout>
/* GOOD: This will ONLY apply to the custom component */
.mywidget .label {
color: blue;
}
/* BAD: This will apply to the custom component AND potentially to the page where the component is used */
.label {
color: blue;
}
You can also override CSS styles specified in the file by using the page’s css property:
page.css = 'button { color: red }'
Component Specific CSS In an Angular application everything is a component, therefore, it is a very common task to add some CSS code that should only apply to one component. Adding component-specific CSS in a NativeScript-Angular app involves using a component’s styles or styleUrls property.
@Component({
selector: 'list-test',
styleUrls: ['style.css'],
template: ...
// Or
@Component({
selector: 'list-test',
styles: ['.third { background-color: lime; }'],
template: ...
Adding CSS String
This snippet adds a new style to the current set of styles. This is quite useful when you need to add a small CSS chunk to an element, (for example, for testing purposes):
page.addCss('button {background-color: blue}')
Adding CSS File
This snippet adds new CSS styles to the current set. However, this method reads them from a file. It is useful for organizing styles in files and reusing them across multiple pages.
page.addCssFile(cssFileName)
Inline CSS
Similarly to HTML, CSS can be defined inline for a UI view in the XML markup:
<button text="inline style" style="background-color: green;"></button>
Platform-specific CSS
NativeScript conventions make it easy to apply platform-specific CSS, either via separate stylesheets or via in-line declarations. For an overview of NativeScript’s convention-based file name rules for targeting files at specific platforms and screen sizes, refer to this article in the docs.
There are 4 primary ways to target styles at iOS or Android:
-
Platform-specific stylesheets (
styles.component.ios.css
,styles.component.android.css
) -
Platform-specific markup blocks (
<ios> ... </ios>
,<android> ... </android>
) -
Platform-specific attributes (
<Label ios:style="..." android:style="..."
) -
Platform-specific CSS rules (
:host-content(.ns-ios) .mystyle { ... }
,:host-context(.ns-android) .mystyle { ... }
)
-
Platform-specific stylesheets (
styles.ios.css
,styles.android.css
) -
Platform-specific markup blocks (
<ios> ... </ios>
,<android> ... </android>
) -
Platform-specific attributes (
<Label ios:style="..." android:style="..."
) -
Platform-specific CSS rules (
.ns-ios .mystyle { ... }
,.ns-android .mystyle { ... }
)
The most common and maintainable pattern for managing platform-agnostic and platform-specific styles in NativeScript is with multiple stylesheets and CSS imports.
With this pattern, a page (or component) has 3 separate stylesheets: common, iOS and Android.
For example, for page home.component.html
you would have 3 stylesheets:
-
home-common.css
-
home.component.ios.css
-
home.component.android.css
In both
home.component.ios.css
andhome.component.android.css
you then import the shared common styles fromhome-common.css
:/* Import shared style rules */ @import './home-common.css'; /* Add iOS/Android specific rules (if any) */ .mystyle { ... }
With this pattern, a page has 3 separate stylesheets: common, iOS and Android.
For example, for page myPage.xml
you would have 3 stylesheets:
-
myPage-common.css
-
myPage.ios.css
-
myPage.android.css
In both
myPage.ios.css
andmyPage.android.css
you then import the shared common styles frommyPage-common.css
:/* Import shared style rules */ @import './myPage-common.css'; /* Add iOS/Android specific rules (if any) */ .mystyle { ... }
At build time, NativeScript will automatically import the common styles and choose the correct iOS or Android stylesheet depending on the target build platform.
Root Views CSS Classes
To allow flexible styling and theming, NativeScript adds a CSS class to the root views in the application for specific states.
The default CSS classes are:
-
.ns-root
- a class assigned to the application root view -
.ns-modal
- a class assigned to the modal root view
The CSS classes for each application and modal root view are:
-
.ns-android
,.ns-ios
- classes that specify the application platform -
.ns-phone
,.ns-tablet
- classes that specify the device type -
.ns-portrait
,.ns-landscape
,.ns-unknown
- classes that specify the application orientation -
.ns-light
,.ns-dark
- classes that specify the system appearance.
In native modals in Angular, the classes are applied to the first layout view in your modal component’s HTML.
If you are targeting a class that is applied to the root layout in your modal, you would target it with |
For additional information on the Dark Mode support, refer to this documentation article.
Supported Measurement Units
NativeScript supports DIPs (Device Independent Pixels), pixels (via postfix px) and percentages (partial support for width, height and margin) as measurement units.
NativeScript’s recommended measurement unit is DIP. All measurable properties like width, height, margin, paddings, border-width, etc.) support device independent pixels. The font sizes are always measured in DIPs.
.myLabel {
font-size: 28;
width: 200;
height: 30;
}
The device independent pixel (DIPs) are equal to the device screen’s pixels divided by the device screen scale (density).
import { Screen } from '@nativescript/core'
// mainScreen is of type ScreenMetrics interface /api-reference/interfaces/_platform_.screenmetrics
const scale = Screen.mainScreen.scale
const widthPixels = Screen.mainScreen.widthPixels
const heightPixels = Screen.mainScreen.heightPixels
const widthDIPs = Screen.mainScreen.widthDIPs // DIPs === pixels/scale (e.g. 1024 pixels / 2x scale = 512 DIPs)
const heightDIPs = Screen.mainScreen.heightDIPs
NativeScript supports percentage values for width, height and margins. When a layout pass begins, first the percent values are calculated based on parent available size. This means that on vertical StackLayout if you place two Buttons with height='50%' they will get all the available height, (e.g., they will fill the StackLayout vertically.) The same applies for margin properties. For example, if you set marginLeft = '5%', the element will have a margin that corresponds to 5% of the parent’s available width.
Using CSS variables
NativeScript supports CSS variables (also known as custom properties or cascading variables) for reusable values through the CSS used in the app.
CSS variables cascade from parent to child views.
Declaring variables:
/* Define --my-custom-color as a global value */
.ns-root {
--my-custom-color: black;
}
/* In landscape mode change the value to blue */
.ns-landscape {
--my-custom-color: blue;
}
Overriding a variable from a child-element:
/* Change --my-custom-color to green for elements below */
.ns-root .override-color {
--my-custom-color: green;
}
Using a variable:
.using-variable {
color: var(--my-custom-color);
}
The default value of --my-undefined-value will be black. In landscape mode it will be blue. If a parent element have the class override-color the value will be green.
Using a fallback value:
.using-variable {
color: var(--my-undefined-value, yellow);
}
The color of --my-undefined-value will fallback to yellow, because --my-undefined-value is not defined.
Using a nested fallback value:
.using-variable {
color: var(--my-undefined-value, var(--my-custom-color, yellow));
}
Using CSS calc()
NativeScript supports CSS calc() functions for performing simple calculations on CSS values.
Syntax:
element {
width: calc(100% * 1.25); /* width: 125% */
}
Used with CSS variables:
element {
--my-variable: 10:
width: calc(100% * var(--my-variable)); /* width: 125% */
}
Accessing NativeScript component properties with CSS
You can set NativeScript component properties value that is not part of the CSS specification. For example:
StackLayout {
orientation: horizontal;
}
This feature is limited to properties with simple types like string, number and boolean, and will set a local property value similar to component markup declaration in your template markup via XML or HTML. CSS inheritance is not supported.
Using Fonts
The font-family
property can hold several values.
The first supported font in the list will be used.
There is also support for the following generic font-families:
-
serif (ex. Times New Roman)
-
sans-serif (ex. Helvetica)
-
monospace (ex. Courier New)
Platform specifics:
-
Android: The supported fonts depend very much on the system, thus using the generic font-families or custom-fonts is recommended.
-
iOS: There are more than 30 default fonts available on iOS. You can check the supported fonts for specific iOS versions and devices. To use a built-in font, simply specify the font name in the
font-family
property, such asfont-family: "American Typewriter";
. Adjust the font variant using thefont-weight
property.
Custom Fonts
You can use custom fonts in your app (in .TTF or .OTF format).
The NativeScript runtime will look for the font files under the app/fonts/
(or src/fonts/
if you use Angular) directory and load them automatically.
Since NativeScript 7.1, the CLI has the |
On iOS your font file should be named exactly as the font name.
If you have any doubt about the original font name, use the Font Book app to get the original font name, or try using |
Using Icon Fonts in NativeScript
While bitmap images are great, they present challenges in designing mobile applications. Images increase the size of the application if they are embedded in it. If not, they require additional http requests to be fetched. Images consume memory. Furthermore, bitmap images do not scale well. If scaled up, they lose quality. If scaled down, they waste space. On the other hand, fonts scale well, do not require additional http requests for each glyph and do not increase memory usage significantly. Icon fonts contain icons instead of alphabet characters and can be used instead of images in mobile applications.
-
Choose or generate an icon font that best matches your needs. Two popular icon fonts are IcoMoon and Font Awesome.
-
Once you have downloaded the icon font to your machine, locate the TrueType font file with an extension .ttf.
-
In your root application folder, (This is the app folder for NativeScript Core, and the src folder for Angular 6+), create a folder called fonts and place the .ttf there.
-
Follow the instructions on the icon font webpage to determine the hex codes of each font glyph, i.e., icon. Add a Label component to your NativeScript app and bind the Label’s text property to a one-letter string generated from the character code of the icon you want to show, i.e.,
\ue903
. Prefix the character (in this example: e903) with a\u
While this documentation article is focused on icon fonts, the above workflow is a hundred percent applicable to both text fonts and icon fonts (except that with text fonts step 4 as they don’t include icons but only plain text). |
Platform Specific Font Recognition
There is a conceptual difference in how .ttf fonts are recognized on iOS and Android. On Android, the font is recognized by its file name while on iOS it is recognized by its font name. This means that fonts that are created with a font name which is different from the file name has to be registered with both names in your CSS rule.
.fa-brands {
font-family: "Font Awesome 5 Brands", "fa-brands-400";
}
In the above example, the fa-brands-400.ttf
(as downloaded from the FontAwesome site) has a font name Font Awesome 5 Brands
.
With the above CSS, the font is recognized on both iOS (by the font name Font Awesome 5 Brands
) and Android (by the file name fa-brands-400
).
There are specific scenarios where the creators of the fonts might have released two differently named |
file name | font name |
---|---|
fa-solid-900.ttf |
Font Awesome 5 Free |
fa-regular-400.ttf |
Font Awesome 5 Free |
Notice that in the above example the file names are different, but the registered font name is the same (use the Font Book application on Mac or the Control Panel Fonts section on Windows to see the actual font name).
While this is no issue on Android, it renders the second font unusable on iOS.
To handle similar cases additional CSS font properties, such as for example font-weight
, must be added.
/*
File name: fa-regular-400.ttf
Font name: Font Awesome 5 Free
*/
.far {
font-family: "Font Awesome 5 Free", "fa-regular-400";
font-weight: 400;
}
/*
File name: fa-solid-900.ttf
Font name: Font Awesome 5 Free
*/
.fas {
font-family: "Font Awesome 5 Free", "fa-solid-900";
font-weight: 900;
}
Import CSS
The @import CSS rule allows you to import CSS from a local file. This rule must precede all other types of rules.
@import url('~/your-style.css');
Using SASS
With NativeScript, it is possible to manage your app styles using the SASS CSS pre-compiler instead of plain CSS files. Just as with web projects, SASS gives your stylesheets extra capabilities like shared variables, mixins and nested style tags.
To use SASS with NativeScript, a SASS compiler like sass
is required.
This compiler will hook-in to the NativeScript build process and automatically convert .scss/.sass
files to .css
during build
and livesync
operations.
Since SASS is compiled to CSS at build time, it does not require any changes to your stylesheet naming conventions for NativeScript’s normal convention-based patterns to work.
SASS files with the same name as a NativeScript page will still be automatically linked.
You can use SASS with either enabling it manually:
npm i sass --save-dev
Or by using a template that has SASS already enabled. For example:
ns create mySassApp --template @nativescript/template-drawer-navigation-ts
For projects created with NativeScript 5.x and below (which are using the legacy nativescript-dev-webpack
), you can run the migrate
command to update the SASS compiler (and remove the legacy plugin).
Note that the migrate
command is available in NativeScript CLI 6 and above.
ns migrate
App_Resources
For native styling, see App_Resources