feat(mobile/navigation) - removed stack dependency and updated animation options

package-lock.json

@@ -50,7 +50,6 @@
         "@react-navigation/material-top-tabs": "6.0.6",
         "@react-navigation/native": "6.0.6",
         "@react-navigation/native-stack": "6.6.2",
-        "@react-navigation/stack": "6.0.11",
         "@svgr/webpack": "4.3.2",
         "@tensorflow/tfjs-backend-wasm": "3.13.0",
         "@tensorflow/tfjs-core": "3.13.0",
@@ -5057,24 +5056,6 @@
         "nanoid": "^3.1.23"
       }
     },
-    "node_modules/@react-navigation/stack": {
-      "version": "6.0.11",
-      "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.0.11.tgz",
-      "integrity": "sha512-Osc2mXi0Zh/u92HRCceDqVfVnypTa2sZgYMJDU+vDhHz38negtbCG+cjje6nApSjwC5WTVhYP4OoD5WBSh51+g==",
-      "dependencies": {
-        "@react-navigation/elements": "^1.2.1",
-        "color": "^3.1.3",
-        "warn-once": "^0.1.0"
-      },
-      "peerDependencies": {
-        "@react-navigation/native": "^6.0.0",
-        "react": "*",
-        "react-native": "*",
-        "react-native-gesture-handler": ">= 1.0.0",
-        "react-native-safe-area-context": ">= 3.0.0",
-        "react-native-screens": ">= 3.0.0"
-      }
-    },
     "node_modules/@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -23765,16 +23746,6 @@
         "nanoid": "^3.1.23"
       }
     },
-    "@react-navigation/stack": {
-      "version": "6.0.11",
-      "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.0.11.tgz",
-      "integrity": "sha512-Osc2mXi0Zh/u92HRCceDqVfVnypTa2sZgYMJDU+vDhHz38negtbCG+cjje6nApSjwC5WTVhYP4OoD5WBSh51+g==",
-      "requires": {
-        "@react-navigation/elements": "^1.2.1",
-        "color": "^3.1.3",
-        "warn-once": "^0.1.0"
-      }
-    },
     "@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",

package.json

@@ -55,7 +55,6 @@
     "@react-navigation/material-top-tabs": "6.0.6",
     "@react-navigation/native": "6.0.6",
     "@react-navigation/native-stack": "6.6.2",
-    "@react-navigation/stack": "6.0.11",
     "@svgr/webpack": "4.3.2",
     "@tensorflow/tfjs-backend-wasm": "3.13.0",
     "@tensorflow/tfjs-core": "3.13.0",

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

@@ -36,10 +36,6 @@ export default {
         margin: 10
     },
 
-    headerNavigationIcon: {
-        marginLeft: 14
-    },
-
     headerNavigationButton: {
         height: BaseTheme.spacing[6],
         marginTop: 20,
@@ -48,15 +44,13 @@ export default {
 
     headerNavigationText: {
         color: BaseTheme.palette.text01,
-        fontSize: HEADER_ACTION_BUTTON_SIZE,
-        marginHorizontal: BaseTheme.spacing[3]
+        fontSize: HEADER_ACTION_BUTTON_SIZE
     },
 
     headerNavigationTextBold: {
         ...BaseTheme.typography.labelButton,
         color: BaseTheme.palette.text01,
-        fontSize: HEADER_ACTION_BUTTON_SIZE,
-        marginHorizontal: BaseTheme.spacing[3]
+        fontSize: HEADER_ACTION_BUTTON_SIZE
     },
 
     /**

react/features/mobile/navigation/components/HeaderNavigationButton.js

@@ -1,7 +1,6 @@
 // @flow
 
 import React from 'react';
-import { TouchableOpacity } from 'react-native-gesture-handler';
 import { Text, TouchableRipple } from 'react-native-paper';
 
 import { Icon } from '../../../base/icons';
@@ -48,14 +47,14 @@ const HeaderNavigationButton
             <>
                 {
                     src ? (
-                        <TouchableOpacity
+                        <TouchableRipple
                             onPress = { onPress }
-                            style = { styles.headerNavigationButton }>
+                            rippleColor = { BaseTheme.palette.screen02Header }
+                            style = { styles.headerNavigationButton } >
                             <Icon
-                                size = { 20 }
-                                src = { src }
-                                style = { styles.headerNavigationIcon } />
-                        </TouchableOpacity>
+                                size = { 24 }
+                                src = { src } />
+                        </TouchableRipple>
                     ) : (
                         <TouchableRipple
                             disabled = { disabled }

react/features/mobile/navigation/screenOptions.js

@@ -1,6 +1,4 @@
-import { TransitionPresets } from '@react-navigation/stack';
 import React from 'react';
-import { Platform } from 'react-native';
 
 import {
     Icon,
@@ -25,29 +23,11 @@ export const navigationContainerTheme = {
     }
 };
 
-/**
- * Default modal transition for the current platform.
- */
-export const conferenceModalPresentation = Platform.select({
-    ios: TransitionPresets.ModalPresentationIOS,
-    default: TransitionPresets.DefaultTransition
-});
-
-/**
- * Screen options and transition types.
- */
-export const fullScreenOptions = {
-    ...TransitionPresets.ModalTransition,
-    gestureEnabled: false,
-    headerShown: false
-};
-
-
 /**
  * Drawer navigator screens options and transition types.
  */
 export const drawerNavigatorScreenOptions = {
-    ...TransitionPresets.ModalTransition,
+    animation: 'default',
     gestureEnabled: true,
     headerShown: false
 };
@@ -57,7 +37,7 @@ export const drawerNavigatorScreenOptions = {
  * Drawer screen options and transition types.
  */
 export const drawerScreenOptions = {
-    ...TransitionPresets.ModalTransition,
+    animation: 'default',
     gestureEnabled: true,
     headerShown: true,
     headerStyle: {
@@ -151,7 +131,11 @@ export const helpScreenOptions = {
 /**
  * Screen options for conference.
  */
-export const conferenceScreenOptions = fullScreenOptions;
+export const conferenceScreenOptions = {
+    animation: 'default',
+    gestureEnabled: false,
+    headerShown: false
+};
 
 /**
  * Tab bar options for chat screen.
@@ -171,7 +155,7 @@ export const chatTabBarOptions = {
  * Screen options for presentation type modals.
  */
 export const presentationScreenOptions = {
-    ...conferenceModalPresentation,
+    animation: 'slide_from_right',
     headerBackTitleVisible: false,
     headerLeft: () => screenHeaderCloseButton(goBack),
     headerStatusBarHeight: 0,
@@ -258,7 +242,7 @@ export const gifsMenuOptions = presentationScreenOptions;
  * Screen options for shared document.
  */
 export const sharedDocumentScreenOptions = {
-    ...TransitionPresets.DefaultTransition,
+    animation: 'default',
     headerBackTitleVisible: false,
     headerShown: true,
     headerStyle: {