iOS: Support allowFontScaling on TextInput #14030

rigdern · 2017-05-18T03:40:48Z

Motivation (required)

Currently, only Text supports the allowFontScaling prop. This commit adds support for it on TextInput.

Notes

As part of this change, the TextInput setters for font attributes (e.g. size, weight) had to be refactored. The problem with them is that they use RCTFont's helpers which create a new font based on an existing font. These helpers lose information. In particular, they lose the scaleMultiplier.

For example, suppose the font size is 12 and the device's font multiplier is set to 1.5. So we'd create a font with size 12 and scaleMultiplier 1.5 which is an effective size of 18 (which is the only thing stored in the font). Next, suppose the device's font multiplier changes to 1. So we'd use an RCTFont helper to create a new font based on the existing font but with a scaleMultiplier of 1. However, the font didn't store the font size (12) and scaleMultiplier (1.5) separately. It just knows the (effective) font size of 18. So RCTFont thinks the new font has a font size of 18 and a scaleMultiplier of 1 so its effective font size is 18. This is incorrect and it should have been 12.

To fix this, the font attributes are now all stored individually. Anytime one of them changes, updateFont is called which recreates the font from scratch. This happens to fix some bugs around fontStyle and fontWeight which were reported several times before: #13730, #12738, #2140, #8533.

Test Plan (required)

Created a test app where I verified that allowFontScaling works properly for TextInputs for all values (undefined, true, false) for a variety of TextInputs:

Singleline TextInput
Singleline TextInput's placeholder
Multiline TextInput
Multiline TextInput's placeholder
Multiline TextInput using children instead of value

Also, verified switching fontSize, fontWeight, fontStyle and fontFamily through a bunch of combinations works properly.

Lastly, my team has been using this change in our app.

Adam Comella
Microsoft Corp.

jacobp100 · 2017-05-19T13:37:00Z

It would be good if we could have support for font variants. You can get a font variant from RCTFontVariantDescriptor!

shergin · 2017-06-23T21:39:18Z

(t19597801)

shergin · 2017-06-23T21:44:33Z

@rigdern That's amazing! Thank you! Right now I am in the middle of huge refactoring of <TextInput>, so I will be able to merge it only after the refactoring is done. I also plan to decouple all font-related logic into separate class, so we can keep managers and view classes with RN specific data-flow logic as simple as possible.

rigdern · 2017-08-28T13:59:23Z

@shergin has your TextInput refactoring been merged to master?

shergin · 2017-08-29T04:47:42Z

Yes, kind of. I merged all of what I had iOS TextInput related.

Currently, only Text supports the allowFontScaling prop. This commit adds support for it on TextInput. As part of this change, the TextInput setters for font attributes (e.g. size, weight) had to be refactored. The problem with them is that they use RCTFont's helpers which create a new font based on an existing font. These helpers lose information. In particular, they lose the scaleMultiplier. For example, suppose the font size is 12 and the device's font multiplier is set to 1.5. So we'd create a font with size 12 and scaleMultiplier 1.5 which is an effective size of 18 (which is the only thing stored in the font). Next, suppose the device's font multiplier changes to 1. So we'd use an RCTFont helper to create a new font based on the existing font but with a scaleMultiplier of 1. However, the font didn't store the font size (12) and scaleMultiplier (1.5) separately. It just knows the (effective) font size of 18. So RCTFont thinks the new font has a font size of 18 and a scaleMultiplier of 1 so its effective font size is 18. This is incorrect and it should have been 12. To fix this, the font attributes are now all stored individually. Anytime one of them changes, updateFont is called which recreates the font from scratch. This happens to fix some bugs around fontStyle and fontWeight which were reported several times before: facebook#13730, facebook#12738, facebook#2140, facebook#8533.

pull-bot · 2017-08-31T07:21:59Z

Attention: @shergin

Generated by 🚫 dangerJS

shergin

I really like the direction of this approach.
But here is how we can do it even better:

Make a font RCTTextInput's prop.
Create a new class, something like RCTFontAttributes (We already have RCTFontDescriptor, we have to also be sure that we are not reinventing this.)
RCTFontAttributes should have all font specific props; getter which returns UIFont instance; a delegate with one method fontAttributesDidChangeWithFont:
Have NSNotificationCenter related stuff inside that class;
Add a prop to RCTTextInput fontAttributes;
Make a RCTTextInput a delegate and implement that method as self.font = font;;
Redirect all font specific props in ViewManager to view.fontAttributes.xxxx.

