Add lint

.eslintignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+apps

.eslintrc.js

@@ -5,21 +5,27 @@ module.exports = {
     // 'plugin:ft-flow/recommended',
   ],
   parser: 'hermes-eslint',
-  plugins: [
-    'ft-flow'
-  ],
+  plugins: ['ft-flow'],
   env: {
     node: true,
     browser: true,
     jest: true,
   },
   rules: {
     'import/order': 0,
+    'react/jsx-props-no-multi-spaces': 'off',
   },
   settings: {
     'import/resolver': {
       node: {
-        extensions: ['.js', '.jsx', '.json', '.native.js', '.ios.js', '.android.js'],
+        extensions: [
+          '.js',
+          '.jsx',
+          '.json',
+          '.native.js',
+          '.ios.js',
+          '.android.js',
+        ],
       },
     },
   },

.github/workflows/test.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/[email protected]
         with:
-          node-version: 16.x
+          node-version: 18.x
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -103,7 +103,7 @@ jobs:
           pod install
           cd ..
           xcodebuild -workspace ios/RNExternalDisplayExample.xcworkspace -scheme RNExternalDisplayExample -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build
-  
+
   test-android-newarch:
     runs-on: ubuntu-latest
     steps:

apps/external-display-example/src/ScrollView.tsx

@@ -40,7 +40,7 @@ export default function Example(props: Props) {
             >
               {new Array(100).fill(0).map((_, i) => (
                 <Text
-                  // eslint-disable-next-line react/no-array-index-key
+                   
                   key={`item-${i}`}
                   style={{
                     color: 'white',

apps/ipad-multiscenes-headless-example/tsconfig.json

@@ -6,5 +6,5 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["**/*.ts", "**/*.tsx"]
+  "include": ["**/*.ts", "**/*.tsx", "withMultipleSceneSupport.js"]
 }

package.json

@@ -7,6 +7,13 @@
   ],
   "packageManager": "[email protected]",
   "scripts": {
-    "start": "cd apps/external-display-example && yarn start"
+    "start": "cd apps/external-display-example && yarn start",
+    "lint": "eslint ."
+  },
+  "devDependencies": {
+    "@fugood/eslint-config-react": "^0.5.1",
+    "eslint": "^8.43.0",
+    "eslint-plugin-ft-flow": "^3.0.0",
+    "hermes-eslint": "^0.19.2"
   }
 }

packages/react-native-external-display/index.js

@@ -44,9 +44,11 @@ const ExternalDisplayView = (props: Props) => {
   } = props
   const screens = useExternalDisplay(props)
   const scr = screens[screen]
+
   if (!scr && !fallbackInMainScreen) {
     return null
   }
+
   return (
     <ScreenContext.Provider value={scr}>
       <RNExternalDisplay

packages/react-native-external-display/js/useExternalDisplay.js

@@ -21,15 +21,15 @@ export const useExternalDisplay = ({
 
   useEffect(() => {
     const { connect, change, disconnect } = listenEvent({
-      onScreenConnect: info => {
+      onScreenConnect: (info) => {
         setScreens(info)
         if (onScreenConnect) onScreenConnect(info)
       },
-      onScreenChange: info => {
+      onScreenChange: (info) => {
         setScreens(info)
         if (onScreenChange) onScreenChange(info)
       },
-      onScreenDisconnect: info => {
+      onScreenDisconnect: (info) => {
         setScreens(info)
         if (onScreenDisconnect) onScreenDisconnect(info)
       },
@@ -39,7 +39,7 @@ export const useExternalDisplay = ({
       change.remove()
       disconnect.remove()
     }
-  }, [])
+  }, [onScreenChange, onScreenConnect, onScreenDisconnect])
 
   return screens
 }