Browse Source

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

master
Calin Chitu 3 years ago
parent
commit
79e648867d

+ 0
- 29
package-lock.json View File

50
         "@react-navigation/material-top-tabs": "6.0.6",
50
         "@react-navigation/material-top-tabs": "6.0.6",
51
         "@react-navigation/native": "6.0.6",
51
         "@react-navigation/native": "6.0.6",
52
         "@react-navigation/native-stack": "6.6.2",
52
         "@react-navigation/native-stack": "6.6.2",
53
-        "@react-navigation/stack": "6.0.11",
54
         "@svgr/webpack": "4.3.2",
53
         "@svgr/webpack": "4.3.2",
55
         "@tensorflow/tfjs-backend-wasm": "3.13.0",
54
         "@tensorflow/tfjs-backend-wasm": "3.13.0",
56
         "@tensorflow/tfjs-core": "3.13.0",
55
         "@tensorflow/tfjs-core": "3.13.0",
5057
         "nanoid": "^3.1.23"
5056
         "nanoid": "^3.1.23"
5058
       }
5057
       }
5059
     },
5058
     },
5060
-    "node_modules/@react-navigation/stack": {
5061
-      "version": "6.0.11",
5062
-      "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.0.11.tgz",
5063
-      "integrity": "sha512-Osc2mXi0Zh/u92HRCceDqVfVnypTa2sZgYMJDU+vDhHz38negtbCG+cjje6nApSjwC5WTVhYP4OoD5WBSh51+g==",
5064
-      "dependencies": {
5065
-        "@react-navigation/elements": "^1.2.1",
5066
-        "color": "^3.1.3",
5067
-        "warn-once": "^0.1.0"
5068
-      },
5069
-      "peerDependencies": {
5070
-        "@react-navigation/native": "^6.0.0",
5071
-        "react": "*",
5072
-        "react-native": "*",
5073
-        "react-native-gesture-handler": ">= 1.0.0",
5074
-        "react-native-safe-area-context": ">= 3.0.0",
5075
-        "react-native-screens": ">= 3.0.0"
5076
-      }
5077
-    },
5078
     "node_modules/@sideway/address": {
5059
     "node_modules/@sideway/address": {
5079
       "version": "4.1.4",
5060
       "version": "4.1.4",
5080
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
5061
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
23765
         "nanoid": "^3.1.23"
23746
         "nanoid": "^3.1.23"
23766
       }
23747
       }
23767
     },
23748
     },
23768
-    "@react-navigation/stack": {
23769
-      "version": "6.0.11",
23770
-      "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-6.0.11.tgz",
23771
-      "integrity": "sha512-Osc2mXi0Zh/u92HRCceDqVfVnypTa2sZgYMJDU+vDhHz38negtbCG+cjje6nApSjwC5WTVhYP4OoD5WBSh51+g==",
23772
-      "requires": {
23773
-        "@react-navigation/elements": "^1.2.1",
23774
-        "color": "^3.1.3",
23775
-        "warn-once": "^0.1.0"
23776
-      }
23777
-    },
23778
     "@sideway/address": {
23749
     "@sideway/address": {
23779
       "version": "4.1.4",
23750
       "version": "4.1.4",
23780
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
23751
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",

+ 0
- 1
package.json View File

55
     "@react-navigation/material-top-tabs": "6.0.6",
55
     "@react-navigation/material-top-tabs": "6.0.6",
56
     "@react-navigation/native": "6.0.6",
56
     "@react-navigation/native": "6.0.6",
57
     "@react-navigation/native-stack": "6.6.2",
57
     "@react-navigation/native-stack": "6.6.2",
58
-    "@react-navigation/stack": "6.0.11",
59
     "@svgr/webpack": "4.3.2",
58
     "@svgr/webpack": "4.3.2",
60
     "@tensorflow/tfjs-backend-wasm": "3.13.0",
59
     "@tensorflow/tfjs-backend-wasm": "3.13.0",
61
     "@tensorflow/tfjs-core": "3.13.0",
60
     "@tensorflow/tfjs-core": "3.13.0",

+ 2
- 8
react/features/conference/components/native/styles.js View File

36
         margin: 10
36
         margin: 10
37
     },
37
     },
38
 
38
 