And then later, finally, we can reuse it inside RCTText and co.

…ibutes

rigdern · 2017-09-07T08:51:41Z

@shergin I didn't have time to test it yet but is my latest commit along the lines that you were thinking?

A tricky detail was that RCTTextInput can't set font in its constructor because that would cause RCTTextView to attempt to set font on _backedTextInput before _backedTextInput was created. Instead, RCTTextInput subclasses manually set font in their constructors (the previous implementation had a similar problem but I didn't notice).

shergin

Yes, yes, yes.

shergin · 2017-09-07T16:10:33Z

Libraries/Text/RCTTextInput.m

@@ -27,8 +28,10 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge
  RCTAssertParam(bridge);

  if (self = [super initWithFrame:CGRectZero]) {
-    _bridge = bridge;
+      _bridge = bridge;


Code style.

shergin · 2017-09-07T16:10:41Z

Libraries/Text/RCTTextInput.m

    _eventDispatcher = bridge.eventDispatcher;
+    _fontAttributes = [[RCTFontAttributes alloc ] initWithAccessibilityManager:bridge.accessibilityManager];


Code style.

shergin · 2017-09-07T16:11:37Z

Libraries/Text/RCTTextView.m

@@ -70,6 +73,18 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge
  return _backedTextInput;
 }

