chore: upgrade ESLint to v9 and separate formatting checks

.github/workflows/main.yml

@@ -33,6 +33,9 @@ jobs:
         run: bun install
         working-directory: example
 
+      - name: Check formatting
+        run: bun run format:check
+
       - name: Lint files
         run: bun run lint
 

.prettierignore

@@ -0,0 +1,2 @@
+lib/
+coverage/

CONTRIBUTING.md

@@ -39,16 +39,18 @@ bun example:ios
 ```
 
 
-Make sure your code passes TypeScript and ESLint. Run the following to verify:
+Make sure your code passes TypeScript, Prettier and ESLint. Run the following to verify:
 
 ```sh
 bun typescript
+bun format:check
 bun lint
 ```
 
-To fix formatting errors, run the following:
+To fix formatting and lint errors, run the following:
 
 ```sh
+bun format
 bun lint --fix
 ```
 
@@ -77,7 +79,7 @@ Our pre-commit hooks verify that your commit message matches this format when co
 
 [ESLint](https://eslint.org/), [Prettier](https://prettier.io/), [TypeScript](https://www.typescriptlang.org/)
 
-We use [TypeScript](https://www.typescriptlang.org/) for type checking, [ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting and formatting the code, and [Jest](https://jestjs.io/) for testing.
+We use [TypeScript](https://www.typescriptlang.org/) for type checking, [Prettier](https://prettier.io/) for formatting, [ESLint](https://eslint.org/) with a flat config (`eslint.config.js`) for linting, and [Jest](https://jestjs.io/) for testing. Formatting and linting are separate steps: Prettier owns style, and ESLint owns correctness.
 
 Our pre-commit hooks verify that the linter and tests pass when committing.
 
@@ -97,7 +99,9 @@ The `package.json` file contains various scripts for common tasks:
 
 - `bun bootstrap`: setup project by installing all dependencies and pods.
 - `bun typescript`: type-check files with TypeScript.
-- `bun lint`: lint files with ESLint.
+- `bun lint`: lint files with ESLint (cached).
+- `bun format`: format files with Prettier.
+- `bun format:check`: check formatting with Prettier without writing changes.
 - `bun test`: run unit tests with Jest.
 - `bun example:start`: start the Metro server for the example app.
 - `bun example:android`: run the example app on Android.

e2e/tests/issues/issue-1142-search-bar-inset.e2e.ts

@@ -21,7 +21,9 @@ test(
       'safe-area: pass',
       { timeout: 15_000 }
     );
-    await expect(screen.getByTestId('issue-1142-pager-first-row')).toBeVisible();
+    await expect(
+      screen.getByTestId('issue-1142-pager-first-row')
+    ).toBeVisible();
     await expect(
       screen.getByTestId('issue-1142-pager-bottom-marker')
     ).toBeVisible();

e2e/tests/support/test.ts

@@ -3,13 +3,7 @@ import { APP_ID } from '../../targets.ts';
 
 export { test };
 export { expect } from 'e2e';
-export type {
-  App,
-  Locator,
-  Screen,
-  ScrollDirection,
-  TextMatch,
-} from 'e2e';
+export type { App, Locator, Screen, ScrollDirection, TextMatch } from 'e2e';
 
 const APP_PATHS: Record<string, string | undefined> = {
   ios: process.env.E2E_IOS_APP_PATH,

eslint.config.js

@@ -0,0 +1,8 @@
+const reactNative = require('@react-native/eslint-config/flat');
+
+module.exports = [
+  {
+    ignores: ['lib/', 'coverage/'],
+  },
+  ...reactNative,
+];

example/metro.config.js

@@ -1,7 +1,5 @@
 const path = require('path');
-const {
-  getDefaultConfig,
-} = require('@react-native/metro-config');
+const { getDefaultConfig } = require('@react-native/metro-config');
 const { withMetroConfig } = require('react-native-monorepo-config');
 
 const root = path.resolve(__dirname, '..');
@@ -23,7 +21,9 @@ module.exports = withMetroConfig(
       blockList: [
         ...[].concat(defaultConfig.resolver.blockList || []),
         new RegExp(
-          `^${escapeRegExp(path.join(__dirname, 'node_modules', 'react-native-pager-view'))}[\\\\/]`
+          `^${escapeRegExp(
+            path.join(__dirname, 'node_modules', 'react-native-pager-view')
+          )}[\\\\/]`
         ),
       ],
     },

example/package.json

@@ -44,7 +44,7 @@
     "@react-native/metro-config": "0.87.1",
     "@react-native/typescript-config": "0.87.1",
     "@types/react": "^19.2.0",
-    "eslint": "^8.57.1",
+    "eslint": "^9.39.0",
     "prettier": "2.8.8",
     "react-native-monorepo-config": "^0.4.0",
     "typescript": "^6.0.3"

example/src/MaterialTopTabExample.tsx

@@ -4,7 +4,10 @@ import { createMaterialTopTabNavigator } from '@react-navigation/material-top-ta
 
 import { View, Text, Button, FlatList, StyleSheet } from 'react-native';
 
-const listItems = Array.from({ length: 50 }, (_, index) => `List item ${index}`);
+const listItems = Array.from(
+  { length: 50 },
+  (_, index) => `List item ${index}`
+);
 
 function Tab1(props: { onOpenDetail: () => void }) {
   const listRef = React.useRef<FlatList<string>>(null);
@@ -28,7 +31,10 @@ function Tab1(props: { onOpenDetail: () => void }) {
         data={listItems}
         keyExtractor={(item) => item}
         renderItem={({ item, index }) => (
-          <Text testID={`material-top-bar-list-item-${index}`} style={styles.row}>
+          <Text
+            testID={`material-top-bar-list-item-${index}`}
+            style={styles.row}
+          >
             {item}
           </Text>
         )}

example/src/OnPageScrollExample.tsx

@@ -1,5 +1,13 @@
 import React from 'react';
-import { StyleSheet, Text, View, SafeAreaView, Animated, ScrollView, TouchableOpacity } from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  View,
+  SafeAreaView,
+  Animated,
+  ScrollView,
+  TouchableOpacity,
+} from 'react-native';
 import PagerView from 'react-native-pager-view';
 import { ProgressBar } from './component/ProgressBar';
 import { useNavigationPanel } from './hook/useNavigationPanel';

example/src/component/ProgressBar.tsx

@@ -16,9 +16,7 @@ export class ProgressBar extends React.Component<Props> {
     const size = fractionalPosition / (this.props.numberOfPages - 1);
     const clampedSize = Math.max(0, Math.min(1, size));
     return (
-      <View
-        style={styles.progressBarContainer}
-      >
+      <View style={styles.progressBarContainer}>
         <View
           style={[styles.progressBar, { width: `${clampedSize * 100}%` }]}
         />

example/src/gh-issues/Issue1096KeyboardShrinkRepro.tsx

@@ -61,7 +61,11 @@ export function Issue1096KeyboardShrinkRepro() {
       <Animated.View
         style={[styles.sheet, { transform: [{ translateY: lift }] }]}
       >
-        <PagerView style={styles.pager} initialPage={0} testID="issue-1096-pager">
+        <PagerView
+          style={styles.pager}
+          initialPage={0}
+          testID="issue-1096-pager"
+        >
           <View key="rows" style={styles.page} collapsable={false}>
             {ROWS.map((row, index) =>
               index === ROWS.length - 1 ? (

example/src/gh-issues/Issue1142SearchBarInsetRepro.tsx

@@ -10,7 +10,13 @@
  */
 import { useHeaderHeight } from '@react-navigation/elements';
 import { useNavigation } from '@react-navigation/native';
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
 import {
   Button,
   Dimensions,
@@ -101,8 +107,8 @@ function MeasuredList({ testIDPrefix }: { testIDPrefix: string }) {
   const verdict = measuring
     ? 'safe-area: measuring'
     : topOk && bottomOk
-      ? 'safe-area: pass'
-      : 'safe-area: fail';
+    ? 'safe-area: pass'
+    : 'safe-area: fail';
 
   return (
     <View style={styles.listHost} testID={`${testIDPrefix}-list`}>

example/src/tabView/TabViewInsideScrollViewExample.tsx

@@ -90,9 +90,9 @@ const styles = StyleSheet.create({
   routeText: {
     color: 'white',
   },
-  header:{
-    width:'100%',
-    height:200,
-    backgroundColor:'purple',
+  header: {
+    width: '100%',
+    height: 200,
+    backgroundColor: 'purple',
   },
 });

package.json

@@ -23,7 +23,9 @@
   "scripts": {
     "test": "jest",
     "typescript": "tsc --noEmit",
-    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "lint": "eslint .",
+    "format": "prettier --write \"**/*.{js,ts,tsx}\"",
+    "format:check": "prettier --check \"**/*.{js,ts,tsx}\"",
     "prepare": "bob build",
     "release": "release-it",
     "release:next": "release-it --npm.tag=next --preRelease=rc",
@@ -62,7 +64,7 @@
     "@release-it/conventional-changelog": "^2.0.0",
     "@types/jest": "^29.5.13",
     "@types/react": "^19.2.0",
-    "eslint": "^8.57.1",
+    "eslint": "^9.39.0",
     "jest": "^29.6.3",
     "prettier": "2.8.8",
     "react": "19.2.3",
@@ -118,5 +120,8 @@
         }
       ]
     ]
+  },
+  "overrides": {
+    "eslint-plugin-ft-flow": "^3.0.11"
   }
 }

src/PagerViewNativeComponent.ts

@@ -1,10 +1,6 @@
 import type * as React from 'react';
 import { codegenNativeCommands, codegenNativeComponent } from 'react-native';
-import type {
-  CodegenTypes,
-  HostComponent,
-  ViewProps,
-} from 'react-native';
+import type { CodegenTypes, HostComponent, ViewProps } from 'react-native';
 
 export type OnPageScrollEventData = Readonly<{
   position: CodegenTypes.Double;
@@ -23,10 +19,16 @@ export interface NativeProps extends ViewProps {
   scrollEnabled?: CodegenTypes.WithDefault<boolean, true>;
   layoutDirection?: CodegenTypes.WithDefault<'ltr' | 'rtl', 'ltr'>;
   initialPage?: CodegenTypes.Int32;
-  orientation?: CodegenTypes.WithDefault<'horizontal' | 'vertical', 'horizontal'>;
+  orientation?: CodegenTypes.WithDefault<
+    'horizontal' | 'vertical',
+    'horizontal'
+  >;
   offscreenPageLimit?: CodegenTypes.Int32;
   pageMargin?: CodegenTypes.Int32;
-  overScrollMode?: CodegenTypes.WithDefault<'auto' | 'always' | 'never', 'auto'>;
+  overScrollMode?: CodegenTypes.WithDefault<
+    'auto' | 'always' | 'never',
+    'auto'
+  >;
   overdrag?: CodegenTypes.WithDefault<boolean, false>;
   keyboardDismissMode?: CodegenTypes.WithDefault<'none' | 'on-drag', 'none'>;
   onPageScroll?: CodegenTypes.DirectEventHandler<OnPageScrollEventData>;

src/usePagerView.ts

@@ -15,9 +15,7 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 
 export type UsePagerViewProps = ReturnType<typeof usePagerView>;
 
-const AnimatedPagerView = Animated.createAnimatedComponent(
-  PagerView
-);
+const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
 
 type UsePagerViewParams = {
   pagesAmount: number;