39
-    headerNavigationIcon: {
40
-        marginLeft: 14
41
-    },
42
-
43
     headerNavigationButton: {
39
     headerNavigationButton: {
44
         height: BaseTheme.spacing[6],
40
         height: BaseTheme.spacing[6],
45
         marginTop: 20,
41
         marginTop: 20,
48
 
44
 
49
     headerNavigationText: {
45
     headerNavigationText: {
50
         color: BaseTheme.palette.text01,
46
         color: BaseTheme.palette.text01,
51
-        fontSize: HEADER_ACTION_BUTTON_SIZE,
52
-        marginHorizontal: BaseTheme.spacing[3]
47
+        fontSize: HEADER_ACTION_BUTTON_SIZE
53
     },
48
     },
54
 
49
 
55
     headerNavigationTextBold: {
50
     headerNavigationTextBold: {
56
         ...BaseTheme.typography.labelButton,
51
         ...BaseTheme.typography.labelButton,
57
         color: BaseTheme.palette.text01,
52
         color: BaseTheme.palette.text01,
58
-        fontSize: HEADER_ACTION_BUTTON_SIZE,
59
-        marginHorizontal: BaseTheme.spacing[3]
53
+        fontSize: HEADER_ACTION_BUTTON_SIZE
60
     },
54
     },
61
 
55
 
62
     /**
56
     /**

+ 6
- 7
react/features/mobile/navigation/components/HeaderNavigationButton.js View File

1
 // @flow
1
 // @flow
2
 
2
 
3
 import React from 'react';
3
 import React from 'react';
4
-import { TouchableOpacity } from 'react-native-gesture-handler';
5
 import { Text, TouchableRipple } from 'react-native-paper';
4
 import { Text, TouchableRipple } from 'react-native-paper';
6
 
5
 
7
 import { Icon } from '../../../base/icons';
6
 import { Icon } from '../../../base/icons';
48
             <>
47
             <>
49
                 {
48
                 {
50
                     src ? (
49
                     src ? (
51
-                        <TouchableOpacity
50
+                        <TouchableRipple
52
                             onPress = { onPress }
51
                             onPress = { onPress }
53
-                            style = { styles.headerNavigationButton }>
52
+                            rippleColor = { BaseTheme.palette.screen02Header }
53
+                            style = { styles.headerNavigationButton } >
54
                             <Icon
54
                             <Icon
55
-                                size = { 20 }
56
-                                src = { src }
57
-                                style = { styles.headerNavigationIcon } />
58
-                        </TouchableOpacity>
55
+                                size = { 24 }
56
+                                src = { src } />
57
+                        </TouchableRipple>
59
                     ) : (
58
                     ) : (
60
                         <TouchableRipple
59
                         <TouchableRipple
61
                             disabled = { disabled }
60
                             disabled = { disabled }

+ 9
- 25
react/features/mobile/navigation/screenOptions.js View File

1
-import { TransitionPresets } from '@react-navigation/stack';
2
 import React from 'react';
1
 import React from 'react';
3
-import { Platform } from 'react-native';
4
 
2
 
5
 import {
3
 import {
6
     Icon,
4
     Icon,
25
     }
23
     }
26
 };
24
 };
27
 
25
 
28
-/**
29
- * Default modal transition for the current platform.
30
- */
31
-export const conferenceModalPresentation = Platform.select({
32
-    ios: TransitionPresets.ModalPresentationIOS,
33
-    default: TransitionPresets.DefaultTransition
34
-});
35
-
36
-/**
37
- * Screen options and transition types.
38
- */
39
-export const fullScreenOptions = {
40
-    ...TransitionPresets.ModalTransition,
41
-    gestureEnabled: false,
42
-    headerShown: false
43
-};
44
-
45
-
46
 /**
26
 /**
47
  * Drawer navigator screens options and transition types.
27
  * Drawer navigator screens options and transition types.
48
  */
28
  */
49
 export const drawerNavigatorScreenOptions = {
29
 export const drawerNavigatorScreenOptions = {
50
-    ...TransitionPresets.ModalTransition,
30
+    animation: 'default',
51
     gestureEnabled: true,
31
     gestureEnabled: true,
52
     headerShown: false
32
     headerShown: false
53
 };
33
 };
57
  * Drawer screen options and transition types.
37
  * Drawer screen options and transition types.
58
  */
38
  */
59
 export const drawerScreenOptions = {
39
 export const drawerScreenOptions = {
60
-    ...TransitionPresets.ModalTransition,
40
+    animation: 'default',
61
     gestureEnabled: true,
41
     gestureEnabled: true,
62
     headerShown: true,
42
     headerShown: true,
63
     headerStyle: {
43
     headerStyle: {
151
 /**
131
 /**
152
  * Screen options for conference.
132
  * Screen options for conference.
153
  */
133
  */
154
-export const conferenceScreenOptions = fullScreenOptions;
134
+export const conferenceScreenOptions = {
135
+    animation: 'default',
136
+    gestureEnabled: false,
137
+    headerShown: false
138
+};
155
 
139
 
156
 /**
140
 /**
157
  * Tab bar options for chat screen.
141
  * Tab bar options for chat screen.
171
  * Screen options for presentation type modals.
155
  * Screen options for presentation type modals.
172
  */
156
  */
173
 export const presentationScreenOptions = {
157
 export const presentationScreenOptions = {
174
-    ...conferenceModalPresentation,
158
+    animation: 'slide_from_right',
175
     headerBackTitleVisible: false,
159
     headerBackTitleVisible: false,
176
     headerLeft: () => screenHeaderCloseButton(goBack),
160
     headerLeft: () => screenHeaderCloseButton(goBack),
177
     headerStatusBarHeight: 0,
161
     headerStatusBarHeight: 0,
258
  * Screen options for shared document.
242
  * Screen options for shared document.
259
  */
243
  */
260
 export const sharedDocumentScreenOptions = {
244
 export const sharedDocumentScreenOptions = {
261
-    ...TransitionPresets.DefaultTransition,
245
+    animation: 'default',
262
     headerBackTitleVisible: false,
246
     headerBackTitleVisible: false,
263
     headerShown: true,
247
     headerShown: true,
264
     headerStyle: {
248
     headerStyle: {

Loading…
Cancel
Save