no-color-literals
no-inline-styles
This rule encourages a separation of concerns by keeping style definitions outside of the component’s render method, which leads to cleaner and more easily readable code. By extracting styles into a dedicated StyleSheet, it becomes much simpler to identify the UI elements’ styling at a glance instead of having to parse through JSX to find style objects.
It promotes reusability of styles across different components. When styles are extracted into a StyleSheet, it’s easier to reuse the same styles across multiple components without duplicating code. This can lead to a more consistent look and feel across the app and also make it easier to make global style changes from a single place.
It can lead to performance improvements in React Native applications. Inline styles in React Native are processed at runtime, which can add overhead, especially for complex components or large lists. By using StyleSheet objects, most of the processing can be moved to compile time, making the application run smoother.
The rule aids in enforcing best practices that are particularly important in larger projects. As projects grow, managing inline styles directly within components can become unwieldy and difficult to maintain. Encouraging the use of StyleSheet promotes a more scalable approach to styling that can benefit larger teams and projects by making code easier to maintain and refactor.
no-raw-text
<Text>
component or its allowed alternatives (TSpan
, StyledText
, Animated.Text
), maintaining semantic correctness and helping in uniform text styling and rendering across the app.options.skip
setting, enabling developers to extend or modify the list of elements that can safely contain text, thereby providing flexibility to accommodate project-specific components without compromising the rule’s integrity.no-single-element-style-arrays
Disallow single element style arrays. These cause unnecessary re-renders as the identity of the array always changes
no-unused-styles
Detecting unused styles helps in preventing the accumulation of dead code, leading to cleaner and more maintainable style sheets in React Native projects. In the provided rule, unusedStyle
is identified as not used anywhere in the component, indicating that it can be safely removed without affecting the component’s appearance or functionality.
By removing unused styles, the rule contributes to reducing the overall size of the style object created by StyleSheet.create()
. This can have a slight performance benefit, especially in large projects with many components, as it reduces the memory footprint of the application.
This rule aids in enforcing better coding practices among developers, especially in collaborative environments. It ensures that styles are only defined when needed, encouraging developers to constantly review and clean up their code, which in turn, helps in maintaining a high code quality.
Applying this rule can also assist in the early detection of potential bugs or logical errors. For example, if a style is intended to be used but is not applied due to a typo or misunderstanding of the code’s logic, the rule can signal a possible issue by indicating that the style is unused, prompting a review and correction of the code.
sort-styles
This ESLint rule helps maintain a consistent ordering of style properties within React Native stylesheets, which enhances readability and manageability of the code. By enforcing a specific sequence (ascending or descending), developers can easily locate and evaluate style properties.
The rule allows for customization through options such as ignoreClassNames
and ignoreStyleProperties
, providing flexibility. Teams can tailor the rule to their project’s requirements, either focusing on class names, style properties, or both, depending on their coding standards or preferences.
It includes logic to handle shorthands and comments intelligently, ensuring that automatic fixes do not disrupt the code’s semantics or lose important developer annotations. This safeguards the code’s integrity while applying stylistic conventions.
The rule supports automatic fixing for uncomplicated cases where no comments are involved, significantly reducing the manual effort required to comply with the sorting order. This automatic correction feature accelerates development by quickly resolving stylistic issues without developer intervention.
split-platform-components