[eslint] Consistent import rules

.eslintrc.json

@@ -43,6 +43,8 @@
     "@typescript-eslint/no-unsafe-return": "warn",
     "@typescript-eslint/no-non-null-assertion": "warn",
     "@typescript-eslint/ban-types": "warn",
+    "@typescript-eslint/consistent-type-imports": "error",
+    "@typescript-eslint/consistent-type-exports": "error",
 
     // common
     "@typescript-eslint/explicit-module-boundary-types": "off",
@@ -85,6 +87,7 @@
     ],
     "curly": "error",
     "spaced-comment": "error",
-    "no-alert": "warn"
+    "no-alert": "warn",
+    "sort-imports": "error"
   }
 }

apps/basic-example/src/App.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
-import { SafeAreaView, Platform } from 'react-native';
+import { Platform, SafeAreaView } from 'react-native';
+import ContentsButton from './ContentsButton';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-
-import Navigator from './Navigator';
-
-import Text from './Text';
 import NativeDetector from './NativeDetector';
+import Navigator from './Navigator';
 import RuntimeDecoration from './RuntimeDecoration';
-import ContentsButton from './ContentsButton';
+import Text from './Text';
 
 const EXAMPLES = [
   {

apps/basic-example/src/ContentsButton.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
-import { View, StyleSheet, Text, SafeAreaView } from 'react-native';
 import {
   GestureHandlerRootView,
-  ScrollView,
   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/NativeDetector.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Animated, Button, useAnimatedValue } from 'react-native';
 import {
-  GestureHandlerRootView,
   GestureDetector,
+  GestureHandlerRootView,
   usePanGesture,
 } from 'react-native-gesture-handler';
 

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 { View, Text, Pressable, BackHandler } from 'react-native';
 
 export interface RouteInfo {
   component: React.ComponentType;

apps/basic-example/src/RuntimeDecoration.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-
-import { COLORS } from './colors';
 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({

apps/basic-example/src/Text.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
 import {
   Gesture,
   GestureDetector,
   InterceptingGestureDetector,
   VirtualGestureDetector,
   useTapGesture,
 } 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,8 +1,5 @@
-import React, { useEffect } from 'react';
-import { Platform, StyleSheet } from 'react-native';
 import Animated, {
   Easing,
-  SharedValue,
   interpolate,
   measure,
   useAnimatedRef,
@@ -11,12 +8,15 @@
   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');
 
 export const HEADER_HEIGHT =
   Platform.OS === 'web' || Platform.OS === 'macos' ? 64 : 192;
@@ -142,7 +142,7 @@
   });
 
   useEffect(() => {
     setTimeout(() => {
       isMounted.value = true;
       opacity.value = withTiming(1, {
         duration: 200,
@@ -157,11 +157,11 @@
       collapsable={false}
       style={[headerStyle, styles.nativeHeader]}>
       <Animated.Image
         source={SIGNET}
         style={signetStyle}
         resizeMode="contain"
       />
       <Animated.Image source={TEXT} style={textStyle} resizeMode="contain" />
     </Animated.View>
   );
 }
@@ -170,12 +170,12 @@
   return (
     <Animated.View collapsable={false} style={styles.webHeader}>
       <Animated.Image
         source={SIGNET}
         style={styles.webSignet}
         resizeMode="contain"
       />
       <Animated.Image
         source={TEXT}
         style={styles.webText}
         resizeMode="contain"
       />
@@ -186,8 +186,8 @@
 function HeaderMacOS(_props: HeaderProps) {
   return (
     <Animated.View collapsable={false} style={styles.webHeader}>
       <Animated.Image source={SIGNET} style={styles.macosSignet} />
       <Animated.Image source={TEXT} style={styles.macosText} />
     </Animated.View>
   );
 }

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

@@ -1,29 +1,20 @@
-import React, { useEffect } from 'react';
-import {
-  Platform,
-  ScrollViewProps,
-  SectionList,
-  SectionListProps,
-  StyleSheet,
-} from 'react-native';
 import Animated, {
-  SharedValue,
+  runOnJS,
+  useAnimatedProps,
+  useAnimatedReaction,
   useAnimatedRef,
+  useAnimatedStyle,
   useScrollViewOffset,
-  useAnimatedReaction,
   useSharedValue,
-  useAnimatedProps,
-  useAnimatedStyle,
-  runOnJS,
   withSpring,
-  AnimatedRef,
 } 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 {
-  Gesture,
-  GestureDetector,
-  GestureType,
-} from 'react-native-gesture-handler';
+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/common.tsx

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

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

@@ -1,11 +1,9 @@
-import React from 'react';
-import { CameraView, useCameraPermissions, CameraViewProps } from 'expo-camera';
+import Animated, { useAnimatedProps } from 'react-native-reanimated';
+import type { AnimatedRef, SharedValue } from 'react-native-reanimated';
 import { Button, StyleSheet, Text, View } from 'react-native';
-import Animated, {
-  SharedValue,
-  useAnimatedProps,
-  AnimatedRef,
-} from 'react-native-reanimated';
+import { CameraView, useCameraPermissions } from 'expo-camera';
+import type { CameraViewProps } from 'expo-camera';
+import React from 'react';
 
 const AnimatedCameraView = Animated.createAnimatedComponent(CameraView);
 
@@ -17,7 +15,7 @@
 }
 
 const Camera = ({ ref, ...props }: CameraProps) => {
   const [permission, requestPermission] = useCameraPermissions();
 
   const animatedProps = useAnimatedProps(() => {
     return {

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

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

apps/common-app/src/images.d.ts

@@ -0,0 +1,6 @@
+declare module '*.png' {
+  import type { ImageSourcePropType } from 'react-native';
+
+  const value: ImageSourcePropType;
+  export default value;
+}

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

@@ -1,16 +1,17 @@
-import React, { Component, PropsWithChildren } 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 { USE_NATIVE_DRIVER } from '../../../config';
 
 class Snappable extends Component<PropsWithChildren<Record<string, unknown>>> {

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

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

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

@@ -1,16 +1,16 @@
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
 import {
   Directions,
   Gesture,
   GestureDetector,
 } from 'react-native-gesture-handler';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-  Easing,
-} from 'react-native-reanimated';
+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,12 +1,7 @@
+import { Animated, StyleSheet, Text, View } from 'react-native';
+import { ForceTouchGestureHandler, State } from 'react-native-gesture-handler';
 import React, { Component } from 'react';
-import { Animated, StyleSheet, View, Text } from 'react-native';
-
-import {
-  State,
-  ForceTouchGestureHandler,
-  ForceTouchGestureHandlerStateChangeEvent,
-} from 'react-native-gesture-handler';
-
+import type { ForceTouchGestureHandlerStateChangeEvent } 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,15 @@
-import React, { Component } from 'react';
-import { StyleSheet, View, Text } from 'react-native';
-
 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 {
-  legacy_createNativeWrapper,
   LegacyDrawerLayoutAndroid,
+  legacy_createNativeWrapper,
 } 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,18 +1,13 @@
-import React, { Component } from 'react';
-import {
-  StyleSheet,
-  View,
-  PanResponder,
-  I18nManager,
+import type {
   GestureResponderEvent,
-  PanResponderGestureState,
   GestureResponderHandlers,
+  PanResponderGestureState,
 } from 'react-native';
-
-import { ScrollView } from 'react-native-gesture-handler';
-
+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';
 
 const CIRCLE_SIZE = 80;