[eslint] Add simple-import-sort (#4092)

## Description

Turns out that inbuilt `sort-import` cannot be fixed with autofix. I got
inspiration from
[Reanimated](https://github.com/software-mansion/react-native-reanimated/blob/8937365d427723f8fb0859c31c4d349345d2639b/eslint.config.mjs#L183)
and added `simple-import-sort`

## Test plan

`yarn lint-js`

<img width="1085" height="149" alt="image"
src="https://github.com/user-attachments/assets/c769c157-32b5-4d35-8c0c-518734e100d0"
/>

Author: m-bert

.eslintrc.json

@@ -16,7 +16,7 @@
     "project": ["./tsconfig.json"]
   },
   "env": { "browser": true, "node": true, "jest/globals": true },
-  "plugins": ["react", "jest"],
+  "plugins": ["react", "jest", "simple-import-sort"],
   "ignorePatterns": [
     "packages/react-native-gesture-handler/lib/**/*",
     "**/*.config.js",
@@ -88,6 +88,7 @@
     "curly": "error",
     "spaced-comment": "error",
     "no-alert": "warn",
-    "sort-imports": "error"
+    "simple-import-sort/imports": "error",
+    "simple-import-sort/exports": "error"
   }
 }

apps/basic-example/src/App.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { Platform, SafeAreaView } from 'react-native';
-import ContentsButton from './ContentsButton';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+import ContentsButton from './ContentsButton';
 import NativeDetector from './NativeDetector';
 import Navigator from './Navigator';
 import RuntimeDecoration from './RuntimeDecoration';

apps/basic-example/src/ContentsButton.tsx

@@ -1,10 +1,10 @@
+import React from 'react';
+import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
 import {
   GestureHandlerRootView,
   RectButton,
   ScrollView,
 } from 'react-native-gesture-handler';
-import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
-import React from 'react';
 
 export default function ComplexUI() {
   return (

apps/basic-example/src/Navigator.tsx

@@ -1,5 +1,5 @@
-import { BackHandler, Pressable, Text, View } from 'react-native';
 import React, { useEffect, useState } from 'react';
+import { BackHandler, Pressable, Text, View } from 'react-native';
 
 export interface RouteInfo {
   component: React.ComponentType;

apps/basic-example/src/RuntimeDecoration.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
+import { useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   runOnJS,
   useAnimatedStyle,
   useSharedValue,
 } from 'react-native-reanimated';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import { StyleSheet, Text, View } from 'react-native';
+
 import { COLORS } from './colors';
-import { useState } from 'react';
 
 export function RuntimeChecker({
   runGestureOnJS,

apps/basic-example/src/Text.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
 import {
   Gesture,
   GestureDetector,
   InterceptingGestureDetector,
-  VirtualGestureDetector,
   useTapGesture,
+  VirtualGestureDetector,
 } from 'react-native-gesture-handler';
-import { StyleSheet, Text, View } from 'react-native';
+
 import { COLORS } from './colors';
 
 function NativeDetectorExample() {

apps/common-app/src/ListWithHeader/Header.tsx

@@ -1,3 +1,6 @@
+import React, { useEffect } from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
 import Animated, {
   Easing,
   interpolate,
@@ -8,15 +11,10 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import { Platform, StyleSheet } from 'react-native';
-import React, { useEffect } from 'react';
-import { COLORS } from '../common';
-import type { SharedValue } from 'react-native-reanimated';
 
-// eslint-disable-next-line import-x/no-commonjs, @typescript-eslint/no-var-requires
-const SIGNET = require('./signet.png');
-// eslint-disable-next-line import-x/no-commonjs, @typescript-eslint/no-var-requires
-const TEXT = require('./text.png');
+import { COLORS } from '../common';
+import SIGNET from './signet.png';
+import TEXT from './text.png';
 
 export const HEADER_HEIGHT =
   Platform.OS === 'web' || Platform.OS === 'macos' ? 64 : 192;

apps/common-app/src/ListWithHeader/ListWithHeader.tsx

@@ -1,3 +1,9 @@
+import React, { useEffect } from 'react';
+import type { ScrollViewProps, SectionListProps } from 'react-native';
+import { Platform, SectionList, StyleSheet } from 'react-native';
+import type { GestureType } from 'react-native-gesture-handler';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import type { AnimatedRef, SharedValue } from 'react-native-reanimated';
 import Animated, {
   runOnJS,
   useAnimatedProps,
@@ -8,13 +14,8 @@ import Animated, {
   useSharedValue,
   withSpring,
 } from 'react-native-reanimated';
-import type { AnimatedRef, SharedValue } from 'react-native-reanimated';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+
 import Header, { HEADER_HEIGHT } from './Header';
-import { Platform, SectionList, StyleSheet } from 'react-native';
-import React, { useEffect } from 'react';
-import type { ScrollViewProps, SectionListProps } from 'react-native';
-import type { GestureType } from 'react-native-gesture-handler';
 
 const IS_ANDROID = Platform.OS === 'android';
 

apps/common-app/src/ListWithHeader/index.ts

@@ -1,2 +1,2 @@
+export { COLLAPSED_HEADER_HEIGHT, HEADER_HEIGHT } from './Header';
 export { ListWithHeader } from './ListWithHeader';
-export { HEADER_HEIGHT, COLLAPSED_HEADER_HEIGHT } from './Header';

apps/common-app/src/common.tsx

@@ -1,19 +1,19 @@
-import Animated, {
-  Easing,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
-import type { Platform, StyleProp, ViewStyle } from 'react-native';
+import type { RefObject } from 'react';
 import React, {
   useCallback,
   useEffect,
   useImperativeHandle,
   useRef,
   useState,
 } from 'react';
+import type { Platform, StyleProp, ViewStyle } from 'react-native';
 import { StyleSheet, Text, View } from 'react-native';
-import type { RefObject } from 'react';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 
 export interface Example {
   name: string;