verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

[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
This commit is contained in:
Reinaldo Neto 2022-08-11 15:50:34 -03:00 committed by GitHub
parent 999e8ab660
commit 0c8177e025
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/stacks/MasterDetailStack/ModalContainer.tsx
View File

@ -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}