Inline `<a>` tag taking full horizontal width on Web.

Decision Table

• My issue does not look like “The HTML attribute ‘xxx’ is ignored” (unless we claim support for it)
• My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

• I have read the HELP document here: https://git.io/JBi6R
• I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
• I have confirmed that this bug has not been reported yet

Description

In the Older version of RNRH the <code> element use to behave inline but now. it takes the full width of the screen.

I think this change has affected every tag. For example, if you add a link element, it is clickable from empty space on the web.

In the above image click the far right and it goes to that link on the web.

WEB

Inline Tag expands to the full width of the parent.

React Native Information

System:
    OS: Linux 5.10 Manjaro Linux
    CPU: (16) x64 Intel(R) Core(TM) i7-10870H CPU @ 2.20GHz
    Memory: 363.11 MB / 15.47 GB
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 14.16.0 - /usr/bin/node
    Yarn: Not Found
    npm: 6.14.13 - ~/.npm-globals/bin/npm
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 29, 30
      Build Tools: 29.0.2, 29.0.3, 30.0.3
      System Images: android-29 | Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7351085
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: 4.13.1 => 4.13.1 
    react: ^17.0.2 => 17.0.2 
    react-native: 0.64.1 => 0.64.1 
  npmGlobalPackages:
    *react-native*: Not Found

RNRH Version

V6.0.0-beta.8

Tested Platforms

• Android
• iOS
• Web
• MacOS
• Windows

Reproduction Platforms

• Android
• iOS
• Web
• MacOS
• Windows

Minimal, Reproducible Example

https://snack.expo.dev/hGHmxvgL7

Additional Notes

I compared the older alpha version of the V6 to the Beta version. There is only one difference that there used to be a wrapping node in DOM around the main tag node but now it’s not there. So Body tags flex:column styling is causing it to expand to full-width.

The structure is like this

 <html-node>
   <body-node>
     <code-node>

previously

 <html-node>
   <body-node>
     <wrapper-node>
       <code-node>

[jsamr]

Here it is: https://github.com/meliorence/react-native-render-html/commit/dad450db8d79c85ba8ab4a8d585d889d033d2234 If you have any “lively” question, ping me in our Discord!

PS: a better name for the prop: preserveAnonymousTPhrasingNodes and a description:

/**
* When `true`,  preserve anonymous {@link TPhrasing} nodes parents of lonely {@link TText} nodes at render time instead of bypassing them and rendering their child directly.
*
* @defaultValue `false`
*/

[parasharrajat]

Another side-effect of that change. Check out the first Inline code block behaving like a code block on Web.