[iOS] Fix paragraph styling of TextInput

[BogiKay]

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:

After:

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

[BogiKay]

@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]

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]

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

[react-native-bot]

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.

[cipolleschi]

There is a conflict here. @BogiKay could you take care of it?

[BogiKay]

There is a conflict here. @BogiKay could you take care of it?

Of course, I'll take care of it

[react-native-bot]

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]

This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[BogiKay]

not stale