fix(iOS): back button not respecting style options (#1726)

tyler-coleman · kkafar · web-flow · commit b5612bfefc27 · 2023-03-13T11:45:42.000+01:00
## Description @kkafar: #1646 introduced a bug, where if iOS version >= 14 styles for back title would not get applied, due to [ill defined `if/else-if` logic](https://github.com/software-mansion/react-native-screens/blob/5e1f7ecdf30573f3e441e73c4f1f05c1f3ab9ccb/ios/RNSScreenStackHeaderConfig.mm#L477-L491). ## Changes @kkafar: Removed the fix introduced in #1646 and replaced it with setting `backBarButtonItem`'s title to `nil` & `backBarButtonTitle` to appropriate value when back button title is supposed to be invisible. This results in no title being displayed next to back button, but the correct value is present in back menu (if one is enabled). To achieve the demanded effect I needed to distinguish between states: 1. back title visible or not next to back button 2. back title is nil / empty / whitespace only Currently when `headerBackTitleVisible: false` is set in JS, [whitespace only string is send to native side](https://github.com/software-mansion/react-native-screens/blob/5e1f7ecdf30573f3e441e73c4f1f05c1f3ab9ccb/src/native-stack/views/HeaderConfig.tsx#L105) (same thing [happens in `react-navigation`](https://github.com/react-navigation/react-navigation/blob/2ec98f3fae051c60e76aed3698d1bca6bbf730ef/packages/native-stack/src/views/HeaderConfig.tsx#L171)), but the same information can be passed to native side when user sets: ```js headerBackTitleVisible: true, headerBackTitle: ' ' ``` so we can not really determine on native side whether the back button title should be visible or not (in case of empty string / nil passed from the user we default to title of previous screen). Therefore I decided to pass `headerBackTitleVisible` prop value directly to the native side via **new prop `backTitleVisible` on `ScreenStackHeaderConfig` component** and base new logic on its (props) value. ## Screenshots / GIFs ### Before https://user-images.githubusercontent.com/32227697/221241945-58d3bb51-f25a-4d0f-b74f-a4e18792535b.mp4 ### After https://user-images.githubusercontent.com/32227697/221241962-b25108c9-beb5-4bbb-b712-3830dfc1c250.mp4 ## Test code and steps to reproduce `Test1726` in `FabricTestExample` & `TestsExample` ## Checklist - [x] Included code example that can be used to test this change - [x] Updated TS types - [x] Updated documentation:  - [x] https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md - [ ] https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md - [x] https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx - [ ] https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx - [x] Ensured that CI passes --------- Co-authored-by: Kacper Kafara <kacperkafara@gmail.com>
diff --git a/FabricTestExample/App.js b/FabricTestExample/App.js
@@ -84,6 +84,7 @@ import Test1476 from './src/Test1476';
 import Test1646 from './src/Test1646';
 import Test1649 from './src/Test1649';
 import Test1683 from './src/Test1683';
+import Test1726 from './src/Test1726';
 
 enableFreeze(true);
 
diff --git a/FabricTestExample/src/Test1646.tsx b/FabricTestExample/src/Test1646.tsx
@@ -1,5 +1,6 @@
 import {NavigationContainer, useRoute} from '@react-navigation/native';
-import {createNativeStackNavigator} from '@react-navigation/native-stack';
+// import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import {createNativeStackNavigator} from 'react-native-screens/native-stack';
 import * as React from 'react';
 import {Button, View} from 'react-native';
 
@@ -11,6 +12,8 @@ export default function App() {
       <Stack.Navigator
         screenOptions={{
           headerBackTitleVisible: false,
+          // headerBackTitle: 'NavHeader',
+          // disableBackButtonMenu: true,
         }}>
         <Stack.Screen
           name="Screen"
@@ -30,6 +33,10 @@ function Screen({navigation}: any) {
   //   navigation.setOptions({headerBackTitleVisible: count % 2 === 0});
   // }, [count, navigation]);
 
+  // React.useEffect(() => {
+  //   navigation.setOptions({headerBackTitle: `Custom ${count}`})
+  // }, [count, navigation]);
+
   return (
     <View>
       <Button
diff --git a/FabricTestExample/src/Test1726.tsx b/FabricTestExample/src/Test1726.tsx
@@ -0,0 +1,47 @@
+import {NavigationContainer} from '@react-navigation/native';
+import React from 'react';
+import {Button, View} from 'react-native';
+import {createNativeStackNavigator} from 'react-native-screens/native-stack';
+
+const RootStack = createNativeStackNavigator();
+
+const Screen1 = ({navigation: {navigate}}) => (
+  <View style={{flex: 1}}>
+    <Button onPress={() => navigate('Screen2')} title="Screen 2" />
+  </View>
+);
+
+const Screen2 = ({navigation: {navigate}}) => (
+  <View style={{flex: 1}}>
+    <Button onPress={() => navigate('Screen3')} title="Screen 3" />
+  </View>
+);
+
+const Screen3 = () => <View style={{flex: 1}} />;
+
+const App = () => {
+  return (
+    <NavigationContainer>
+      <RootStack.Navigator>
+        <RootStack.Screen component={Screen1} name="Screen1" />
+        <RootStack.Screen
+          component={Screen2}
+          name="Screen2"
+          options={{
+            headerBackTitle: 'Custom title',
+          }}
+        />
+        <RootStack.Screen
+          component={Screen3}
+          name="Screen3"
+          options={{
+            headerBackTitle: 'Small title',
+            headerBackTitleStyle: {fontSize: 8},
+          }}
+        />
+      </RootStack.Navigator>
+    </NavigationContainer>
+  );
+};
+
+export default App;
diff --git a/TestsExample/App.js b/TestsExample/App.js
@@ -86,6 +86,7 @@ import Test1539 from './src/Test1539';
 import Test1646 from './src/Test1646';
 import Test1649 from './src/Test1649';
 import Test1683 from './src/Test1683';
+import Test1726 from './src/Test1726';
 
 enableFreeze(true);
 
diff --git a/TestsExample/src/Test1646.tsx b/TestsExample/src/Test1646.tsx
@@ -1,5 +1,6 @@
 import {NavigationContainer, useRoute} from '@react-navigation/native';
-import {createNativeStackNavigator} from '@react-navigation/native-stack';
+// import {createNativeStackNavigator} from '@react-navigation/native-stack';
+import {createNativeStackNavigator} from 'react-native-screens/native-stack';
 import * as React from 'react';
 import {Button, View} from 'react-native';
 
@@ -11,6 +12,8 @@ export default function App() {
       <Stack.Navigator
         screenOptions={{
           headerBackTitleVisible: false,
+          // headerBackTitle: 'NavHeader',
+          // disableBackButtonMenu: true,
         }}>
         <Stack.Screen
           name="Screen"
@@ -30,6 +33,10 @@ function Screen({navigation}: any) {
   //   navigation.setOptions({headerBackTitleVisible: count % 2 === 0});
   // }, [count, navigation]);
 
+  // React.useEffect(() => {
+  //   navigation.setOptions({headerBackTitle: `Custom ${count}`})
+  // }, [count, navigation]);
+
   return (
     <View>
       <Button
diff --git a/TestsExample/src/Test1726.tsx b/TestsExample/src/Test1726.tsx
@@ -0,0 +1,47 @@
+import { NavigationContainer } from "@react-navigation/native";
+import React from "react";
+import { Button, View } from "react-native";
+import { createNativeStackNavigator } from "react-native-screens/native-stack";
+
+const RootStack = createNativeStackNavigator();
+
+const Screen1 = ({navigation: {navigate}}) => (
+  <View style={{flex: 1}}>
+    <Button onPress={() => navigate('Screen2')} title="Screen 2" />
+  </View>
+);
+
+const Screen2 = ({navigation: {navigate}}) => (
+  <View style={{flex: 1}}>
+    <Button onPress={() => navigate('Screen3')} title="Screen 3" />
+  </View>
+);
+
+const Screen3 = () => <View style={{flex: 1}} />;
+
+const App = () => {
+  return (
+    <NavigationContainer>
+      <RootStack.Navigator>
+        <RootStack.Screen component={Screen1} name="Screen1" />
+        <RootStack.Screen
+          component={Screen2}
+          name="Screen2"
+          options={{
+            headerBackTitle: 'Custom title',
+          }}
+        />
+        <RootStack.Screen
+          component={Screen3}
+          name="Screen3"
+          options={{
+            headerBackTitle: 'Small title',
+            headerBackTitleStyle: {fontSize: 8},
+          }}
+        />
+      </RootStack.Navigator>
+    </NavigationContainer>
+  );
+};
+
+export default App;
diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt
@@ -162,6 +162,10 @@ class ScreenStackHeaderConfigViewManager : ViewGroupManager<ScreenStackHeaderCon
         logNotAvailable("backTitleFontSize")
     }
 
+    override fun setBackTitleVisible(view: ScreenStackHeaderConfig?, value: Boolean) {
+        logNotAvailable("backTitleVisible")
+    }
+
     override fun setLargeTitle(view: ScreenStackHeaderConfig?, value: Boolean) {
         logNotAvailable("largeTitle")
     }
diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenStackHeaderConfigManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenStackHeaderConfigManagerDelegate.java
@@ -34,6 +34,9 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case "backTitleFontSize":
         mViewManager.setBackTitleFontSize(view, value == null ? 0 : ((Double) value).intValue());
         break;
+      case "backTitleVisible":
+        mViewManager.setBackTitleVisible(view, value == null ? true : (boolean) value);
+        break;
       case "color":
         mViewManager.setColor(view, ColorPropConverter.getColor(value, view.getContext()));
         break;
diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenStackHeaderConfigManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/RNSScreenStackHeaderConfigManagerInterface.java
@@ -17,6 +17,7 @@ public interface RNSScreenStackHeaderConfigManagerInterface<T extends View> {
   void setBackTitle(T view, @Nullable String value);
   void setBackTitleFontFamily(T view, @Nullable String value);
   void setBackTitleFontSize(T view, int value);
+  void setBackTitleVisible(T view, boolean value);
   void setColor(T view, @Nullable Integer value);
   void setDirection(T view, @Nullable String value);
   void setHidden(T view, boolean value);
diff --git a/createNativeStackNavigator/README.md b/createNativeStackNavigator/README.md
@@ -99,7 +99,7 @@ Whether you can use gestures to dismiss this screen. Defaults to `true`.
 
 #### `headerBackTitle`
 
-Title string used by the back button on iOS. Defaults to the previous scene's `headerTitle`.
+Title string used by the back button on iOS. Defaults to the previous scene's `headerTitle` when not set or set to whitespace only value.
 
 #### `headerBackTitleStyle`
 
diff --git a/guides/GUIDE_FOR_LIBRARY_AUTHORS.md b/guides/GUIDE_FOR_LIBRARY_AUTHORS.md
@@ -421,6 +421,10 @@ Allows for customizing font family to be used for back button title on iOS.
 
 Allows for customizing font size to be used for back button title on iOS.
 
+### `backTitleVisible (iOS only)
+
+Whether the back button title should be visible. Defaults to `true`.
+
 ### `blurEffect` (iOS only)
 
 Blur effect to be applied to the header. Works with `backgroundColor`'s alpha < 1.
diff --git a/ios/RNSScreenStackHeaderConfig.h b/ios/RNSScreenStackHeaderConfig.h
@@ -9,6 +9,12 @@
 #import "RNSScreenStackHeaderSubview.h"
 #import "RNSSearchBar.h"
 
+@interface NSString (RNSStringUtil)
+
++ (BOOL)RNSisBlank:(NSString *)string;
+
+@end
+
 @interface RNSScreenStackHeaderConfig :
 #ifdef RCT_NEW_ARCH_ENABLED
     RCTViewComponentView
@@ -33,6 +39,7 @@
 @property (nonatomic, retain) NSString *backTitle;
 @property (nonatomic, retain) NSString *backTitleFontFamily;
 @property (nonatomic, retain) NSNumber *backTitleFontSize;
+@property (nonatomic, getter=isBackTitleVisible) BOOL backTitleVisible;
 @property (nonatomic, retain) UIColor *backgroundColor;
 @property (nonatomic, retain) UIColor *color;
 @property (nonatomic) BOOL largeTitle;
diff --git a/ios/RNSScreenStackHeaderConfig.mm b/ios/RNSScreenStackHeaderConfig.mm
@@ -40,6 +40,18 @@ @interface RCTImageLoader (Private)
 - (id<RCTImageCache>)imageCache;
 @end
 
+@implementation NSString (RNSStringUtil)
+
++ (BOOL)RNSisBlank:(NSString *)string
+{
+  if (string == nil) {
+    return YES;
+  }
+  return [[string stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]] length] == 0;
+}
+
+@end
+
 @implementation RNSScreenStackHeaderConfig {
   NSMutableArray<RNSScreenStackHeaderSubview *> *_reactSubviews;
 #ifdef RCT_NEW_ARCH_ENABLED
@@ -54,25 +66,30 @@ - (instancetype)initWithFrame:(CGRect)frame
   if (self = [super initWithFrame:frame]) {
     static const auto defaultProps = std::make_shared<const rct::RNSScreenStackHeaderConfigProps>();
     _props = defaultProps;
-    self.hidden = YES;
     _show = YES;
     _translucent = NO;
-    _reactSubviews = [NSMutableArray new];
+    [self initProps];
   }
   return self;
 }
 #else
 - (instancetype)init
 {
   if (self = [super init]) {
-    self.hidden = YES;
     _translucent = YES;
-    _reactSubviews = [NSMutableArray new];
+    [self initProps];
   }
   return self;
 }
 #endif
 
+- (void)initProps
+{
+  self.hidden = YES;
+  _reactSubviews = [NSMutableArray new];
+  _backTitleVisible = YES;
+}
+
 - (UIView *)reactSuperview
 {
   return _screenView;
@@ -471,32 +488,15 @@ + (void)updateViewController:(UIViewController *)vc
   }
 
 #if !TARGET_OS_TV
-  // Fix for github.com/react-navigation/react-navigation/issues/11015
-  // It allows to hide back button title and use back button menu as normal.
-  // Back button display mode and back button menu are available since iOS 14.
-  if (@available(iOS 14.0, *)) {
-    // Make sure to set display mode to default.
-    // This line resets back button display mode - especially needed on the Fabric architecture.
-    navitem.backButtonDisplayMode = UINavigationItemBackButtonDisplayModeDefault;
-
-    NSString *trimmedBackTitle =
-        [config.backTitle stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceCharacterSet]];
-
-    // When an whitespace only back title is passed set back button mode to minimal.
-    if (config.backTitle != nil && [trimmedBackTitle length] == 0) {
-      navitem.backButtonDisplayMode = UINavigationItemBackButtonDisplayModeMinimal;
-    }
-  } else if (
-      config.backTitle != nil || config.backTitleFontFamily || config.backTitleFontSize ||
-      config.disableBackButtonMenu) {
-    RNSUIBarButtonItem *backBarButtonItem = [[RNSUIBarButtonItem alloc] initWithTitle:config.backTitle ?: prevItem.title
-                                                                                style:UIBarButtonItemStylePlain
-                                                                               target:nil
-                                                                               action:nil];
-
-    [backBarButtonItem setMenuHidden:config.disableBackButtonMenu];
-
-    prevItem.backBarButtonItem = backBarButtonItem;
+  const auto isBackTitleBlank = [NSString RNSisBlank:config.backTitle] == YES;
+  NSString *resolvedBackTitle = isBackTitleBlank ? prevItem.title : config.backTitle;
+  RNSUIBarButtonItem *backBarButtonItem = [[RNSUIBarButtonItem alloc] initWithTitle:resolvedBackTitle
+                                                                              style:UIBarButtonItemStylePlain
+                                                                             target:nil
+                                                                             action:nil];
+  [backBarButtonItem setMenuHidden:config.disableBackButtonMenu];
+
+  if (config.isBackTitleVisible) {
     if (config.backTitleFontFamily || config.backTitleFontSize) {
       NSMutableDictionary *attrs = [NSMutableDictionary new];
       NSNumber *size = config.backTitleFontSize ?: @17;
@@ -511,11 +511,18 @@ + (void)updateViewController:(UIViewController *)vc
       } else {
         attrs[NSFontAttributeName] = [UIFont boldSystemFontOfSize:[size floatValue]];
       }
-      [self setTitleAttibutes:attrs forButton:prevItem.backBarButtonItem];
+      [self setTitleAttibutes:attrs forButton:backBarButtonItem];
     }
   } else {
-    prevItem.backBarButtonItem = nil;
+    // back button title should be not visible next to back button,
+    // but it should still appear in back menu (if one is enabled)
+
+    // When backBarButtonItem's title is null, back menu will use value
+    // of backButtonTitle
+    [backBarButtonItem setTitle:nil];
+    prevItem.backButtonTitle = resolvedBackTitle;
   }
+  prevItem.backBarButtonItem = backBarButtonItem;
 
   if (@available(iOS 11.0, *)) {
     if (config.largeTitle) {
@@ -803,6 +810,8 @@ - (void)updateProps:(rct::Props::Shared const &)props oldProps:(rct::Props::Shar
     _direction = [self getDirectionPropValue:newScreenProps.direction];
   }
 
+  _backTitleVisible = newScreenProps.backTitleVisible;
+
   // We cannot compare SharedColor because it is shared value.
   // We could compare color value, but it is more performant to just assign new value
   _titleColor = RCTUIColorFromSharedColor(newScreenProps.titleColor);
@@ -874,6 +883,7 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(backTitleFontFamily, NSString)
 RCT_EXPORT_VIEW_PROPERTY(backTitleFontSize, NSNumber)
 RCT_EXPORT_VIEW_PROPERTY(backgroundColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(backTitleVisible, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(blurEffect, UIBlurEffectStyle)
 RCT_EXPORT_VIEW_PROPERTY(color, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(direction, UISemanticContentAttribute)
diff --git a/native-stack/README.md b/native-stack/README.md
@@ -102,7 +102,7 @@ gestureResponseDistance: {
 
 #### `headerBackTitle`
 
-Title string used by the back button on iOS. Defaults to the previous scene's `headerTitle`.
+Title string used by the back button on iOS. Defaults to the previous scene's `headerTitle` when not set or set to whitespace only value.
 
 #### `headerBackTitleStyle`
 
diff --git a/src/createNativeStackNavigator.tsx b/src/createNativeStackNavigator.tsx
@@ -213,9 +213,10 @@ function renderHeaderConfig(
 
   const headerOptions: ScreenStackHeaderConfigProps = {
     backButtonInCustomView,
-    backTitle: headerBackTitleVisible === false ? '' : headerBackTitle,
+    backTitle: headerBackTitle,
     backTitleFontFamily: headerBackTitleStyle?.fontFamily,
     backTitleFontSize: headerBackTitleStyle?.fontSize,
+    backTitleVisible: headerBackTitleVisible,
     color: headerTintColor,
     direction,
     disableBackButtonMenu,
diff --git a/src/fabric/ScreenStackHeaderConfigNativeComponent.ts b/src/fabric/ScreenStackHeaderConfigNativeComponent.ts
diff --git a/src/native-stack/views/HeaderConfig.tsx b/src/native-stack/views/HeaderConfig.tsx
diff --git a/src/types.tsx b/src/types.tsx

Original file line number	Diff line number	Diff line change
`@@ -162,6 +162,10 @@ class ScreenStackHeaderConfigViewManager : ViewGroupManager<ScreenStackHeaderCon`
`162`	`162`	`logNotAvailable("backTitleFontSize")`
`163`	`163`	`}`
`164`	`164`
	`165`	`+ override fun setBackTitleVisible(view: ScreenStackHeaderConfig?, value: Boolean) {`
	`166`	`+ logNotAvailable("backTitleVisible")`
	`167`	`+ }`
	`168`	`+`
`165`	`169`	`override fun setLargeTitle(view: ScreenStackHeaderConfig?, value: Boolean) {`
`166`	`170`	`logNotAvailable("largeTitle")`
`167`	`171`	`}`