diff --git a/react/features/participants-pane/components/breakout-rooms/components/native/AddBreakoutRoomButton.js b/react/features/participants-pane/components/breakout-rooms/components/native/AddBreakoutRoomButton.tsx
similarity index 78%
rename from react/features/participants-pane/components/breakout-rooms/components/native/AddBreakoutRoomButton.js
rename to react/features/participants-pane/components/breakout-rooms/components/native/AddBreakoutRoomButton.tsx
index 08aae46a7..b89e4fe2d 100644
--- a/react/features/participants-pane/components/breakout-rooms/components/native/AddBreakoutRoomButton.js
+++ b/react/features/participants-pane/components/breakout-rooms/components/native/AddBreakoutRoomButton.tsx
@@ -1,14 +1,20 @@
-// @flow
-
+/* eslint-disable lines-around-comment */
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
 import Button from '../../../../../base/ui/components/native/Button';
 import { BUTTON_TYPES } from '../../../../../base/ui/constants';
+// @ts-ignore
 import { createBreakoutRoom } from '../../../../../breakout-rooms/actions';
 
+// @ts-ignore
 import styles from './styles';
 
+/**
+ * Button to add a breakout room.
+ *
+ * @returns {JSX.Element} - The add breakout room button.
+ */
 const AddBreakoutRoomButton = () => {
     const dispatch = useDispatch();
 
@@ -21,7 +27,7 @@ const AddBreakoutRoomButton = () => {
             accessibilityLabel = 'breakoutRooms.actions.add'
             label = 'breakoutRooms.actions.add'
             onPress = { onAdd }
-            style = { styles.addButton }
+            style = { styles.button }
             type = { BUTTON_TYPES.SECONDARY } />
     );
 };
diff --git a/react/features/participants-pane/components/breakout-rooms/components/native/AutoAssignButton.js b/react/features/participants-pane/components/breakout-rooms/components/native/AutoAssignButton.tsx
similarity index 82%
rename from react/features/participants-pane/components/breakout-rooms/components/native/AutoAssignButton.js
rename to react/features/participants-pane/components/breakout-rooms/components/native/AutoAssignButton.tsx
index f25231af0..23cef447b 100644
--- a/react/features/participants-pane/components/breakout-rooms/components/native/AutoAssignButton.js
+++ b/react/features/participants-pane/components/breakout-rooms/components/native/AutoAssignButton.tsx
@@ -1,15 +1,20 @@
-// @flow
-
+/* eslint-disable lines-around-comment */
 import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
 import Button from '../../../../../base/ui/components/native/Button';
 import { BUTTON_TYPES } from '../../../../../base/ui/constants';
+// @ts-ignore
 import { autoAssignToBreakoutRooms } from '../../../../../breakout-rooms/actions';
 
+// @ts-ignore
 import styles from './styles';
 
-
+/**
+ * Button to auto assign participants to breakout rooms.
+ *
+ * @returns {JSX.Element} - The auto assign button.
+ */
 const AutoAssignButton = () => {
     const dispatch = useDispatch();
 
diff --git a/react/features/participants-pane/components/breakout-rooms/components/native/LeaveBreakoutRoomButton.js b/react/features/participants-pane/components/breakout-rooms/components/native/LeaveBreakoutRoomButton.tsx
similarity index 53%
rename from react/features/participants-pane/components/breakout-rooms/components/native/LeaveBreakoutRoomButton.js
rename to react/features/participants-pane/components/breakout-rooms/components/native/LeaveBreakoutRoomButton.tsx
index 5dca1fce3..4af8d4859 100644
--- a/react/features/participants-pane/components/breakout-rooms/components/native/LeaveBreakoutRoomButton.js
+++ b/react/features/participants-pane/components/breakout-rooms/components/native/LeaveBreakoutRoomButton.tsx
@@ -1,17 +1,23 @@
-// @flow
-
+/* eslint-disable lines-around-comment */
 import React, { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Button } from 'react-native-paper';
 import { useDispatch } from 'react-redux';
 
+// @ts-ignore
 import { createBreakoutRoomsEvent, sendAnalytics } from '../../../../../analytics';
+import Button from '../../../../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../../../../base/ui/constants';
+// @ts-ignore
 import { moveToRoom } from '../../../../../breakout-rooms/actions';
 
+// @ts-ignore
 import styles from './styles';
 
+/**
+ * Button to leave a breakout rooms.
+ *
+ * @returns {JSX.Element} - The leave breakout room button.
+ */
 const LeaveBreakoutRoomButton = () => {
-    const { t } = useTranslation();
     const dispatch = useDispatch();
 
     const onLeave = useCallback(() => {
@@ -22,12 +28,11 @@ const LeaveBreakoutRoomButton = () => {
 
     return (
         <Button
-            accessibilityLabel = { t('breakoutRooms.actions.leaveBreakoutRoom') }
-            children = { t('breakoutRooms.actions.leaveBreakoutRoom') }
-            labelStyle = { styles.leaveButtonLabel }
-            mode = 'contained'
+            accessibilityLabel = 'breakoutRooms.actions.leaveBreakoutRoom'
+            label = 'breakoutRooms.actions.leaveBreakoutRoom'
             onPress = { onLeave }
-            style = { styles.transparentButton } />
+            style = { styles.button }
+            type = { BUTTON_TYPES.DESTRUCTIVE } />
     );
 };
 
diff --git a/react/features/participants-pane/components/breakout-rooms/components/native/styles.js b/react/features/participants-pane/components/breakout-rooms/components/native/styles.js
index fef2e64c5..c9ca04722 100644
--- a/react/features/participants-pane/components/breakout-rooms/components/native/styles.js
+++ b/react/features/participants-pane/components/breakout-rooms/components/native/styles.js
@@ -8,18 +8,12 @@ const baseButton = {
     marginRight: BaseTheme.spacing[3]
 };
 
-const baseLabel = {
-    fontSize: 15,
-    lineHeight: 30,
-    textTransform: 'capitalize'
-};
-
 /**
  * The styles of the native components of the feature {@code breakout rooms}.
  */
 export default {
 
-    addButton: {
+    button: {
         marginTop: BaseTheme.spacing[3],
         marginLeft: BaseTheme.spacing[3],
         marginRight: BaseTheme.spacing[3]
@@ -66,11 +60,6 @@ export default {
         marginLeft: BaseTheme.spacing[2]
     },
 
-    leaveButtonLabel: {
-        ...baseLabel,
-        color: BaseTheme.palette.textError
-    },
-
     autoAssignLabel: {
         color: BaseTheme.palette.link01
     },