react-native-render-html
react-native-render-html copied to clipboard
Can't hide an element with a given class
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