Skip to content

feat: new v9 APIs #187

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
NathanWalker merged 8 commits into from
Nov 17, 2025
Merged

feat: new v9 APIs #187

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0258f2f
feat: tabs support for font and sys prefix
NathanWalker Nov 11, 2025
9570ed1
feat: listview sectioned data
NathanWalker Nov 11, 2025
12e4594
feat: new APIS with v9
NathanWalker Nov 11, 2025
13e908b
feat: direction rtl and ltl
NathanWalker Nov 11, 2025
14170ee
feat: vite (#186)
NathanWalker Nov 17, 2025
91c4f0a
feat: android edge to edge (#185)
NathanWalker Nov 17, 2025
e078706
feat: v9 multi-window support (#184)
NathanWalker Nov 17, 2025
924906f
feat: hooks (#183)
jcassidyav Nov 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat: direction rtl and ltl
  • Loading branch information
@NathanWalker
NathanWalker committed Nov 11, 2025
commit 13e908b629ea69e58fe6e8e9aff31b7ff86dc246
36 changes: 35 additions & 1 deletion content/guide/styling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,8 @@ This list of properties can be set in CSS or through the style property of each
| `border-radius` | `borderRadius` | Sets a border radius to the matched view’s. |
| `box-shadow` | `boxShadow` | Sets a box shadow to the matched view's. |
| `clip-path` | `clipPath` | Sets the clip-path. Supported shapes are circle, ellipse, rect and polygon. You can define your own shape using [clippy](http://bennettfeely.com/clippy/) |
| `color` | `color` | Sets a solid-color value to the matched view’s foreground. |
| `color` | `color` | Sets a solid-color value to the matched view’s foreground.
| `direction` | `direction` | Sets the direction of text, table and grid columns, and horizontal overflow. Use rtl for languages written from right to left (like Hebrew or Arabic), and ltr for those written from left to right (like English and most other languages). |
| `font` | `font` | Sets the font properties (this includes `font-family`, `font-size`, `font-style` and `font-weight`) of the matched view. |
| `font-family` | `fontFamily` | Sets the font family of the matched view. |
| `font-size` | `fontSize` | Sets the font size of the matched view (only supports device-independent units). |
Expand Down Expand Up @@ -259,6 +260,39 @@ This list of properties can be set in CSS or through the style property of each
| `width` | `width` | Sets the view width. |
| `z-index` | `zIndex` | Sets the z-index. (On Android API Level 21 and above.) |

## Layout direction (LTR / RTL)

NativeScript now supports an **inherited CSS `direction` property** to force the layout direction of views to either left-to-right (`ltr`) or right-to-left (`rtl`).

```css
/* Apply RTL to the entire app */
.ns-root {
direction: rtl;
}
```

What this does:

- tells NativeScript to use the **platform’s native direction APIs** so you get the OS-level behavior for RTL,
- makes navigation transitions direction-aware (slide, flip, etc.),
- makes default label/text alignment respect the direction,
- enables direction-aware layout for FlexboxLayout on iOS,
- aligns horizontal scroll views to the end in RTL,
- and allows using `start` / `end` values for `horizontalAlignment` to align relative to the current direction.

Android note:

```xml
<!-- App_Resources/Android/src/main/AndroidManifest.xml -->
<application
android:name="com.tns.NativeScriptApplication"
android:supportsRtl="true"
...>
</application>
```

You **must** enable `android:supportsRtl="true"` in the manifest for Android to actually honor RTL. On iOS this is always available.

### Accessing NativeScript View properties with CSS

You can also set NativeScript component properties value that are not part of the CSS specification. For example:
Expand Down
Loading