Rules focused on React Native StyleSheet usage, optimization, and best practices including unused style detection and style organization.
Detects unused StyleSheet definitions to help maintain clean code and reduce bundle size.
/**
* ESLint rule that detects unused styles in StyleSheet declarations
* Reports styles that are defined but never referenced in the component code
*/
module.exports = {
meta: {
schema: [] // No configuration options
},
create: function(context) {
// Returns ESLint visitors object with:
// - MemberExpression: Tracks style references
// - CallExpression: Identifies StyleSheet.create calls
// - 'Program:exit': Reports unused styles after analysis
}
};Usage Example:
// This would trigger the rule
const styles = StyleSheet.create({
container: { flex: 1 }, // Used
unused: { color: 'red' }, // Unused - will be reported
});
function MyComponent() {
return <View style={styles.container} />;
}Requires StyleSheet object keys to be sorted alphabetically for better code organization and consistency.
/**
* ESLint rule that enforces alphabetical sorting of StyleSheet keys and properties
* Supports both ascending and descending order with customizable ignore options
*/
module.exports = {
meta: {
fixable: "code", // Supports auto-fixing
schema: [
{
enum: ["asc", "desc"] // Sort order: ascending (default) or descending
},
{
type: "object",
properties: {
ignoreClassNames: {
type: "boolean" // Skip sorting of top-level style names
},
ignoreStyleProperties: {
type: "boolean" // Skip sorting of style properties within each style
}
},
additionalProperties: false
}
]
},
create: function(context) {
// Returns ESLint visitors object with:
// - CallExpression: Analyzes StyleSheet.create calls for sorting violations
}
};Configuration Examples:
// Ascending order (default)
"react-native/sort-styles": "error"
// Descending order
"react-native/sort-styles": ["error", "desc"]
// Ignore class names, only sort properties
"react-native/sort-styles": ["error", "asc", { "ignoreClassNames": true }]
// Ignore style properties, only sort class names
"react-native/sort-styles": ["error", "asc", { "ignoreStyleProperties": true }]Usage Examples:
// Correctly sorted (ascending)
const styles = StyleSheet.create({
button: {
backgroundColor: '#007AFF',
borderRadius: 8,
padding: 12,
},
container: {
alignItems: 'center',
flex: 1,
justifyContent: 'center',
},
text: {
color: 'white',
fontSize: 16,
fontWeight: 'bold',
},
});
// Would trigger the rule (incorrect order)
const badStyles = StyleSheet.create({
text: { fontSize: 16 },
container: { flex: 1 }, // Should come before 'text'
button: { padding: 12 }, // Should come before 'container'
});Customize which object names are considered StyleSheet objects for analysis.
// ESLint settings configuration
settings: {
"react-native/style-sheet-object-names": string[] // Array of object names to treat as StyleSheet
}Configuration Example:
// .eslintrc.js
module.exports = {
settings: {
'react-native/style-sheet-object-names': ['StyleSheet', 'EStyleSheet', 'CustomStyleSheet']
}
};This setting affects how the plugin identifies StyleSheet declarations in your code:
// All of these would be recognized with the above setting
const styles1 = StyleSheet.create({ /* ... */ });
const styles2 = EStyleSheet.create({ /* ... */ });
const styles3 = CustomStyleSheet.create({ /* ... */ });// Error format: "Unused style detected: {styleSheetName}.{styleName}"
"Unused style detected: styles.unusedButton"
"Unused style detected: commonStyles.headerText"// Error format for class names
"Expected class names to be in ascending order. 'button' should be before 'text'."
// Error format for style properties
"Expected style properties to be in descending order. 'fontSize' should be before 'padding'."These rules work well with: