[iOS] Fix paragraph styling of TextInput #48060
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
Hi, I noticed that on iOS TextInput's value overflows out of the input if we set specific styling. In my case it were
lineHeight
andheight
. I did a little research and it turned out that we can break TextInput when we set styling related toParagraphStyles
, because in that case withinRCTNSTextAttributesFromTextAttributes
new instance ofNSMutableParagraphStyle
is created with some default values, which includeslineBreakMode
set toNSLineBreakByWordWrapping
what is totally fine for multiline TextInput, but it's not for single one.I decided to add an extra check that overrides default value of
lineBreakMode
to make it working correctly even though when paragraph styling props were passed.This is how it looked like before:

After:

Changelog:
[IOS][FIXED] - all changes that take care of overriding
lineBreakMode
default value are added topackages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mm
Test Plan:
I added an extra example to tester app that is breaks if we set input's value to something long like
This is a very long text value of an input that will overflow the input container if we set specific height and text styling