react-native-render-html icon indicating copy to clipboard operation
react-native-render-html copied to clipboard

Can't hide an element with a given class

Open qlereboursBS opened this issue 2 years ago • 0 comments

Decision Table

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

Good Faith Declaration

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

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

  • [X] Android
  • [X] iOS
  • [X] Web
  • [ ] MacOS
  • [ ] Windows

Reproduction Platforms

  • [X] Android
  • [X] iOS
  • [ ] Web
  • [ ] MacOS
  • [ ] Windows

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

qlereboursBS avatar Apr 13 '22 14:04 qlereboursBS