meliorence / react-native-render-html

iOS/Android pure javascript react-native component that renders your HTML into 100% native views
https://meliorence.github.io/react-native-render-html/
BSD 2-Clause "Simplified" License
3.48k stars 589 forks source link

Can't hide an element with a given class #559

Open qlereboursBS opened 2 years ago

qlereboursBS commented 2 years ago

Decision Table

Good Faith Declaration

Description

When adding a classesStyles that aim at hidding (display: none) when a tag has a particular class, it doesn't work, according to this simple sample:

export default function App() {
  const { width } = useWindowDimensions();
  return (
    <RenderHtml
      contentWidth={width}
      source={{
        html: '<p>This is a note <span class="hidden">with hidden content</span></p>'
      }}
      classesStyles={{ hidden: { display: 'none', color: 'red' }}}
    />
  );
}

However, color: red works fine

React Native Information

System:
    OS: Linux 5.14 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1185G7 @ 3.00GHz
    Memory: 188.38 MB / 15.35 GB
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 12.22.6 - ~/.nvm/versions/node/v12.22.6/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v12.22.6/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v12.22.6/bin/npm
    Watchman: 20220130.171601.0 - /home/qlerebours/Softwares/watchman-v2022.01.31.00-linux/bin/watchman
  SDKs:
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: 11.0.12 - /home/qlerebours/.sdkman/candidates/java/11.0.12-open/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2 
    react-native: 0.68.0 => 0.68.0 
  npmGlobalPackages:
    *react-native*: Not Found

RNRH Version

6.3.4

Tested Platforms

Reproduction Platforms

Minimal, Reproducible Example

https://snack.expo.dev/@qlerebours/rnrhtml-template

Additional Notes

I also tried multiple things like

export default function App() {
  const { width } = useWindowDimensions();
  return (
    <RenderHtml
      contentWidth={width}
      source={{
        html: '<p>This is a note <span style="display: none">with hidden content</span></p>'
      }}
    />
  );
}

or even with a custom component, using the customHTMLElementModels prop. Is it supposed to be like this? I didn't find a list of supported CSS properties to check