From 49918cb11956668e1533f1466ea2f43cba064f6b Mon Sep 17 00:00:00 2001 From: Mark de Vocht Date: Tue, 23 Dec 2025 12:06:52 +0200 Subject: [PATCH 01/10] Android changes --- .../stack/topbar/titlebar/TitleAndButtonsContainer.kt | 3 ++- .../stack/topbar/titlebar/TitleAndButtonsMeasurer.kt | 9 +++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/android/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleAndButtonsContainer.kt b/android/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleAndButtonsContainer.kt index adcb58481c2..71fe97fbf25 100644 --- a/android/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleAndButtonsContainer.kt +++ b/android/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleAndButtonsContainer.kt @@ -155,8 +155,9 @@ class TitleAndButtonsContainer(context: Context) : ViewGroup(context) { val rightBarWidth = rightButtonBar.measuredWidth val leftBarWidth = leftButtonBar.measuredWidth val isCenter = titleComponentAlignment == Alignment.Center + val isFill = titleComponentAlignment == Alignment.Fill val titleHeightMeasureSpec = MeasureSpec.makeMeasureSpec(containerHeight, MeasureSpec.AT_MOST) - val titleWidthMeasureSpec = makeTitleAtMostWidthMeasureSpec(containerWidth, rightBarWidth, leftBarWidth, isCenter) + val titleWidthMeasureSpec = makeTitleAtMostWidthMeasureSpec(containerWidth, rightBarWidth, leftBarWidth, isCenter, isFill) if (titleComponent is TitleBarReactView) { titleComponent.centered = isCenter } diff --git a/android/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleAndButtonsMeasurer.kt b/android/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleAndButtonsMeasurer.kt index 68cccb6a2a3..0c53c016a11 100644 --- a/android/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleAndButtonsMeasurer.kt +++ b/android/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleAndButtonsMeasurer.kt @@ -15,11 +15,16 @@ typealias TitleRight = Int typealias TitleTop = Int typealias TitleBottom = Int -fun makeTitleAtMostWidthMeasureSpec(containerWidth: Int, rightBarWidth: Int, leftBarWidth: Int, isCenter: Boolean): Int { +fun makeTitleAtMostWidthMeasureSpec(containerWidth: Int, rightBarWidth: Int, leftBarWidth: Int, isCenter: Boolean, isFill: Boolean = false): Int { return if (isCenter) { View.MeasureSpec.makeMeasureSpec(containerWidth, View.MeasureSpec.AT_MOST) } else { - View.MeasureSpec.makeMeasureSpec(containerWidth - rightBarWidth - leftBarWidth - 2 * DEFAULT_LEFT_MARGIN_PX, View.MeasureSpec.AT_MOST) + val availableWidth = containerWidth - rightBarWidth - leftBarWidth - 2 * DEFAULT_LEFT_MARGIN_PX + if (isFill) { + View.MeasureSpec.makeMeasureSpec(availableWidth, View.MeasureSpec.EXACTLY) + } else { + View.MeasureSpec.makeMeasureSpec(availableWidth, View.MeasureSpec.AT_MOST) + } } } From e493a218e763579d54dd7822474e25e7cae04938 Mon Sep 17 00:00:00 2001 From: Mark de Vocht Date: Wed, 24 Dec 2025 11:38:15 +0200 Subject: [PATCH 02/10] little refactor --- .../stack/topbar/titlebar/TitleAndButtonsMeasurer.kt | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/android/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleAndButtonsMeasurer.kt b/android/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleAndButtonsMeasurer.kt index 0c53c016a11..8e77c486136 100644 --- a/android/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleAndButtonsMeasurer.kt +++ b/android/src/main/java/com/reactnativenavigation/views/stack/topbar/titlebar/TitleAndButtonsMeasurer.kt @@ -20,11 +20,10 @@ fun makeTitleAtMostWidthMeasureSpec(containerWidth: Int, rightBarWidth: Int, lef View.MeasureSpec.makeMeasureSpec(containerWidth, View.MeasureSpec.AT_MOST) } else { val availableWidth = containerWidth - rightBarWidth - leftBarWidth - 2 * DEFAULT_LEFT_MARGIN_PX - if (isFill) { - View.MeasureSpec.makeMeasureSpec(availableWidth, View.MeasureSpec.EXACTLY) - } else { - View.MeasureSpec.makeMeasureSpec(availableWidth, View.MeasureSpec.AT_MOST) - } + View.MeasureSpec.makeMeasureSpec( + availableWidth, + if (isFill) View.MeasureSpec.EXACTLY else View.MeasureSpec.AT_MOST + ) } } From 20896a305e9c21002fd779f23129ce706c19244d Mon Sep 17 00:00:00 2001 From: Mark de Vocht Date: Wed, 24 Dec 2025 13:00:52 +0200 Subject: [PATCH 03/10] e2e test --- playground/e2e/Options.test.js | 17 +++ playground/src/screens/OptionsScreen.tsx | 16 ++- playground/src/screens/Screens.ts | 1 + .../src/screens/TopBarTitleTestScreen.tsx | 122 ++++++++++++++++++ playground/src/screens/index.tsx | 14 +- playground/src/testIDs.ts | 7 + 6 files changed, 171 insertions(+), 6 deletions(-) create mode 100644 playground/src/screens/TopBarTitleTestScreen.tsx diff --git a/playground/e2e/Options.test.js b/playground/e2e/Options.test.js index 6092ec7c108..833d3ee7229 100644 --- a/playground/e2e/Options.test.js +++ b/playground/e2e/Options.test.js @@ -92,4 +92,21 @@ describe('Options', () => { await element(by.id(TestIDs.SCROLLVIEW_ELEMENT)).swipe('down', 'fast'); await expect(elementById(TestIDs.TOP_BAR)).toBeVisible(); }); + + it(':android: TopBar custom title with subtitle should be visible', async () => { + await elementById(TestIDs.GOTO_TOPBAR_TITLE_TEST).tap(); + await expect(elementById(TestIDs.TOPBAR_TITLE_TEXT)).toBeVisible(); + await expect(elementById(TestIDs.TOPBAR_TITLE_AVATAR)).toBeVisible(); + await device.pressBack(); + await expect(elementByLabel('Styling Options')).toBeVisible(); + }); + + it(':android: TopBar custom title without subtitle should be visible', async () => { + await elementById(TestIDs.GOTO_TOPBAR_TITLE_TEST).tap(); + await elementById(TestIDs.SET_TOPBAR_WITHOUT_SUBTITLE_BTN).tap(); + await expect(elementById(TestIDs.TOPBAR_TITLE_TEXT)).toBeVisible(); + await expect(elementById(TestIDs.TOPBAR_TITLE_AVATAR)).toBeVisible(); + await device.pressBack(); + await expect(elementByLabel('Styling Options')).toBeVisible(); + }); }); diff --git a/playground/src/screens/OptionsScreen.tsx b/playground/src/screens/OptionsScreen.tsx index 4910b86d352..9ab21b6bb53 100644 --- a/playground/src/screens/OptionsScreen.tsx +++ b/playground/src/screens/OptionsScreen.tsx @@ -20,9 +20,10 @@ const { GOTO_SEARCHBAR_MODAL, REPLACE_TAB_TEST_ID, REPLACED_TAB, + GOTO_TOPBAR_TITLE_TEST, } = testIDs; -interface Props extends NavigationProps {} +interface Props extends NavigationProps { } export default class Options extends NavigationComponent { static options() { @@ -75,6 +76,12 @@ export default class Options extends NavigationComponent { testID={SET_REACT_TITLE_VIEW} onPress={this.setReactTitleView} /> +