Browse Source

[iOS] Added fade transition animation between screens (#1367)

* [iOS] Added fade transition animation between screens

* Update docs for #1367
Ruslan.V 7 years ago
parent
commit
000eef1b1c

+ 7
- 3
docs/screen-api.md View File

13
   titleImage: require('../../img/my_image.png'), //navigation bar title image instead of the title text of the pushed screen (optional)
13
   titleImage: require('../../img/my_image.png'), //navigation bar title image instead of the title text of the pushed screen (optional)
14
   passProps: {}, // Object that will be passed as props to the pushed screen (optional)
14
   passProps: {}, // Object that will be passed as props to the pushed screen (optional)
15
   animated: true, // does the push have transition animation or does it happen immediately (optional)
15
   animated: true, // does the push have transition animation or does it happen immediately (optional)
16
+  animationType: 'fade', // does the push have fade transition animation, iOS only (optional)
16
   backButtonTitle: undefined, // override the back button title (optional)
17
   backButtonTitle: undefined, // override the back button title (optional)
17
   backButtonHidden: false, // hide the back button altogether (optional)
18
   backButtonHidden: false, // hide the back button altogether (optional)
18
   navigatorStyle: {}, // override the navigator style for the pushed screen (optional)
19
   navigatorStyle: {}, // override the navigator style for the pushed screen (optional)
26
 
27
 
27
 ```js
28
 ```js
28
 this.props.navigator.pop({
29
 this.props.navigator.pop({
29
-  animated: true // does the pop have transition animation or does it happen immediately (optional)
30
+  animated: true, // does the pop have transition animation or does it happen immediately (optional)
31
+  animationType: 'fade', // does the pop have fade transition animation, iOS only (optional)
30
 });
32
 });
31
 ```
33
 ```
32
 
34
 
36
 
38
 
37
 ```js
39
 ```js
38
 this.props.navigator.popToRoot({
40
 this.props.navigator.popToRoot({
39
-  animated: true // does the pop have transition animation or does it happen immediately (optional)
41
+  animated: true, // does the popToRoot have transition animation or does it happen immediately (optional)
42
+  animationType: 'fade', // does the popToRoot have fade transition animation, iOS only (optional)
40
 });
43
 });
41
 ```
44
 ```
42
 
45
 
49
   screen: 'example.ScreenThree', // unique ID registered with Navigation.registerScreen
52
   screen: 'example.ScreenThree', // unique ID registered with Navigation.registerScreen
50
   title: undefined, // navigation bar title of the pushed screen (optional)
53
   title: undefined, // navigation bar title of the pushed screen (optional)
51
   passProps: {}, // simple serializable object that will pass as props to the pushed screen (optional)
54
   passProps: {}, // simple serializable object that will pass as props to the pushed screen (optional)
52
-  animated: true, // does the push have transition animation or does it happen immediately (optional)
55
+  animated: true, // does the resetTo have transition animation or does it happen immediately (optional)
56
+  animationType: 'fade', // does the resetTo have fade transition animation, iOS only (optional)
53
   navigatorStyle: {}, // override the navigator style for the pushed screen (optional)
57
   navigatorStyle: {}, // override the navigator style for the pushed screen (optional)
54
   navigatorButtons: {} // override the nav buttons for the pushed screen (optional)
58
   navigatorButtons: {} // override the nav buttons for the pushed screen (optional)
55
 });
59
 });

+ 56
- 4
ios/RCCNavigationController.m View File

143
       [self setButtons:rightButtons viewController:viewController side:@"right" animated:NO];
143
       [self setButtons:rightButtons viewController:viewController side:@"right" animated:NO];
144
     }
144
     }
145
     
145
     
146
-    [self pushViewController:viewController animated:animated];
146
+    NSString *animationType = actionParams[@"animationType"];
147
+    if ([animationType isEqualToString:@"fade"])
148
+    {
149
+      CATransition *transition = [CATransition animation];
150
+      transition.duration = 0.25;
151
+      transition.type = kCATransitionFade;
152
+      
153
+      [self.view.layer addAnimation:transition forKey:kCATransition];
154
+      [self pushViewController:viewController animated:NO];
155
+    }
156
+    else
157
+    {
158
+      [self pushViewController:viewController animated:animated];
159
+    }
147
     return;
160
     return;
148
   }
161
   }
149
   
162
   
150
   // pop
163
   // pop
151
   if ([performAction isEqualToString:@"pop"])
164
   if ([performAction isEqualToString:@"pop"])
