From 60e0c2d9c49cf5979223d88f7012d4541d207886 Mon Sep 17 00:00:00 2001 From: Saurabh Chavan Date: Thu, 2 Jul 2026 17:07:35 +0530 Subject: [PATCH 1/5] Update Docs for native navigation --- .../mobile/native-mobile/native-navigation.md | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 content/en/docs/howto/mobile/native-mobile/native-navigation.md diff --git a/content/en/docs/howto/mobile/native-mobile/native-navigation.md b/content/en/docs/howto/mobile/native-mobile/native-navigation.md new file mode 100644 index 00000000000..235b7e2d64c --- /dev/null +++ b/content/en/docs/howto/mobile/native-mobile/native-navigation.md @@ -0,0 +1,56 @@ +--- +title: "Enabling native navigation" +linktitle: "Enable native navigation" +url: /howto/mobile/native-navigation/ +weight: 71 +description: Things you need to know before enabling native navigation. +--- + +## Introducing Native Navigation in SP 11 + +With the release of Studio Pro 11, we are excited to introduce a completely revamped native navigation system for all apps. This fundamental change moves navigation from a JavaScript-based implementation to the underlying native platform APIs, delivering significant improvements in performance, user experience, and memory management. + +## Key Improvements + +By switching to native navigation, you will immediately benefit from: + +* **🚀 Smoother, Truly Native Animations** + Transitions and gestures are no longer managed on the JS thread. Instead, they use the native `UINavigationController` on iOS and `Fragment` APIs on Android for completely fluid, jank-free animations. + +* **🧠 Lower Memory Usage** + Screens are now mounted and unmounted by the native OS, which is more efficient and lightens the load on the JavaScript thread, resulting in a more responsive app. + +* **📱 Authentic Platform UX** + Get the user experience your users expect right out of the box. This includes default gestures like the back-swipe on iOS, large header titles, and native Android transition animations without any extra configuration. + +* **⚙️ Optimized View Hierarchy** + The new navigation system reduces the complexity and depth of the view hierarchy. This not only improves performance but also enhances compatibility with automation tools like Appium that can have restrictions on view depth. + +## Breaking Changes & Customization Limits + +To achieve these native performance gains, we can no longer support certain JavaScript-based customizations. The following `stack.Navigator` properties have been deprecated and will not work with the new native navigation system. + +* **`headerMode`** + This property, used to make headers float across screens on iOS, is no longer supported. The native stack handles header rendering on a per-screen basis according to platform conventions. + +* **`headerStyleInterpolator`** + Custom JavaScript animations for the header during screen transitions are not available. The new system relies exclusively on native platform animations. + +* **`headerTitleContainerStyle`** + Styling the container of the header title is no longer possible. This change simplifies the API and ensures headers adhere more closely to native design guidelines. + +* **`headerBackAllowFontScaling`** + This option to control font scaling for the back button's title is not supported. + +* **`headerBackImage`** + Providing a custom component for the back button *image* is deprecated. To customize the entire back button (including its icon and label), use the `headerBack` prop instead. + +> **⚠️ Known Issue: Unclickable Area Below Header** +> +> Please be aware of a known issue where the top **10-15 pixels** of the screen content directly below the header may be unresponsive to touch events. +> +> **Cause:** This occurs because the native header has a higher view hierarchy (z-index) than the JavaScript-based UI elements rendered below it. +> +> **Workaround:** Most apps already include top padding on their pages, which avoids this issue. We recommend ensuring your page content has adequate padding below the header. +> +> **Solution:** We are developing a native button widget that will resolve this edge case. These will be released in a future update. \ No newline at end of file From a57f2d247062c7924df83874b58b17f87697ed73 Mon Sep 17 00:00:00 2001 From: ConnorLand Date: Mon, 6 Jul 2026 12:11:24 +0200 Subject: [PATCH 2/5] move doc to refguide and create parent --- .../{navigation.md => navigation/_index.md} | 0 .../navigation}/native-navigation.md | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename content/en/docs/refguide/mobile/designing-mobile-user-interfaces/{navigation.md => navigation/_index.md} (100%) rename content/en/docs/{howto/mobile/native-mobile => refguide/mobile/designing-mobile-user-interfaces/navigation}/native-navigation.md (100%) diff --git a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation.md b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation/_index.md similarity index 100% rename from content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation.md rename to content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation/_index.md diff --git a/content/en/docs/howto/mobile/native-mobile/native-navigation.md b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation/native-navigation.md similarity index 100% rename from content/en/docs/howto/mobile/native-mobile/native-navigation.md rename to content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation/native-navigation.md From 6b2e38061df9893f79b628fc64591ea0f83aa3cd Mon Sep 17 00:00:00 2001 From: ConnorLand Date: Mon, 6 Jul 2026 12:24:35 +0200 Subject: [PATCH 3/5] edit doc --- .../navigation/native-navigation.md | 57 +++++++------------ 1 file changed, 19 insertions(+), 38 deletions(-) diff --git a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation/native-navigation.md b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation/native-navigation.md index 235b7e2d64c..5cd9f169e72 100644 --- a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation/native-navigation.md +++ b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation/native-navigation.md @@ -1,56 +1,37 @@ --- -title: "Enabling native navigation" -linktitle: "Enable native navigation" +title: "Enabling Native Navigation" +linktitle: "Enable Native Navigation" url: /howto/mobile/native-navigation/ weight: 71 -description: Things you need to know before enabling native navigation. +description: This guide contains the information you need to know before enabling native navigation. --- -## Introducing Native Navigation in SP 11 +## Introduction With the release of Studio Pro 11, we are excited to introduce a completely revamped native navigation system for all apps. This fundamental change moves navigation from a JavaScript-based implementation to the underlying native platform APIs, delivering significant improvements in performance, user experience, and memory management. ## Key Improvements -By switching to native navigation, you will immediately benefit from: +By switching to native navigation, your app will immediately benefit from the following: -* **🚀 Smoother, Truly Native Animations** - Transitions and gestures are no longer managed on the JS thread. Instead, they use the native `UINavigationController` on iOS and `Fragment` APIs on Android for completely fluid, jank-free animations. - -* **🧠 Lower Memory Usage** - Screens are now mounted and unmounted by the native OS, which is more efficient and lightens the load on the JavaScript thread, resulting in a more responsive app. - -* **📱 Authentic Platform UX** - Get the user experience your users expect right out of the box. This includes default gestures like the back-swipe on iOS, large header titles, and native Android transition animations without any extra configuration. - -* **⚙️ Optimized View Hierarchy** - The new navigation system reduces the complexity and depth of the view hierarchy. This not only improves performance but also enhances compatibility with automation tools like Appium that can have restrictions on view depth. +* **Smoother, Truly Native Animations**: Transitions and gestures are no longer managed on the JS thread. Instead, they use the native `UINavigationController` on iOS and `Fragment` APIs on Android for completely fluid, stutter-free animations. +* **Lower Memory Usage**: Screens are now mounted and unmounted by the native OS, which is more efficient and lightens the load on the JavaScript thread, resulting in a more responsive app. +* **Authentic Platform UX**: Get the user experience your users expect right out of the box. This includes default gestures like the back-swipe on iOS, large header titles, and native Android transition animations without any extra configuration. +* **Optimized View Hierarchy**: The new navigation system reduces the complexity and depth of the view hierarchy. This not only improves performance but also enhances compatibility with automation tools like Appium that can have restrictions on view depth. ## Breaking Changes & Customization Limits To achieve these native performance gains, we can no longer support certain JavaScript-based customizations. The following `stack.Navigator` properties have been deprecated and will not work with the new native navigation system. -* **`headerMode`** - This property, used to make headers float across screens on iOS, is no longer supported. The native stack handles header rendering on a per-screen basis according to platform conventions. - -* **`headerStyleInterpolator`** - Custom JavaScript animations for the header during screen transitions are not available. The new system relies exclusively on native platform animations. - -* **`headerTitleContainerStyle`** - Styling the container of the header title is no longer possible. This change simplifies the API and ensures headers adhere more closely to native design guidelines. - -* **`headerBackAllowFontScaling`** - This option to control font scaling for the back button's title is not supported. +* `headerMode`: This property, used to make headers float across screens on iOS, is no longer supported. The native stack handles header rendering on a per-screen basis according to platform conventions. +* `headerStyleInterpolator`: Custom JavaScript animations for the header during screen transitions are not available. The new system relies exclusively on native platform animations. +* `headerTitleContainerStyle`: Styling the container of the header title is no longer possible. This change simplifies the API and ensures headers adhere more closely to native design guidelines. +* `headerBackAllowFontScaling`: This option to control font scaling for the back button's title is not supported. +* `headerBackImage`: Providing a custom component for the back button *image* is deprecated. To customize the entire back button (including its icon and label), use the `headerBack` prop instead. -* **`headerBackImage`** - Providing a custom component for the back button *image* is deprecated. To customize the entire back button (including its icon and label), use the `headerBack` prop instead. +## Known Issues -> **⚠️ Known Issue: Unclickable Area Below Header** -> -> Please be aware of a known issue where the top **10-15 pixels** of the screen content directly below the header may be unresponsive to touch events. -> -> **Cause:** This occurs because the native header has a higher view hierarchy (z-index) than the JavaScript-based UI elements rendered below it. -> -> **Workaround:** Most apps already include top padding on their pages, which avoids this issue. We recommend ensuring your page content has adequate padding below the header. -> -> **Solution:** We are developing a native button widget that will resolve this edge case. These will be released in a future update. \ No newline at end of file +Please be aware of a known issue where the top **10-15 pixels** of the screen content directly below the header may be unresponsive to touch events: +* Cause: This occurs because the native header has a higher view hierarchy (z-index) than the JavaScript-based UI elements rendered below it. +* Workaround: Most apps already include top padding on their pages, which avoids this issue. We recommend ensuring your page content has adequate padding below the header. +* Planned solution: We are developing a native button widget that will resolve this edge case. These will be released in a future update. \ No newline at end of file From 492a788f014ed243ef7aa8e7f361731eb85d805b Mon Sep 17 00:00:00 2001 From: ConnorLand Date: Mon, 6 Jul 2026 12:28:15 +0200 Subject: [PATCH 4/5] add alias to nav parent doc to cover the howto link in SP right now --- .../designing-mobile-user-interfaces/navigation/_index.md | 1 + .../navigation/native-navigation.md | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation/_index.md b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation/_index.md index a66145f316e..8340b9e9ea4 100644 --- a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation/_index.md +++ b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation/_index.md @@ -6,6 +6,7 @@ weight: 20 description: "General information for native navigation in Mendix." aliases: - /refguide/native-navigation/ + - /howto/native-navigation/ --- ## Introduction diff --git a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation/native-navigation.md b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation/native-navigation.md index 5cd9f169e72..6944d447815 100644 --- a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation/native-navigation.md +++ b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation/native-navigation.md @@ -19,7 +19,7 @@ By switching to native navigation, your app will immediately benefit from the fo * **Authentic Platform UX**: Get the user experience your users expect right out of the box. This includes default gestures like the back-swipe on iOS, large header titles, and native Android transition animations without any extra configuration. * **Optimized View Hierarchy**: The new navigation system reduces the complexity and depth of the view hierarchy. This not only improves performance but also enhances compatibility with automation tools like Appium that can have restrictions on view depth. -## Breaking Changes & Customization Limits +## Breaking Changes and Customization Limits To achieve these native performance gains, we can no longer support certain JavaScript-based customizations. The following `stack.Navigator` properties have been deprecated and will not work with the new native navigation system. From 5f081aac872ef709915111d9b792393d566ccc73 Mon Sep 17 00:00:00 2001 From: ConnorLand Date: Mon, 6 Jul 2026 12:39:34 +0200 Subject: [PATCH 5/5] make linktitle the same as title --- .../designing-mobile-user-interfaces/navigation/_index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation/_index.md b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation/_index.md index 8340b9e9ea4..48ec31cf9d5 100644 --- a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation/_index.md +++ b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/navigation/_index.md @@ -1,6 +1,6 @@ --- -title: "Navigation In Native Mobile Apps" -linktitle: "Navigation" +title: "Navigation in Native Mobile Apps" +linktitle: "Navigation in Native Mobile Apps" url: /refguide/mobile/designing-mobile-user-interfaces/navigation/ weight: 20 description: "General information for native navigation in Mendix."