Skip to content

Commit 349d550

Browse files
fabOnReactfacebook-github-bot
authored andcommitted
Fix TextInput vertical alignment issue when using lineHeight prop on iOS without changing Text baseline (Paper - old arch) (#38359)
Summary: This PR fixes visual regression introduced with #37465 (comment) Adding paragraphStyle.maximumLineHeight to a iOS UITextField displays the text under the UITextField ([ios-screenshot-1][1], [ios-screenshot-2][2], [ios-screenshot-3][3]). The PR implements the logic from RCTTextShadowView [#postprocessAttributedText](https://github.com/facebook/react-native/blob/9ab27e8895d6934e72ebdc601d169578ab9628f1/packages/react-native/Libraries/Text/Text/RCTTextShadowView.m#L165-L167) in RCTBaseTextInpuShadowView [#uiManagerWillPerformMounting](https://github.com/facebook/react-native/blob/4c944540f732c6055d447ecaf37d5c8f3eec1bc4/packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.m#L130-L192). [1]: https://user-images.githubusercontent.com/24992535/238834159-566f7eef-ea2d-4fd4-a519-099b0a12046c.png "ios-screenshot-1" [2]: https://user-images.githubusercontent.com/24992535/238834184-feb454a9-6504-4832-aec8-989f1d027861.png "ios-screenshot-2" [3]: https://user-images.githubusercontent.com/24992535/238834283-cf572f94-a641-4790-92bf-bbe43afb1443.png "ios-screenshot-3" [4]: https://github.com/Expensify/App/assets/24992535/06726b45-7e35-4003-9fcc-50c8d0dff0f6 [5]: https://github.com/Expensify/App/assets/24992535/d9745d29-8863-4170-bcc3-e78fa7e550d2 fixes #28012 fixes #33986 Related #35741 #31112 ## Changelog: [IOS] [FIXED] - Fix TextInput vertical alignment issue when using lineHeight prop on iOS without changing Text baseline (Paper - old arch) Pull Request resolved: #38359 Test Plan: Extensive test included in the PR comments #37465 (comment) and Expensify/App#17767 (comment) Reviewed By: cipolleschi Differential Revision: D52325261 Pulled By: dmytrorykun fbshipit-source-id: d072a598bfaafbbffc41005b1fda1795cf3d8ab9
1 parent ac43ee1 commit 349d550

File tree

1 file changed

+48
-0
lines changed

1 file changed

+48
-0
lines changed

Diff for: packages/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.mm

+48
Original file line numberDiff line numberDiff line change
@@ -158,6 +158,8 @@ - (void)uiManagerWillPerformMounting
158158
[attributedText insertAttributedString:propertyAttributedText atIndex:0];
159159
}
160160

161+
[self postprocessAttributedText:attributedText];
162+
161163
NSAttributedString *newAttributedText;
162164
if (![_previousAttributedText isEqualToAttributedString:attributedText]) {
163165
// We have to follow `set prop` pattern:
@@ -191,6 +193,52 @@ - (void)uiManagerWillPerformMounting
191193
}];
192194
}
193195

196+
- (void)postprocessAttributedText:(NSMutableAttributedString *)attributedText
197+
{
198+
__block CGFloat maximumLineHeight = 0;
199+
200+
[attributedText enumerateAttribute:NSParagraphStyleAttributeName
201+
inRange:NSMakeRange(0, attributedText.length)
202+
options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired
203+
usingBlock:^(NSParagraphStyle *paragraphStyle, __unused NSRange range, __unused BOOL *stop) {
204+
if (!paragraphStyle) {
205+
return;
206+
}
207+
208+
maximumLineHeight = MAX(paragraphStyle.maximumLineHeight, maximumLineHeight);
209+
}];
210+
211+
if (maximumLineHeight == 0) {
212+
// `lineHeight` was not specified, nothing to do.
213+
return;
214+
}
215+
216+
__block CGFloat maximumFontLineHeight = 0;
217+
218+
[attributedText enumerateAttribute:NSFontAttributeName
219+
inRange:NSMakeRange(0, attributedText.length)
220+
options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired
221+
usingBlock:^(UIFont *font, NSRange range, __unused BOOL *stop) {
222+
if (!font) {
223+
return;
224+
}
225+
226+
if (maximumFontLineHeight <= font.lineHeight) {
227+
maximumFontLineHeight = font.lineHeight;
228+
}
229+
}];
230+
231+
if (maximumLineHeight < maximumFontLineHeight) {
232+
return;
233+
}
234+
235+
CGFloat baseLineOffset = maximumLineHeight / 2.0 - maximumFontLineHeight / 2.0;
236+
237+
[attributedText addAttribute:NSBaselineOffsetAttributeName
238+
value:@(baseLineOffset)
239+
range:NSMakeRange(0, attributedText.length)];
240+
}
241+
194242
#pragma mark -
195243

196244
- (NSAttributedString *)measurableAttributedText

0 commit comments

Comments
 (0)