feat(mobile/navigation) updated screens that have footer

* feat(mobile/navigation) updated screens that have footer

* feat(chat/native) reverted style change

* feat(chat/native) reverted changes and added input vertical padding

* feat(base/modal) replaced headerHeight with top safe area inset

* feat(carmode/native) removed unused import and fixed linter

* feat(chat/polls/native) reverted style changes

* feat(base/modal) added isModalPresentation default prop

* feat(base/modal) made isModalPresentation optional

* feat(base/modal) headerHeight based on top notch devices

* feat(polls) updated styles

* feat(base/modal) updated comment

react/features/base/modal/components/JitsiKeyboardAvoidingView.js

@@ -1,13 +1,13 @@
 // @flow
 
-import { useHeaderHeight } from '@react-navigation/elements';
+import { getDefaultHeaderHeight } from '@react-navigation/elements';
 import React, { useEffect, useState } from 'react';
 import {
     KeyboardAvoidingView,
     Platform,
     StatusBar
 } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { StyleType } from '../../styles';
 
@@ -33,6 +33,11 @@ type Props = {
      */
     hasTabNavigator: boolean,
 
+    /**
+     * Is the screen presented as a modal?
+     */
+    isModalPresentation: boolean,
+
     /**
      * Additional style to be appended to the KeyboardAvoidingView.
      */
@@ -45,26 +50,33 @@ const JitsiKeyboardAvoidingView = (
             contentContainerStyle,
             hasTabNavigator,
             hasBottomTextInput,
+            isModalPresentation,
             style
         }: Props) => {
-    const headerHeight = useHeaderHeight();
+    const frame = useSafeAreaFrame();
     const insets = useSafeAreaInsets();
     const [ bottomPadding, setBottomPadding ] = useState(insets.bottom);
+    const [ topPadding, setTopPadding ] = useState(insets.top);
 
     useEffect(() => {
         // This useEffect is needed because insets are undefined at first for some reason
         // https://github.com/th3rdwave/react-native-safe-area-context/issues/54
         setBottomPadding(insets.bottom);
+        setTopPadding(insets.top);
+    }, [ insets.bottom, insets.top ]);
 
-    }, [ insets.bottom ]);
+    const headerHeight = getDefaultHeaderHeight(frame, isModalPresentation, topPadding);
 
+    // Notch devices have in general a header height between 103 and 106px
+    const topNotchDevice = headerHeight > 100;
+    const deviceHeight = topNotchDevice ? headerHeight - 50 : headerHeight;
     const tabNavigatorPadding
-        = hasTabNavigator ? headerHeight : 0;
+        = hasTabNavigator ? deviceHeight : 0;
     const noNotchDevicePadding = bottomPadding || 10;
     const iosVerticalOffset
-        = headerHeight + noNotchDevicePadding + tabNavigatorPadding;
+        = deviceHeight + noNotchDevicePadding + tabNavigatorPadding;
     const androidVerticalOffset = hasBottomTextInput
