Rollback keyboard management changes

src/App.native.tsx

@@ -5,7 +5,6 @@ import '#/view/icons'
 
 import React, {useEffect, useState} from 'react'
 import {GestureHandlerRootView} from 'react-native-gesture-handler'
-import {KeyboardProvider} from 'react-native-keyboard-controller'
 import {RootSiblingParent} from 'react-native-root-siblings'
 import {
   initialWindowMetrics,
@@ -17,6 +16,7 @@ import * as SystemUI from 'expo-system-ui'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {KeyboardControllerProvider} from '#/lib/hooks/useEnableKeyboardController'
 import {QueryProvider} from '#/lib/react-query'
 import {Provider as StatsigProvider, tryFetchGates} from '#/lib/statsig/statsig'
 import {s} from '#/lib/styles'
@@ -201,7 +201,7 @@ function App() {
   return (
     <GeolocationProvider>
       <A11yProvider>
-        <KeyboardProvider enabled={true}>
+        <KeyboardControllerProvider>
           <SessionProvider>
             <PrefsStateProvider>
               <I18nProvider>
@@ -230,7 +230,7 @@ function App() {
               </I18nProvider>
             </PrefsStateProvider>
           </SessionProvider>
-        </KeyboardProvider>
+        </KeyboardControllerProvider>
       </A11yProvider>
     </GeolocationProvider>
   )

src/components/Dialog/index.tsx

@@ -19,6 +19,7 @@ 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 {isAndroid, isIOS} from '#/platform/detection'
@@ -201,6 +202,8 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
     const {nativeSnapPoint, disableDrag, setDisableDrag} = useDialogContext()
     const insets = useSafeAreaInsets()
 
+    useEnableKeyboardController(isIOS)
+
     const [keyboardHeight, setKeyboardHeight] = React.useState(0)
 
     useKeyboardHandler(

src/lib/hooks/useEnableKeyboardController.tsx

@@ -0,0 +1,108 @@
+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: () => {},
+})
+
+export function KeyboardControllerProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <KeyboardProvider
+      enabled={false}
+      // I don't think this is necessary, but Chesterton's fence and all that -sfn
+      statusBarTranslucent={true}>
+      <KeyboardControllerProviderInner>
+        {children}
+      </KeyboardControllerProviderInner>
+    </KeyboardProvider>
+  )
+}
+
+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 (
+    <KeyboardControllerRefCountContext.Provider value={value}>
+      {children}
+    </KeyboardControllerRefCountContext.Provider>
+  )
+}
+
+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]),
+  )
+}

src/screens/Login/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {KeyboardAvoidingView} from 'react-native-keyboard-controller'
+import {KeyboardAvoidingView} from 'react-native'
 import {LayoutAnimationConfig} from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

src/screens/Messages/Conversation.tsx

@@ -7,6 +7,7 @@ import {useFocusEffect, useNavigation} from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 
 import {useEmail} from '#/lib/hooks/useEmail'
+import {useEnableKeyboardControllerScreen} from '#/lib/hooks/useEnableKeyboardController'
 import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types'
 import {isWeb} from '#/platform/detection'
 import {useProfileShadow} from '#/state/cache/profile-shadow'
@@ -37,6 +38,8 @@ export function MessagesConversationScreen({route}: Props) {
   const convoId = route.params.conversation
   const {setCurrentConvoId} = useCurrentConvoId()
 
+  useEnableKeyboardControllerScreen(true)
+
   useFocusEffect(
     useCallback(() => {
       setCurrentConvoId(convoId)

src/screens/StarterPack/Wizard/index.tsx

@@ -16,6 +16,7 @@ import {useFocusEffect, useNavigation} from '@react-navigation/native'
 import {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 {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types'
 import {logEvent} from '#/lib/statsig/statsig'
@@ -160,6 +161,8 @@ function WizardInner({
     })
   }, [navigation])
 
+  useEnableKeyboardControllerScreen(true)
+
   useFocusEffect(
     React.useCallback(() => {
       setMinimalShellMode(true)

src/view/com/composer/Composer.tsx

@@ -11,14 +11,14 @@ import {
   ActivityIndicator,
   BackHandler,
   Keyboard,
+  KeyboardAvoidingView,
   LayoutChangeEvent,
   ScrollView,
   StyleProp,
   StyleSheet,
   View,
   ViewStyle,
 } from 'react-native'
-import {KeyboardAvoidingView} from 'react-native-keyboard-controller'
 // @ts-expect-error no type definition
 import ProgressCircle from 'react-native-progress/Circle'
 import Animated, {

src/view/com/lightbox/ImageViewing/index.tsx

@@ -155,6 +155,7 @@ export default function ImageViewRoot({
   }, [onRequestClose, openProgress])
 
   return (
+    // Keep it always mounted to avoid flicker on the first frame.
     <View
       style={[styles.screen, !activeLightbox && styles.screenHidden]}
       aria-modal

src/view/com/modals/CreateOrEditList.tsx

@@ -1,14 +1,14 @@
 import {useCallback, useMemo, useState} from 'react'
 import {
   ActivityIndicator,
+  KeyboardAvoidingView,
   ScrollView,
   StyleSheet,
   TextInput,
   TouchableOpacity,
   View,
 } from 'react-native'
 import {Image as RNImage} from 'react-native-image-crop-picker'
-import {KeyboardAvoidingView} from 'react-native-keyboard-controller'
 import {LinearGradient} from 'expo-linear-gradient'
 import {AppBskyGraphDefs, RichText as RichTextAPI} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'

src/view/com/modals/EditProfile.tsx

@@ -1,14 +1,14 @@
 import {useCallback, useState} from 'react'
 import {
   ActivityIndicator,
+  KeyboardAvoidingView,
   ScrollView,
   StyleSheet,
   TextInput,
   TouchableOpacity,
   View,
 } from 'react-native'
 import {Image as RNImage} from 'react-native-image-crop-picker'
-import {KeyboardAvoidingView} from 'react-native-keyboard-controller'
 import Animated, {FadeOut} from 'react-native-reanimated'
 import {LinearGradient} from 'expo-linear-gradient'
 import {AppBskyActorDefs} from '@atproto/api'