Inline style cannot be rendered

[felixliu226]

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

i tried to follow the sample about inline style (https://meliorence.github.io/react-native-render-html/docs/guides/styling#inline-styles), but the style cannot be rendered properly, only got the normal text without any style.

React Native Information

expo-env-info 1.3.3 environment info:
    System:
      OS: macOS 15.5
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 24.1.0 - /opt/homebrew/bin/node
      Yarn: 1.22.22 - /opt/homebrew/bin/yarn
      npm: 11.4.1 - /opt/homebrew/bin/npm
    Managers:
      CocoaPods: 1.16.2 - /opt/homebrew/bin/pod
    SDKs:
      iOS SDK:
        Platforms: DriverKit 24.5, iOS 18.5, macOS 15.5, tvOS 18.5, visionOS 2.5, watchOS 11.5
    IDEs:
      Android Studio: 2024.3 AI-243.26053.27.2432.13536105
      Xcode: 16.4/16F6 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~53.0.11 => 53.0.11
      expo-router: ~5.1.0 => 5.1.0
      react: 19.0.0 => 19.0.0
      react-dom: 19.0.0 => 19.0.0
      react-native: 0.79.3 => 0.79.3
      react-native-web: ~0.20.0 => 0.20.0
    npmGlobalPackages:
      eas-cli: 16.8.0
      expo-cli: 6.3.12
    Expo Workflow: bare

RNRH Version

6.3.4

Tested Platforms

• Android
• iOS
• Web
• MacOS
• Windows

Reproduction Platforms

• Android
• iOS
• Web
• MacOS
• Windows

Minimal, Reproducible Example

create an expo project, and install RNRH. follows the sample here: https://meliorence.github.io/react-native-render-html/docs/guides/styling#inline-styles, and only normal text are rendered. the inline style are ignored.

Additional Notes

also tried with new architecture disabled, but still not work

[jamesholcomb]

Did you try with react native 0.78,x by chance? I experience the same behavior on 0.79.4 (no-expo).

[deflexable]

Did you try with react native 0.78,x by chance? I experience the same behavior on 0.79.4 (no-expo).

i started experiencing this issue after i upgraded my RN version from 0.76.6 to 0.79.4

where able to come up with a fix?

[deflexable]

I was able to fix the issue by explicitly setting enableCSSInlineProcessing to true

[DenisBovsunivskyi]

lib is not showing br>, p>,or any other html tags on 0.79.4, enableCSSInlineProcessing not work

[charlespalmerbf]

I'm also having the same issue as @DenisBovsunivskyi, if anyone has any ideas, please tag me!

Edit:

After asking this same question in the Discord, the following answer was provided to me by @5ZYSZ3K:

Yes, it is a known issue - however, the package hasn't been updated for 3 years now, and there is no response from its maintainers.

You should be able to easily patch it by removing deprecated defaultProps attribute throughout the lib and replacing it with, for instance, JavaScript default parameters.

I've moved away from the package, but hopefully this is helpful for someone if that isn't an option!

[deekshaTakroo]

I was facing same issue with react-native v0.79+ and I added styles for common tags and it works. I also enabled enableCSSInlineProcessing

Sample:

<RenderHTML
      source={{ html: body }}
      enableCSSInlineProcessing={true}
      tagsStyles={{
        p:{
          marginBottom: 12,
        },
        b: { fontWeight: 'bold' },
        strong: { fontWeight: 'bold' },
        i: { fontStyle: 'italic' },
        em: { fontStyle: 'italic' },
        u: { textDecorationLine: 'underline' },
        a: {
          color: '#0000FF',
          textDecorationLine: 'underline',
        },
      }}
    />

[noumantahir]

This should help..

#687 (comment)

[marsinearth]

I was able to fix the issue by explicitly setting enableCSSInlineProcessing to true

Doc page must be updated as enableCSSInlineProcessing: false