Text renderRule is not accepting textBreakStrategy prop

[abelyeupear]

Since Android 10, textBreakStrategy="simple" is necessary for the text not to break in a way that can hide the last word of the text. Apparently, only the prop mentioned above solves this issue.

I tried adding this prop to the text renderRule like:

text: (node, children, parent, styles) => {
    return <Text key={node.key} textBreakStrategy="simple">{node.content}</Text>;
  },

But the prop is not being applied appropriately, or, at least, the text is still breaking. I have two questions:

1. Am I missing something about how this is supposed to work?
2. Is there a way to make sure this textBreakStrategy="simple" is applied?

[jayshah123]

Yes, It seems even "numberOfLines" prop is not respected right now.

[abelyeupear]

So, apparently, the prop does apply to the textgroup rule!
I still don't quite understand how the parser/renderer works, and why it would be textgroup vs. text rule, but it certainly did the trick.
Hope this helps!

[iamacup]

A couple of things here - the horrible textgroup / text hierarchy is explained here: #42 (comment)

Its a pain.... but I don't know another way of doing it.

@jayshah123 as a consequence of having to nest the text elements - this bug: facebook/react-native#22811 is causing the numberOfLines prop to not work

@abelyeupear i am struggling to replicate the underlying issue on an emulator set to API 29 // Android 10 - what specifically is happening? can you provide me a sample / screenshots? :)

[iamacup]

Closing because i am not sure what next steps are without some help from @abelyeupear - feel free to reopen

[abelyeupear]

Sorry, busy week!
No need to reopen, I think the issue was mainly that it the prop had to go into the textgroup rule. I haven't had time to look into the text/textgroup hierarchy, but if that needed to get fixed at some point, it sounds like a completely different issue.

The steps to reproduce are mainly: Android 10 (emulator or not), <Text> component and enough text to break the line into a new line by one word only. In Android 10, this word won't show up.
The fix is to use textBreakStrategy='simple' in the Text component, in the textgroup rule.

[iamacup]

I will reopen because it seems that the default textgroup rule should maybe have the breackStrat added as you say,

Will do some more testing over the next couple of days and see!

[helsonxiao]

I use this rule as a workaround for numberOfLines.

const rules: RenderRules = {
  ...YourRules,
  textgroup: node => {
    return (
      <Text
        key={node.key}
        numberOfLines={3}
      >
        {node.children?.[0].content}
      </Text>
    );
  },
};