[iOS] Fix paragraph styling of TextInput #48060
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
facebook-github-bot
added
CLA Signed
BogiKay
force-pushed
the
fix-paragraph-styling-text-input
branch
from
17e555d to
10678c4
Compare
|
@cipolleschi is there anything I can do to help move this PR forward? It seems like a low-hanging fruit that could fix a styling issue that encountered recently in react-native-paper library |
cipolleschi
approved these changes
Dec 16, 2024
|
@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
|
This PR is stale because it has been open for 180 days with no activity. It will be closed in 7 days unless you comment on it or remove the "Stale" label. |
react-native-bot
added
the
Stale
|
There is a conflict here. @BogiKay could you take care of it? |
Of course, I'll take care of it |
react-native-bot
removed
the
Stale
BogiKay
force-pushed
the
fix-paragraph-styling-text-input
branch
from
10678c4 to
7191bdd
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
lineHeightandheight. I did a little research and it turned out that we can break TextInput when we set styling related toParagraphStyles, because in that case withinRCTNSTextAttributesFromTextAttributesnew instance ofNSMutableParagraphStyleis created with some default values, which includeslineBreakModeset toNSLineBreakByWordWrappingwhat 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
lineBreakModeto 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
lineBreakModedefault value are added topackages/react-native/React/Fabric/Mounting/ComponentViews/TextInput/RCTTextInputComponentView.mmTest 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