diff --git a/package.json b/package.json index 448330660c..868aaffcf6 100644 --- a/package.json +++ b/package.json @@ -202,7 +202,7 @@ "react-native-edge-to-edge": "^1.6.0", "react-native-gesture-handler": "~2.28.0", "react-native-get-random-values": "~1.11.0", - "react-native-keyboard-controller": "1.18.5", + "react-native-keyboard-controller": "^1.19.6", "react-native-pager-view": "6.8.0", "react-native-progress": "bluesky-social/react-native-progress", "react-native-qrcode-styled": "^0.3.3", diff --git a/src/App.native.tsx b/src/App.native.tsx index 1568f7b8ae..5de9f82b7b 100644 --- a/src/App.native.tsx +++ b/src/App.native.tsx @@ -3,6 +3,7 @@ import '#/view/icons' import React, {useEffect, useState} from 'react' import {GestureHandlerRootView} from 'react-native-gesture-handler' +import {KeyboardProvider as KeyboardControllerProvider} from 'react-native-keyboard-controller' import { initialWindowMetrics, SafeAreaProvider, @@ -14,7 +15,6 @@ import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' import * as Sentry from '@sentry/react-native' -import {KeyboardControllerProvider} from '#/lib/hooks/useEnableKeyboardController' import {Provider as HideBottomBarBorderProvider} from '#/lib/hooks/useHideBottomBarBorder' import {QueryProvider} from '#/lib/react-query' import {s} from '#/lib/styles' diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index b63ab4f1c6..966f127256 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -23,7 +23,6 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context' import {msg} from '@lingui/macro' import {useLingui} from '@lingui/react' -import {useEnableKeyboardController} from '#/lib/hooks/useEnableKeyboardController' import {ScrollProvider} from '#/lib/ScrollContext' import {logger} from '#/logger' import {useA11y} from '#/state/a11y' @@ -209,10 +208,9 @@ export const ScrollableInner = React.forwardRef( const {nativeSnapPoint, disableDrag, setDisableDrag} = useDialogContext() const insets = useSafeAreaInsets() - useEnableKeyboardController(IS_IOS) - const [keyboardHeight, setKeyboardHeight] = React.useState(0) + // note: iOS-only. keyboard-controller doesn't seem to work inside the sheets on Android useKeyboardHandler( { onEnd: e => { @@ -231,7 +229,6 @@ export const ScrollableInner = React.forwardRef( } paddingBottom = Math.max(paddingBottom, tokens.space._2xl) } else { - paddingBottom += keyboardHeight if (nativeSnapPoint === BottomSheetSnapPoint.Full) { paddingBottom += insets.top } @@ -289,8 +286,6 @@ export const InnerFlatList = React.forwardRef< const insets = useSafeAreaInsets() const {nativeSnapPoint, disableDrag, setDisableDrag} = useDialogContext() - useEnableKeyboardController(IS_IOS) - const onScroll = (e: ScrollEvent) => { 'worklet' if (!IS_ANDROID) { diff --git a/src/lib/hooks/useEnableKeyboardController.tsx b/src/lib/hooks/useEnableKeyboardController.tsx deleted file mode 100644 index d55929d0fb..0000000000 --- a/src/lib/hooks/useEnableKeyboardController.tsx +++ /dev/null @@ -1,107 +0,0 @@ -import { - createContext, - useCallback, - useContext, - useEffect, - useMemo, - useRef, -} from 'react' -import { - KeyboardProvider, - useKeyboardController, -} from 'react-native-keyboard-controller' -import {useFocusEffect} from '@react-navigation/native' - -const KeyboardControllerRefCountContext = createContext<{ - incrementRefCount: () => void - decrementRefCount: () => void -}>({ - incrementRefCount: () => {}, - decrementRefCount: () => {}, -}) -KeyboardControllerRefCountContext.displayName = - 'KeyboardControllerRefCountContext' - -export function KeyboardControllerProvider({ - children, -}: { - children: React.ReactNode -}) { - return ( - - - {children} - - - ) -} - -function KeyboardControllerProviderInner({ - children, -}: { - children: React.ReactNode -}) { - const {setEnabled} = useKeyboardController() - const refCount = useRef(0) - - const value = useMemo( - () => ({ - incrementRefCount: () => { - refCount.current++ - setEnabled(refCount.current > 0) - }, - decrementRefCount: () => { - refCount.current-- - setEnabled(refCount.current > 0) - - if (__DEV__ && refCount.current < 0) { - console.error('KeyboardController ref count < 0') - } - }, - }), - [setEnabled], - ) - - return ( - - {children} - - ) -} - -export function useEnableKeyboardController(shouldEnable: boolean) { - const {incrementRefCount, decrementRefCount} = useContext( - KeyboardControllerRefCountContext, - ) - - useEffect(() => { - if (!shouldEnable) { - return - } - incrementRefCount() - return () => { - decrementRefCount() - } - }, [shouldEnable, incrementRefCount, decrementRefCount]) -} - -/** - * Like `useEnableKeyboardController`, but using `useFocusEffect` - */ -export function useEnableKeyboardControllerScreen(shouldEnable: boolean) { - const {incrementRefCount, decrementRefCount} = useContext( - KeyboardControllerRefCountContext, - ) - - useFocusEffect( - useCallback(() => { - if (!shouldEnable) { - return - } - incrementRefCount() - return () => { - decrementRefCount() - } - }, [shouldEnable, incrementRefCount, decrementRefCount]), - ) -} diff --git a/src/screens/Messages/Conversation.tsx b/src/screens/Messages/Conversation.tsx index b63cd33908..4a762f6eee 100644 --- a/src/screens/Messages/Conversation.tsx +++ b/src/screens/Messages/Conversation.tsx @@ -15,7 +15,6 @@ import { } from '@react-navigation/native' import {type NativeStackScreenProps} from '@react-navigation/native-stack' -import {useEnableKeyboardControllerScreen} from '#/lib/hooks/useEnableKeyboardController' import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback' import { type CommonNavigatorParams, @@ -68,8 +67,6 @@ export function MessagesConversationScreenInner({route}: Props) { const convoId = route.params.conversation const {setCurrentConvoId} = useCurrentConvoId() - useEnableKeyboardControllerScreen(true) - useFocusEffect( useCallback(() => { setCurrentConvoId(convoId) diff --git a/src/screens/StarterPack/Wizard/index.tsx b/src/screens/StarterPack/Wizard/index.tsx index 0e82256619..3382a5d540 100644 --- a/src/screens/StarterPack/Wizard/index.tsx +++ b/src/screens/StarterPack/Wizard/index.tsx @@ -16,7 +16,6 @@ import {useFocusEffect, useNavigation} from '@react-navigation/native' import {type NativeStackScreenProps} from '@react-navigation/native-stack' import {STARTER_PACK_MAX_SIZE} from '#/lib/constants' -import {useEnableKeyboardControllerScreen} from '#/lib/hooks/useEnableKeyboardController' import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name' import { type CommonNavigatorParams, @@ -185,8 +184,6 @@ function WizardInner({ }) }, [navigation]) - useEnableKeyboardControllerScreen(true) - useFocusEffect( React.useCallback(() => { setMinimalShellMode(true) diff --git a/src/screens/Takendown.tsx b/src/screens/Takendown.tsx index 660aecf1a6..4e5e2d2ff4 100644 --- a/src/screens/Takendown.tsx +++ b/src/screens/Takendown.tsx @@ -12,7 +12,6 @@ import { BLUESKY_MOD_SERVICE_HEADERS, MAX_REPORT_REASON_GRAPHEME_LENGTH, } from '#/lib/constants' -import {useEnableKeyboardController} from '#/lib/hooks/useEnableKeyboardController' import {cleanError} from '#/lib/strings/errors' import {useAgent, useSession, useSessionApi} from '#/state/session' import {CharProgress} from '#/view/com/composer/char-progress/CharProgress' @@ -121,8 +120,6 @@ export function Takendown() { const webLayout = IS_WEB && gtMobile - useEnableKeyboardController(true) - return ( diff --git a/yarn.lock b/yarn.lock index 770b8e9d90..08eaebc0ae 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17174,10 +17174,10 @@ react-native-is-edge-to-edge@^1.2.1: resolved "https://registry.yarnpkg.com/react-native-is-edge-to-edge/-/react-native-is-edge-to-edge-1.2.1.tgz#64e10851abd9d176cbf2b40562f751622bde3358" integrity sha512-FLbPWl/MyYQWz+KwqOZsSyj2JmLKglHatd3xLZWskXOpRaio4LfEDEz8E/A6uD8QoTHW6Aobw1jbEwK7KMgR7Q== -react-native-keyboard-controller@1.18.5: - version "1.18.5" - resolved "https://registry.yarnpkg.com/react-native-keyboard-controller/-/react-native-keyboard-controller-1.18.5.tgz#ae12131f2019c574178479d2c55784f55e08bb68" - integrity sha512-wbYN6Tcu3G5a05dhRYBgjgd74KqoYWuUmroLpigRg9cXy5uYo7prTMIvMgvLtARQtUF7BOtFggUnzgoBOgk0TQ== +react-native-keyboard-controller@^1.19.6: + version "1.19.6" + resolved "https://registry.yarnpkg.com/react-native-keyboard-controller/-/react-native-keyboard-controller-1.19.6.tgz#af63d21807d80224897cc7895cba26ea2f9bb736" + integrity sha512-OnijLjtUVnWDZDkxtBCCja4kO7UPbpyX9K8lJXHH8spfTCrlvbPkVra5qaaqIPrv9SHWkWkComgh4LSgYUu62g== dependencies: react-native-is-edge-to-edge "^1.2.1"