Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[iOS] Fix paragraph styling of TextInput #48060

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

BogiKay
Copy link
Contributor

@BogiKay BogiKay commented Dec 3, 2024

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 and height. I did a little research and it turned out that we can break TextInput when we set styling related to ParagraphStyles , because in that case within RCTNSTextAttributesFromTextAttributes new instance of NSMutableParagraphStyle is created with some default values, which includes lineBreakMode set to NSLineBreakByWordWrapping 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:
Screenshot 2024-12-03 at 11 31 52

After:
Screenshot 2024-12-03 at 12 11 53

Changelog:

[IOS][FIXED] - all changes that take care of overriding lineBreakMode default value are added to packages/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

@facebook-github-bot 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. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Dec 3, 2024
@BogiKay BogiKay force-pushed the fix-paragraph-styling-text-input branch from 17e555d to 10678c4 Compare December 13, 2024 13:43
@BogiKay
Copy link
Contributor Author

BogiKay commented Dec 16, 2024

@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

Copy link
Contributor

@cipolleschi cipolleschi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for fixing this!

It might take some time to land it as I need to add some E2E tests internally to be able to land it. I hope to find some time this week.

@facebook-github-bot
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants