feat(base/modal): changed hasTabNavigator to hasExtraHeaderHeight (#14033)

* feat(base/modal): changed hasTabNavigator to hasExtraHeaderHeight

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

@@ -4,7 +4,8 @@ import {
     Keyboard,
     KeyboardAvoidingView,
     Platform,
-    StatusBar
+    StatusBar,
+    ViewStyle
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -38,9 +39,9 @@ interface IProps {
     hasBottomTextInput: boolean;
 
     /**
-     * Is the screen rendering a tab navigator?
+     * Is the screen header having an extra height?
      */
-    hasTabNavigator: boolean;
+    hasExtraHeaderHeight?: boolean;
 
     /**
      * Additional style to be appended to the KeyboardAvoidingView.
@@ -54,8 +55,8 @@ const JitsiKeyboardAvoidingView = (
             children,
             contentContainerStyle,
             disableForcedKeyboardDismiss,
-            hasTabNavigator,
             hasBottomTextInput,
+            hasExtraHeaderHeight,
             style
         }: IProps) => {
     const headerHeight = useHeaderHeight();
@@ -69,13 +70,13 @@ const JitsiKeyboardAvoidingView = (
     }, [ insets.bottom ]);
 
 
-    const tabNavigatorPadding
-        = hasTabNavigator ? headerHeight : 0;
+    const extraHeaderHeight
+        = hasExtraHeaderHeight ? headerHeight : 0;
     const extraBottomPadding
         = addBottomPadding ? bottomPadding : 0;
     const noNotchDevicePadding = extraBottomPadding || 10;
     const iosVerticalOffset
-        = headerHeight + noNotchDevicePadding + tabNavigatorPadding;
+        = headerHeight + noNotchDevicePadding + extraHeaderHeight;
     const androidVerticalOffset = hasBottomTextInput
         ? headerHeight + Number(StatusBar.currentHeight) : headerHeight;
 
@@ -86,7 +87,7 @@ const JitsiKeyboardAvoidingView = (
     return (
         <KeyboardAvoidingView
             behavior = { Platform.OS === 'ios' ? 'padding' : 'height' }
-            contentContainerStyle = { contentContainerStyle }
+            contentContainerStyle = { contentContainerStyle as ViewStyle }
             enabled = { true }
             keyboardVerticalOffset = {
                 Platform.OS === 'ios'
@@ -95,7 +96,7 @@ const JitsiKeyboardAvoidingView = (
             }
             onResponderRelease = { onRelease }
             onStartShouldSetResponder = { shouldSetResponse }
-            style = { style }>
+            style = { style as ViewStyle }>
             { children }
         </KeyboardAvoidingView>
     );

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

@@ -40,9 +40,9 @@ interface IProps {
     hasBottomTextInput?: boolean;
 
     /**
-     * Is the screen rendering a tab navigator?
+     * Is the screen header having an extra height?
      */
-    hasTabNavigator?: boolean;
+    hasExtraHeaderHeight?: boolean;
 
     /**
      * Insets for the SafeAreaView.
@@ -61,8 +61,8 @@ const JitsiScreen = ({
     children,
     disableForcedKeyboardDismiss = false,
     footerComponent,
-    hasTabNavigator = false,
     hasBottomTextInput = false,
+    hasExtraHeaderHeight = false,
     safeAreaInsets = [ 'left', 'right' ],
     style
 }: IProps) => {
@@ -72,7 +72,7 @@ const JitsiScreen = ({
             contentContainerStyle = { contentContainerStyle }
             disableForcedKeyboardDismiss = { disableForcedKeyboardDismiss }
             hasBottomTextInput = { hasBottomTextInput }
-            hasTabNavigator = { hasTabNavigator }
+            hasExtraHeaderHeight = { hasExtraHeaderHeight }
             style = { style }>
             <SafeAreaView
                 edges = { safeAreaInsets }

react/features/chat/components/native/Chat.tsx

@@ -65,7 +65,7 @@ class Chat extends Component<IProps> {
                     <ChatInputBar onSend = { this._onSendMessage } />
                 }
                 hasBottomTextInput = { true }
-                hasTabNavigator = { true }
+                hasExtraHeaderHeight = { true }
                 style = { styles.chatContainer }>
                 {/* @ts-ignore */}
                 <MessageContainer messages = { _messages } />

react/features/lobby/components/native/LobbyChatScreen.tsx

@@ -29,7 +29,10 @@ class LobbyChatScreen extends
         const { _lobbyChatMessages } = this.props;
 
         return (
-            <JitsiScreen style = { styles.lobbyChatWrapper }>
+            <JitsiScreen
+                hasBottomTextInput = { true }
+                hasExtraHeaderHeight = { true }
+                style = { styles.lobbyChatWrapper }>
                 {/* @ts-ignore */}
                 <MessageContainer messages = { _lobbyChatMessages } />
                 <ChatInputBar onSend = { this._onSendMessage } />

react/features/lobby/components/native/styles.ts

@@ -4,10 +4,7 @@ export default {
 
     lobbyChatWrapper: {
         backgroundColor: BaseTheme.palette.ui01,
-        alignItems: 'stretch',
-        flexDirection: 'column',
-        justifyItems: 'center',
-        height: '100%'
+        flex: 1
     },
 
     passwordJoinButtons: {

react/features/polls/components/native/PollsPane.tsx

@@ -48,7 +48,7 @@ const PollsPane = (props: AbstractProps) => {
         <JitsiScreen
             contentContainerStyle = { chatStyles.pollPane as StyleType }
             disableForcedKeyboardDismiss = { true }
-            hasTabNavigator = { true }
+            hasExtraHeaderHeight = { true }
             style = { chatStyles.pollPaneContainer as StyleType }>
             {
                 createMode