Ensure react-native-keyboard-controller enabled state doesn't get overwritten (#6727)

* revert to prev state instead of false

* add dep array

* use ref counting approach

* patch keyboard controller to allow changing the enabled prop

* remove state from patch

* change patched prop name

* remove Math.max check, log if < 0

* use noop provider

* rm patch, use `useRef`

* Style nits

* Rm on web

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

1 files changed, 5 insertions, 8 deletions

diff --git a/src/screens/StarterPack/Wizard/index.tsx b/src/screens/StarterPack/Wizard/index.tsx
index 9a90a1f51..b0d71b929 100644
--- a/src/screens/StarterPack/Wizard/index.tsx
+++ b/src/screens/StarterPack/Wizard/index.tsx
@@ -1,9 +1,6 @@
 import React from 'react'
 import {Keyboard, TouchableOpacity, View} from 'react-native'
-import {
-  KeyboardAwareScrollView,
-  useKeyboardController,
-} from 'react-native-keyboard-controller'
+import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {Image} from 'expo-image'
 import {
@@ -20,6 +17,7 @@ import {useFocusEffect, useNavigation} from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
 
 import {HITSLOP_10, 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'
@@ -151,7 +149,6 @@ function WizardInner({
   const {_} = useLingui()
   const t = useTheme()
   const setMinimalShellMode = useSetMinimalShellMode()
-  const {setEnabled} = useKeyboardController()
   const [state, dispatch] = useWizardState()
   const {currentAccount} = useSession()
   const {data: currentProfile} = useProfileQuery({
@@ -166,16 +163,16 @@ function WizardInner({
     })
   }, [navigation])
 
+  useEnableKeyboardControllerScreen(true)
+
   useFocusEffect(
     React.useCallback(() => {
-      setEnabled(true)
       setMinimalShellMode(true)
 
       return () => {
         setMinimalShellMode(false)
-        setEnabled(false)
       }
-    }, [setMinimalShellMode, setEnabled]),
+    }, [setMinimalShellMode]),
   )
 
   const getDefaultName = () => {