-        ? headerHeight + StatusBar.currentHeight : headerHeight;
+        ? deviceHeight + StatusBar.currentHeight : deviceHeight;
 
     return (
         <KeyboardAvoidingView

react/features/base/modal/components/JitsiScreen.js

@@ -37,6 +37,11 @@ type Props = {
      */
     hasTabNavigator?: boolean,
 
+    /**
+     * Is the screen presented as a modal?
+     */
+    isModalPresentation?: boolean,
+
     /**
      * Insets for the SafeAreaView.
      */
@@ -54,7 +59,8 @@ const JitsiScreen = ({
     footerComponent,
     hasTabNavigator = false,
     hasBottomTextInput = false,
-    safeAreaInsets = [ 'bottom', 'left', 'right' ],
+    isModalPresentation = true,
+    safeAreaInsets = [ 'left', 'right' ],
     style
 }: Props) => (
     <View
@@ -63,6 +69,7 @@ const JitsiScreen = ({
             contentContainerStyle = { contentContainerStyle }
             hasBottomTextInput = { hasBottomTextInput }
             hasTabNavigator = { hasTabNavigator }
+            isModalPresentation = { isModalPresentation }
             style = { style }>
             <SafeAreaView
                 edges = { safeAreaInsets }

react/features/chat/components/native/styles.js

@@ -56,7 +56,8 @@ export default {
         borderTopColor: 'rgb(209, 219, 231)',
         borderTopWidth: 1,
         flexDirection: 'row',
-        paddingHorizontal: BoxModel.padding
+        paddingBottom: '4%',
+        paddingHorizontal: BaseTheme.spacing[3]
     },
 
     inputField: {

react/features/conference/components/native/carmode/Conference.tsx

@@ -1,11 +1,13 @@
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Text, SafeAreaView, View } from 'react-native';
+import { Text, View } from 'react-native';
 import { withSafeAreaInsets } from 'react-native-safe-area-context';
 import { useDispatch, useSelector } from 'react-redux';
-import JitsiScreen from '../../../../base/modal/components/JitsiScreen';
 
+import JitsiScreen from '../../../../base/modal/components/JitsiScreen';
 import { LoadingIndicator, TintedView } from '../../../../base/react';
+import { isLocalVideoTrackDesktop } from '../../../../base/tracks';
+import { setPictureInPictureDisabled } from '../../../../mobile/picture-in-picture/functions';
 import { setIsCarmode } from '../../../../video-layout/actions';
 import ConferenceTimer from '../../ConferenceTimer';
 import { isConnecting } from '../../functions';
@@ -15,8 +17,6 @@ import MicrophoneButton from './MicrophoneButton';
 import SoundDeviceButton from './SoundDeviceButton';
 import TitleBar from './TitleBar';
 import styles from './styles';
-import { isLocalVideoTrackDesktop } from '../../../../base/tracks';
-import { setPictureInPictureDisabled } from '../../../../mobile/picture-in-picture/functions';
 
 /**
  * Implements the carmode tab.
@@ -38,7 +38,7 @@ const CarmodeTab = (): JSX.Element => {
             if (!isSharing) {
                 setPictureInPictureDisabled(false);
             }
-        }
+        };
     }, []);
 
     return (

react/features/invite/components/add-people-dialog/native/AddPeopleDialog.js

@@ -230,7 +230,6 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
                         data = { inviteItems }
                         horizontal = { true }
                         keyExtractor = { this._keyExtractor }
-                        keyboardShouldPersistTaps = 'always'
                         renderItem = { this._renderInvitedItem } />
                 </View> }
                 <View style = { styles.resultList }>
@@ -239,7 +238,6 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
                         data = { selectableItems }
                         extraData = { inviteItems }
                         keyExtractor = { this._keyExtractor }
-                        keyboardShouldPersistTaps = 'always'
                         renderItem = { this._renderItem } />
                 </View>
             </JitsiScreen>

react/features/polls/components/native/PollCreate.js

@@ -169,7 +169,6 @@ const PollCreate = (props: AbstractProps) => {
                             style = { chatStyles.pollCreateButton } >
                             {t('polls.create.cancel')}
                         </Button>
-
                         <Button
                             color = { BaseTheme.palette.screen01Header }
                             disabled = { isSubmitDisabled }

react/features/polls/components/native/styles.js

@@ -154,12 +154,12 @@ export const chatStyles = createStyleSheet({
     },
 
     pollCreateButtonsContainer: {
-        paddingVertical: BaseTheme.spacing[2]
+        paddingVertical: '8%'
     },
 
     pollCreateButton: {
         flex: 1,
-        marginHorizontal: 8
+        marginHorizontal: BaseTheme.spacing[2]
     },
 
     pollSendLabel: {
@@ -200,7 +200,8 @@ export const chatStyles = createStyleSheet({
 
     createPollButton: {
         padding: 8,
-        margin: BaseTheme.spacing[2]
+        marginHorizontal: BaseTheme.spacing[2],
+        marginVertical: BaseTheme.spacing[4]
     },
 
     PollPane: {