Bump @types/react to ^18 and adjust types (#889)

src/view/com/composer/Composer.tsx

@@ -133,8 +133,8 @@ export const ComposePost = observer(function ComposePost({
   )
 
   const onPressPublish = useCallback(
-    async rt => {
-      if (isProcessing || rt.graphemeLength_ > MAX_GRAPHEME_LENGTH) {
+    async (rt: RichText) => {
+      if (isProcessing || rt.graphemeLength > MAX_GRAPHEME_LENGTH) {
         return
       }
 

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

@@ -1,6 +1,6 @@
 import React, {useCallback, useMemo} from 'react'
 import {observer} from 'mobx-react-lite'
-import {Linking, StyleSheet, View} from 'react-native'
+import {AccessibilityActionEvent, Linking, StyleSheet, View} from 'react-native'
 import Clipboard from '@react-native-clipboard/clipboard'
 import {AtUri} from '@atproto/api'
 import {
@@ -152,7 +152,7 @@ export const PostThreadItem = observer(function PostThreadItem({
   )
 
   const onAccessibilityAction = useCallback(
-    event => {
+    (event: AccessibilityActionEvent) => {
       switch (event.nativeEvent.actionName) {
         case 'like':
           onPressToggleLike()

src/view/com/post/Post.tsx

@@ -1,5 +1,6 @@
 import React, {useCallback, useEffect, useMemo, useState} from 'react'
 import {
+  AccessibilityActionEvent,
   ActivityIndicator,
   Linking,
   StyleProp,
@@ -223,7 +224,7 @@ const PostLoaded = observer(
     )
 
     const onAccessibilityAction = useCallback(
-      event => {
+      (event: AccessibilityActionEvent) => {
         switch (event.nativeEvent.actionName) {
           case 'like':
             onPressToggleLike()

src/view/com/posts/FeedItem.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback, useMemo, useState} from 'react'
 import {observer} from 'mobx-react-lite'
-import {Linking, StyleSheet, View} from 'react-native'
+import {AccessibilityActionEvent, Linking, StyleSheet, View} from 'react-native'
 import Clipboard from '@react-native-clipboard/clipboard'
 import {AtUri} from '@atproto/api'
 import {
@@ -173,7 +173,7 @@ export const FeedItem = observer(function ({
   )
 
   const onAccessibilityAction = useCallback(
-    event => {
+    (event: AccessibilityActionEvent) => {
       switch (event.nativeEvent.actionName) {
         case 'like':
           onPressToggleLike()

src/view/com/profile/ProfileCard.tsx

@@ -100,7 +100,7 @@ export const ProfileCard = observer(
         {profile.description ? (
           <View style={styles.details}>
             <Text style={pal.text} numberOfLines={4}>
-              {profile.description}
+              {profile.description as string}
             </Text>
           </View>
         ) : undefined}

src/view/com/util/ViewSelector.tsx

@@ -59,7 +59,7 @@ export const ViewSelector = React.forwardRef<
     // events
     // =
 
-    const keyExtractor = React.useCallback(item => item._reactKey, [])
+    const keyExtractor = React.useCallback((item: any) => item._reactKey, [])
 
     const onPressSelection = React.useCallback(
       (index: number) => setSelectedIndex(clamp(index, 0, sections.length)),

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

@@ -6,6 +6,7 @@ import {
   TextStyle,
   Pressable,
   ViewStyle,
+  PressableStateCallbackType,
 } from 'react-native'
 import {Text} from '../text/Text'
 import {useTheme} from 'lib/ThemeContext'
@@ -26,6 +27,14 @@ export type ButtonType =
   | 'secondary-light'
   | 'default-light'
 
+// Augment type for react-native-web (see https://github.com/necolas/react-native-web/issues/1684#issuecomment-766451866)
+declare module 'react-native' {
+  interface PressableStateCallbackType {
+    hovered?: boolean
+    focused?: boolean
+  }
+}
+
 // TODO: Enforce that button always has a label
 export function Button({
   type = 'primary',
@@ -139,7 +148,7 @@ export function Button({
   )
 
   const getStyle = React.useCallback(
-    state => {
+    (state: PressableStateCallbackType) => {
       const arr = [typeOuterStyle, styles.outer, style]
       if (state.pressed) {
         arr.push({opacity: 0.6})

src/view/screens/DiscoverFeeds.tsx

@@ -13,6 +13,7 @@ import {Text} from 'view/com/util/text/Text'
 import {isDesktopWeb} from 'platform/detection'
 import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
+import {CustomFeedModel} from 'state/models/feeds/custom-feed'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'DiscoverFeeds'>
 export const DiscoverFeedsScreen = withAuthRequired(
@@ -51,7 +52,7 @@ export const DiscoverFeedsScreen = withAuthRequired(
     }, [pal, feeds.isLoading])
 
     const renderItem = React.useCallback(
-      ({item}) => (
+      ({item}: {item: CustomFeedModel}) => (
         <CustomFeed
           key={item.data.uri}
           item={item}

src/view/screens/SavedFeeds.tsx

@@ -100,7 +100,7 @@ export const SavedFeeds = withAuthRequired(
     const onRefresh = useCallback(() => savedFeeds.refresh(), [savedFeeds])
 
     const onDragEnd = useCallback(
-      async ({data}) => {
+      async ({data}: {data: CustomFeedModel[]}) => {
         try {
           await savedFeeds.reorderPinnedFeeds(data)
         } catch (e) {