eslint-plugin-react-native
eslint-plugin-react-native copied to clipboard
no-unused-styles fails when passing through the entire StyleSheet
The rule no-unused-styles is unable to discriminate between actually unused styles, and an entire StyleSheet object being passed through to a component.
In particular, I am using react-native-htmlview, which accepts a stylesheet prop containing an object created through StyleSheet.create( ... ). When I pass the entire stylesheet to this prop, the no-unused-styles fails. See the example below:
const customHTMLStyles = StyleSheet.create({
a: { color: "red", textDecorationStyle: "solid", textDecorationLine: "underline" }, // Unused style detected
li: { paddingHorizontal: 15 }, // Unused style detected
p: { marginBottom: 5 } // Unused style detected
});
const styles = StyleSheet.create({
container: { flex: 1, padding: 15 }
});
function CustomHTMLView(props) {
return <HTMLView
style={styles.container}
stylesheet={customHTMLStyles}
{...props}
/>;
}
The only solution is to wrap the StyleSheet.create( ... ) portion within eslint-disable and eslint-enable rules:
/* eslint-disable react-native/no-unused-styles */
const customHTMLStyles = StyleSheet.create({
a: { color: "red", textDecorationStyle: "solid", textDecorationLine: "underline" },
li: { paddingHorizontal: 15 },
p: { marginBottom: 5 }
});
// no more 'Unused style detected'
/* eslint-enable react-native/no-unused-styles */
const styles = StyleSheet.create({
container: { flex: 1, padding: 15 }
});
function CustomHTMLView(props) {
return <HTMLView
style={styles.container}
stylesheet={customHTMLStyles}
{...props}
/>;
}
It is not a major issue, as you can see it can easily be worked around.
However it's still annoying, and I'd like not to have to care about this.