[eslint] Add simple-import-sort

.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 @@
   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;
@@ -142,7 +140,7 @@
   });
 
   useEffect(() => {
     setTimeout(() => {
       isMounted.value = true;
       opacity.value = withTiming(1, {
         duration: 200,

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;

apps/common-app/src/common_assets/AnimatedCameraView/AnimatedCameraView.tsx

@@ -1,9 +1,9 @@
-import Animated, { useAnimatedProps } from 'react-native-reanimated';
-import type { AnimatedRef, SharedValue } from 'react-native-reanimated';
-import { Button, StyleSheet, Text, View } from 'react-native';
-import { CameraView, useCameraPermissions } from 'expo-camera';
 import type { CameraViewProps } from 'expo-camera';
+import { CameraView, useCameraPermissions } from 'expo-camera';
 import React from 'react';
+import { Button, StyleSheet, Text, View } from 'react-native';
+import type { AnimatedRef, SharedValue } from 'react-native-reanimated';
+import Animated, { useAnimatedProps } from 'react-native-reanimated';
 
 const AnimatedCameraView = Animated.createAnimatedComponent(CameraView);
 
@@ -15,7 +15,7 @@
 }
 
 const Camera = ({ ref, ...props }: CameraProps) => {
   const [permission, requestPermission] = useCameraPermissions();
 
   const animatedProps = useAnimatedProps(() => {
     return {
@@ -27,13 +27,13 @@
     return <View />;
   }
 
   if (!permission.granted) {
     return (
       <View style={styles.container}>
         <Text style={{ textAlign: 'center' }}>
           We need your permission to show the camera
         </Text>
         <Button onPress={requestPermission} title="Grant permission" />
       </View>
     );
   }

apps/common-app/src/empty/index.tsx

@@ -1,5 +1,5 @@
-import { StyleSheet, Text, View } from 'react-native';
 import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
 
 export default function EmptyExample() {
   return (

apps/common-app/src/legacy/basic/bouncing/index.tsx

@@ -1,17 +1,18 @@
+import type { PropsWithChildren } from 'react';
+import React, { Component } from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
-import {
-  PanGestureHandler,
-  RotationGestureHandler,
-  State,
-} from 'react-native-gesture-handler';
 import type {
   PanGestureHandlerGestureEvent,
   PanGestureHandlerStateChangeEvent,
   RotationGestureHandlerGestureEvent,
   RotationGestureHandlerStateChangeEvent,
 } from 'react-native-gesture-handler';
-import React, { Component } from 'react';
-import type { PropsWithChildren } from 'react';
+import {
+  PanGestureHandler,
+  RotationGestureHandler,
+  State,
+} from 'react-native-gesture-handler';
+
 import { USE_NATIVE_DRIVER } from '../../../config';
 
 class Snappable extends Component<PropsWithChildren<Record<string, unknown>>> {

apps/common-app/src/legacy/basic/draggable/index.tsx

@@ -1,15 +1,16 @@
+import React, { Component } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { Animated, StyleSheet } from 'react-native';
+import type {
+  PanGestureHandlerGestureEvent,
+  PanGestureHandlerStateChangeEvent,
+} from 'react-native-gesture-handler';
 import {
   PanGestureHandler,
   ScrollView,
   State,
 } from 'react-native-gesture-handler';
-import type {
-  PanGestureHandlerGestureEvent,
-  PanGestureHandlerStateChangeEvent,
-} from 'react-native-gesture-handler';
-import React, { Component } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+
 import { LoremIpsum } from '../../../common';
 import { USE_NATIVE_DRIVER } from '../../../config';
 

apps/common-app/src/legacy/basic/fling/index.tsx

@@ -1,16 +1,16 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import {
+  Directions,
+  Gesture,
+  GestureDetector,
+} from 'react-native-gesture-handler';
 import Animated, {
   Easing,
   useAnimatedStyle,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
-import {
-  Directions,
-  Gesture,
-  GestureDetector,
-} from 'react-native-gesture-handler';
-import { StyleSheet, View } from 'react-native';
-import React from 'react';
 
 export default function Example() {
   const position = useSharedValue(0);

apps/common-app/src/legacy/basic/forcetouch/index.tsx

@@ -1,7 +1,8 @@
-import { Animated, StyleSheet, Text, View } from 'react-native';
-import { ForceTouchGestureHandler, State } from 'react-native-gesture-handler';
 import React, { Component } from 'react';
+import { Animated, StyleSheet, Text, View } from 'react-native';
 import type { ForceTouchGestureHandlerStateChangeEvent } from 'react-native-gesture-handler';
+import { ForceTouchGestureHandler, State } from 'react-native-gesture-handler';
+
 import { USE_NATIVE_DRIVER } from '../../../config';
 
 export default class Example extends Component {

apps/common-app/src/legacy/basic/multitap/index.tsx

@@ -1,15 +1,16 @@
+import React, { Component } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import type {
+  LongPressGestureHandlerStateChangeEvent,
+  TapGestureHandlerStateChangeEvent,
+} from 'react-native-gesture-handler';
 import {
   LongPressGestureHandler,
   ScrollView,
   State,
   TapGestureHandler,
 } from 'react-native-gesture-handler';
-import type {
-  LongPressGestureHandlerStateChangeEvent,
-  TapGestureHandlerStateChangeEvent,
-} from 'react-native-gesture-handler';
-import React, { Component } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+
 import { LoremIpsum } from '../../../common';
 
 interface PressBoxProps {

apps/common-app/src/legacy/basic/pagerAndDrawer/index.android.tsx

@@ -1,10 +1,10 @@
+import ViewPagerAndroid from '@react-native-community/viewpager';
+import React, { Component } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
 import {
-  LegacyDrawerLayoutAndroid,
   legacy_createNativeWrapper,
+  LegacyDrawerLayoutAndroid,
 } from 'react-native-gesture-handler';
-import React, { Component } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import ViewPagerAndroid from '@react-native-community/viewpager';
 
 const WrappedViewPagerAndroid = legacy_createNativeWrapper(ViewPagerAndroid, {
   disallowInterruption: true,

apps/common-app/src/legacy/basic/panResponder/index.tsx

@@ -1,14 +1,15 @@
+import React, { Component } from 'react';
 import type {
   GestureResponderEvent,
   GestureResponderHandlers,
   PanResponderGestureState,
 } from 'react-native';
 import { I18nManager, PanResponder, StyleSheet, View } from 'react-native';
-import React, { Component } from 'react';
-import { DraggableBox } from '../draggable';
-import { LoremIpsum } from '../../../common';
 import { ScrollView } from 'react-native-gesture-handler';
 
+import { LoremIpsum } from '../../../common';
+import { DraggableBox } from '../draggable';
+
 const CIRCLE_SIZE = 80;
 
 type CircleStyles = {