chore: bump library deps to recent versions (including RN) (software-…

…mansion#1881) ## Description Upgrade library dependencies to more recent versions. ## Changes Bumped deps, migrated prettier & eslint configs ## Test code and steps to reproduce CI ## Checklist - [x] Ensured that CI passes
WiseOwlTech · Oct 9, 2024 · 588bec8 · 588bec8
1 parent cd789c0
commit 588bec8
Show file tree

Hide file tree

Showing 10 changed files with 2,340 additions and 2,857 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,8 +5,6 @@ module.exports = {
     'plugin:import/warnings',
     'plugin:react/recommended',
     'prettier',
-    'prettier/react',
-    'prettier/standard',
   ],
 
   plugins: ['react-native', 'react-hooks'],
@@ -51,17 +49,20 @@ module.exports = {
     {
       files: ['*.{ts,tsx}'],
       parser: '@typescript-eslint/parser',
+      parserOptions: {
+        project: ['./tsconfig.json'],
+      },
       extends: [
         'plugin:@typescript-eslint/recommended',
         'plugin:import/typescript',
-        'prettier/@typescript-eslint',
       ],
       settings: {
         'import/parsers': {
           '@typescript-eslint/parser': ['.ts', '.tsx'],
         },
       },
       rules: {
+        '@typescript-eslint/no-explicit-any': 'warn',
         '@typescript-eslint/array-type': 'error',
         '@typescript-eslint/consistent-type-assertions': [
           'error',

diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,4 +1,7 @@
 module.exports = {
+  arrowParens: 'avoid',
+  bracketSameLine: true,
+  bracketSpacing: true,
   singleQuote: true,
-  jsxBracketSameLine: true,
+  trailingComma: 'es5',
 };
diff --git a/package.json b/package.json
@@ -65,53 +65,51 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.0",
+    "@babel/core": "^7.20.0",
+    "@babel/eslint-parser": "7.22.15",
     "@react-native-community/bob": "^0.17.1",
     "@react-navigation/native": "^5.8.0",
     "@react-navigation/stack": "^5.10.0",
-    "@types/jest": "^26.0.8",
-    "@types/react": "^18.0.24",
-    "@types/react-test-renderer": "^16.9.2",
-    "@typescript-eslint/eslint-plugin": "^5.48.2",
-    "@typescript-eslint/parser": "^5.48.2",
-    "@react-native-community/cli": "^9.0.0",
-    "@react-native-community/cli-platform-android": "^9.0.0",
-    "@react-native-community/cli-platform-ios": "^9.0.0",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.2.2",
-    "clang-format": "^1.5.0",
-    "eslint": "^7.6.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-config-standard": "^14.1.1",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jest": "^23.20.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.20.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-react-native": "^3.2.1",
-    "eslint-plugin-standard": "^4.0.1",
-    "husky": "^7.0.1",
-    "jest": "^26.2.2",
-    "jest-react-native": "18.0.0",
-    "lint-staged": "^11.1.2",
-    "metro-react-native-babel-preset": "^0.61.0",
-    "prettier": "^2.0.4",
+    "@types/jest": "^29.3.1",
+    "@types/react": "^18.2.21",
+    "@types/react-test-renderer": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
+    "@react-native-community/cli": "^11.3.6",
+    "@react-native-community/cli-platform-android": "^11.3.6",
+    "@react-native-community/cli-platform-ios": "^11.3.6",
+    "babel-jest": "^29.6.4",
+    "clang-format": "^1.8.0",
+    "eslint": "^8.19.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jest": "^27.2.3",
+    "eslint-plugin-n": "^16.0.2",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-native": "^4.0.0",
+    "husky": "^8.0.3",
+    "jest": "^29.3.1",
+    "lint-staged": "^14.0.1",
+    "metro-react-native-babel-preset": "^0.76.8",
+    "prettier": "^2.8.8",
     "react": "18.2.0",
-    "react-dom": "^16.13.1",
-    "react-native": "0.71.0",
+    "react-dom": "^18.2.0",
+    "react-native": "0.72.4",
     "react-native-reanimated": "^2.2.0",
-    "react-native-safe-area-context": "^4.4.1",
+    "react-native-safe-area-context": "^4.7.2",
     "react-native-windows": "^0.64.8",
-    "react-test-renderer": "^16.13.1",
+    "react-test-renderer": "^18.2.0",
     "release-it": "^15.6.0",
     "typescript": "4.8.4"
   },
   "resolutions": {
-    "@react-native-community/cli-platform-android": "^9.0.0",
-    "@react-native-community/cli": "^9.0.0",
-    "@react-native-community/cli-platform-ios": "^9.0.0",
-    "@types/react": "^18.0.24"
+    "@react-native-community/cli-platform-android": "^11.3.6",
+    "@react-native-community/cli": "^11.3.6",
+    "@react-native-community/cli-platform-ios": "^11.3.6",
+    "@types/react": "^18.2.21"
   },
   "lint-staged": {
     "{src,Example}/**/*.{js,ts,tsx}": "yarn format-js",

diff --git a/src/index.native.tsx b/src/index.native.tsx
@@ -346,8 +346,7 @@ class InnerScreen extends React.Component<ScreenProps> {
               (() => {
                 // for internal use
               })
-            }
-          >
+            }>
             {!isNativeStack ? ( // see comment of this prop in types.tsx for information why it is needed
               children
             ) : (
@@ -356,8 +355,7 @@ class InnerScreen extends React.Component<ScreenProps> {
                   progress: this.progress,
                   closing: this.closing,
                   goingForward: this.goingForward,
-                }}
-              >
+                }}>
                 {children}
               </TransitionProgressContext.Provider>
             )}
@@ -408,8 +406,7 @@ function FullWindowOverlay(props: { children: ReactNode }) {
   }
   return (
     <ScreensNativeModules.NativeFullWindowOverlay
-      style={{ position: 'absolute', width: '100%', height: '100%' }}
-    >
+      style={{ position: 'absolute', width: '100%', height: '100%' }}>
       {props.children}
     </ScreensNativeModules.NativeFullWindowOverlay>
   );
@@ -429,8 +426,7 @@ const styles = StyleSheet.create({
 const ScreenStackHeaderBackButtonImage = (props: ImageProps): JSX.Element => (
   <ScreensNativeModules.NativeScreenStackHeaderSubview
     type="back"
-    style={styles.headerSubview}
-  >
+    style={styles.headerSubview}>
     <Image resizeMode="center" fadeDuration={0} {...props} />
   </ScreensNativeModules.NativeScreenStackHeaderSubview>
 );
@@ -455,31 +451,31 @@ class SearchBar extends React.Component<SearchBarProps> {
   }
 
   blur() {
-    this._callMethodWithRef((ref) =>
+    this._callMethodWithRef(ref =>
       ScreensNativeModules.NativeSearchBarCommands.blur(ref)
     );
   }
 
   focus() {
-    this._callMethodWithRef((ref) =>
+    this._callMethodWithRef(ref =>
       ScreensNativeModules.NativeSearchBarCommands.focus(ref)
     );
   }
 
   toggleCancelButton(flag: boolean) {
-    this._callMethodWithRef((ref) =>
+    this._callMethodWithRef(ref =>
       ScreensNativeModules.NativeSearchBarCommands.toggleCancelButton(ref, flag)
     );
   }
 
   clearText() {
-    this._callMethodWithRef((ref) =>
+    this._callMethodWithRef(ref =>
       ScreensNativeModules.NativeSearchBarCommands.clearText(ref)
     );
   }
 
   setText(text: string) {
-    this._callMethodWithRef((ref) =>
+    this._callMethodWithRef(ref =>
       ScreensNativeModules.NativeSearchBarCommands.setText(ref, text)
     );
   }

diff --git a/src/native-stack/types.tsx b/src/native-stack/types.tsx
@@ -10,7 +10,12 @@ import {
   RouteProp,
 } from '@react-navigation/native';
 import * as React from 'react';
-import { ImageSourcePropType, StyleProp, ViewStyle, ColorValue } from 'react-native';
+import {
+  ImageSourcePropType,
+  StyleProp,
+  ViewStyle,
+  ColorValue,
+} from 'react-native';
 import {
   ScreenProps,
   ScreenStackHeaderConfigProps,

diff --git a/src/native-stack/utils/SafeAreaProviderCompat.tsx b/src/native-stack/utils/SafeAreaProviderCompat.tsx
@@ -36,7 +36,7 @@ const initialMetrics =
 export default function SafeAreaProviderCompat({ children, style }: Props) {
   return (
     <SafeAreaInsetsContext.Consumer>
-      {(insets) => {
+      {insets => {
         if (insets) {
           // If we already have insets, don't wrap the stack in another safe area provider
           // This avoids an issue with updates at the cost of potentially incorrect values

diff --git a/src/native-stack/views/HeaderConfig.tsx b/src/native-stack/views/HeaderConfig.tsx
@@ -140,8 +140,7 @@ export default function HeaderConfig({
       topInsetEnabled={headerTopInsetEnabled}
       translucent={headerTranslucent === true}
       onAttached={handleAttached}
-      onDetached={handleDetached}
-    >
+      onDetached={handleDetached}>
       {headerRight !== undefined ? (
         <ScreenStackHeaderRightView>
           {headerRight({ tintColor })}

diff --git a/src/native-stack/views/NativeStackView.tsx b/src/native-stack/views/NativeStackView.tsx
@@ -103,8 +103,7 @@ const MaybeNestedStack = ({
       // This view must *not* be flattened.
       // See https://github.com/software-mansion/react-native-screens/pull/1825
       // for detailed explanation.
-      collapsable={false}
-    >
+      collapsable={false}>
       {children}
     </Container>
   );
@@ -313,7 +312,7 @@ const RouteView = ({
           target: route.key,
         });
       }}
-      onDismissed={(e) => {
+      onDismissed={e => {
         navigation.emit({
           type: 'dismiss',
           target: route.key,
@@ -333,18 +332,15 @@ const RouteView = ({
           type: 'gestureCancel',
           target: route.key,
         });
-      }}
-    >
+      }}>
       <HeaderHeightContext.Provider
         value={
           isHeaderInPush !== false ? headerHeight : parentHeaderHeight ?? 0
-        }
-      >
+        }>
         <MaybeNestedStack
           options={options}
           route={route}
-          stackPresentation={stackPresentation}
-        >
+          stackPresentation={stackPresentation}>
           {renderScene()}
         </MaybeNestedStack>
         {/* HeaderConfig must not be first child of a Screen. 

diff --git a/src/reanimated/ReanimatedNativeStackScreen.tsx b/src/reanimated/ReanimatedNativeStackScreen.tsx
@@ -51,15 +51,13 @@ const ReanimatedNativeStackScreen = React.forwardRef<
             : 'topTransitionProgress',
         ]
       )}
-      {...rest}
-    >
+      {...rest}>
       <ReanimatedTransitionProgressContext.Provider
         value={{
-          progress: progress,
-          closing: closing,
-          goingForward: goingForward,
-        }}
-      >
+          progress,
+          closing,
+          goingForward,
+        }}>
         {children}
       </ReanimatedTransitionProgressContext.Provider>
     </AnimatedScreen>