Only enable keyboard controller when necessary (#4483)

* Only enable keyboard controller when necessary

* make it screen only

* rm keyboard padding

* rm keyboardpadding file

* revert using keyboard controller in composer

* remove styles.outer (unnecessary for revert)

* continue to use keyboard padding in the report dialog for dms

---------

Co-authored-by: Hailey <me@haileyok.com>

src/App.native.tsx

@@ -143,7 +143,7 @@ function App() {
    * that is set up in the InnerApp component above.
    */
   return (
-    <KeyboardProvider enabled={true} statusBarTranslucent={true}>
+    <KeyboardProvider enabled={false} statusBarTranslucent={true}>
       <SessionProvider>
         <ShellStateProvider>
           <PrefsStateProvider>

src/components/KeyboardControllerPadding.android.tsx

@@ -5,7 +5,7 @@ import Animated, {
   useSharedValue,
 } from 'react-native-reanimated'
 
-export function KeyboardPadding({maxHeight}: {maxHeight?: number}) {
+export function KeyboardControllerPadding({maxHeight}: {maxHeight?: number}) {
   const keyboardHeight = useSharedValue(0)
 
   useKeyboardHandler(

src/components/KeyboardControllerPadding.tsx

@@ -0,0 +1,7 @@
+export function KeyboardControllerPadding({
+  maxHeight: _,
+}: {
+  maxHeight?: number
+}) {
+  return null
+}

src/components/KeyboardPadding.tsx

@@ -1,3 +0,0 @@
-export function KeyboardPadding({maxHeight: _}: {maxHeight?: number}) {
-  return null
-}

src/components/ReportDialog/SubmitView.tsx

@@ -15,7 +15,6 @@ import * as Dialog from '#/components/Dialog'
 import * as Toggle from '#/components/forms/Toggle'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
-import {KeyboardPadding} from '#/components/KeyboardPadding'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 import {ReportDialogProps} from './types'
@@ -222,7 +221,6 @@ export function SubmitView({
           {submitting && <ButtonIcon icon={Loader} />}
         </Button>
       </View>
-      <KeyboardPadding />
     </View>
   )
 }

src/components/dialogs/MutedWords.tsx

@@ -28,7 +28,6 @@ import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Has
 import {PageText_Stroke2_Corner0_Rounded as PageText} from '#/components/icons/PageText'
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
-import {KeyboardPadding} from '#/components/KeyboardPadding'
 import {Loader} from '#/components/Loader'
 import * as Prompt from '#/components/Prompt'
 import {Text} from '#/components/Typography'
@@ -257,7 +256,6 @@ function MutedWordsInner() {
       </View>
 
       <Dialog.Close />
-      <KeyboardPadding maxHeight={100} />
     </Dialog.ScrollableInner>
   )
 }

src/components/dms/ReportDialog.tsx

@@ -16,6 +16,7 @@ import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
+import {KeyboardControllerPadding} from '#/components/KeyboardControllerPadding'
 import {Button, ButtonIcon, ButtonText} from '../Button'
 import {Divider} from '../Divider'
 import {ChevronLeft_Stroke2_Corner0_Rounded as Chevron} from '../icons/Chevron'
@@ -47,6 +48,7 @@ let ReportDialog = ({
       <Dialog.ScrollableInner label={_(msg`Report this message`)}>
         <DialogInner params={params} />
         <Dialog.Close />
+        <KeyboardControllerPadding />
       </Dialog.ScrollableInner>
     </Dialog.Outer>
   )

src/components/moderation/LabelsOnMeDialog.tsx

@@ -14,7 +14,6 @@ import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
-import {KeyboardPadding} from '#/components/KeyboardPadding'
 import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
 import {Divider} from '../Divider'
@@ -110,7 +109,6 @@ function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
         </>
       )}
       <Dialog.Close />
-      <KeyboardPadding />
     </Dialog.ScrollableInner>
   )
 }

src/screens/Messages/Conversation/index.tsx

@@ -1,5 +1,6 @@
 import React, {useCallback} from 'react'
 import {View} from 'react-native'
+import {useKeyboardController} from 'react-native-keyboard-controller'
 import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -34,6 +35,17 @@ export function MessagesConversationScreen({route}: Props) {
   const convoId = route.params.conversation
   const {setCurrentConvoId} = useCurrentConvoId()
 
+  const {setEnabled} = useKeyboardController()
+  useFocusEffect(
+    useCallback(() => {
+      if (isWeb) return
+      setEnabled(true)
+      return () => {
+        setEnabled(false)
+      }
+    }, [setEnabled]),
+  )
+
   useFocusEffect(
     useCallback(() => {
       setCurrentConvoId(convoId)

src/view/com/composer/Composer.tsx

@@ -10,16 +10,12 @@ import {
   ActivityIndicator,
   BackHandler,
   Keyboard,
+  KeyboardAvoidingView,
   LayoutChangeEvent,
   StyleSheet,
   TouchableOpacity,
   View,
 } from 'react-native'
-import {
-  KeyboardAvoidingView,
-  KeyboardStickyView,
-  useKeyboardController,
-} from 'react-native-keyboard-controller'
 import Animated, {
   interpolateColor,
   useAnimatedStyle,
@@ -131,17 +127,6 @@ export const ComposePost = observer(function ComposePost({
   const {closeAllModals} = useModalControls()
   const t = useTheme()
 
-  // Disable this in the composer to prevent any extra keyboard height being applied.
-  // See https://github.com/bluesky-social/social-app/pull/4399
-  const {setEnabled} = useKeyboardController()
-  React.useEffect(() => {
-    if (!isAndroid) return
-    setEnabled(false)
-    return () => {
-      setEnabled(true)
-    }
-  }, [setEnabled])
-
   const [isKeyboardVisible] = useIsKeyboardVisible({iosUseWillEvents: true})
   const [isProcessing, setIsProcessing] = useState(false)
   const [processingState, setProcessingState] = useState('')
@@ -431,16 +416,12 @@ export const ComposePost = observer(function ComposePost({
   } = useAnimatedBorders()
 
   return (
-    <>
     <KeyboardAvoidingView
       testID="composePostView"
-        behavior="padding"
+      behavior={isIOS ? 'padding' : 'height'}
-        style={a.flex_1}
+      keyboardVerticalOffset={isIOS ? 70 : 0}
-        keyboardVerticalOffset={replyTo ? 115 : isAndroid ? 180 : 162}>
+      style={[a.flex_1]}>
-        <View
+      <View style={[a.flex_1, viewStyles]} aria-modal accessibilityViewIsModal>
-          style={[a.flex_1, viewStyles]}
-          aria-modal
-          accessibilityViewIsModal>
         <Animated.View style={topBarAnimatedStyle}>
           <View style={styles.topbarInner}>
             <TouchableOpacity
@@ -590,8 +571,9 @@ export const ComposePost = observer(function ComposePost({
               />
             </View>
           )}
+
           {quote ? (
-              <View style={[s.mt5, isWeb && s.mb10]}>
+            <View style={[s.mt5, s.mb2, isWeb && s.mb10]}>
               <View style={{pointerEvents: 'none'}}>
                 <QuoteEmbed quote={quote} />
               </View>
@@ -602,10 +584,7 @@ export const ComposePost = observer(function ComposePost({
           ) : undefined}
         </Animated.ScrollView>
         <SuggestedLanguage text={richtext.text} />
-        </View>
+
-      </KeyboardAvoidingView>
-      <KeyboardStickyView
-        offset={{closed: isIOS ? -insets.bottom : 0, opened: 0}}>
         {replyTo ? null : (
           <ThreadgateBtn
             threadgate={threadgate}
@@ -644,7 +623,7 @@ export const ComposePost = observer(function ComposePost({
           <SelectLangBtn />
           <CharProgress count={graphemeLength} />
         </View>
-      </KeyboardStickyView>
+      </View>
       <Prompt.Basic
         control={discardPromptControl}
         title={_(msg`Discard draft?`)}
@@ -653,7 +632,7 @@ export const ComposePost = observer(function ComposePost({
         confirmButtonCta={_(msg`Discard`)}
         confirmButtonColor="negative"
       />
-    </>
+    </KeyboardAvoidingView>
   )
 })
 

src/view/com/composer/GifAltText.tsx

@@ -20,7 +20,6 @@ import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {PlusSmall_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
-import {KeyboardPadding} from '#/components/KeyboardPadding'
 import {Text} from '#/components/Typography'
 import {GifEmbed} from '../util/post-embeds/GifEmbed'
 import {AltTextReminder} from './photos/Gallery'
@@ -181,7 +180,6 @@ function AltTextInner({
         </View>
       </View>
       <Dialog.Close />
-      <KeyboardPadding />
     </Dialog.ScrollableInner>
   )
 }

src/view/com/modals/AddAppPasswords.tsx

@@ -22,7 +22,6 @@ import {Text} from '#/view/com/util/text/Text'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a} from '#/alf'
 import * as Toggle from '#/components/forms/Toggle'
-import {KeyboardPadding} from '#/components/KeyboardPadding'
 
 export const snapPoints = ['90%']
 
@@ -246,7 +245,6 @@ export function Component({}: {}) {
           onPress={!appPassword ? createAppPassword : onDone}
         />
       </View>
-      <KeyboardPadding />
     </View>
   )
 }

src/view/com/modals/Modal.tsx

@@ -6,7 +6,6 @@ import BottomSheet from '@discord/bottom-sheet/src'
 import {useModalControls, useModals} from '#/state/modals'
 import {usePalette} from 'lib/hooks/usePalette'
 import {FullWindowOverlay} from '#/components/FullWindowOverlay'
-import {KeyboardPadding} from '#/components/KeyboardPadding'
 import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
 import * as AddAppPassword from './AddAppPasswords'
 import * as AltImageModal from './AltImage'
@@ -147,7 +146,6 @@ export function ModalsContainer() {
         handleStyle={[styles.handle, pal.view]}
         onChange={onBottomSheetChange}>
         {element}
-        <KeyboardPadding />
       </BottomSheet>
     </Container>
   )