diff --git a/__mocks__/@gorhom/bottom-sheet.tsx b/__mocks__/@gorhom/bottom-sheet.tsx index 31098601..dae0d655 100644 --- a/__mocks__/@gorhom/bottom-sheet.tsx +++ b/__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 } -class BottomSheet extends React.Component<{onClose?: () => void}> { +class BottomSheet extends React.Component<{ + onClose?: () => void + children?: ReactNode +}> { snapToIndex() {} snapToPosition() {} expand() {} diff --git a/package.json b/package.json index 0b46a67c..e66d2bcf 100644 --- a/package.json +++ b/package.json @@ -190,7 +190,7 @@ "webpack-dev-server": "^4.11.1" }, "resolutions": { - "@types/react": "^17" + "@types/react": "^18" }, "jest": { "preset": "jest-expo/ios", diff --git a/src/Navigation.tsx b/src/Navigation.tsx index 77e7cfa0..640b771d 100644 --- a/src/Navigation.tsx +++ b/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() @@ -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 => , []) + const tabBar = React.useCallback( + (props: JSX.IntrinsicAttributes & BottomTabBarProps) => ( + + ), + [], + ) return ( { - if (isProcessing || rt.graphemeLength_ > MAX_GRAPHEME_LENGTH) { + async (rt: RichText) => { + if (isProcessing || rt.graphemeLength > MAX_GRAPHEME_LENGTH) { return } diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx index 8ccdfdb0..64746840 100644 --- a/src/view/com/post-thread/PostThreadItem.tsx +++ b/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() diff --git a/src/view/com/post/Post.tsx b/src/view/com/post/Post.tsx index d37c43a3..b9d146de 100644 --- a/src/view/com/post/Post.tsx +++ b/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() diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx index 18c32b89..d83e6407 100644 --- a/src/view/com/posts/FeedItem.tsx +++ b/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() diff --git a/src/view/com/profile/ProfileCard.tsx b/src/view/com/profile/ProfileCard.tsx index 50b9f199..2dfc7ad3 100644 --- a/src/view/com/profile/ProfileCard.tsx +++ b/src/view/com/profile/ProfileCard.tsx @@ -100,7 +100,7 @@ export const ProfileCard = observer( {profile.description ? ( - {profile.description} + {profile.description as string} ) : undefined} diff --git a/src/view/com/util/ViewSelector.tsx b/src/view/com/util/ViewSelector.tsx index 705178a8..e2f47ba8 100644 --- a/src/view/com/util/ViewSelector.tsx +++ b/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)), diff --git a/src/view/com/util/forms/Button.tsx b/src/view/com/util/forms/Button.tsx index 6a5f19f9..8049d224 100644 --- a/src/view/com/util/forms/Button.tsx +++ b/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}) diff --git a/src/view/screens/DiscoverFeeds.tsx b/src/view/screens/DiscoverFeeds.tsx index 98f164a6..6b0f6b7f 100644 --- a/src/view/screens/DiscoverFeeds.tsx +++ b/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 export const DiscoverFeedsScreen = withAuthRequired( @@ -51,7 +52,7 @@ export const DiscoverFeedsScreen = withAuthRequired( }, [pal, feeds.isLoading]) const renderItem = React.useCallback( - ({item}) => ( + ({item}: {item: CustomFeedModel}) => ( savedFeeds.refresh(), [savedFeeds]) const onDragEnd = useCallback( - async ({data}) => { + async ({data}: {data: CustomFeedModel[]}) => { try { await savedFeeds.reorderPinnedFeeds(data) } catch (e) { diff --git a/yarn.lock b/yarn.lock index b9e8fe5b..9bff87a8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4997,10 +4997,10 @@ dependencies: "@types/react" "^17" -"@types/react@*", "@types/react@^17": - version "17.0.60" - resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.60.tgz#a4a97dcdbebad76612c188fc06440e4995fd8ad2" - integrity sha512-pCH7bqWIfzHs3D+PDs3O/COCQJka+Kcw3RnO9rFA2zalqoXg7cNjJDh6mZ7oRtY1wmY4LVwDdAbA1F7Z8tv3BQ== +"@types/react@*", "@types/react@^17", "@types/react@^18": + version "18.2.12" + resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.12.tgz#95d584338610b78bb9ba0415e3180fb03debdf97" + integrity sha512-ndmBMLCgn38v3SntMeoJaIrO6tGHYKMEBohCUmw8HoLLQdRMOIGXfeYaBTLe2lsFaSB3MOK1VXscYFnmLtTSmw== dependencies: "@types/prop-types" "*" "@types/scheduler" "*"