[FIX] Text composer is pushing modals outside the screen on Android's tablet

app/lib/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './useAppSelector';
 export * from './usePermissions';
+export * from './useKeyboardHeight';

app/lib/hooks/useKeyboardHeight.ts

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+import { Keyboard } from 'react-native';
+
+// Taken from https://github.com/gie3d/react-native-use-keyboard-height/blob/master/src/index.tsx
+
+export const useKeyboardHeight = () => {
+	const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
+	useEffect(() => {
+		Keyboard.addListener('keyboardDidShow', keyboardDidShow);
+		Keyboard.addListener('keyboardDidHide', keyboardDidHide);
+
+		// cleanup function
+		return () => {
+			Keyboard.removeListener('keyboardDidShow', keyboardDidShow);
+			Keyboard.removeListener('keyboardDidHide', keyboardDidHide);
+		};
+	}, []);
+
+	const keyboardDidShow = (frames: any) => {
+		setKeyboardHeight(frames.endCoordinates.height);
+	};
+
+	const keyboardDidHide = () => {
+		setKeyboardHeight(0);
+	};
+
+	return keyboardHeight;
+};

app/stacks/MasterDetailStack/ModalContainer.tsx

@@ -6,6 +6,9 @@ import { NavigationContainerProps } from '@react-navigation/core';
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../lib/constants';
 import { TSupportedThemes } from '../../theme';
+import { isAndroid } from '../../lib/methods/helpers';
+import { useKeyboardHeight } from '../../lib/hooks';
+import { useOrientation } from '../../dimensions';
 
 interface IModalContainer extends NavigationContainerProps {
 	navigation: StackNavigationProp<any>;
@@ -25,8 +28,21 @@ const styles = StyleSheet.create({
 });
 
 export const ModalContainer = ({ navigation, children, theme }: IModalContainer): JSX.Element => {
+	const keyboardHeight = useKeyboardHeight();
 	const { height } = useWindowDimensions();
+	const { isLandscape } = useOrientation();
 	const modalHeight = sharedStyles.modalFormSheet.height;
+
+	let heightModal: number;
+
+	if (modalHeight > height) {
+		heightModal = height;
+	} else if (isLandscape && isAndroid && keyboardHeight > 0) {
+		heightModal = height - keyboardHeight - 32; // 32 is to force a padding
+	} else {
+		heightModal = modalHeight;
+	}
+
 	return (
 		<View style={[styles.root, { backgroundColor: `${themes[theme].backdropColor}70` }]}>
 			<TouchableWithoutFeedback onPress={() => navigation.pop()}>
@@ -35,7 +51,7 @@ export const ModalContainer = ({ navigation, children, theme }: IModalContainer)
 			<View
 				style={{
 					...sharedStyles.modalFormSheet,
-					height: modalHeight > height ? height : modalHeight
+					height: heightModal
 				}}>
 				{children}
 			</View>