feat(base/modal): addBottomPadding default prop for extra padding on JitsiScreen

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

@@ -1,7 +1,5 @@
-// @flow
-
 import { useHeaderHeight } from '@react-navigation/elements';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { ReactElement, useCallback, useEffect, useState } from 'react';
 import {
     Keyboard,
     KeyboardAvoidingView,
@@ -14,10 +12,15 @@ import { StyleType } from '../../styles';
 
 type Props = {
 
+    /**
+     * Adds bottom padding.
+     */
+    addBottomPadding?: boolean,
+
     /**
      * The children component(s) of the Modal, to be rendered.
      */
-    children: React$Node,
+    children: ReactElement,
 
     /**
      * Additional style to be appended to the KeyboardAvoidingView content container.
@@ -47,6 +50,7 @@ type Props = {
 
 const JitsiKeyboardAvoidingView = (
         {
+            addBottomPadding = true,
             children,
             contentContainerStyle,
             hasTabNavigator,
@@ -67,7 +71,9 @@ const JitsiKeyboardAvoidingView = (
 
     const tabNavigatorPadding
         = hasTabNavigator ? headerHeight : 0;
-    const noNotchDevicePadding = bottomPadding || 10;
+    const extraBottomPadding
+        = addBottomPadding ? bottomPadding : 0;
+    const noNotchDevicePadding = extraBottomPadding || 10;
     const iosVerticalOffset
         = headerHeight + noNotchDevicePadding + tabNavigatorPadding;
     const androidVerticalOffset = hasBottomTextInput

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

@@ -1,4 +1,3 @@
-
 import React from 'react';
 import { View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
@@ -11,6 +10,11 @@ import styles from './styles';
 
 type Props = {
 
+    /**
+     * Adds bottom padding.
+     */
+    addBottomPadding: boolean,
+
     /**
      * Additional style to be appended to the KeyboardAvoidingView content container.
      */
@@ -53,6 +57,7 @@ type Props = {
 }
 
 const JitsiScreen = ({
+    addBottomPadding,
     contentContainerStyle,
     children,
     footerComponent,
@@ -64,6 +69,7 @@ const JitsiScreen = ({
 }: Props) => {
     const renderContent = () => (
         <JitsiKeyboardAvoidingView
+            addBottomPadding = { addBottomPadding }
             contentContainerStyle = { contentContainerStyle }
             disableForcedKeyboardDismiss = { disableForcedKeyboardDismiss }
             hasBottomTextInput = { hasBottomTextInput }

react/features/base/ui/components/native/Button.tsx

@@ -1,3 +1,4 @@
+// @ts-ignore
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import {

react/features/prejoin/components/native/Prejoin.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable lines-around-comment  */
 
 import { useIsFocused } from '@react-navigation/native';
+// @ts-ignore
 import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -139,9 +140,9 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
         toolboxContainerStyles = styles.toolboxContainerWide;
     }
 
-
     return (
         <JitsiScreen
+            addBottomPadding = { false }
             safeAreaInsets = { [ 'left' ] }
             style = { contentWrapperStyles }>
             <BrandingImageBackground />
@@ -161,8 +162,10 @@ const Prejoin: React.FC<IPrejoinProps> = ({ navigation }: IPrejoinProps) => {
             <View style = { contentContainerStyles }>
                 <View style = { toolboxContainerStyles }>
                     <AudioMuteButton
+                        // @ts-ignore
                         styles = { styles.buttonStylesBorderless } />
                     <VideoMuteButton
+                        // @ts-ignore
                         styles = { styles.buttonStylesBorderless } />
                 </View>
                 <View style = { styles.formWrapper as StyleProp<ViewStyle> }>