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

__mocks__/@gorhom/bottom-sheet.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {ReactNode} from 'react'
 import {View, ScrollView, Modal, FlatList, TextInput} from 'react-native'
 
 const BottomSheetModalContext = React.createContext(null)
@@ -6,7 +6,10 @@ const BottomSheetModalContext = React.createContext(null)
 const BottomSheetModalProvider = (props: any) => {
   return <BottomSheetModalContext.Provider {...props} value={{}} />
 }
-class BottomSheet extends React.Component<{onClose?: () => void}> {
+class BottomSheet extends React.Component<{
+  onClose?: () => void
+  children?: ReactNode
+}> {
   snapToIndex() {}
   snapToPosition() {}
   expand() {}

package.json

@@ -190,7 +190,7 @@
     "webpack-dev-server": "^4.11.1"
   },
   "resolutions": {
-    "@types/react": "^17"
+    "@types/react": "^18"
   },
   "jest": {
     "preset": "jest-expo/ios",

src/Navigation.tsx

@@ -10,7 +10,10 @@ import {
   DarkTheme,
 } from '@react-navigation/native'
 import {createNativeStackNavigator} from '@react-navigation/native-stack'
-import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
+import {
+  BottomTabBarProps,
+  createBottomTabNavigator,
+} from '@react-navigation/bottom-tabs'
 import {
   HomeTabNavigatorParams,
   SearchTabNavigatorParams,
@@ -62,6 +65,7 @@ import {ModerationBlockedAccounts} from 'view/screens/ModerationBlockedAccounts'
 import {SavedFeeds} from 'view/screens/SavedFeeds'
 import {getRoutingInstrumentation} from 'lib/sentry'
 import {bskyTitle} from 'lib/strings/headings'
+import {JSX} from 'react/jsx-runtime'
 
 const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
 
@@ -220,7 +224,12 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
  * in 3 distinct tab-stacks with a different root screen on each.
  */
 function TabsNavigator() {
-  const tabBar = React.useCallback(props => <BottomBar {...props} />, [])
+  const tabBar = React.useCallback(
+    (props: JSX.IntrinsicAttributes & BottomTabBarProps) => (
+      <BottomBar {...props} />
+    ),
+    [],
+  )
   return (
     <Tab.Navigator
       initialRouteName="HomeTab"

src/lib/ThemeContext.tsx

@@ -1,4 +1,4 @@
-import React, {createContext, useContext, useMemo} from 'react'
+import React, {ReactNode, createContext, useContext, useMemo} from 'react'
 import {TextStyle, useColorScheme, ViewStyle} from 'react-native'
 import {darkTheme, defaultTheme} from './themes'
 
@@ -78,6 +78,7 @@ export interface Theme {
 }
 
 export interface ThemeProviderProps {
+  children?: ReactNode
   theme?: 'light' | 'dark' | 'system'
 }
 

src/state/models/feeds/posts.ts

@@ -130,13 +130,25 @@ export class PostsFeedModel {
       ]
     }
     if (this.feedType === 'home') {
-      return [
+      const feedTuners = []
-        areRepostsEnabled && FeedTuner.dedupReposts,
+
-        !areRepostsEnabled && FeedTuner.removeReposts,
+      if (areRepostsEnabled) {
-        areRepliesEnabled && FeedTuner.likedRepliesOnly({repliesThreshold}),
+        feedTuners.push(FeedTuner.dedupReposts)
-        !areRepliesEnabled && FeedTuner.removeReplies,
+      } else {
-        !areQuotePostsEnabled && FeedTuner.removeQuotePosts,
+        feedTuners.push(FeedTuner.removeReposts)
-      ].filter(Boolean)
+      }
+
+      if (areRepliesEnabled) {
+        feedTuners.push(FeedTuner.likedRepliesOnly({repliesThreshold}))
+      } else {
+        feedTuners.push(FeedTuner.removeReplies)
+      }
+
+      if (!areQuotePostsEnabled) {
+        feedTuners.push(FeedTuner.removeQuotePosts)
+      }
+
+      return feedTuners
     }
     return []
   }

src/view/com/composer/Composer.tsx

@@ -133,8 +133,8 @@ export const ComposePost = observer(function ComposePost({
   )
 
   const onPressPublish = useCallback(
-    async rt => {
+    async (rt: RichText) => {
-      if (isProcessing || rt.graphemeLength_ > MAX_GRAPHEME_LENGTH) {
+      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) {

yarn.lock

@@ -4997,10 +4997,10 @@
   dependencies:
     "@types/react" "^17"
 
-"@types/react@*", "@types/react@^17":
+"@types/react@*", "@types/react@^17", "@types/react@^18":
-  version "17.0.60"
+  version "18.2.12"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.60.tgz#a4a97dcdbebad76612c188fc06440e4995fd8ad2"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.12.tgz#95d584338610b78bb9ba0415e3180fb03debdf97"
-  integrity sha512-pCH7bqWIfzHs3D+PDs3O/COCQJka+Kcw3RnO9rFA2zalqoXg7cNjJDh6mZ7oRtY1wmY4LVwDdAbA1F7Z8tv3BQ==
+  integrity sha512-ndmBMLCgn38v3SntMeoJaIrO6tGHYKMEBohCUmw8HoLLQdRMOIGXfeYaBTLe2lsFaSB3MOK1VXscYFnmLtTSmw==
   dependencies:
     "@types/prop-types" "*"
     "@types/scheduler" "*"