Browse Source

Add slide animation to playground app

Guy Carmeli 4 years ago
parent
commit
69c225f746
3 changed files with 46 additions and 10 deletions
  1. 0
    5
      playground/src/app.js
  2. 44
    4
      playground/src/commons/Options.js
  3. 2
    1
      playground/src/flags.js

+ 0
- 5
playground/src/app.js View File

23
   Navigation.events().registerAppLaunchedListener(async () => {
23
   Navigation.events().registerAppLaunchedListener(async () => {
24
     setDefaultOptions();
24
     setDefaultOptions();
25
     setRoot();
25
     setRoot();
26
-    // showSETModal();
27
   });
26
   });
28
 }
27
 }
29
 
28
 
92
   });
91
   });
93
 }
92
 }
94
 
93
 
95
-function showSETModal() {
96
-  Navigation.showModal(Screens.CocktailsListScreen);
97
-}
98
-
99
 module.exports = {
94
 module.exports = {
100
   start
95
   start
101
 };
96
 };

+ 44
- 4
playground/src/commons/Options.js View File

1
 const { Navigation } = require('react-native-navigation');
1
 const { Navigation } = require('react-native-navigation');
2
 const Colors = require('./Colors');
2
 const Colors = require('./Colors');
3
-const { Dimensions, PixelRatio } = require('react-native');
3
+const { Dimensions } = require('react-native');
4
 const height = Math.round(Dimensions.get('window').height) * 0.7;
4
 const height = Math.round(Dimensions.get('window').height) * 0.7;
5
-const { useSlowOpenScreenAnimations } = require('../flags');
6
-const SHOW_DURATION = 230 * 8;
5
+const width = Math.round(Dimensions.get('window').width);
6
+const {
7
+  useSlowOpenScreenAnimations,
8
+  useSlideAnimation: useSlideAnimation
9
+} = require('../flags');
10
+const SHOW_DURATION = 230 * 3;
7
 
11
 
8
 const setDefaultOptions = () => Navigation.setDefaultOptions({
12
 const setDefaultOptions = () => Navigation.setDefaultOptions({
9
   layout: {
13
   layout: {
19
     selectedTextColor: Colors.primary
23
     selectedTextColor: Colors.primary
20
   },
24
   },
21
   animations: {
25
   animations: {
22
-    ...useSlowOpenScreenAnimations ? slowOpenScreenAnimations : {}   
26
+    ...useSlideAnimation ?
27
+        slideAnimations :
28
+        useSlowOpenScreenAnimations ?
29
+          slowOpenScreenAnimations :
30
+          {}
23
   },
31
   },
24
   modalPresentationStyle: 'fullScreen'
32
   modalPresentationStyle: 'fullScreen'
25
 });
33
 });
26
 
34
 
35
+const slideAnimations = {
36
+  push: {
37
+    waitForRender: true,
38
+    content: {
39
+      translationX: {
40
+        from: width,
41
+        to: 0,
42
+        duration: useSlowOpenScreenAnimations ? SHOW_DURATION : 300
43
+      },
44
+      alpha: {
45
+        from: 0.7,
46
+        to: 1,
47
+        duration: useSlowOpenScreenAnimations ? SHOW_DURATION : 300
48
+      }
49
+    }
50
+  },
51
+  pop: {
52
+    content: {
53
+      translationX: {
54
+        from: 0,
55
+        to: width,
56
+        duration: useSlowOpenScreenAnimations ? SHOW_DURATION : 300
57
+      },
58
+      alpha: {
59
+        from: 1,
60
+        to: 0.3,
61
+        duration: useSlowOpenScreenAnimations ? SHOW_DURATION : 300
62
+      }
63
+    }
64
+  }
65
+}
66
+
27
 const slowOpenScreenAnimations = {
67
 const slowOpenScreenAnimations = {
28
   showModal: {
68
   showModal: {
29
     waitForRender: true,
69
     waitForRender: true,

+ 2
- 1
playground/src/flags.js View File

1
 module.exports = {
1
 module.exports = {
2
   showTextInputToTestKeyboardInteraction: false,
2
   showTextInputToTestKeyboardInteraction: false,
3
-  useSlowOpenScreenAnimations: false
3
+  useSlowOpenScreenAnimations: true,
4
+  useSlideAnimation: true
4
 };
5
 };