feat(iOS): line break mode prop iOS updates to consume new cpp functions

[shubhamguptadream11]

Summary:

Solves this issue: #44107

Changelog:

[IOS] [ADDED] - Line break mode for TextInput components. This includes iOS updates to consume new cpp functions.

This PR is a breakdown of this PR.

Test Plan:

• Tested builds in new and old architecture mode.

[react-native-bot]

	Fails
🚫	📋 Verify Changelog Format - See Changelog format

Generated by 🚫 dangerJS against 397a0be

[cipolleschi]

Thanks for working on this and for splitting the original PR

[facebook-github-bot]

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

[cipolleschi]

hey @shubhamguptadream11, I was testing the new changes and I'm not sure they work as intended...
I think that the clip should clip inside the TextInput without ellipsis, not to go over the textInput boundaries... 😅

Also, can we use word everywhere instead of wordWrapping?

[cipolleschi]

the issue can be due to a recent change we pushed that refactors how we draw the text in RCTParagraphComponentView. Try to rebase on top of main to see it failing.

[shubhamguptadream11]

hey @shubhamguptadream11, I was testing the new changes and I'm not sure they work as intended...
I think that the clip should clip inside the TextInput without ellipsis, not to go over the textInput boundaries... 😅

I verified this behaviour by testing NSLineBreakByClipping in a sample iOS app (not in React Native).
I observed that when setting NSLineBreakByClipping in paragraphStyle.lineBreakMode, the text indeed overflows the text field area instead of clipping it inside.
I've attached the sample code and a snapshot demonstrating this.

    // Create a paragraph style
    NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init];

    paragraphStyle.lineBreakMode = NSLineBreakByClipping; // Example line break mode
    
    // Create attributes dictionary
    NSDictionary<NSAttributedStringKey, id> *attributes = @{
        NSParagraphStyleAttributeName: paragraphStyle,
        NSFontAttributeName: [UIFont systemFontOfSize:16], // Example font size
        NSForegroundColorAttributeName: [UIColor blackColor] // Example text color
    };
    
    // Create attributed string with attributes
    NSAttributedString *attributedText = [[NSAttributedString alloc] initWithString:self.textField.text attributes:attributes];
    
    // Set attributed text to the text field
    self.textField.attributedText = attributedText;
    
    // Set up border
    self.textField.layer.borderWidth = 1.0; // Border width
    self.textField.layer.borderColor = [UIColor grayColor].CGColor; // Border color
    self.textField.layer.cornerRadius = 5.0; // Optional: for rounded corners
    
    // Add the text field to the view
    [self.view addSubview:self.textField];

Solution:
In order to achieve the desired clipping effect within the boundaries in react-native, adding overflow: 'hidden' is necessary. So we can update the comments stating that in order to use clip use overflow: 'hidden' as well.

Also, can we use word everywhere instead of wordWrapping?

I am renaming the wordWrapping to word

Thanks!

[cipolleschi]

That's an interesting behavior. xD
It does not respect what it states in the documentation. 😞

Also, I have not realized that wordWrapping was already used in the old arch... so let's try not to be breaking.
But don't worry, I can take care of it.

[shubhamguptadream11]

@cipolleschi I already pushed the changes related to renaming. So do you want me to revert it? or you can handle it.

[facebook-github-bot]

@cipolleschi merged this pull request in fe941a8.