Get rid of nested <Text> components or find more durable solution

[iamacup]

The textgroup component wraps the text and other components cause a <Text><Text> nesting which is causing a variety of issues:

https://github.com/iamacup/react-native-markdown-display/issues/42 https://github.com/iamacup/react-native-markdown-display/issues/52 https://github.com/iamacup/react-native-markdown-display/issues/81 https://github.com/iamacup/react-native-markdown-display/issues/85

The textgroup rule is added manually by this library because it is needed for wrapping text with text to allow multi line stuff - example below:

{/* this is how it is today - displayed correctly - View is a paragraph, Text is textgroup and child Text's are text*/}
<View style={{
    flexWrap: 'wrap',
    flexDirection: 'row',
    width: '100%'}}>
  <Text>
    <Text>hey there</Text>
    <Text style={{color: 'red'}}> some in line code hilight or something that is really long =wooooo </Text>
    <Text>the final bit of text</Text>
  </Text>
</View>

<View style={{marginTop: 30}}></View>

{/* this is how it would be - with no text group - displayed correctly - View is a paragraph, child Text's are text*/}
<View style={{
    flexWrap: 'wrap',
    flexDirection: 'row',
    width: '100%'}}>
  <Text>hey there</Text>
  <Text style={{color: 'red'}}> some in line code </Text>
  <Text>the final bit of text</Text>
</View>

<View style={{marginTop: 30}}></View>

{/* this is how it would be - with no text group - showing the problem without text group - View is a paragraph, child Text's are text*/}
<View style={{
    flexWrap: 'wrap',
    flexDirection: 'row',
    width: '100%'}}>
  <Text>hey there</Text>
  <Text style={{color: 'red'}}> some in line code hilight or something that is really long =wooooo </Text>
  <Text>the final bit of text</Text>
</View>

The problem is that the text group <Text> element wrapping the actual display <Text> item prevents the actual display item from applying the style correctly on android. Not sure exactly what to do but ideally it would be great to remove the textgroup item all together....

[ericlifs]

Hey @iamacup let me know if I can help you somehow coding this!

[kopax]

After checking my code, this is my fix :

    <Markdown
      style={{
        body: {
          flex: 1,
          ...Platform.select({
            web: {
              wordBreak: 'break-word'
            },
            default: {},
          }),
        },
      }}
      {...rest}
    />

But it doesn't play well with the console since it throws warning, wordBreak should be applied to <Text /> and not <View />...

Do you have an improvement to suggest?

[iamacup]

we have this view_safe style set and i am wondeing if, based on the changes i need to make for the nested <Text> stuff, a set of text_safe styles will also be needed - but leave it with me it is goign to need a bit of rework with how the whole AST tree works - thanks for the code!