From 049d24dec18a8fbd0b2dc1a2d4244b286edaa1cc Mon Sep 17 00:00:00 2001
From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com>
Date: Thu, 11 Aug 2022 15:50:34 -0300
Subject: [PATCH] [FIX] Text composer is pushing modals outside the screen on
 Android's tablet (#4393)

* [FIX] Text composer is pushing modals outside the screen

* added isLandscape

* refactor useKeyboard

* refactor landscape
---
 .../MasterDetailStack/ModalContainer.tsx       | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/app/stacks/MasterDetailStack/ModalContainer.tsx b/app/stacks/MasterDetailStack/ModalContainer.tsx
index 8e0ececb2..1a45e1835 100644
--- a/app/stacks/MasterDetailStack/ModalContainer.tsx
+++ b/app/stacks/MasterDetailStack/ModalContainer.tsx
@@ -2,10 +2,14 @@ import React from 'react';
 import { StyleSheet, TouchableWithoutFeedback, useWindowDimensions, View } from 'react-native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { NavigationContainerProps } from '@react-navigation/core';
+import { useKeyboard } from '@react-native-community/hooks';
 
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../lib/constants';
 import { TSupportedThemes } from '../../theme';
+import { isAndroid } from '../../lib/methods/helpers';
+
+const MODAL_MARGIN = 32;
 
 interface IModalContainer extends NavigationContainerProps {
 	navigation: StackNavigationProp<any>;
@@ -25,8 +29,20 @@ const styles = StyleSheet.create({
 });
 
 export const ModalContainer = ({ navigation, children, theme }: IModalContainer): JSX.Element => {
+	const { keyboardHeight, keyboardShown } = useKeyboard();
 	const { height } = useWindowDimensions();
 	const modalHeight = sharedStyles.modalFormSheet.height;
+
+	let heightModal: number;
+
+	if (isAndroid && keyboardShown && keyboardHeight + modalHeight > height) {
+		heightModal = height - keyboardHeight - MODAL_MARGIN;
+	} else if (modalHeight > height) {
+		heightModal = height - MODAL_MARGIN;
+	} 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}