diff --git a/apps/ui/src/tabs/frame-in-tabs-inner-page-1.xml b/apps/ui/src/tabs/frame-in-tabs-inner-page-1.xml index f0c7c0c06..6e84cd59d 100644 --- a/apps/ui/src/tabs/frame-in-tabs-inner-page-1.xml +++ b/apps/ui/src/tabs/frame-in-tabs-inner-page-1.xml @@ -1,3 +1,12 @@ - \ No newline at end of file + + + diff --git a/apps/ui/src/tabs/frame-in-tabs-overflow.xml b/apps/ui/src/tabs/frame-in-tabs-overflow.xml new file mode 100644 index 000000000..e0df8bd11 --- /dev/null +++ b/apps/ui/src/tabs/frame-in-tabs-overflow.xml @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/ui/src/tabs/main-page.ts b/apps/ui/src/tabs/main-page.ts index df5477457..7e9ffb6d1 100644 --- a/apps/ui/src/tabs/main-page.ts +++ b/apps/ui/src/tabs/main-page.ts @@ -31,6 +31,7 @@ export function loadExamples() { examples.set('nested-bottom-navigation', 'tabs/nested-bottom-navigation-page'); examples.set('custom-tabstrip', 'tabs/custom-tabstrip-page'); examples.set('frame-in-tabs', 'tabs/frame-in-tabs'); + examples.set('frame-in-tabs-overflow', 'tabs/frame-in-tabs-overflow'); examples.set('item-color', 'tabs/item-color-page'); examples.set('dynamic-color-change', 'tabs/dynamic-color-change-page'); diff --git a/packages/core/ui/tabs/index.ios.ts b/packages/core/ui/tabs/index.ios.ts index 30cbb09f3..1a186804c 100644 --- a/packages/core/ui/tabs/index.ios.ts +++ b/packages/core/ui/tabs/index.ios.ts @@ -172,15 +172,16 @@ class UIPageViewControllerImpl extends UIPageViewController { safeAreaInsetsTop = this.topLayoutGuide.length; } + let conditionalSafeAreaBottom = owner.iosOverflowSafeArea ? safeAreaInsetsBottom : 0; let scrollViewTop = 0; - let scrollViewHeight = this.view.bounds.size.height; + let scrollViewHeight = this.view.bounds.size.height + conditionalSafeAreaBottom; if (owner.tabStrip) { const tabBarHeight = this.tabBar.frame.size.height; let tabBarTop = safeAreaInsetsTop; scrollViewTop = tabBarHeight; - scrollViewHeight = this.view.bounds.size.height - tabBarHeight; + scrollViewHeight = this.view.bounds.size.height - tabBarHeight + conditionalSafeAreaBottom; const tabsPosition = owner.tabsPosition; if (tabsPosition === 'bottom') {