Fix Android keyboard gap using navigation events (#8565) (#8566)

(cherry picked from commit f2383f8)

Co-authored-by: Elias Nahum <[email protected]>

Author: mattermost-build

app/constants/screens.ts

@@ -199,6 +199,8 @@ export const SCREENS_AS_BOTTOM_SHEET = new Set<string>([
     CALL_HOST_CONTROLS,
 ]);
 
+export const SCREENS_WITH_EXTRA_KEYBOARD = new Set<string>([CHANNEL, THREAD]);
+
 export const NOT_READY = [
     CREATE_TEAM,
 ];

app/hooks/android_adjust_soft_keyboard/index.test.ts

@@ -10,7 +10,6 @@ import FloatingCallContainer from '@calls/components/floating_call_container';
 import FreezeScreen from '@components/freeze_screen';
 import PostDraft from '@components/post_draft';
 import {ExtraKeyboardProvider} from '@context/extra_keyboard';
-import {useAndroidAdjustSoftKeyboard} from '@hooks/android_adjust_soft_keyboard';
 import useAndroidHardwareBackHandler from '@hooks/android_back_handler';
 import {useChannelSwitch} from '@hooks/channel_switch';
 import {useIsTablet} from '@hooks/device';
@@ -79,7 +78,6 @@ const Channel = ({
     }, [componentId]);
 
     useAndroidHardwareBackHandler(componentId, handleBack);
-    useAndroidAdjustSoftKeyboard(componentId);
 
     const marginTop = defaultHeight + (isTablet ? 0 : -insets.top);
     useEffect(() => {

app/hooks/android_adjust_soft_keyboard/index.ts

@@ -3,14 +3,15 @@
 
 /* eslint-disable max-lines */
 
+import RNUtils from '@mattermost/rnutils';
 import merge from 'deepmerge';
 import {Appearance, DeviceEventEmitter, StatusBar, Platform, Alert, type EmitterSubscription} from 'react-native';
-import {type ComponentWillAppearEvent, type ImageResource, type LayoutOrientation, Navigation, type Options, OptionsModalPresentationStyle, type OptionsTopBarButton, type ScreenPoppedEvent, type EventSubscription} from 'react-native-navigation';
+import {type ComponentWillAppearEvent, type ImageResource, type LayoutOrientation, Navigation, type Options, OptionsModalPresentationStyle, type OptionsTopBarButton, type ScreenPoppedEvent, type EventSubscription, type ComponentDidAppearEvent} from 'react-native-navigation';
 import tinyColor from 'tinycolor2';
 
 import CompassIcon from '@components/compass_icon';
 import {Events, Screens, Launch} from '@constants';
-import {NOT_READY} from '@constants/screens';
+import {NOT_READY, SCREENS_WITH_EXTRA_KEYBOARD} from '@constants/screens';
 import {getDefaultThemeByAppearance} from '@context/theme';
 import EphemeralStore from '@store/ephemeral_store';
 import NavigationStore from '@store/navigation_store';
@@ -39,6 +40,8 @@ export function registerNavigationListeners() {
         Navigation.events().registerScreenPoppedListener(onPoppedListener),
         Navigation.events().registerCommandListener(onCommandListener),
         Navigation.events().registerComponentWillAppearListener(onScreenWillAppear),
+        Navigation.events().registerComponentDidAppearListener(onScreenDidAppear),
+        Navigation.events().registerComponentDidDisappearListener(onScreenDidDisappear),
     ];
 }
 
@@ -76,12 +79,33 @@ function onPoppedListener({componentId}: ScreenPoppedEvent) {
     NavigationStore.removeScreenFromStack(componentId as AvailableScreens);
 }
 
+function setAndroidSoftKeyboard(screen: AvailableScreens) {
+    if (Platform.OS !== 'android') {
+        return;
+    }
+
+    if (SCREENS_WITH_EXTRA_KEYBOARD.has(screen) || (isTablet() && screen === Screens.HOME)) {
+        RNUtils.setSoftKeyboardToAdjustNothing();
+    } else {
+        RNUtils.setSoftKeyboardToAdjustResize();
+    }
+}
+
 function onScreenWillAppear(event: ComponentWillAppearEvent) {
     if (event.componentId === Screens.HOME) {
         DeviceEventEmitter.emit(Events.TAB_BAR_VISIBLE, true);
     }
 }
 
+function onScreenDidAppear(event: ComponentDidAppearEvent) {
+    setAndroidSoftKeyboard(event.componentId as AvailableScreens);
+}
+
+function onScreenDidDisappear() {
+    const screen = NavigationStore.getVisibleScreen();
+    setAndroidSoftKeyboard(screen);
+}
+
 export const loginAnimationOptions = () => {
     const theme = getThemeFromState();
     return {

app/screens/channel/channel.tsx

@@ -13,7 +13,6 @@ import PostDraft from '@components/post_draft';
 import RoundedHeaderContext from '@components/rounded_header_context';
 import {Screens} from '@constants';
 import {ExtraKeyboardProvider} from '@context/extra_keyboard';
-import {useAndroidAdjustSoftKeyboard} from '@hooks/android_adjust_soft_keyboard';
 import useAndroidHardwareBackHandler from '@hooks/android_back_handler';
 import useDidUpdate from '@hooks/did_update';
 import {popTopScreen, setButtons} from '@screens/navigation';
@@ -57,7 +56,6 @@ const Thread = ({
     }, [componentId]);
 
     useAndroidHardwareBackHandler(componentId, close);
-    useAndroidAdjustSoftKeyboard(componentId);
 
     useEffect(() => {
         if (isCRTEnabled && rootId) {