+- (void)fontAttributesDidChangeWithFont:(RCTFont *)font
+{
+  [super fontAttributesDidChangeWithFont:fonte];


fonte? French? 😄

shergin · 2017-09-07T16:12:36Z

Libraries/Text/RCTTextViewManager.m

@@ -35,6 +35,7 @@ - (UIView *)view

 #pragma mark - Unified <TextInput> properties

+RCT_REMAP_VIEW_PROPERTY(allowFontScaling, fontAttributes.allowFontScaling, BOOL)


We also have to remap other font-related props like this one.

What props are you talking about? What should they be remapped to? It looks like you are highlighting allowFontScaling which is already getting remapped to fontAttributes.

shergin · 2017-09-07T16:13:47Z

Libraries/Text/RCTTextViewManager.m

@@ -66,19 +67,19 @@ - (UIView *)view

 RCT_CUSTOM_VIEW_PROPERTY(fontSize, NSNumber, RCTTextView)
 {
-  view.font = [RCTFont updateFont:view.font withSize:json ?: @(defaultView.font.pointSize)];
+  view.fontAttributes.fontSize = json ?: @(defaultView.font.pointSize);


... and get rid of all custom imperative logic inside ViewManager.
We don't really need defaultView here.

@shergin Are you saying we should default to passing nil to fontAttributes properties instead of forwarding whatever was in defaultView?

I think that will change the behavior but at least now things will be more consistent. For example, today I think if you don't specify fontSize during the initial render, the rendered fontSize will be RCTFont's default. If you later set the fontSize to 20 and then back to nil, I think it'll fallback to a default of defaultView.font.pointSize which is not necessarily the same as RCTFont's default so the font could be a different size now than it was when it was initially rendered.

shergin · 2017-09-07T16:21:31Z

Libraries/Text/RCTTextInput.h

@@ -41,6 +43,8 @@
 @property (nonatomic, copy) RCTDirectEventBlock onContentSizeChange;
 @property (nonatomic, copy) RCTDirectEventBlock onSelectionChange;

+@property (readonly, nonatomic, strong) UIFont *font;


Instad of having real prop, we probably want to have only setter which will redirect the value to backedTextInputView.font. (Also we have to add font to BackedTextInputProtocol if it does not have it already.)

I think this will change the behavior but at least now things will be more consistent. For example, today I think if you don't specify fontSize during the initial render, the rendered fontSize will be RCTFont's default. If you later set the fontSize to 20 and then back to nil, I think it'll fallback to a default of defaultView.font.pointSize which is not necessarily the same as RCTFont's default so the font could be a different size now than it was when it was initially rendered.

rigdern · 2017-09-21T18:24:29Z

@shergin Sorry for the delay. I pushed some changes that address your feedback.

shergin

❤️
I wll try to land this in the begginnig of the week!
Thank you so much for your effort!

shergin · 2017-09-24T22:06:27Z

Libraries/Text/RCTTextView.m

@@ -57,6 +58,8 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge

    _backedTextInput.textInputDelegate = self;

+    self.font = self.fontAttributes.font;


Why do we need this?

It ensures that _backedTextInput's font gets initialized to RCTFontAttributes's default font. This is not necessarily the same as _backedTextInput's default font.

shergin · 2017-09-24T22:08:05Z

Libraries/Text/RCTTextView.m

@@ -70,6 +73,18 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge
  return _backedTextInput;
 }

+- (void)fontAttributesDidChangeWithFont:(UIFont *)font


(We can consider moving this to superclass.)

This overrides the superclass's implementation of fontAttributesDidChangeWithFont. Are you suggesting I move this logic to the superclass's implementation so RCTTextView doesn't have to override it?

Yes. invalidateContentSize does not exist in base class, right? I think we can also move this method to the base class (even with possibly empty implementation).

(This does not block landing. We can do it in the future.)

facebook-github-bot · 2017-09-24T22:41:08Z

@shergin has imported this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. GH Review: review-needed labels May 18, 2017

shergin self-requested a review May 26, 2017 23:44

shergin added the Platform: iOS iOS applications. label May 26, 2017

rigdern force-pushed the rigdern/ios-TextInput-allowFontScaling branch from c28b4af to 5cbd062 Compare June 18, 2017 00:34

rigdern force-pushed the rigdern/ios-TextInput-allowFontScaling branch from 5cbd062 to 4268fba Compare August 31, 2017 07:13

shergin suggested changes Sep 6, 2017

View reviewed changes

Address PR feedback. Move some logic from RCTTextInput to RCTFontAttr…

6f5b337

…ibutes

shergin suggested changes Sep 7, 2017

View reviewed changes

Adam Comella added 3 commits September 21, 2017 10:11

Fix typos

82d0033

Addressed most PR feedback and fixed compilation errors

a2520cd

shergin reviewed Sep 24, 2017

View reviewed changes

facebook-github-bot added the Import Started This pull request has been imported. This does not imply the PR has been approved. label Sep 24, 2017

facebook-github-bot closed this in 9c4ec30 Oct 2, 2017

rigdern deleted the rigdern/ios-TextInput-allowFontScaling branch November 12, 2017 02:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

iOS: Support allowFontScaling on TextInput #14030

iOS: Support allowFontScaling on TextInput #14030

rigdern commented May 18, 2017

jacobp100 commented May 19, 2017

shergin commented Jun 23, 2017

shergin commented Jun 23, 2017

rigdern commented Aug 28, 2017

shergin commented Aug 29, 2017

pull-bot commented Aug 31, 2017 •

edited

Loading

shergin left a comment •

edited

Loading

rigdern commented Sep 7, 2017

shergin left a comment

shergin Sep 7, 2017

shergin Sep 7, 2017

shergin Sep 7, 2017

shergin Sep 7, 2017

rigdern Sep 7, 2017

shergin Sep 7, 2017

rigdern Sep 7, 2017

shergin Sep 7, 2017

rigdern commented Sep 21, 2017

shergin left a comment

shergin Sep 24, 2017

rigdern Sep 24, 2017

shergin Sep 24, 2017

rigdern Sep 24, 2017

shergin Sep 24, 2017

shergin Sep 24, 2017

facebook-github-bot commented Sep 24, 2017

		_eventDispatcher = bridge.eventDispatcher;
		_fontAttributes = [[RCTFontAttributes alloc ] initWithAccessibilityManager:bridge.accessibilityManager];

		@@ -35,6 +35,7 @@ - (UIView *)view

		#pragma mark - Unified <TextInput> properties

		RCT_REMAP_VIEW_PROPERTY(allowFontScaling, fontAttributes.allowFontScaling, BOOL)

		@@ -57,6 +58,8 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge

		_backedTextInput.textInputDelegate = self;

		self.font = self.fontAttributes.font;

iOS: Support allowFontScaling on TextInput #14030

iOS: Support allowFontScaling on TextInput #14030

Conversation

rigdern commented May 18, 2017

Motivation (required)

Notes

Test Plan (required)

jacobp100 commented May 19, 2017

shergin commented Jun 23, 2017

shergin commented Jun 23, 2017

rigdern commented Aug 28, 2017

shergin commented Aug 29, 2017

pull-bot commented Aug 31, 2017 • edited Loading

shergin left a comment • edited Loading

Choose a reason for hiding this comment

rigdern commented Sep 7, 2017

shergin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rigdern commented Sep 21, 2017

shergin left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

facebook-github-bot commented Sep 24, 2017

pull-bot commented Aug 31, 2017 •

edited

Loading

shergin left a comment •

edited

Loading