Merge pull request #275 from callstack/platform-colors

feat: Enable `@react-native/platform-colors` rule

Author: retyui

package.json

@@ -23,6 +23,7 @@
     "@babel/eslint-parser": "^7.22.15",
     "@babel/plugin-syntax-flow": "^7.22.5",
     "@babel/plugin-transform-react-jsx": "^7.22.15",
+    "@react-native/eslint-plugin": "^0.74.0 || ^0.73.0 || ^0.72.0",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
     "eslint-config-prettier": "^9.0.0",
@@ -46,6 +47,6 @@
     "typescript": "^5.2.2"
   },
   "scripts": {
-    "test": "yarn --cwd test && yarn --cwd test eslint --report-unused-disable-directives --ext .js,.ts,.jsx,.tsx ."
+    "test": "yarn --cwd test && yarn --cwd test eslint --max-warnings 0 --report-unused-disable-directives --ext .js,.ts,.jsx,.tsx ."
   }
 }

react-native.js

@@ -9,8 +9,9 @@ module.exports = {
   env: {
     'react-native/react-native': true,
   },
-  plugins: ['react-native'],
+  plugins: ['react-native', '@react-native'],
   rules: {
+    '@react-native/platform-colors': WARNING,
     'react-native/no-unused-styles': ERROR,
     'react-native/split-platform-components': OFF,
     'react-native/no-inline-styles': WARNING,

test/PlatformColor.js

@@ -0,0 +1,26 @@
+import { PlatformColor, DynamicColorIOS } from 'react-native';
+
+// Invalid
+// eslint-disable-next-line @react-native/platform-colors
+PlatformColor(); // required at least one argument
+// eslint-disable-next-line @react-native/platform-colors
+PlatformColor([], {}); // arguments must be string literals
+// eslint-disable-next-line @react-native/platform-colors
+DynamicColorIOS('red'); // required object as first argument
+
+// Valid
+PlatformColor('bogusName', 'linkColor');
+PlatformColor('label');
+PlatformColor('@android:color/holo_blue_bright');
+
+export const customDynamicTextColor = DynamicColorIOS({
+  dark: 'lightskyblue',
+  light: 'midnightblue',
+});
+
+export const customContrastDynamicTextColor = DynamicColorIOS({
+  dark: 'darkgray',
+  light: 'lightgray',
+  highContrastDark: 'black',
+  highContrastLight: 'white',
+});

test/yarn.lock

@@ -1612,6 +1612,11 @@
   resolved "https://registry.yarnpkg.com/@react-native/assets/-/assets-1.0.0.tgz#c6f9bf63d274bafc8e970628de24986b30a55c8e"
   integrity sha512-KrwSpS1tKI70wuKl68DwJZYEvXktDHdZMG0k2AXD/rJVSlB23/X2CB2cutVR0HwNMJIal9HOUOBB2rVfa6UGtQ==
 
+"@react-native/eslint-plugin@^0.74.0 || ^0.73.0 || ^0.72.0":
+  version "0.74.84"
+  resolved "https://registry.yarnpkg.com/@react-native/eslint-plugin/-/eslint-plugin-0.74.84.tgz#f0e9618551c9340caca7624001f8ce32794715c9"
+  integrity sha512-pDzo4Qm1uPZQne2sv0QK89ePxP/i+ZHjrBW3rkTVStLvsDVdyFahMmt6bzJTdYL2cGgK2oyNmfXtvO57INOu3Q==
+
 "@react-native/[email protected]":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@react-native/normalize-color/-/normalize-color-2.0.0.tgz#da955909432474a9a0fe1cbffc66576a0447f567"

yarn.lock

@@ -405,6 +405,11 @@
     picocolors "^1.0.0"
     tslib "^2.6.0"
 
+"@react-native/eslint-plugin@^0.74.0 || ^0.73.0 || ^0.72.0":
+  version "0.74.84"
+  resolved "https://registry.yarnpkg.com/@react-native/eslint-plugin/-/eslint-plugin-0.74.84.tgz#f0e9618551c9340caca7624001f8ce32794715c9"
+  integrity sha512-pDzo4Qm1uPZQne2sv0QK89ePxP/i+ZHjrBW3rkTVStLvsDVdyFahMmt6bzJTdYL2cGgK2oyNmfXtvO57INOu3Q==
+
 "@types/json-schema@^7.0.12":
   version "7.0.12"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb"