feat(conference/native): created CarModeFooter

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
 import { withSafeAreaInsets } from 'react-native-safe-area-context';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -12,18 +12,17 @@ import { setIsCarmode } from '../../../../video-layout/actions';
 import ConferenceTimer from '../../ConferenceTimer';
 import { isConnecting } from '../../functions';
 
-import EndMeetingButton from './EndMeetingButton';
+import CarModeFooter from './CarModeFooter';
 import MicrophoneButton from './MicrophoneButton';
-import SoundDeviceButton from './SoundDeviceButton';
 import TitleBar from './TitleBar';
 import styles from './styles';
 
 /**
- * Implements the carmode tab.
+ * Implements the carmode component.
  *
- * @returns { JSX.Element} - The carmode tab.
+ * @returns { JSX.Element} - The carmode component.
  */
-const CarmodeTab = (): JSX.Element => {
+const CarMode = (): JSX.Element => {
     const dispatch = useDispatch();
     const { t } = useTranslation();
     const connecting = useSelector(isConnecting);
@@ -42,7 +41,9 @@ const CarmodeTab = (): JSX.Element => {
     }, []);
 
     return (
-        <JitsiScreen style = { styles.conference }>
+        <JitsiScreen
+            footerComponent = { CarModeFooter }
+            style = { styles.conference }>
             {/*
                   * The activity/loading indicator goes above everything, except
                   * the toolbox/toolbars and the dialogs.
@@ -66,17 +67,8 @@ const CarmodeTab = (): JSX.Element => {
                 style = { styles.microphoneContainer }>
                 <MicrophoneButton />
             </View>
-            <View
-                pointerEvents = 'box-none'
-                style = { styles.bottomContainer }>
-                <Text style = { styles.videoStoppedLabel }>
-                    {t('carmode.labels.videoStopped')}
-                </Text>
-                <SoundDeviceButton />
-                <EndMeetingButton />
-            </View>
         </JitsiScreen>
     );
 };
 
-export default withSafeAreaInsets(CarmodeTab);
+export default withSafeAreaInsets(CarMode);

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Text, View } from 'react-native';
+
+import EndMeetingButton from './EndMeetingButton';
+import SoundDeviceButton from './SoundDeviceButton';
+import styles from './styles';
+
+/**
+ * Implements the carmode footer component.
+ *
+ * @returns { JSX.Element} - The carmode footer component.
+ */
+const CarModeFooter = (): JSX.Element => {
+    const { t } = useTranslation();
+
+    return (
+        <View
+            pointerEvents = 'box-none'
+            style = { styles.bottomContainer }>
+            <Text style = { styles.videoStoppedLabel }>
+                {t('carmode.labels.videoStopped')}
+            </Text>
+            <SoundDeviceButton />
+            <EndMeetingButton />
+        </View>
+    );
+};
+
+export default CarModeFooter;

react/features/mobile/navigation/components/conference/components/ConferenceNavigationContainer.tsx

@@ -7,7 +7,7 @@ import { useSelector } from 'react-redux';
 import { Chat, ChatAndPolls } from '../../../../../chat';
 
 import Conference from '../../../../../conference/components/native/Conference';
-import CarmodeTab from '../../../../../conference/components/native/carmode/Conference';
+import CarMode from '../../../../../conference/components/native/carmode/CarMode';
 import { getDisablePolls } from '../../../../../conference/functions';
 import { SharedDocument } from '../../../../../etherpad';
 import { GifsMenu } from '../../../../../gifs/components';
@@ -147,7 +147,7 @@ const ConferenceNavigationContainer = () => {
                         title: t('documentSharing.title')
                     }} />
                 <ConferenceStack.Screen
-                    component = { CarmodeTab }
+                    component = { CarMode }
                     name = { screen.conference.carmode }
                     options = {{
                         ...carmodeScreenOptions,