useReactNativeValidPlatformColors (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.3
Diagnostic Category: lint/nursery/useReactNativeValidPlatformColors
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- reactNative
Sources:
- Same as @react-native/platform-colors

How to configure

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

Description

Require PlatformColor() and DynamicColorIOS() calls to use values written directly in the call.

React Native can optimize PlatformColor() and DynamicColorIOS() calls, but only when it can read their values without running the code. Values that come from variables or other expressions are only known when the app runs.

This rule checks that:

PlatformColor() receives at least one argument, and every argument is a literal such as a string. The last argument can also be an object with a single fallback property whose value is a literal.
DynamicColorIOS() receives exactly one object, and every value in that object is either a literal or a PlatformColor() call.

Examples

Invalid

1
import { PlatformColor } from "react-native";
2

3
const color = PlatformColor();

code-block.js:3:15 lint/nursery/useReactNativeValidPlatformColors ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ PlatformColor() is called without a color name.
  
    1 │ import { PlatformColor } from "react-native";
    2 │ 
  > 3 │ const color = PlatformColor();
      │               ^^^^^^^^^^^^^^^
    4 │ 
  
  ℹ A platform color needs at least one color name to look up.
  
  ℹ Pass at least one color name as a string, for example: PlatformColor("labelColor").
  
  ℹ 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
import { PlatformColor } from "react-native";
2

3
const labelColor = "labelColor";
4
const color = PlatformColor(labelColor);

code-block.js:4:29 lint/nursery/useReactNativeValidPlatformColors ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This argument of PlatformColor() is not a literal value.
  
    3 │ const labelColor = "labelColor";
  > 4 │ const color = PlatformColor(labelColor);
      │                             ^^^^^^^^^^
    5 │ 
  
  ℹ React Native can only optimize platform colors whose values are written directly in the call.
  
  ℹ Write the color name as a string. The last argument can also be an object like { fallback: "red" }, with a literal value.
  
  ℹ 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
import { DynamicColorIOS } from "react-native";
2

3
const colors = { light: "black", dark: "white" };
4
const color = DynamicColorIOS(colors);

code-block.js:4:30 lint/nursery/useReactNativeValidPlatformColors ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ DynamicColorIOS() must be called with a single object written directly in the call.
  
    3 │ const colors = { light: "black", dark: "white" };
  > 4 │ const color = DynamicColorIOS(colors);
      │                              ^^^^^^^^
    5 │ 
  
  ℹ React Native can only optimize dynamic colors whose values are written directly in the call.
  
  ℹ Pass an object like { light: "black", dark: "white" }.
  
  ℹ 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
import { DynamicColorIOS } from "react-native";
2

3
const black = "black";
4
const color = DynamicColorIOS({ light: black, dark: "white" });

code-block.js:4:33 lint/nursery/useReactNativeValidPlatformColors ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This value of DynamicColorIOS() is not a literal or a PlatformColor() call.
  
    3 │ const black = "black";
  > 4 │ const color = DynamicColorIOS({ light: black, dark: "white" });
      │                                 ^^^^^^^^^^^^
    5 │ 
  
  ℹ React Native can only optimize dynamic colors whose values are written directly in the call.
  
  ℹ Write the color as a string, or use a PlatformColor() call.
  
  ℹ 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
import { DynamicColorIOS, PlatformColor } from "react-native";
2

3
const label = PlatformColor("labelColor");
4
const accent = PlatformColor("controlAccentColor", "controlColor", { fallback: "red" });
5
const text = DynamicColorIOS({ light: "black", dark: PlatformColor("labelColor") });