chore: Migrate to callstack eslint config

Author: retyui

.eslintrc.js

@@ -1,5 +1,13 @@
 module.exports = {
   root: true,
-  extends: ['@react-native', 'plugin:prettier/recommended'],
+  extends: ['@callstack'],
   ignorePatterns: ['node_modules/', 'lib/'],
+  overrides: [
+    {
+      files: ['**/*.config.js'], // metro.config.js & react-native.config.js
+      rules: {
+        'import/no-extraneous-dependencies': ['off'],
+      },
+    },
+  ],
 };

.github/workflows/main.yml

@@ -39,9 +39,6 @@ jobs:
           fetch-depth: 0
       - uses: ./.github/actions/install-dependencies
 
-      - name: Lint files
-        run: yarn lint
-
       - name: Lint Android files
         run: yarn lint:android
 
@@ -51,6 +48,10 @@ jobs:
       - name: Lib build
         run: yarn build
 
+      - name: Lint files
+        run: yarn lint
+        # required to run after `yarn build`
+
   build-android:
     name: Build Android
     runs-on: ubuntu-22.04

.gitignore

@@ -76,3 +76,6 @@ lefthook.yml
 # testing
 /coverage
 .cxx
+
+# eslint
+.eslintcache

example/ios/Podfile.lock

@@ -807,9 +807,23 @@ PODS:
   - React-jsinspector (0.72.6)
   - React-logger (0.72.6):
     - glog
-  - react-native-image-editor (2.3.0):
-    - React
+  - react-native-image-editor (3.0.0):
+    - RCT-Folly (= 2021.07.22.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-graphics
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
     - React-RCTImage
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - React-NativeModulesApple (0.72.6):
     - React-callinvoker
     - React-Core
@@ -1115,7 +1129,7 @@ SPEC CHECKSUMS:
   React-jsiexecutor: faca9c368233f59ed24601aca0185870466a96e9
   React-jsinspector: 194e32c6aab382d88713ad3dd0025c5f5c4ee072
   React-logger: cebf22b6cf43434e471dc561e5911b40ac01d289
-  react-native-image-editor: fc444bd0c9ffbc12bb6f46177773e88dc2d9c5b9
+  react-native-image-editor: 2d9fddfd0a036db8f031c2789293c91497b534fb
   React-NativeModulesApple: 63505fb94b71e2469cab35bdaf36cca813cb5bfd
   React-perflogger: e3596db7e753f51766bceadc061936ef1472edc3
   React-RCTActionSheet: 17ab132c748b4471012abbcdcf5befe860660485

example/metro.config.js

@@ -39,7 +39,7 @@ const config = {
     extraNodeModules,
   },
   transformer: {
-    getTransformOptions: async () => ({
+    getTransformOptions: () => ({
       transform: {
         experimentalImportSupport: false,
         inlineRequires: true,

example/src/ImageCropper.tsx

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
 import { Image, Platform, ScrollView } from 'react-native';
 
-import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
-import type { ImageCropData, ImageOffset, ImageSize } from './types';
 import { NativeSyntheticEvent } from 'react-native/Libraries/Types/CoreEventTypes';
 import { NativeScrollEvent } from 'react-native/Libraries/Components/ScrollView/ScrollView';
 
+import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+import type { ImageCropData, ImageOffset, ImageSize } from './types';
+
 export interface ImageCropperProps {
   image: ImageSize & ImageSourcePropType;
   size: ImageSize;
@@ -115,6 +116,7 @@ export class ImageCropper extends Component<ImageCropperProps> {
       >
         <Image
           testID="testImage"
+          accessibilityIgnoresInvertColors
           source={this.props.image}
           style={this._scaledImageSize}
         />

example/src/SquareImageCropper.tsx

@@ -9,10 +9,10 @@ import {
 } from 'react-native';
 import ImageEditor from '@react-native-community/image-editor';
 
+import type { LayoutChangeEvent } from 'react-native';
 import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT } from './constants';
 import { ImageCropper } from './ImageCropper';
 
-import type { LayoutChangeEvent } from 'react-native';
 import type { ImageCropData, ImageSize } from './types';
 
 interface State {
@@ -90,6 +90,7 @@ export class SquareImageCropper extends Component<Props, State> {
           onTransformDataChange={this._onTransformDataChange}
         />
         <TouchableHighlight
+          accessibilityRole="button"
           style={styles.cropButtonTouchable}
           onPress={this._crop}
         >
@@ -107,10 +108,12 @@ export class SquareImageCropper extends Component<Props, State> {
       <SafeAreaView style={styles.container}>
         <Text style={styles.text}>Here is the cropped image</Text>
         <Image
+          accessibilityIgnoresInvertColors
           source={{ uri: this.state.croppedImageURI }}
           style={[styles.imageCropper, this.state.measuredSize]}
         />
         <TouchableHighlight
+          accessibilityRole="button"
           style={styles.cropButtonTouchable}
           onPress={this._reset}
         >

package.json

@@ -65,13 +65,10 @@
   "devDependencies": {
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.23.2",
-    "@react-native/eslint-config": "^0.74.0",
+    "@callstack/eslint-config": "^14.1.0",
     "@react-native/typescript-config": "^0.74.0",
     "@types/react": "^18.2.34",
-    "@typescript-eslint/parser": "^6.9.1",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint": "^8.56.0",
     "metro-react-native-babel-preset": "0.76.8",
     "prettier": "^3.0.3",
     "react": "^18.2.0",