Create codemod for addressing ESLint warnings (#10032)

src/screens/Onboarding/StepInterests/InterestButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo} from 'react'
 import {type TextStyle, View, type ViewStyle} from 'react-native'
 
 import {type Interest, useInterestsDisplayNames} from '#/lib/interests'
@@ -12,7 +12,7 @@ export function InterestButton({interest}: {interest: Interest}) {
   const interestsDisplayNames = useInterestsDisplayNames()
   const ctx = Toggle.useItemContext()
 
-  const styles = React.useMemo(() => {
+  const styles = useMemo(() => {
     const hovered: ViewStyle[] = [
       {
         backgroundColor:

src/screens/Onboarding/StepInterests/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback, useState} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -27,12 +27,12 @@ export function StepInterests() {
   const interestsDisplayNames = useInterestsDisplayNames()
 
   const {state, dispatch} = useOnboardingInternalState()
-  const [saving, setSaving] = React.useState(false)
-  const [selectedInterests, setSelectedInterests] = React.useState<string[]>(
+  const [saving, setSaving] = useState(false)
+  const [selectedInterests, setSelectedInterests] = useState<string[]>(
     state.interestsStepResults.selectedInterests.map(i => i),
   )
 
-  const saveInterests = React.useCallback(async () => {
+  const saveInterests = useCallback(async () => {
     setSaving(true)
 
     try {

src/screens/Onboarding/StepProfile/AvatarCircle.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo} from 'react'
 import {View} from 'react-native'
 import {Image as ExpoImage} from 'expo-image'
 import {msg} from '@lingui/core/macro'
@@ -22,7 +22,7 @@ export function AvatarCircle({
   const t = useTheme()
   const {avatar} = useAvatar()
 
-  const styles = React.useMemo(
+  const styles = useMemo(
     () => ({
       imageContainer: [
         a.rounded_full,

src/screens/Onboarding/StepProfile/AvatarCreatorCircle.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useMemo} from 'react'
 import {View} from 'react-native'
 
 import {type Avatar} from '#/screens/Onboarding/StepProfile/index'
@@ -14,7 +14,7 @@ export function AvatarCreatorCircle({
   const t = useTheme()
   const Icon = avatar.placeholder.component
 
-  const styles = React.useMemo(
+  const styles = useMemo(
     () => ({
       imageContainer: [
         a.rounded_full,

src/screens/Onboarding/StepProfile/AvatarCreatorItems.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
@@ -39,7 +39,7 @@ export function AvatarCreatorItems({
   const t = useTheme()
   const isEmojis = type === 'emojis'
 
-  const onSelectEmoji = React.useCallback(
+  const onSelectEmoji = useCallback(
     (emoji: EmojiName) => {
       setAvatar(prev => ({
         ...prev,
@@ -49,7 +49,7 @@ export function AvatarCreatorItems({
     [setAvatar],
   )
 
-  const onSelectColor = React.useCallback(
+  const onSelectColor = useCallback(
     (color: AvatarColor) => {
       setAvatar(prev => ({
         ...prev,

src/screens/Onboarding/StepProfile/PlaceholderCanvas.tsx

@@ -1,11 +1,18 @@
-import React from 'react'
+import {
+  forwardRef,
+  lazy,
+  Suspense,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react'
 import {View} from 'react-native'
 import type ViewShot from 'react-native-view-shot'
 
 import {useAvatar} from '#/screens/Onboarding/StepProfile/index'
 import {atoms as a} from '#/alf'
 
-const LazyViewShot = React.lazy(
+const LazyViewShot = lazy(
   // @ts-expect-error dynamic import
   () => import('react-native-view-shot/src/index'),
 )
@@ -18,13 +25,13 @@ export interface PlaceholderCanvasRef {
 
 // This component is supposed to be invisible to the user. We only need this for ViewShot to have something to
 // "screenshot".
-export const PlaceholderCanvas = React.forwardRef<PlaceholderCanvasRef, {}>(
+export const PlaceholderCanvas = forwardRef<PlaceholderCanvasRef, {}>(
   function PlaceholderCanvas({}, ref) {
     const {avatar} = useAvatar()
-    const viewshotRef = React.useRef<ViewShot>(null)
+    const viewshotRef = useRef<ViewShot>(null)
     const Icon = avatar.placeholder.component
 
-    const styles = React.useMemo(
+    const styles = useMemo(
       () => ({
         container: [a.absolute, {top: -2000}],
         imageContainer: [
@@ -36,7 +43,7 @@ export const PlaceholderCanvas = React.forwardRef<PlaceholderCanvasRef, {}>(
       [],
     )
 
-    React.useImperativeHandle(ref, () => ({
+    useImperativeHandle(ref, () => ({
       capture: async () => {
         if (viewshotRef.current?.capture) {
           return await viewshotRef.current.capture()
@@ -46,7 +53,7 @@ export const PlaceholderCanvas = React.forwardRef<PlaceholderCanvasRef, {}>(
 
     return (
       <View style={styles.container}>
-        <React.Suspense fallback={null}>
+        <Suspense fallback={null}>
           <LazyViewShot
             // @ts-ignore this library doesn't have types
             ref={viewshotRef}
@@ -70,7 +77,7 @@ export const PlaceholderCanvas = React.forwardRef<PlaceholderCanvasRef, {}>(
               />
             </View>
           </LazyViewShot>
-        </React.Suspense>
+        </Suspense>
       </View>
     )
   },

src/screens/Onboarding/StepProfile/index.tsx

@@ -1,4 +1,12 @@
-import React from 'react'
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {View} from 'react-native'
 import {Image as ExpoImage} from 'expo-image'
 import {ImageManipulator, SaveFormat} from 'expo-image-manipulator'
@@ -60,9 +68,9 @@ interface IAvatarContext {
   setAvatar: React.Dispatch<React.SetStateAction<Avatar>>
 }
 
-const AvatarContext = React.createContext<IAvatarContext>({} as IAvatarContext)
+const AvatarContext = createContext<IAvatarContext>({} as IAvatarContext)
 AvatarContext.displayName = 'AvatarContext'
-export const useAvatar = () => React.useContext(AvatarContext)
+export const useAvatar = () => useContext(AvatarContext)
 
 const randomColor =
   avatarColors[Math.floor(Math.random() * avatarColors.length)]
@@ -76,10 +84,10 @@ export function StepProfile() {
   const requestNotificationsPermission = useRequestNotificationsPermission()
 
   const creatorControl = Dialog.useDialogControl()
-  const [error, setError] = React.useState('')
+  const [error, setError] = useState('')
 
   const {state, dispatch} = useOnboardingInternalState()
-  const [avatar, setAvatar] = React.useState<Avatar>({
+  const [avatar, setAvatar] = useState<Avatar>({
     image: state.profileStepResults?.image,
     placeholder: state.profileStepResults.creatorState?.emoji || emojiItems.at,
     backgroundColor:
@@ -87,14 +95,14 @@ export function StepProfile() {
     useCreatedAvatar: state.profileStepResults.isCreatedAvatar,
   })
 
-  const canvasRef = React.useRef<PlaceholderCanvasRef>(null)
+  const canvasRef = useRef<PlaceholderCanvasRef>(null)
 
-  React.useEffect(() => {
+  useEffect(() => {
     requestNotificationsPermission('StartOnboarding')
   }, [requestNotificationsPermission])
 
   const sheetWrapper = useSheetWrapper()
-  const openPicker = React.useCallback(
+  const openPicker = useCallback(
     async (opts?: ImagePickerOptions) => {
       const response = await sheetWrapper(
         launchImageLibraryAsync({
@@ -139,7 +147,7 @@ export function StepProfile() {
     [_, setError, sheetWrapper],
   )
 
-  const onContinue = React.useCallback(async () => {
+  const onContinue = useCallback(async () => {
     let imageUri = avatar?.image?.path
 
     // In the event that view-shot didn't load in time and the user pressed continue, this will just be undefined
@@ -167,7 +175,7 @@ export function StepProfile() {
     ax.metric('onboarding:profile:nextPressed', {})
   }, [ax, avatar, dispatch])
 
-  const onDoneCreating = React.useCallback(() => {
+  const onDoneCreating = useCallback(() => {
     setAvatar(prev => ({
       ...prev,
       image: undefined,
@@ -176,7 +184,7 @@ export function StepProfile() {
     creatorControl.close()
   }, [creatorControl])
 
-  const openLibrary = React.useCallback(async () => {
+  const openLibrary = useCallback(async () => {
     if (!(await requestPhotoAccessIfNeeded())) {
       return
     }
@@ -225,7 +233,7 @@ export function StepProfile() {
     sheetWrapper,
   ])
 
-  const onSecondaryPress = React.useCallback(() => {
+  const onSecondaryPress = useCallback(() => {
     if (avatar.useCreatedAvatar) {
       openLibrary()
     } else {
@@ -233,7 +241,7 @@ export function StepProfile() {
     }
   }, [avatar.useCreatedAvatar, creatorControl, openLibrary])
 
-  const value = React.useMemo(
+  const value = useMemo(
     () => ({
       avatar,
       setAvatar,