Leverage jsx transform to remove unnecessary react imports and update eslint config (#6516)

* update eslint config with jsx runtime

* leverage jsx transform to remove unnecessary react imports and update eslint config

* run yarn lint --fix to remove eslint disables related to react/prop-types that is now disabled

src/view/com/auth/SplashScreen.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg, Trans} from '@lingui/macro'

src/view/com/auth/util/HelpTip.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleSheet, View} from 'react-native'
 
 import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'

src/view/com/auth/util/TextInput.tsx

@@ -1,4 +1,4 @@
-import React, {ComponentProps} from 'react'
+import {ComponentProps} from 'react'
 import {StyleSheet, TextInput as RNTextInput, View} from 'react-native'
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'

src/view/com/composer/ExternalEmbedRemoveBtn.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

src/view/com/composer/GifAltText.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import {useState} from 'react'
 import {TouchableOpacity, View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

src/view/com/composer/char-progress/CharProgress.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'
 // @ts-ignore no type definition -prf
 import ProgressCircle from 'react-native-progress/Circle'

src/view/com/composer/labels/LabelsBtn.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {Keyboard, View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

src/view/com/composer/photos/OpenCameraBtn.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {useCallback} from 'react'
 import * as MediaLibrary from 'expo-media-library'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

src/view/com/composer/photos/SelectGifBtn.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useRef} from 'react'
+import {useCallback, useRef} from 'react'
 import {Keyboard} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

src/view/com/composer/photos/SelectPhotoBtn.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-native-a11y/has-valid-accessibility-ignores-invert-colors */
-import React, {useCallback} from 'react'
+import {useCallback} from 'react'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 

src/view/com/composer/select-language/SelectLangBtn.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo} from 'react'
+import {useCallback, useMemo} from 'react'
 import {Keyboard, StyleSheet} from 'react-native'
 import {
   FontAwesomeIcon,

src/view/com/composer/select-language/SuggestedLanguage.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react'
+import {useEffect, useState} from 'react'
 import {StyleSheet, View} from 'react-native'
 import {
   FontAwesomeIcon,

src/view/com/composer/text-input/mobile/Autocomplete.tsx

@@ -1,4 +1,4 @@
-import React, {useRef} from 'react'
+import {useRef} from 'react'
 import {View} from 'react-native'
 import Animated, {FadeInDown, FadeOut} from 'react-native-reanimated'
 import {AppBskyActorDefs} from '@atproto/api'

src/view/com/composer/text-input/web/Autocomplete.tsx

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useState,
-} from 'react'
+import {forwardRef, useEffect, useImperativeHandle, useState} from 'react'
 import {Pressable, StyleSheet, View} from 'react-native'
 import {Trans} from '@lingui/macro'
 import {ReactRenderer} from '@tiptap/react'

src/view/com/composer/threadgate/ThreadgateBtn.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {Keyboard, StyleProp, ViewStyle} from 'react-native'
 import {AnimatedStyle} from 'react-native-reanimated'
 import {AppBskyFeedPostgate} from '@atproto/api'

src/view/com/composer/videos/SelectVideoBtn.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {useCallback} from 'react'
 import {Keyboard} from 'react-native'
 import {
   ImagePickerAsset,

src/view/com/composer/videos/SubtitleDialog.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {Keyboard, StyleProp, View, ViewStyle} from 'react-native'
 import RNPickerSelect from 'react-native-picker-select'
 import {msg, Trans} from '@lingui/macro'

src/view/com/composer/videos/VideoPreview.web.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useRef} from 'react'
+import {useEffect, useRef} from 'react'
 import {View} from 'react-native'
 import {ImagePickerAsset} from 'expo-image-picker'
 import {msg} from '@lingui/macro'

src/view/com/composer/videos/VideoTranscodeBackdrop.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {clearCache, createVideoThumbnail} from 'react-native-compressor'
 import Animated, {FadeIn} from 'react-native-reanimated'
 import {Image} from 'expo-image'

src/view/com/composer/videos/VideoTranscodeProgress.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 // @ts-expect-error no type definition
 import ProgressPie from 'react-native-progress/Pie'

src/view/com/lightbox/ImageViewing/components/ImageDefaultHeader.tsx

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import React from 'react'
 import {
   SafeAreaView,
   StyleSheet,

src/view/com/modals/ChangeEmail.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import {useState} from 'react'
 import {ActivityIndicator, SafeAreaView, StyleSheet, View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

src/view/com/modals/ChangePassword.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import {useState} from 'react'
 import {
   ActivityIndicator,
   SafeAreaView,

src/view/com/modals/CreateOrEditList.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo, useState} from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {
   ActivityIndicator,
   KeyboardAvoidingView,

src/view/com/modals/EditProfile.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {
   ActivityIndicator,
   KeyboardAvoidingView,

src/view/com/modals/Modal.tsx

@@ -1,4 +1,4 @@
-import React, {Fragment, useEffect, useRef} from 'react'
+import {Fragment, useEffect, useRef} from 'react'
 import {StyleSheet} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 import BottomSheet from '@discord/bottom-sheet/src'

src/view/com/modals/Modal.web.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
 import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
 

src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {Pressable, StyleSheet, Text, View} from 'react-native'
 import {LinearGradient} from 'expo-linear-gradient'
 import {msg, Trans} from '@lingui/macro'

src/view/com/modals/lang-settings/LanguageToggle.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleSheet} from 'react-native'
 
 import {usePalette} from '#/lib/hooks/usePalette'

src/view/com/post-thread/PostLikedBy.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo, useState} from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

src/view/com/post-thread/PostQuotes.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {
   AppBskyFeedDefs,
   AppBskyFeedPost,

src/view/com/post-thread/PostRepostedBy.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo, useState} from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

src/view/com/post-thread/PostThreadComposePrompt.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

src/view/com/post-thread/PostThreadShowHiddenReplies.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

src/view/com/posts/DiscoverFallbackHeader.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 import {Trans} from '@lingui/macro'
 

src/view/com/profile/FollowButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleProp, TextStyle, View} from 'react-native'
 import {AppBskyActorDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'

src/view/com/testing/TestCtrls.e2e.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {LogBox, Pressable, View} from 'react-native'
 import {useQueryClient} from '@tanstack/react-query'
 

src/view/com/util/EmptyState.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
 import {

src/view/com/util/EmptyStateWithButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleSheet, View} from 'react-native'
 import {IconProp} from '@fortawesome/fontawesome-svg-core'
 import {

src/view/com/util/ErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import React, {Component, ErrorInfo, ReactNode} from 'react'
+import {Component, ErrorInfo, ReactNode} from 'react'
 import {StyleProp, ViewStyle} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

src/view/com/util/FeedInfoText.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleProp, StyleSheet, TextStyle} from 'react-native'
 
 import {sanitizeDisplayName} from '#/lib/strings/display-names'

src/view/com/util/LoadMoreRetryBtn.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleSheet} from 'react-native'
 import {
   FontAwesomeIcon,

src/view/com/util/LoadingPlaceholder.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   DimensionValue,
   StyleProp,

src/view/com/util/LoadingScreen.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {ActivityIndicator, View} from 'react-native'
 
 import {s} from '#/lib/styles'

src/view/com/util/PressableWithHover.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef, PropsWithChildren} from 'react'
+import {forwardRef, PropsWithChildren} from 'react'
 import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native'
 import {View} from 'react-native'
 

src/view/com/util/Selector.tsx

@@ -1,4 +1,4 @@
-import React, {createRef, useMemo, useRef, useState} from 'react'
+import {createRef, useMemo, useRef, useState} from 'react'
 import {Animated, Pressable, StyleSheet, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

src/view/com/util/Toast.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react'
+import {useEffect, useState} from 'react'
 import {View} from 'react-native'
 import Animated, {FadeInUp, FadeOutUp} from 'react-native-reanimated'
 import RootSiblings from 'react-native-root-siblings'

src/view/com/util/UserInfoText.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleProp, StyleSheet, TextStyle} from 'react-native'
 import {AppBskyActorGetProfile as GetProfile} from '@atproto/api'
 

src/view/com/util/error/ErrorMessage.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {
   StyleProp,
   StyleSheet,

src/view/com/util/error/ErrorScreen.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleSheet, View} from 'react-native'
 import {
   FontAwesomeIcon,

src/view/com/util/fab/FAB.web.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'

src/view/com/util/fab/FABInner.tsx

@@ -1,4 +1,4 @@
-import React, {ComponentProps} from 'react'
+import {ComponentProps} from 'react'
 import {StyleSheet, TouchableWithoutFeedback} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'

src/view/com/util/forms/DateInput.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
 import DatePicker from 'react-native-date-picker'
 import {

src/view/com/util/forms/DateInput.web.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
 // @ts-ignore types not available -prf
 import {unstable_createElement} from 'react-native-web'

src/view/com/util/forms/RadioButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
 
 import {choose} from '#/lib/functions'

src/view/com/util/forms/RadioGroup.tsx

@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import {useState} from 'react'
 import {View} from 'react-native'
 
 import {s} from '#/lib/styles'

src/view/com/util/forms/SelectableBtn.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {Pressable, StyleProp, StyleSheet, ViewStyle} from 'react-native'
 
 import {usePalette} from '#/lib/hooks/usePalette'

src/view/com/util/forms/ToggleButton.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleProp, StyleSheet, TextStyle, View, ViewStyle} from 'react-native'
 
 import {choose} from '#/lib/functions'

src/view/com/util/images/Image.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {Image, ImageProps, ImageSource} from 'expo-image'
 
 interface HighPriorityImageProps extends ImageProps {

src/view/com/util/load-latest/LoadLatestBtn.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'

src/view/com/util/post-embeds/VideoEmbedInner/TimeIndicator.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleProp, ViewStyle} from 'react-native'
 import {View} from 'react-native'
 

src/view/icons/Logomark.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import Svg, {Path, PathProps, SvgProps} from 'react-native-svg'
 
 import {usePalette} from '#/lib/hooks/usePalette'

src/view/icons/Logotype.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import Svg, {Path, PathProps, SvgProps} from 'react-native-svg'
 
 import {usePalette} from '#/lib/hooks/usePalette'

src/view/screens/Storybook/Admonitions.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 
 import {atoms as a} from '#/alf'

src/view/screens/Storybook/Breakpoints.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'

src/view/screens/Storybook/Icons.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 
 import {atoms as a, useTheme} from '#/alf'

src/view/screens/Storybook/Links.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 
 import {atoms as a, useTheme} from '#/alf'

src/view/screens/Storybook/Menus.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 
 import {atoms as a, useTheme} from '#/alf'

src/view/screens/Storybook/Palette.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 
 import {atoms as a, useTheme} from '#/alf'

src/view/screens/Storybook/Settings.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 
 import * as Toast from '#/view/com/util/Toast'

src/view/screens/Storybook/Shadows.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 
 import {atoms as a, useTheme} from '#/alf'

src/view/screens/Storybook/Spacing.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 
 import {atoms as a, useTheme} from '#/alf'

src/view/screens/Storybook/Theming.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 
 import {atoms as a, useTheme} from '#/alf'

src/view/screens/Storybook/Typography.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 
 import {atoms as a} from '#/alf'

src/view/shell/Composer.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react'
+import {useEffect} from 'react'
 import {Animated, Easing, StyleSheet, View} from 'react-native'
 
 import {useAnimatedValue} from '#/lib/hooks/useAnimatedValue'

src/view/shell/desktop/Feeds.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleSheet, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

src/view/shell/desktop/RightNav.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleSheet, View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'