152
   {
165
   {
153
-    [self popViewControllerAnimated:animated];
166
+    NSString *animationType = actionParams[@"animationType"];
167
+    if ([animationType isEqualToString:@"fade"])
168
+    {
169
+      CATransition *transition = [CATransition animation];
170
+      transition.duration = 0.25;
171
+      transition.type = kCATransitionFade;
172
+      
173
+      [self.view.layer addAnimation:transition forKey:kCATransition];
174
+      [self popViewControllerAnimated:NO];
175
+    }
176
+    else
177
+    {
178
+      [self popViewControllerAnimated:animated];
179
+    }
154
     return;
180
     return;
155
   }
181
   }
156
   
182
   
157
   // popToRoot
183
   // popToRoot
158
   if ([performAction isEqualToString:@"popToRoot"])
184
   if ([performAction isEqualToString:@"popToRoot"])
159
   {
185
   {
160
-    [self popToRootViewControllerAnimated:animated];
186
+    NSString *animationType = actionParams[@"animationType"];
187
+    if ([animationType isEqualToString:@"fade"])
188
+    {
189
+      CATransition *transition = [CATransition animation];
190
+      transition.duration = 0.25;
191
+      transition.type = kCATransitionFade;
192
+      
193
+      [self.view.layer addAnimation:transition forKey:kCATransition];
194
+      [self popToRootViewControllerAnimated:NO];
195
+    }
196
+    else
197
+    {
198
+      [self popToRootViewControllerAnimated:animated];
199
+    }
161
     return;
200
     return;
162
   }
201
   }
163
   
202
   
189
     
228
     
190
     BOOL animated = actionParams[@"animated"] ? [actionParams[@"animated"] boolValue] : YES;
229
     BOOL animated = actionParams[@"animated"] ? [actionParams[@"animated"] boolValue] : YES;
191
     
230
     
192
-    [self setViewControllers:@[viewController] animated:animated];
231
+    NSString *animationType = actionParams[@"animationType"];
232
+    if ([animationType isEqualToString:@"fade"])
233
+    {
234
+      CATransition *transition = [CATransition animation];
235
+      transition.duration = 0.25;
236
+      transition.type = kCATransitionFade;
237
+      
238
+      [self.view.layer addAnimation:transition forKey:kCATransition];
239
+      [self setViewControllers:@[viewController] animated:NO];
240
+    }
241
+    else
242
+    {
243
+      [self setViewControllers:@[viewController] animated:animated];
244
+    }
193
     return;
245
     return;
194
   }
246
   }
195
   
247
   

+ 6
- 2
src/deprecated/platformSpecificDeprecated.ios.js View File

241
     titleImage: params.titleImage,
241
     titleImage: params.titleImage,
242
     component: params.screen,
242
     component: params.screen,
243
     animated: params.animated,
243
     animated: params.animated,
244
+    animationType: params.animationType,
244
     passProps: passProps,
245
     passProps: passProps,
245
     style: navigatorStyle,
246
     style: navigatorStyle,
246
     backButtonTitle: params.backButtonTitle,
247
     backButtonTitle: params.backButtonTitle,
252
 
253
 
253
 function navigatorPop(navigator, params) {
254
 function navigatorPop(navigator, params) {
254
   Controllers.NavigationControllerIOS(navigator.navigatorID).pop({
255
   Controllers.NavigationControllerIOS(navigator.navigatorID).pop({
255
-    animated: params.animated
256
+    animated: params.animated,
257
+    animationType: params.animationType
256
   });
258
   });
257
 }
259
 }
258
 
260
 
259
 function navigatorPopToRoot(navigator, params) {
261
 function navigatorPopToRoot(navigator, params) {
260
   Controllers.NavigationControllerIOS(navigator.navigatorID).popToRoot({
262
   Controllers.NavigationControllerIOS(navigator.navigatorID).popToRoot({
261
-    animated: params.animated
263
+    animated: params.animated,
264
+    animationType: params.animationType
262
   });
265
   });
263
 }
266
 }
264
 
267
 
294
     titleImage: params.titleImage,
297
     titleImage: params.titleImage,
295
     component: params.screen,
298
     component: params.screen,
296
     animated: params.animated,
299
     animated: params.animated,
300
+    animationType: params.animationType,
297
     passProps: passProps,
301
     passProps: passProps,
298
     style: navigatorStyle,
302
     style: navigatorStyle,
299
     leftButtons: navigatorButtons.leftButtons,
303
     leftButtons: navigatorButtons.leftButtons,