noReactNativeLiteralColors (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.4.13
Diagnostic Category: lint/nursery/noReactNativeLiteralColors
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- reactNative
Sources:
- Same as react-native/no-color-literals

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noReactNativeLiteralColors": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow color literals in React Native styles.

Hard-coding colors inside styles makes it harder to keep them consistent across components and to swap the palette when the design system evolves. Extracting colors into named constants or a shared theme module produces more maintainable code.

This rule reports properties whose name contains color (case-insensitive) and whose value is a string literal, when they appear inside a StyleSheet.create call or inside a JSX attribute whose name contains style (case-insensitive). A ternary expression is also reported when either branch is a string literal.

Examples

Invalid

1
const Hello = () => <Text style={{ backgroundColor: '#FFFFFF' }}>hi</Text>;

code-block.jsx:1:36 lint/nursery/noReactNativeLiteralColors ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Color literals are not allowed inside styles.
  
  > 1 │ const Hello = () => <Text style={{ backgroundColor: '#FFFFFF' }}>hi</Text>;
      │                                    ^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Inline colors are hard to keep consistent across screens and to adapt when the design palette changes.
  
  ℹ Extract the color into a named constant or a shared theme module, and reference it from the style.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
const styles = StyleSheet.create({
2
    text: { color: 'red' }
3
});

code-block.jsx:2:13 lint/nursery/noReactNativeLiteralColors ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Color literals are not allowed inside styles.
  
    1 │ const styles = StyleSheet.create({
  > 2 │     text: { color: 'red' }
      │             ^^^^^^^^^^^^
    3 │ });
    4 │ 
  
  ℹ Inline colors are hard to keep consistent across screens and to adapt when the design palette changes.
  
  ℹ Extract the color into a named constant or a shared theme module, and reference it from the style.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
const Hello = (flag) => (
2
    <Text style={{ backgroundColor: flag ? '#fff' : '#000' }}>hi</Text>
3
);

code-block.jsx:2:20 lint/nursery/noReactNativeLiteralColors ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Color literals are not allowed inside styles.
  
    1 │ const Hello = (flag) => (
  > 2 │     <Text style={{ backgroundColor: flag ? '#fff' : '#000' }}>hi</Text>
      │                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ );
    4 │ 
  
  ℹ Inline colors are hard to keep consistent across screens and to adapt when the design palette changes.
  
  ℹ Extract the color into a named constant or a shared theme module, and reference it from the style.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
const red = '#f00';
2
const styles = StyleSheet.create({
3
    text: { color: red }
4
});

1
const Hello = () => (
2
    <Text style={{ backgroundColor: theme.background }}>hi</Text>
3
);