lint config for consistent import style (#3248)

* MOB-1008 add lint config for consistent ts imports

* auto-fix consistent imports

* auto-fix consistent imports

* reapply autofix from latest main

* Extend Props interface from PropsWithChildren

---------

Co-authored-by: Johannes Klein <johannes.t.klein@gmail.com>

.eslintrc.js

@@ -143,7 +143,10 @@ module.exports = {
     "@typescript-eslint/no-require-imports": ["error", {
       allow: ["\\.(png|jpg|jpeg|gif|svg)$"]
     }],
-    "@typescript-eslint/no-unsafe-function-type": 1
+    "@typescript-eslint/no-unsafe-function-type": 1,
+    "@typescript-eslint/consistent-type-imports": ["error", {
+      fixStyle: "separate-type-imports"
+    }]
   },
   ignorePatterns: ["!.detoxrc.js", "/coverage/*", "/vendor/*", "**/flow-typed"],
   settings: {
@@ -161,7 +164,8 @@ module.exports = {
       rules: {
         "@typescript-eslint/no-unsafe-function-type": "off",
         "@typescript-eslint/no-wrapper-object-types": "off",
-        "@typescript-eslint/no-require-imports": "off"
+        "@typescript-eslint/no-require-imports": "off",
+        "@typescript-eslint/consistent-type-imports": "off"
       }
     },
     {

__mocks__/zustand.ts

@@ -1,7 +1,7 @@
 // Mostly from https://github.com/pmndrs/zustand/blob/main/docs/guides/testing.md#jest
 
 import { cloneDeep } from "lodash";
-import * as zustand from "zustand";
+import type * as zustand from "zustand";
 
 const { create: actualCreate, createStore: actualCreateStore }
   = jest.requireActual<typeof zustand>( "zustand" );

src/api/log.ts

@@ -3,7 +3,7 @@ import { create } from "apisauce";
 // eslint-disable-next-line import/no-cycle
 import { getAnonymousJWT, getJWT } from "components/LoginSignUp/AuthenticationService";
 import Config from "react-native-config";
-import { transportFunctionType } from "react-native-logs";
+import type { transportFunctionType } from "react-native-logs";
 import { getInstallID } from "sharedHelpers/installData";
 
 const API_HOST: string

src/api/translations.ts

@@ -1,4 +1,5 @@
-import handleError, { ErrorWithResponse, INatApiError } from "api/error";
+import type { ErrorWithResponse, INatApiError } from "api/error";
+import handleError from "api/error";
 import inatjs from "inaturalistjs";
 
 const fetchAvailableLocales = async (

src/components/Camera/AICamera/AICameraButtons.tsx

@@ -8,7 +8,7 @@ import Zoom from "components/Camera/Buttons/Zoom";
 import TabletButtons from "components/Camera/TabletButtons";
 import { View } from "components/styledComponents";
 import React from "react";
-import { GestureResponderEvent, ViewStyle } from "react-native";
+import type { GestureResponderEvent, ViewStyle } from "react-native";
 import DeviceInfo from "react-native-device-info";
 import type { CameraDeviceFormat, TakePhotoOptions } from "react-native-vision-camera";
 import { useLayoutPrefs } from "sharedHooks";
@@ -30,10 +30,15 @@ interface Props {
   rotatableAnimatedStyle: ViewStyle;
   debugFormat?: CameraDeviceFormat;
   // Those five are debug only so I don't bother with types
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   setConfidenceThreshold?: Function;
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   setCropRatio?: Function;
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   setFPS?: Function;
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   setNumStoredResults?: Function;
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   changeDebugFormat?: Function;
   showPrediction: boolean;
   showZoomButton: boolean;

src/components/Camera/AICamera/hooks/usePredictions.ts

@@ -1,6 +1,6 @@
 import { RealmContext } from "providers/contexts";
 import { useState } from "react";
-import { Result } from "vision-camera-plugin-inatvision";
+import type { Result } from "vision-camera-plugin-inatvision";
 
 const { useRealm } = RealmContext;
 

src/components/Camera/Buttons/CameraFlip.tsx

@@ -1,6 +1,6 @@
 import { TransparentCircleButton } from "components/SharedComponents";
 import React from "react";
-import { GestureResponderEvent } from "react-native";
+import type { GestureResponderEvent } from "react-native";
 import { useTranslation } from "sharedHooks";
 
 interface Props {

src/components/Camera/Buttons/Flash.tsx

@@ -2,7 +2,7 @@ import classnames from "classnames";
 // eslint-disable-next-line max-len
 import TransparentCircleButton from "components/SharedComponents/Buttons/TransparentCircleButton";
 import React from "react";
-import { GestureResponderEvent, ViewStyle } from "react-native";
+import type { GestureResponderEvent, ViewStyle } from "react-native";
 import DeviceInfo from "react-native-device-info";
 import Animated from "react-native-reanimated";
 import type { TakePhotoOptions } from "react-native-vision-camera";

src/components/Camera/Buttons/GreenCheckmark.tsx

@@ -2,7 +2,7 @@ import {
   INatIconButton
 } from "components/SharedComponents";
 import React from "react";
-import { GestureResponderEvent } from "react-native";
+import type { GestureResponderEvent } from "react-native";
 import { useTranslation } from "sharedHooks";
 import colors from "styles/tailwindColors";
 

src/components/Camera/Buttons/Location.tsx

@@ -1,7 +1,7 @@
 // eslint-disable-next-line max-len
 import TransparentCircleButton from "components/SharedComponents/Buttons/TransparentCircleButton";
 import React from "react";
-import { GestureResponderEvent, ViewStyle } from "react-native";
+import type { GestureResponderEvent, ViewStyle } from "react-native";
 import DeviceInfo from "react-native-device-info";
 import Animated from "react-native-reanimated";
 import { useTranslation } from "sharedHooks";

src/components/Camera/Buttons/PhotoLibraryIcon.tsx

@@ -2,7 +2,7 @@ import { useNavigation } from "@react-navigation/native";
 import classnames from "classnames";
 import { INatIconButton } from "components/SharedComponents";
 import React from "react";
-import { ViewStyle } from "react-native";
+import type { ViewStyle } from "react-native";
 import DeviceInfo from "react-native-device-info";
 import Animated from "react-native-reanimated";
 import { useTranslation } from "sharedHooks";

src/components/Camera/Buttons/Zoom.tsx

@@ -5,7 +5,7 @@ import {
 } from "components/SharedComponents/Buttons/TransparentCircleButton";
 import { Pressable } from "components/styledComponents";
 import React from "react";
-import { GestureResponderEvent, ViewStyle } from "react-native";
+import type { GestureResponderEvent, ViewStyle } from "react-native";
 import DeviceInfo from "react-native-device-info";
 import Animated from "react-native-reanimated";
 import { useTranslation } from "sharedHooks";

src/components/Camera/CameraContainer.tsx

@@ -1,6 +1,6 @@
 import { useNavigation, useRoute } from "@react-navigation/native";
+import type { Camera } from "components/Camera/helpers/visionCameraWrapper";
 import {
-  Camera,
   useCameraDevice,
   useCameraDevices
 } from "components/Camera/helpers/visionCameraWrapper";

src/components/Camera/CameraView.tsx

@@ -11,12 +11,14 @@ import React, {
 import {
   Dimensions, Platform, StyleSheet
 } from "react-native";
-import {
-  Gesture,
-  GestureDetector,
+import type {
   PanGesture,
   PinchGesture
 } from "react-native-gesture-handler";
+import {
+  Gesture,
+  GestureDetector
+} from "react-native-gesture-handler";
 import Reanimated from "react-native-reanimated";
 import type {
   CameraDevice, CameraDeviceFormat, CameraProps, CameraRuntimeError

src/components/Camera/CameraWithDevice.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import DeviceInfo from "react-native-device-info";
 import type { CameraDevice } from "react-native-vision-camera";
 import useDeviceOrientation from "sharedHooks/useDeviceOrientation";
-import { UserLocation } from "sharedHooks/useWatchPosition";
+import type { UserLocation } from "sharedHooks/useWatchPosition";
 
 import AICamera from "./AICamera/AICamera";
 import StandardCamera from "./StandardCamera/StandardCamera";
@@ -16,10 +16,13 @@ interface Props {
   camera: object,
   flipCamera: ( ) => void,
   handleCheckmarkPress: ( ) => void,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   toggleFlash: Function,
   takingPhoto: boolean,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   takePhotoAndStoreUri: Function,
   newPhotoUris: Array<object>,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   setNewPhotoUris: Function,
   takePhotoOptions: object,
   userLocation: UserLocation | null,

src/components/Camera/TabletButtons.tsx

@@ -3,7 +3,7 @@ import PhotoLibraryIcon from "components/Camera/Buttons/PhotoLibraryIcon";
 import { CloseButton } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import React from "react";
-import { GestureResponderEvent, ViewStyle } from "react-native";
+import type { GestureResponderEvent, ViewStyle } from "react-native";
 import DeviceInfo from "react-native-device-info";
 import Animated from "react-native-reanimated";
 import type { TakePhotoOptions } from "react-native-vision-camera";

src/components/Camera/helpers/index.ts

@@ -1,5 +1,5 @@
 import { Alert } from "react-native";
-import { CameraRuntimeError } from "react-native-vision-camera";
+import type { CameraRuntimeError } from "react-native-vision-camera";
 
 import { log } from "../../../../react-native-logs.config";
 

src/components/Camera/hooks/useFocusTap.ts

@@ -1,13 +1,16 @@
-import { Camera } from "components/Camera/helpers/visionCameraWrapper";
-import React, {
+import type { Camera } from "components/Camera/helpers/visionCameraWrapper";
+import type React from "react";
+import {
   useCallback, useMemo, useRef, useState
 } from "react";
 import { Animated } from "react-native";
-import {
-  Gesture,
+import type {
   GestureStateChangeEvent,
   TapGestureHandlerEventPayload
 } from "react-native-gesture-handler";
+import {
+  Gesture
+} from "react-native-gesture-handler";
 
 const HALF_SIZE_FOCUS_BOX = 33;
 

src/components/Developer/Developer.tsx

@@ -17,8 +17,8 @@ import RNFS from "react-native-fs";
 import RNRestart from "react-native-restart";
 import useLogs from "sharedHooks/useLogs";
 
+import type { DirectoryEntrySize } from "./hooks/useAppSize";
 import useAppSize, {
-  DirectoryEntrySize,
   formatAppSizeString, formatSizeUnits, getTotalDirectorySize
 } from "./hooks/useAppSize";
 

src/components/Explore/MapView.tsx

@@ -5,13 +5,14 @@ import {
 } from "components/SharedComponents";
 import { getMapRegion } from "components/SharedComponents/Map/helpers/mapHelpers";
 import { View } from "components/styledComponents";
+import type { MapBoundaries } from "providers/ExploreContext";
 import {
-  EXPLORE_ACTION, MapBoundaries, PLACE_MODE, useExplore
+  EXPLORE_ACTION, PLACE_MODE, useExplore
 } from "providers/ExploreContext";
 import React, {
   useEffect, useMemo, useRef, useState
 } from "react";
-import { Region } from "react-native-maps";
+import type { Region } from "react-native-maps";
 import { useTranslation } from "sharedHooks";
 import { getShadow } from "styles/global";
 
@@ -58,7 +59,9 @@ interface Props {
   };
   isLoading: boolean,
   hasLocationPermissions?: boolean,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   renderLocationPermissionsGate: Function,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   requestLocationPermissions: Function
 }
 

src/components/FullPageWebView/FullPageWebView.tsx

@@ -1,5 +1,5 @@
+import type { RouteProp } from "@react-navigation/native";
 import {
-  RouteProp,
   useFocusEffect,
   useNavigation,
   useRoute

src/components/FullPageWebView/FullPageWebViewHeader.tsx

@@ -1,4 +1,5 @@
-import { getHeaderTitle, HeaderTitleProps } from "@react-navigation/elements";
+import type { HeaderTitleProps } from "@react-navigation/elements";
+import { getHeaderTitle } from "@react-navigation/elements";
 import classNames from "classnames";
 import { Heading4 } from "components/SharedComponents";
 import BackButton from "components/SharedComponents/Buttons/BackButton";

src/components/LocationPicker/Footer.tsx

@@ -1,7 +1,7 @@
 import { Button } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import React from "react";
-import { GestureResponderEvent } from "react-native";
+import type { GestureResponderEvent } from "react-native";
 import useTranslation from "sharedHooks/useTranslation";
 
 interface Props {

src/components/LocationPicker/LocationSearch.tsx

@@ -7,7 +7,8 @@ import {
 } from "components/SharedComponents";
 import { Pressable, View } from "components/styledComponents";
 import React, { useRef } from "react";
-import { Keyboard, TextInput } from "react-native";
+import type { TextInput } from "react-native";
+import { Keyboard } from "react-native";
 import useAuthenticatedQuery from "sharedHooks/useAuthenticatedQuery";
 import { getShadow } from "styles/global";
 

src/components/LoginSignUp/AuthenticationService.ts

@@ -2,7 +2,8 @@ import type { QueryClient } from "@tanstack/query-core";
 import type { ApiUser } from "api/types";
 import { getUserAgent } from "api/userAgent";
 import { fetchUserEmailAvailable, fetchUserMe } from "api/users";
-import { ApiResponse, ApisauceInstance, create } from "apisauce";
+import type { ApiResponse, ApisauceInstance } from "apisauce";
+import { create } from "apisauce";
 import {
   computerVisionPath,
   photoLibraryPhotosPath,

src/components/LoginSignUp/ForgotPassword.tsx

@@ -1,6 +1,6 @@
 import { useNavigation } from "@react-navigation/native";
 import { WarningSheet } from "components/SharedComponents";
-import { ScrollView } from "components/styledComponents";
+import type { ScrollView } from "components/styledComponents";
 import { t } from "i18next";
 import React, { useCallback, useState } from "react";
 import { Keyboard, TouchableWithoutFeedback } from "react-native";

src/components/LoginSignUp/ForgotPasswordForm.tsx

@@ -1,11 +1,10 @@
-// @flow
-
 import { useNavigation } from "@react-navigation/native";
 import {
   Body1,
   Button
 } from "components/SharedComponents";
-import { ScrollView, View } from "components/styledComponents";
+import type { ScrollView } from "components/styledComponents";
+import { View } from "components/styledComponents";
 import { t } from "i18next";
 import type { ElementRef, Node } from "react";
 import React, {

src/components/LoginSignUp/LoginForm.tsx

@@ -1,4 +1,5 @@
-import { RouteProp, useNavigation, useRoute } from "@react-navigation/native";
+import type { RouteProp } from "@react-navigation/native";
+import { useNavigation, useRoute } from "@react-navigation/native";
 import classnames from "classnames";
 import { authenticateUser } from "components/LoginSignUp/AuthenticationService";
 import {
@@ -11,9 +12,9 @@ import React, {
   useCallback, useEffect, useRef, useState
 } from "react";
 import { Trans } from "react-i18next";
+import type { TextInput } from "react-native";
 import {
   Platform,
-  TextInput,
   TouchableWithoutFeedback
 } from "react-native";
 import { useCurrentUser, useLayoutPrefs } from "sharedHooks";

src/components/LoginSignUp/LoginSignUpInputField.tsx

@@ -1,7 +1,8 @@
 import { Heading4 } from "components/SharedComponents";
 import { View } from "components/styledComponents";
-import React, { forwardRef, Ref } from "react";
-import { TextInput as RNTextInput, TextInputProps } from "react-native";
+import type { Ref } from "react";
+import React, { forwardRef } from "react";
+import type { TextInput as RNTextInput, TextInputProps } from "react-native";
 import { TextInput } from "react-native-paper";
 import colors from "styles/tailwindColors";
 

src/components/LoginSignUp/LoginSignUpWrapper.tsx

@@ -2,9 +2,8 @@ import { useNavigation } from "@react-navigation/native";
 import {
   ImageBackground, ScrollView, View
 } from "components/styledComponents";
-import React, {
-  PropsWithChildren, useEffect, useRef
-} from "react";
+import type { PropsWithChildren } from "react";
+import React, { useEffect, useRef } from "react";
 import type {
   ImageSourcePropType,
   ImageStyle,

src/components/LoginSignUp/SignUpConfirmationForm.tsx

@@ -10,7 +10,8 @@ import { t } from "i18next";
 import { RealmContext } from "providers/contexts";
 import React, { useEffect, useRef, useState } from "react";
 import { Trans } from "react-i18next";
-import { TextInput, TouchableWithoutFeedback } from "react-native";
+import type { TextInput } from "react-native";
+import { TouchableWithoutFeedback } from "react-native";
 import useStore from "stores/useStore";
 
 import {

src/components/LoginSignUp/SignUpForm.tsx

@@ -3,7 +3,8 @@ import { Button } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import { t } from "i18next";
 import React, { useEffect, useRef, useState } from "react";
-import { TextInput, TouchableWithoutFeedback } from "react-native";
+import type { TextInput } from "react-native";
+import { TouchableWithoutFeedback } from "react-native";
 
 import { emailAvailable } from "./AuthenticationService";
 import Error from "./Error";

src/components/LoginSignUp/loginFormHelpers.ts

@@ -1,6 +1,7 @@
 // Helpers for LoginForm. Might be better in AuthenticationService, but
 // there's also some UI-related stuff in here, e.g. alerts
-import { appleAuth, AppleError } from "@invertase/react-native-apple-authentication";
+import type { AppleError } from "@invertase/react-native-apple-authentication";
+import { appleAuth } from "@invertase/react-native-apple-authentication";
 import {
   GoogleSignin,
   statusCodes as googleStatusCodes
@@ -8,7 +9,7 @@ import {
 import { t } from "i18next";
 import { Alert } from "react-native";
 import Config from "react-native-config";
-import Realm from "realm";
+import type Realm from "realm";
 import { log } from "sharedHelpers/logger";
 
 import {

src/components/Match/PreMatchLoadingScreen.tsx

@@ -3,7 +3,8 @@ import {
 } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import React, { useEffect, useRef } from "react";
-import { Animated, ViewStyle } from "react-native";
+import type { ViewStyle } from "react-native";
+import { Animated } from "react-native";
 import { useTranslation } from "sharedHooks";
 import colors from "styles/tailwindColors";
 

src/components/Match/helpers/tryToReplaceWithLocalTaxon.ts

@@ -1,4 +1,4 @@
-import Taxon from "realmModels/Taxon";
+import type Taxon from "realmModels/Taxon";
 import type { RealmTaxon } from "realmModels/types";
 
 const tryToReplaceWithLocalTaxon = (

src/components/ObsDetails/DetailsTab/LocationSection.tsx

@@ -12,7 +12,7 @@ import { View } from "components/styledComponents";
 import { t } from "i18next";
 import React, { useCallback, useMemo, useState } from "react";
 import createOpenLink from "react-native-open-maps";
-import Observation from "realmModels/Observation";
+import type Observation from "realmModels/Observation";
 import { useCurrentUser } from "sharedHooks";
 
 import DetailsMapHeader from "./DetailsMapHeader";

src/components/ObsDetails/Sheets/SuggestIDSheet.tsx

@@ -16,8 +16,11 @@ interface Props {
     body?: string,
     taxon: { id: number }
   }
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   onSuggestId:Function,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   editIdentBody: Function,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   onPressClose: Function
 }
 

src/components/ObsDetailsDefaultMode/CommunitySection/DisagreementText.tsx

@@ -1,5 +1,6 @@
 import { Body4, DisplayTaxonName } from "components/SharedComponents";
-import React, { FC, useCallback } from "react";
+import type { FC } from "react";
+import React, { useCallback } from "react";
 import { Trans } from "react-i18next";
 import { useCurrentUser } from "sharedHooks";
 

src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.tsx

@@ -5,7 +5,7 @@ import { ScrollView, View } from "components/styledComponents";
 import React, {
   useRef
 } from "react";
-import Observation from "realmModels/Observation";
+import type Observation from "realmModels/Observation";
 import type { RealmObservation, RealmUser } from "realmModels/types";
 import {
   useScrollToOffset

src/components/ObsDetailsDefaultMode/Sheets/SuggestIDSheet.tsx

@@ -16,8 +16,11 @@ interface Props {
     body?: string,
     taxon: { id: number }
   }
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   onSuggestId:Function,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   editIdentBody: Function,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   onPressClose: Function
 }
 

src/components/ObsEdit/BottomButtons.tsx

@@ -21,6 +21,7 @@ export type ButtonType = typeof SAVE | typeof UPLOAD | null;
 type Props = {
   buttonPressed: ButtonType,
   canSaveOnly: boolean,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   handlePress: Function,
   loading: boolean,
   showFocusedChangesButton: boolean,

src/components/ObsEdit/BottomButtonsContainer.tsx

@@ -25,7 +25,9 @@ type Props = {
   observations: Array<object>,
   currentObservation: RealmObservation,
   currentObservationIndex: number,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   setCurrentObservationIndex: Function,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   transitionAnimation: Function
 }
 

src/components/ObservationsFlashList/ObsImagePreview.tsx

@@ -1,8 +1,10 @@
-import classNames, { ArgumentArray } from "classnames";
+import type { ArgumentArray } from "classnames";
+import classNames from "classnames";
 import { INatIcon, PhotoCount } from "components/SharedComponents";
 import { LinearGradient, View } from "components/styledComponents";
-import React, { PropsWithChildren, useCallback } from "react";
-import { ViewStyle } from "react-native";
+import type { PropsWithChildren } from "react";
+import React, { useCallback } from "react";
+import type { ViewStyle } from "react-native";
 import { getShadow } from "styles/global";
 import colors from "styles/tailwindColors";
 

src/components/OnboardingModal/OnboardingModal.tsx

@@ -5,7 +5,7 @@ import {
 } from "components/SharedComponents";
 import { Image, Pressable, View } from "components/styledComponents";
 import * as React from "react";
-import { ImageSourcePropType, ImageStyle } from "react-native";
+import type { ImageSourcePropType, ImageStyle } from "react-native";
 import { useTranslation } from "sharedHooks";
 import useStore from "stores/useStore";
 import colors from "styles/tailwindColors";

src/components/OnboardingModal/OnboardingModalBase.tsx

@@ -1,6 +1,7 @@
 import { INatIconButton, ViewWrapper } from "components/SharedComponents";
 import { View } from "components/styledComponents";
-import React, { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
+import React from "react";
 import { StatusBar } from "react-native";
 import { useTranslation } from "sharedHooks";
 import colors from "styles/tailwindColors";

src/components/Projects/Projects.tsx

@@ -14,7 +14,7 @@ import {
   SearchBar,
   Tabs
 } from "components/SharedComponents";
-import { Tab } from "components/SharedComponents/Tabs/Tabs";
+import type { Tab } from "components/SharedComponents/Tabs/Tabs";
 import { View } from "components/styledComponents";
 import React, { useCallback, useEffect } from "react";
 import {

src/components/Settings/TaxonNamesSetting.tsx

@@ -8,7 +8,8 @@ import React, { useCallback } from "react";
 import {
   View
 } from "react-native";
-import User, { TaxonNamesSettings } from "realmModels/User";
+import type { TaxonNamesSettings } from "realmModels/User";
+import User from "realmModels/User";
 import {
   useCurrentUser,
   useTranslation

src/components/SharedComponents/ActivityAnimation/Confetti.tsx

@@ -2,8 +2,9 @@
 import classNames from "classnames";
 import { INatIcon } from "components/SharedComponents";
 import { View } from "components/styledComponents";
+import type { PropsWithChildren } from "react";
 import React, {
-  memo, PropsWithChildren, useEffect, useState
+  memo, useEffect, useState
 } from "react";
 import { StyleSheet, useWindowDimensions } from "react-native";
 import Animated, {

src/components/SharedComponents/ActivityIndicator.tsx

@@ -1,6 +1,7 @@
 import React from "react";
-import { ViewStyle } from "react-native";
-import { ActivityIndicator as RNPActivityIndicator, MD3Theme } from "react-native-paper";
+import type { ViewStyle } from "react-native";
+import type { MD3Theme } from "react-native-paper";
+import { ActivityIndicator as RNPActivityIndicator } from "react-native-paper";
 import colors from "styles/tailwindColors";
 
 interface Props {

src/components/SharedComponents/ButtonBar.tsx

@@ -1,7 +1,8 @@
 import classNames from "classnames";
 import { Button } from "components/SharedComponents";
 import { View } from "components/styledComponents";
-import React, { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
+import React from "react";
 import { getShadow } from "styles/global";
 
 const DROP_SHADOW = getShadow( {

src/components/SharedComponents/Buttons/BackButton.tsx

@@ -2,8 +2,9 @@ import { HeaderBackButton } from "@react-navigation/elements";
 import { useNavigation } from "@react-navigation/native";
 import { Image } from "components/styledComponents";
 import React from "react";
+import type { ImageStyle, StyleProp } from "react-native";
 import {
-  I18nManager, ImageStyle, Platform, StyleProp
+  I18nManager, Platform
 } from "react-native";
 import {
   useTranslation

src/components/SharedComponents/Buttons/Button.tsx

@@ -3,7 +3,7 @@ import classnames from "classnames";
 import { ActivityIndicator, Heading4, INatIcon } from "components/SharedComponents";
 import { Pressable, View } from "components/styledComponents";
 import React, { useRef, useState } from "react";
-import { AccessibilityRole, GestureResponderEvent, ViewStyle } from "react-native";
+import type { AccessibilityRole, GestureResponderEvent, ViewStyle } from "react-native";
 import colors from "styles/tailwindColors";
 
 interface ButtonProps {

src/components/SharedComponents/Buttons/GradientButton.tsx

@@ -2,7 +2,7 @@ import { INatIcon } from "components/SharedComponents";
 import { Pressable, View } from "components/styledComponents";
 import { t } from "i18next";
 import * as React from "react";
-import { GestureResponderEvent } from "react-native";
+import type { GestureResponderEvent } from "react-native";
 import LinearGradient from "react-native-linear-gradient";
 import { dropShadow } from "styles/global";
 import colors from "styles/tailwindColors";

src/components/SharedComponents/Buttons/INatIconButton.tsx

@@ -2,13 +2,16 @@ import classnames from "classnames";
 import { INatIcon } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import { getCurrentRoute } from "navigation/navigationUtils";
-import React, { PropsWithChildren } from "react";
-import {
+import type { PropsWithChildren } from "react";
+import React from "react";
+import type {
   GestureResponderEvent,
-  Platform,
-  Pressable,
   ViewStyle
 } from "react-native";
+import {
+  Platform,
+  Pressable
+} from "react-native";
 import { log } from "sharedHelpers/logger";
 import colors from "styles/tailwindColors";
 

src/components/SharedComponents/Buttons/PressableWithTracking.tsx

@@ -1,8 +1,8 @@
 import { getAnalytics, logEvent } from "@react-native-firebase/analytics";
 import { getCurrentRoute } from "navigation/navigationUtils";
 import React from "react";
-import type { PressableProps } from "react-native";
-import { GestureResponderEvent, Pressable } from "react-native";
+import type { GestureResponderEvent, PressableProps } from "react-native";
+import { Pressable } from "react-native";
 import { log } from "sharedHelpers/logger";
 
 const logger = log.extend( "PressableWithTracking" );

src/components/SharedComponents/Buttons/TransparentCircleButton.tsx

@@ -1,7 +1,7 @@
 import classnames from "classnames";
 import { INatIconButton } from "components/SharedComponents";
 import React from "react";
-import { GestureResponderEvent } from "react-native";
+import type { GestureResponderEvent } from "react-native";
 import colors from "styles/tailwindColors";
 
 export const CIRCLE_OPTIONS_CLASSES = [

src/components/SharedComponents/Carousel.tsx

@@ -5,9 +5,9 @@
 // and height are set in the style component. Tailwind classes do not always
 // seem to work for some reason.
 import React from "react";
+import type { FlatListProps } from "react-native";
 import {
   FlatList,
-  FlatListProps,
   I18nManager
 } from "react-native";
 

src/components/SharedComponents/IconicTaxonChooser.tsx

@@ -2,7 +2,8 @@ import classnames from "classnames";
 import { INatIconButton } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import React, { useCallback } from "react";
-import { FlatList, ListRenderItemInfo } from "react-native";
+import type { ListRenderItemInfo } from "react-native";
+import { FlatList } from "react-native";
 import { useTranslation } from "sharedHooks";
 import colors from "styles/tailwindColors";
 

src/components/SharedComponents/IconicTaxonIcon.tsx

@@ -1,4 +1,5 @@
-import classnames, { ArgumentArray } from "classnames";
+import type { ArgumentArray } from "classnames";
+import classnames from "classnames";
 import { INatIcon } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import React from "react";

src/components/SharedComponents/InlineUser/InlineUserBase.tsx

@@ -6,7 +6,8 @@ import UserIcon from "components/SharedComponents/UserIcon";
 import {
   Pressable, View
 } from "components/styledComponents";
-import React, { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import type { TextProps } from "react-native";
 import User from "realmModels/User";

src/components/SharedComponents/InputField.tsx

@@ -1,6 +1,7 @@
 import { TextInput } from "components/styledComponents";
 import * as React from "react";
-import { KeyboardTypeOptions, Platform, TextInputIOSProps } from "react-native";
+import type { KeyboardTypeOptions, TextInputIOSProps } from "react-native";
+import { Platform } from "react-native";
 import colors from "styles/tailwindColors";
 
 interface Props {

src/components/SharedComponents/LabelColonValue.tsx

@@ -6,9 +6,11 @@ import React from "react";
 
 type Props = {
   label: string;
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   LabelComponent?: Function;
   valueSelectable?: boolean;
   value: string | number;
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   ValueComponent?: Function;
 }
 

src/components/SharedComponents/LocationPermissionGate.tsx

@@ -2,7 +2,8 @@ import PermissionGateContainer, {
   LOCATION_PERMISSIONS
 } from "components/SharedComponents/PermissionGateContainer";
 import { t } from "i18next";
-import React, { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
+import React from "react";
 
 interface Props extends PropsWithChildren {
   permissionNeeded?: boolean;

src/components/SharedComponents/Map/DetailsMap.tsx

@@ -12,11 +12,11 @@ import {
 import { View } from "components/styledComponents";
 import { t } from "i18next";
 import React, { useState } from "react";
-import { GestureResponderEvent } from "react-native";
-import { Region } from "react-native-maps";
+import type { GestureResponderEvent } from "react-native";
+import type { Region } from "react-native-maps";
 import openMap from "react-native-open-maps";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import Observation from "realmModels/Observation";
+import type Observation from "realmModels/Observation";
 import type { RealmObservation } from "realmModels/types";
 import { getShadow } from "styles/global";
 import colors from "styles/tailwindColors";

src/components/SharedComponents/Map/Map.tsx

@@ -10,11 +10,13 @@ import React, {
   useRef,
   useState
 } from "react";
-import { DimensionValue, Platform, ViewStyle } from "react-native";
-import MapView, {
-  BoundingBox, LatLng, MapType, Region, UrlTile
+import type { DimensionValue, ViewStyle } from "react-native";
+import { Platform } from "react-native";
+import type {
+  BoundingBox, LatLng, MapType, Region
 } from "react-native-maps";
-import Observation from "realmModels/Observation";
+import MapView, { UrlTile } from "react-native-maps";
+import type Observation from "realmModels/Observation";
 import fetchCoarseUserLocation from "sharedHelpers/fetchCoarseUserLocation";
 import mapTracker from "sharedHelpers/mapPerformanceTracker";
 import { useDebugMode, useDeviceOrientation } from "sharedHooks";

src/components/SharedComponents/Map/helpers/mapHelpers.ts

@@ -1,6 +1,6 @@
-import { MapBoundaries } from "providers/ExploreContext";
+import type { MapBoundaries } from "providers/ExploreContext";
 import Config from "react-native-config";
-import { LatLng, Region } from "react-native-maps";
+import type { LatLng, Region } from "react-native-maps";
 import createUTFPosition from "sharedHelpers/createUTFPosition";
 import getDataForPixel from "sharedHelpers/fetchUTFGridData";
 

src/components/SharedComponents/Modal.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { ViewStyle } from "react-native";
+import type { ViewStyle } from "react-native";
 import RNModal from "react-native-modal";
 
 // repurposed from Seek: https://github.com/inaturalist/SeekReactNative/blob/main/components/UIComponents/Modals/Modal.js

src/components/SharedComponents/OverlayHeader.tsx

@@ -5,7 +5,8 @@ import {
 import {
   View
 } from "components/styledComponents";
-import React, { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
+import React from "react";
 import colors from "styles/tailwindColors";
 
 interface Props extends PropsWithChildren {

src/components/SharedComponents/PermissionGate.tsx

@@ -18,7 +18,8 @@ import {
   StatusBar
 } from "react-native";
 import DeviceInfo from "react-native-device-info";
-import { PermissionStatus, RESULTS } from "react-native-permissions";
+import type { PermissionStatus } from "react-native-permissions";
+import { RESULTS } from "react-native-permissions";
 import colors from "styles/tailwindColors";
 
 const BACKGROUND_IMAGE_STYLE = {

src/components/SharedComponents/PermissionGateContainer.tsx

@@ -1,20 +1,23 @@
 import { useNavigation } from "@react-navigation/native";
 import Modal from "components/SharedComponents/Modal";
 import _ from "lodash";
+import type { PropsWithChildren } from "react";
 import React, {
-  PropsWithChildren,
   useCallback,
   useEffect,
   useRef,
   useState
 } from "react";
-import { AppState, AppStateStatus, Platform } from "react-native";
-import {
+import type { AppStateStatus } from "react-native";
+import { AppState, Platform } from "react-native";
+import type {
   AndroidPermission,
-  checkMultiple,
   Permission,
+  PermissionStatus
+} from "react-native-permissions";
+import {
+  checkMultiple,
   PERMISSIONS,
-  PermissionStatus,
   requestMultiple,
   RESULTS
 } from "react-native-permissions";

src/components/SharedComponents/RadioButtonRow.tsx

@@ -6,7 +6,7 @@ import {
 } from "components/SharedComponents";
 import { Pressable, View } from "components/styledComponents";
 import React from "react";
-import { GestureResponderEvent } from "react-native";
+import type { GestureResponderEvent } from "react-native";
 import { RadioButton } from "react-native-paper";
 import colors from "styles/tailwindColors";
 

src/components/SharedComponents/SearchBar.tsx

@@ -3,7 +3,8 @@ import classNames from "classnames";
 import { INatIcon, INatIconButton } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import React, { useCallback, useRef, useState } from "react";
-import { Keyboard, TextInput as RNTextInput } from "react-native";
+import type { TextInput as RNTextInput } from "react-native";
+import { Keyboard } from "react-native";
 import { TextInput, useTheme } from "react-native-paper";
 import { useTranslation } from "sharedHooks";
 import { getShadow } from "styles/global";

src/components/SharedComponents/Sheets/BottomSheetStandardBackdrop.tsx

@@ -1,7 +1,9 @@
-import {
-  BottomSheetBackdrop,
+import type {
   BottomSheetBackdropProps
 } from "@gorhom/bottom-sheet";
+import {
+  BottomSheetBackdrop
+} from "@gorhom/bottom-sheet";
 import React from "react";
 
 type Props = {

src/components/SharedComponents/SwitchRow.tsx

@@ -6,7 +6,7 @@ import {
 } from "components/SharedComponents";
 import { Pressable, View } from "components/styledComponents";
 import React from "react";
-import { GestureResponderEvent } from "react-native";
+import type { GestureResponderEvent } from "react-native";
 import { Switch } from "react-native-paper";
 import colors from "styles/tailwindColors";
 

src/components/SharedComponents/Tabs/Tabs.tsx

@@ -1,9 +1,10 @@
 import Divider from "components/SharedComponents/Divider/Divider";
 import Heading4 from "components/SharedComponents/Typography/Heading4";
-import Heading5 from "components/SharedComponents/Typography/Heading5";
+import type Heading5 from "components/SharedComponents/Typography/Heading5";
 import { View } from "components/styledComponents";
 import React from "react";
-import { GestureResponderEvent, TouchableOpacity } from "react-native";
+import type { GestureResponderEvent } from "react-native";
+import { TouchableOpacity } from "react-native";
 import useTranslation from "sharedHooks/useTranslation";
 import colors from "styles/tailwindColors";
 

src/components/SharedComponents/TaxonResult.tsx

@@ -8,7 +8,8 @@ import {
   INatIconButton
 } from "components/SharedComponents";
 import { Pressable, View } from "components/styledComponents";
-import React, { PropsWithChildren } from "react";
+import type { PropsWithChildren } from "react";
+import React from "react";
 import type { GestureResponderEvent } from "react-native";
 import type { RealmTaxon, RealmTaxonPhoto } from "realmModels/types";
 import { accessibleTaxonName } from "sharedHelpers/taxon";

src/components/SharedComponents/Typography/Body1.tsx

@@ -1,6 +1,6 @@
 import { tailwindFontMedium } from "appConstants/fontFamilies";
 import React from "react";
-import { TextProps } from "react-native";
+import type { TextProps } from "react-native";
 
 import InatText from "./InatText";
 

src/components/SharedComponents/Typography/Body2.tsx

@@ -1,6 +1,6 @@
 import { tailwindFontRegular } from "appConstants/fontFamilies";
 import React from "react";
-import { TextProps } from "react-native";
+import type { TextProps } from "react-native";
 
 import InatText from "./InatText";
 

src/components/SharedComponents/Typography/Body3.tsx

@@ -1,6 +1,6 @@
 import { tailwindFontMedium } from "appConstants/fontFamilies";
 import React from "react";
-import { TextProps } from "react-native";
+import type { TextProps } from "react-native";
 
 import InatText from "./InatText";
 

src/components/SharedComponents/Typography/Body4.tsx

@@ -1,6 +1,6 @@
 import { tailwindFontRegular } from "appConstants/fontFamilies";
 import React from "react";
-import { TextProps } from "react-native";
+import type { TextProps } from "react-native";
 
 import InatText from "./InatText";
 

src/components/SharedComponents/Typography/Heading1.tsx

@@ -1,6 +1,6 @@
 import { tailwindFontBold } from "appConstants/fontFamilies";
 import React from "react";
-import { TextProps } from "react-native";
+import type { TextProps } from "react-native";
 
 import InatText from "./InatText";
 

src/components/SharedComponents/Typography/Heading2.tsx

@@ -1,6 +1,6 @@
 import { tailwindFontBold } from "appConstants/fontFamilies";
 import React from "react";
-import { TextProps } from "react-native";
+import type { TextProps } from "react-native";
 
 import InatText from "./InatText";
 

src/components/SharedComponents/Typography/Heading3.tsx

@@ -1,6 +1,6 @@
 import { tailwindFontBold } from "appConstants/fontFamilies";
 import React from "react";
-import { TextProps } from "react-native";
+import type { TextProps } from "react-native";
 
 import InatText from "./InatText";
 

src/components/SharedComponents/Typography/Heading4.tsx

@@ -1,6 +1,6 @@
 import { tailwindFontBold } from "appConstants/fontFamilies";
 import React from "react";
-import { TextProps } from "react-native";
+import type { TextProps } from "react-native";
 
 import InatText from "./InatText";
 

src/components/SharedComponents/Typography/Heading5.tsx

@@ -1,6 +1,6 @@
 import { tailwindFontBold } from "appConstants/fontFamilies";
 import React from "react";
-import { TextProps } from "react-native";
+import type { TextProps } from "react-native";
 
 import InatText from "./InatText";
 

src/components/SharedComponents/Typography/Heading6.tsx

@@ -1,6 +1,6 @@
 import { tailwindFontBold } from "appConstants/fontFamilies";
 import React from "react";
-import { TextProps } from "react-native";
+import type { TextProps } from "react-native";
 
 import InatText from "./InatText";
 

src/components/SharedComponents/Typography/InatText.tsx

@@ -3,7 +3,8 @@ import {
   tailwindFontRegular
 } from "appConstants/fontFamilies";
 import classnames from "classnames";
-import React, { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithoutRef } from "react";
+import React from "react";
 import { Text } from "react-native";
 
 export const TYPOGRAPHY_CLASSES = [

src/components/SharedComponents/Typography/List2.tsx

@@ -1,7 +1,8 @@
 import { tailwindFontRegular } from "appConstants/fontFamilies";
 import classnames from "classnames";
 import React from "react";
-import { Text, TextProps } from "react-native";
+import type { TextProps } from "react-native";
+import { Text } from "react-native";
 
 import { TYPOGRAPHY_CLASSES } from "./InatText";
 

src/components/SharedComponents/Typography/P.tsx

@@ -1,6 +1,6 @@
 import { View } from "components/styledComponents";
 import React from "react";
-import { ViewProps } from "react-native";
+import type { ViewProps } from "react-native";
 
 const P = ( props: ViewProps ) => (
   // eslint-disable-next-line react/jsx-props-no-spreading

src/components/SharedComponents/Typography/Subheading1.tsx

@@ -1,6 +1,6 @@
 import { tailwindFontRegular } from "appConstants/fontFamilies";
 import React from "react";
-import { TextProps } from "react-native";
+import type { TextProps } from "react-native";
 
 import InatText from "./InatText";
 

src/components/SharedComponents/Typography/Subheading2.tsx

@@ -1,6 +1,6 @@
 import { tailwindFontBold } from "appConstants/fontFamilies";
 import React from "react";
-import { TextProps } from "react-native";
+import type { TextProps } from "react-native";
 
 import InatText from "./InatText";
 

src/components/SharedComponents/Typography/UnderlinedLink.tsx

@@ -1,6 +1,6 @@
 import { tailwindFontBold } from "appConstants/fontFamilies";
 import React from "react";
-import { TextProps } from "react-native";
+import type { TextProps } from "react-native";
 
 import InatText from "./InatText";
 

src/components/SharedComponents/UploadStatus/FadeOutIcon.tsx

@@ -1,11 +1,11 @@
 import { View } from "components/styledComponents";
-import React, { ReactNode } from "react";
+import type { PropsWithChildren } from "react";
+import React from "react";
 import Reanimated, {
   Keyframe
 } from "react-native-reanimated";
 
-type Props = {
-  children: ReactNode;
+interface Props extends PropsWithChildren {
   uniqueKey: string;
 }
 const AnimatedView = Reanimated.createAnimatedComponent( View );

src/components/SharedComponents/UploadStatus/UploadStatus.tsx

@@ -1,7 +1,8 @@
 import classnames from "classnames";
 import { CircleDots, INatIcon, INatIconButton } from "components/SharedComponents";
 import { View } from "components/styledComponents";
-import React, { PropsWithChildren, ReactComponent } from "react";
+import type { PropsWithChildren, ReactComponent } from "react";
+import React from "react";
 import { useLayoutPrefs, useTranslation } from "sharedHooks";
 import colors from "styles/tailwindColors";
 

src/components/SharedComponents/UserText.tsx

@@ -3,16 +3,20 @@ import "linkify-plugin-mention";
 import { useNavigation } from "@react-navigation/native";
 import { fontRegular } from "appConstants/fontFamilies";
 import linkifyHtml from "linkify-html";
-import { Opts } from "linkifyjs";
+import type { Opts } from "linkifyjs";
 import { isEqual, trim } from "lodash";
 import MarkdownIt from "markdown-it";
 import * as React from "react";
 import { Linking, useWindowDimensions } from "react-native";
+import type {
+  MixedStyleDeclaration, RenderersProps, TRenderEngineConfig
+} from "react-native-render-html";
 import HTML, {
-  defaultSystemFonts, MixedStyleDeclaration, RenderersProps, TRenderEngineConfig
+  defaultSystemFonts
 } from "react-native-render-html";
 import WebView from "react-native-webview";
-import sanitizeHtml, { IOptions } from "sanitize-html";
+import type { IOptions } from "sanitize-html";
+import sanitizeHtml from "sanitize-html";
 import colors from "styles/tailwindColors";
 
 const ALLOWED_TAGS = ( `

src/components/Suggestions/SuggestionsFooter.tsx

@@ -35,11 +35,14 @@ type Props = {
       }
     }
   },
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   handleSkip: Function,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   hideLocationToggleButton: Function,
   hideSkip?: boolean,
   observers: Array<string>,
   shouldUseEvidenceLocation: boolean,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   toggleLocation: Function
 };
 

src/components/TaxonDetails/TaxonomyTaxon.tsx

@@ -14,6 +14,7 @@ interface Props {
   isCurrentTaxon?: boolean;
   navigateToTaxonDetails: ( _taxonId: number ) => void;
   scientificNameFirst?: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   t: Function;
   taxon: {
     id: number;

src/components/UserList/UserList.tsx

@@ -6,7 +6,7 @@ import { View } from "components/styledComponents";
 import UserListItem from "components/UserList/UserListItem";
 import _ from "lodash";
 import React from "react";
-import { ViewStyle } from "react-native";
+import type { ViewStyle } from "react-native";
 import { useTranslation } from "sharedHooks";
 
 const CONTAINER_STYLE = {

src/components/UserList/UserListItem.tsx

@@ -3,7 +3,6 @@ import {
   List2, UserIcon
 } from "components/SharedComponents";
 import { Pressable, View } from "components/styledComponents";
-import type { Node } from "react";
 import React from "react";
 import User from "realmModels/User";
 import { useTranslation } from "sharedHooks";
@@ -11,6 +10,7 @@ import { useTranslation } from "sharedHooks";
 interface Props {
   item: object
   countText: string
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
   onPress?: Function
   accessibilityLabel?: string
   pressable?: boolean
@@ -22,7 +22,7 @@ const UserListItem = ( {
   onPress,
   accessibilityLabel: accessibilityLabelProp,
   pressable = true
-}: Props ): Node => {
+}: Props ) => {
   const { t } = useTranslation( );
   const user = item?.user;
 

src/navigation/BottomTabNavigator/index.tsx

@@ -1,4 +1,5 @@
-import { BottomTabBarProps, createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import type { BottomTabBarProps } from "@react-navigation/bottom-tabs";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import Mortal from "components/SharedComponents/Mortal";
 import TabStackNavigator, {
   SCREEN_NAME_NOTIFICATIONS,