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; @@ -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 ( navigation.pop()}> @@ -35,7 +51,7 @@ export const ModalContainer = ({ navigation, children, theme }: IModalContainer) height ? height : modalHeight + height: heightModal }} > {children}