From 39b4081c5e66f45548db8c0820c37e9460d6c574 Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 6 Feb 2024 14:45:41 -0800 Subject: [PATCH] Fix iOS composer text getting cut off (#2764) * patch react-native textinput * cleanup patchfile --- patches/react-native+0.73.2.patch | 81 ++++++++++++++++++++++++++-- patches/react-native+0.73.2.patch.md | 5 ++ 2 files changed, 83 insertions(+), 3 deletions(-) create mode 100644 patches/react-native+0.73.2.patch.md diff --git a/patches/react-native+0.73.2.patch b/patches/react-native+0.73.2.patch index 66f7f764..8f100169 100644 --- a/patches/react-native+0.73.2.patch +++ b/patches/react-native+0.73.2.patch @@ -2,8 +2,8 @@ diff --git a/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInp index 9dca6a5..090bda5 100644 --- a/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm +++ b/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm -@@ -266,11 +266,10 @@ static void *TextFieldSelectionObservingContext = &TextFieldSelectionObservingCo - +@@ -266,11 +266,10 @@ - (void)textViewDidChange:(__unused UITextView *)textView + - (void)textViewDidChangeSelection:(__unused UITextView *)textView { - if (_lastStringStateWasUpdatedWith && ![_lastStringStateWasUpdatedWith isEqual:_backedTextInputView.attributedText]) { @@ -14,4 +14,79 @@ index 9dca6a5..090bda5 100644 - _lastStringStateWasUpdatedWith = _backedTextInputView.attributedText; [self textViewProbablyDidChangeSelection]; } - + +diff --git a/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.mm b/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.mm +index 1f06b79..ab458f3 100644 +--- a/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.mm ++++ b/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.mm +@@ -87,7 +87,7 @@ - (void)invalidateContentSize + return; + } + +- CGSize maximumSize = self.layoutMetrics.frame.size; ++ CGSize maximumSize = self.layoutMetrics.contentFrame.size; + + if (_maximumNumberOfLines == 1) { + maximumSize.width = CGFLOAT_MAX; +@@ -158,6 +158,8 @@ - (void)uiManagerWillPerformMounting + [attributedText insertAttributedString:propertyAttributedText atIndex:0]; + } + ++ [self postprocessAttributedText:attributedText]; ++ + NSAttributedString *newAttributedText; + if (![_previousAttributedText isEqualToAttributedString:attributedText]) { + // We have to follow `set prop` pattern: +@@ -191,6 +193,52 @@ - (void)uiManagerWillPerformMounting + }]; + } + ++- (void)postprocessAttributedText:(NSMutableAttributedString *)attributedText ++{ ++ __block CGFloat maximumLineHeight = 0; ++ ++ [attributedText enumerateAttribute:NSParagraphStyleAttributeName ++ inRange:NSMakeRange(0, attributedText.length) ++ options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired ++ usingBlock:^(NSParagraphStyle *paragraphStyle, __unused NSRange range, __unused BOOL *stop) { ++ if (!paragraphStyle) { ++ return; ++ } ++ ++ maximumLineHeight = MAX(paragraphStyle.maximumLineHeight, maximumLineHeight); ++ }]; ++ ++ if (maximumLineHeight == 0) { ++ // `lineHeight` was not specified, nothing to do. ++ return; ++ } ++ ++ __block CGFloat maximumFontLineHeight = 0; ++ ++ [attributedText enumerateAttribute:NSFontAttributeName ++ inRange:NSMakeRange(0, attributedText.length) ++ options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired ++ usingBlock:^(UIFont *font, NSRange range, __unused BOOL *stop) { ++ if (!font) { ++ return; ++ } ++ ++ if (maximumFontLineHeight <= font.lineHeight) { ++ maximumFontLineHeight = font.lineHeight; ++ } ++ }]; ++ ++ if (maximumLineHeight < maximumFontLineHeight) { ++ return; ++ } ++ ++ CGFloat baseLineOffset = maximumLineHeight / 2.0 - maximumFontLineHeight / 2.0; ++ ++ [attributedText addAttribute:NSBaselineOffsetAttributeName ++ value:@(baseLineOffset) ++ range:NSMakeRange(0, attributedText.length)]; ++} ++ + #pragma mark - + + - (NSAttributedString *)measurableAttributedText diff --git a/patches/react-native+0.73.2.patch.md b/patches/react-native+0.73.2.patch.md new file mode 100644 index 00000000..3d327516 --- /dev/null +++ b/patches/react-native+0.73.2.patch.md @@ -0,0 +1,5 @@ +# TextInput Patch + +Patching `RCTBaseTextShadowInput.mm` from https://github.com/facebook/react-native/pull/38359. This fixes some text +getting cut off inside the composer. This was merged in December, so we should be able to remove this patch when RN +ships the next release.