Delete Title subview and code for handling title view scaling. (#304)

This change removes ScreenStackHeaderTitleView component and code that used to handle title view scaling. There were multiple issues related to scaling toolbar title views and it is not a priority at the moment to us to work on addressing those. The most frequent usecase is to put a fixed-dimensions view (e.g. logo or text) which can be now handled w/o this extra code.

android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.java

@@ -215,11 +215,10 @@ public class ScreenStackHeaderConfig extends ViewGroup {
         case RIGHT:
           params.gravity = Gravity.RIGHT;
           break;
-        case TITLE:
-          params.width = LayoutParams.MATCH_PARENT;
-          mToolbar.setTitle(null);
         case CENTER:
+          params.width = LayoutParams.MATCH_PARENT;
           params.gravity = Gravity.CENTER_HORIZONTAL;
+          mToolbar.setTitle(null);
           break;
       }
 

android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderSubview.java

@@ -9,21 +9,14 @@ import com.facebook.react.views.view.ReactViewGroup;
 
 public class ScreenStackHeaderSubview extends ReactViewGroup {
 
-  public class Measurements {
-    public int width;
-    public int height;
-  }
-
   public enum Type {
     LEFT,
     CENTER,
-    TITLE,
     RIGHT,
     BACK
   }
 
   private int mReactWidth, mReactHeight;
-  private final UIManagerModule mUIManager;
 
   @Override
   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
@@ -43,26 +36,13 @@ public class ScreenStackHeaderSubview extends ReactViewGroup {
 
   @Override
   protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
-    if (changed && (mType == Type.CENTER)) {
-      // if we want the view to be centered we need to account for the fact that right and left
-      // paddings may not be equal.
-      Measurements measurements = new Measurements();
-      View parent = (View) getParent();
-      int parentWidth = parent.getWidth();
-      int rightPadding = parentWidth - right;
-      int leftPadding = left;
-      measurements.width = Math.max(0, parentWidth - 2 * Math.max(rightPadding, leftPadding));
-      measurements.height = bottom - top;
-      mUIManager.setViewLocalData(getId(), measurements);
-    }
-    super.onLayout(changed, left, top, right, bottom);
+    // no-op
   }
 
   private Type mType = Type.RIGHT;
 
   public ScreenStackHeaderSubview(ReactContext context) {
     super(context);
-    mUIManager = context.getNativeModule(UIManagerModule.class);
   }
 
   public void setType(Type type) {

android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderSubviewManager.java

@@ -1,8 +1,6 @@
 package com.swmansion.rnscreens;
 
-import com.facebook.react.bridge.ReactApplicationContext;
 import com.facebook.react.module.annotations.ReactModule;
-import com.facebook.react.uimanager.LayoutShadowNode;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.annotations.ReactProp;
 import com.facebook.react.views.view.ReactViewGroup;
@@ -11,15 +9,6 @@ import com.facebook.react.views.view.ReactViewManager;
 @ReactModule(name = ScreenStackHeaderSubviewManager.REACT_CLASS)
 public class ScreenStackHeaderSubviewManager extends ReactViewManager {
 
-  private static class SubviewShadowNode extends LayoutShadowNode {
-    @Override
-    public void setLocalData(Object data) {
-      ScreenStackHeaderSubview.Measurements measurements = (ScreenStackHeaderSubview.Measurements) data;
-      setStyleWidth(measurements.width);
-      setStyleHeight(measurements.height);
-    }
-  }
-
   protected static final String REACT_CLASS = "RNSScreenStackHeaderSubview";
 
   @Override
@@ -32,19 +21,12 @@ public class ScreenStackHeaderSubviewManager extends ReactViewManager {
     return new ScreenStackHeaderSubview(context);
   }
 
-  @Override
-  public LayoutShadowNode createShadowNodeInstance(ReactApplicationContext context) {
-    return new SubviewShadowNode();
-  }
-
   @ReactProp(name = "type")
   public void setType(ScreenStackHeaderSubview view, String type) {
     if ("left".equals(type)) {
       view.setType(ScreenStackHeaderSubview.Type.LEFT);
     } else if ("center".equals(type)) {
       view.setType(ScreenStackHeaderSubview.Type.CENTER);
-    } else if ("title".equals(type)) {
-      view.setType(ScreenStackHeaderSubview.Type.TITLE);
     } else if ("right".equals(type)) {
       view.setType(ScreenStackHeaderSubview.Type.RIGHT);
     } else if ("back".equals(type)) {

createNativeStackNavigator.js

@@ -15,7 +15,7 @@ import {
   ScreenStackHeaderBackButtonImage,
   ScreenStackHeaderLeftView,
   ScreenStackHeaderRightView,
-  ScreenStackHeaderTitleView,
+  ScreenStackHeaderCenterView,
 } from 'react-native-screens';
 
 function renderComponentOrThunk(componentOrThunk, props) {
@@ -141,9 +141,9 @@ class StackView extends React.Component {
         headerOptions.title = options.headerTitle;
       } else {
         children.push(
-          <ScreenStackHeaderTitleView key="title">
+          <ScreenStackHeaderCenterView key="center">
             {renderComponentOrThunk(options.headerTitle, { scene })}
-          </ScreenStackHeaderTitleView>
+          </ScreenStackHeaderCenterView>
         );
       }
     }

ios/RNSScreenStackHeaderConfig.m

@@ -20,28 +20,6 @@
 @end
 
 
-@interface RNSScreenHeaderItemMeasurements : NSObject
-@property (nonatomic, readonly) CGSize headerSize;
-@property (nonatomic, readonly) CGFloat leftPadding;
-@property (nonatomic, readonly) CGFloat rightPadding;
-
-- (instancetype)initWithHeaderSize:(CGSize)headerSize leftPadding:(CGFloat)leftPadding rightPadding:(CGFloat)rightPadding;
-@end
-
-@implementation RNSScreenHeaderItemMeasurements
-
-- (instancetype)initWithHeaderSize:(CGSize)headerSize leftPadding:(CGFloat)leftPadding rightPadding:(CGFloat)rightPadding
-{
-  if (self = [super init]) {
-    _headerSize = headerSize;
-    _leftPadding = leftPadding;
-    _rightPadding = rightPadding;
-  }
-  return self;
-}
-
-@end
-
 @interface RNSScreenStackHeaderSubview : UIView
 
 @property (nonatomic, weak) RCTBridge *bridge;
@@ -50,6 +28,9 @@
 
 @end
 
+@implementation RNSScreenStackHeaderSubview
+@end
+
 @implementation RNSScreenStackHeaderConfig {
   NSMutableArray<RNSScreenStackHeaderSubview *> *_reactSubviews;
 }
@@ -403,7 +384,6 @@
       }
       case RNSScreenStackHeaderSubviewTypeCenter:
       case RNSScreenStackHeaderSubviewTypeTitle: {
-        subview.translatesAutoresizingMaskIntoConstraints = NO;
         navitem.titleView = subview;
         break;
       }
@@ -477,67 +457,6 @@ RCT_ENUM_CONVERTER(RNSScreenStackHeaderSubviewType, (@{
 
 @end
 
-@implementation RNSScreenStackHeaderSubview
-
-- (instancetype)initWithBridge:(RCTBridge *)bridge
-{
-  if (self = [super init]) {
-    _bridge = bridge;
-  }
-  return self;
-}
-
-- (void)layoutSubviews
-{
-  [super layoutSubviews];
-  if (!self.translatesAutoresizingMaskIntoConstraints) {
-    CGSize size = self.superview.frame.size;
-    CGFloat right = size.width - self.frame.size.width - self.frame.origin.x;
-    CGFloat left = self.frame.origin.x;
-    [_bridge.uiManager
-     setLocalData:[[RNSScreenHeaderItemMeasurements alloc]
-                   initWithHeaderSize:size
-                   leftPadding:left rightPadding:right]
-     forView:self];
-  }
-}
-
-- (void)reactSetFrame:(CGRect)frame
-{
-  if (self.translatesAutoresizingMaskIntoConstraints) {
-    [super reactSetFrame:frame];
-  }
-}
-
-- (CGSize)intrinsicContentSize
-{
-  return UILayoutFittingExpandedSize;
-}
-
-@end
-
-@interface RNSScreenStackHeaderSubviewShadow : RCTShadowView
-@end
-
-@implementation RNSScreenStackHeaderSubviewShadow
-
-- (void)setLocalData:(RNSScreenHeaderItemMeasurements *)data
-{
-  self.width = (YGValue){data.headerSize.width - data.leftPadding - data.rightPadding, YGUnitPoint};
-  self.height = (YGValue){data.headerSize.height, YGUnitPoint};
-
-  if (data.leftPadding > data.rightPadding) {
-    self.paddingLeft = (YGValue){0, YGUnitPoint};
-    self.paddingRight = (YGValue){data.leftPadding - data.rightPadding, YGUnitPoint};
-  } else {
-    self.paddingLeft = (YGValue){data.rightPadding - data.leftPadding, YGUnitPoint};
-    self.paddingRight = (YGValue){0, YGUnitPoint};
-  }
-  [self didSetProps:@[@"width", @"height", @"paddingLeft", @"paddingRight"]];
-}
-
-@end
-
 @implementation RNSScreenStackHeaderSubviewManager
 
 RCT_EXPORT_MODULE()
@@ -546,12 +465,7 @@ RCT_EXPORT_VIEW_PROPERTY(type, RNSScreenStackHeaderSubviewType)
 
 - (UIView *)view
 {
-  return [[RNSScreenStackHeaderSubview alloc] initWithBridge:self.bridge];
-}
-
-- (RCTShadowView *)shadowView
-{
-  return [RNSScreenStackHeaderSubviewShadow new];
+  return [RNSScreenStackHeaderSubview new];
 }
 
 @end

src/screens.native.js

@@ -171,14 +171,6 @@ const ScreenStackHeaderLeftView = props => (
   />
 );
 
-const ScreenStackHeaderTitleView = props => (
-  <ScreensNativeModules.NativeScreenStackHeaderSubview
-    {...props}
-    type="title"
-    style={styles.headerSubview}
-  />
-);
-
 const ScreenStackHeaderCenterView = props => (
   <ScreensNativeModules.NativeScreenStackHeaderSubview
     {...props}
@@ -210,7 +202,6 @@ module.exports = {
   ScreenStackHeaderBackButtonImage,
   ScreenStackHeaderRightView,
   ScreenStackHeaderLeftView,
-  ScreenStackHeaderTitleView,
   ScreenStackHeaderCenterView,
 
   enableScreens,