Fix topBar title with subtitle view (#6509)

Move topBar title with subtitle view initialisation to when the viewController view is already initialised. Fix's cases where the titleView initialised too soon and therefor not visible because `layoutSubviews` never gets called. Co-authored-by: Guy Carmeli <[email protected]>
wix · Sep 1, 2020 · 1878393 · 1878393
1 parent fcf23d2
commit 1878393
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 19 deletions.
diff --git a/e2e/Stack.test.js b/e2e/Stack.test.js
@@ -53,6 +53,12 @@ describe('Stack', () => {
     await expect(elementByLabel('back button clicked')).toBeVisible();
   });
 
+  it('push title with subtitle', async () => {
+    await elementById(TestIDs.PUSH_TITLE_WITH_SUBTITLE).tap();
+    await expect(elementByLabel('Title')).toBeVisible();
+    await expect(elementByLabel('Subtitle')).toBeVisible();
+  });
+
   it('screen lifecycle', async () => {
     await elementById(TestIDs.PUSH_LIFECYCLE_BTN).tap();
     await expect(elementByLabel('didAppear')).toBeVisible();

diff --git a/lib/ios/RNNComponentPresenter.m b/lib/ios/RNNComponentPresenter.m
@@ -62,6 +62,8 @@ - (void)applyOptions:(RNNNavigationOptions *)options {
         }
         [viewController setSearchBarWithPlaceholder:[withDefault.topBar.searchBarPlaceholder getWithDefaultValue:@""] hideNavBarOnFocusSearchBar:hideNavBarOnFocusSearchBar];
     }
+
+    [_topBarTitlePresenter applyOptions:withDefault.topBar];
 }
 
 - (void)applyOptionsOnInit:(RNNNavigationOptions *)options {
@@ -70,7 +72,7 @@ - (void)applyOptionsOnInit:(RNNNavigationOptions *)options {
     RNNComponentViewController* viewController = self.boundViewController;
     RNNNavigationOptions *withDefault = [options withDefault:[self defaultOptions]];
 
-    [_topBarTitlePresenter applyOptionsOnInit:withDefault.topBar];
+   [_topBarTitlePresenter applyOptionsOnInit:withDefault.topBar];
 
     [viewController setTopBarPrefersLargeTitle:[withDefault.topBar.largeTitle.visible getWithDefaultValue:NO]];
     [viewController setDrawBehindTopBar:[withDefault.topBar shouldDrawBehind]];

diff --git a/lib/ios/TopBarTitlePresenter.h b/lib/ios/TopBarTitlePresenter.h
@@ -6,6 +6,8 @@
 
 - (void)applyOptionsOnInit:(RNNTopBarOptions *)options;
 
+- (void)applyOptions:(RNNTopBarOptions *)options;
+
 - (void)mergeOptions:(RNNTopBarOptions *)options resolvedOptions:(RNNTopBarOptions *)resolvedOptions;
 
 - (void)setCustomNavigationTitleView:(RNNTopBarOptions *)options perform:(RNNReactViewReadyCompletionBlock)readyBlock;

diff --git a/lib/ios/TopBarTitlePresenter.m b/lib/ios/TopBarTitlePresenter.m
@@ -9,17 +9,17 @@ @implementation TopBarTitlePresenter {
 }
 
 - (void)applyOptionsOnInit:(RNNTopBarOptions *)initialOptions {
-    [self updateTitleWithOptions:initialOptions];
+    if (initialOptions.title.component.hasValue) {
+        [self setCustomNavigationTitleView:initialOptions perform:nil];
+    } else if (initialOptions.title.text.hasValue) {
+        [self removeTitleComponents];
+        self.boundViewController.navigationItem.title = initialOptions.title.text.get;
+    }
 }
 
-- (void)updateTitleWithOptions:(RNNTopBarOptions *)options {
-    if (options.title.component.hasValue) {
-        [self setCustomNavigationTitleView:options perform:nil];
-    } else if (options.subtitle.text.hasValue) {
+- (void)applyOptions:(RNNTopBarOptions *)options {
+    if (options.subtitle.text.hasValue) {
         [self setTitleViewWithSubtitle:options];
-    } else if (options.title.text.hasValue) {
-        [self removeTitleComponents];
-        self.boundViewController.navigationItem.title = options.title.text.get;
     }
 }
 
@@ -35,18 +35,18 @@ - (void)mergeOptions:(RNNTopBarOptions *)options resolvedOptions:(RNNTopBarOptio
 }
 
 - (void)setTitleViewWithSubtitle:(RNNTopBarOptions *)options {
-	if (!_customTitleView && ![options.largeTitle.visible getWithDefaultValue:NO]) {
-		_titleViewHelper = [[RNNTitleViewHelper alloc] initWithTitleViewOptions:options.title subTitleOptions:options.subtitle viewController:self.boundViewController];
+    if (!_customTitleView && ![options.largeTitle.visible getWithDefaultValue:NO]) {
+        _titleViewHelper = [[RNNTitleViewHelper alloc] initWithTitleViewOptions:options.title subTitleOptions:options.subtitle viewController:self.boundViewController];
 
-		if (options.title.text.hasValue) {
-			[_titleViewHelper setTitleOptions:options.title];
-		}
-		if (options.subtitle.text.hasValue) {
-			[_titleViewHelper setSubtitleOptions:options.subtitle];
-		}
+        if (options.title.text.hasValue) {
+            [_titleViewHelper setTitleOptions:options.title];
+        }
+        if (options.subtitle.text.hasValue) {
+            [_titleViewHelper setSubtitleOptions:options.subtitle];
+        }
 
-		[_titleViewHelper setup];
-	}
+        [_titleViewHelper setup];
+    }
 }
 
 - (void)renderComponents:(RNNTopBarOptions *)options perform:(RNNReactViewReadyCompletionBlock)readyBlock {

diff --git a/playground/src/screens/StackScreen.tsx b/playground/src/screens/StackScreen.tsx
@@ -13,6 +13,7 @@ const {
   PUSH_LIFECYCLE_BTN,
   POP_NONE_EXISTENT_SCREEN_BTN,
   PUSH_CUSTOM_BACK_BTN,
+  PUSH_TITLE_WITH_SUBTITLE,
   PUSH_LAZY_BTN,
   CUSTOM_BACK_BTN,
   SEARCH_BTN,
@@ -57,6 +58,11 @@ export default class StackScreen extends React.Component<NavigationComponentProp
           testID={PUSH_CUSTOM_BACK_BTN}
           onPress={this.pushCustomBackButton}
         />
+        <Button
+          label="Push Title With Subtitle"
+          testID={PUSH_TITLE_WITH_SUBTITLE}
+          onPress={this.pushTitleWithSubtitle}
+        />
         <Button label="Set Stack Root" testID={SET_STACK_ROOT_BTN} onPress={this.setStackRoot} />
         <Button
           label="Set Stack Root With ID"
@@ -99,6 +105,23 @@ export default class StackScreen extends React.Component<NavigationComponentProp
       },
     });
 
+  pushTitleWithSubtitle = () =>
+    Navigation.push(this, {
+      component: {
+        name: Screens.Pushed,
+        options: {
+          topBar: {
+            title: {
+              text: 'Title',
+            },
+            subtitle: {
+              text: 'Subtitle',
+            },
+          },
+        },
+      },
+    });
+
   search = () => Navigation.push(this, Screens.Search);
 
   setStackRoot = () =>

diff --git a/playground/src/testIDs.ts b/playground/src/testIDs.ts
@@ -47,6 +47,7 @@ const testIDs = {
   TOP_BAR_BTN: 'TOP_BAR_BUTTON',
   CUSTOM_BACK_BTN: 'CUSTOM_BACK_BUTTON',
   PUSH_CUSTOM_BACK_BTN: 'PUSH_CUSTOM_BACK_BTN',
+  PUSH_TITLE_WITH_SUBTITLE: 'PUSH_TITLE_WITH_SUBTITLE',
   BACK_BUTTON: 'BACK_BUTTON',
   SWITCH_TAB_BY_INDEX_BTN: 'SWITCH_TAB_BY_INDEX_BTN',
   SWITCH_TAB_BY_COMPONENT_ID_BTN: 'SWITCH_TAB_BY_COMPONENT_ID_BTN',