From 89658d9361d32865bf5955549e94f85be155da89 Mon Sep 17 00:00:00 2001 From: Krzysztof Magiera Date: Mon, 3 Feb 2020 16:27:00 +0100 Subject: [PATCH] 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. --- .../rnscreens/ScreenStackHeaderConfig.java | 5 +- .../rnscreens/ScreenStackHeaderSubview.java | 22 +---- .../ScreenStackHeaderSubviewManager.java | 18 ---- createNativeStackNavigator.js | 6 +- ios/RNSScreenStackHeaderConfig.m | 94 +------------------ src/screens.native.js | 9 -- 6 files changed, 10 insertions(+), 144 deletions(-) diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.java b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.java index 8607aec3..18e1d4d0 100644 --- a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfig.java +++ b/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; } diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderSubview.java b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderSubview.java index 36937d24..7960583f 100644 --- a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderSubview.java +++ b/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) { diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderSubviewManager.java b/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderSubviewManager.java index f19897ba..4edd6fb8 100644 --- a/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderSubviewManager.java +++ b/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)) { diff --git a/createNativeStackNavigator.js b/createNativeStackNavigator.js index 9afa7ad3..6df1211a 100644 --- a/createNativeStackNavigator.js +++ b/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( - + {renderComponentOrThunk(options.headerTitle, { scene })} - + ); } } diff --git a/ios/RNSScreenStackHeaderConfig.m b/ios/RNSScreenStackHeaderConfig.m index 2d0cd200..5e3e8575 100644 --- a/ios/RNSScreenStackHeaderConfig.m +++ b/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 *_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 diff --git a/src/screens.native.js b/src/screens.native.js index 63335d57..5d3795c3 100644 --- a/src/screens.native.js +++ b/src/screens.native.js @@ -171,14 +171,6 @@ const ScreenStackHeaderLeftView = props => ( /> ); -const ScreenStackHeaderTitleView = props => ( - -); - const ScreenStackHeaderCenterView = props => (