[tvOS] onPress animation with magnification

Libraries/Components/AppleTV/TVViewPropTypes.js

@@ -39,6 +39,9 @@ var TVViewPropTypes = {
      * shiftDistanceY: Defaults to 2.0.
      * tiltAngle: Defaults to 0.05.
      * magnification: Defaults to 1.0.
+     * pressMagnification: Defaults to 1.0.
+     * pressDuration: Defaults to 0.3.
+     * pressDelay: Defaults to 0.0.
      *
      * @platform ios
      */

Libraries/Components/Touchable/TouchableHighlight.js

@@ -15,6 +15,7 @@
 const ColorPropType = require('ColorPropType');
 const NativeMethodsMixin = require('NativeMethodsMixin');
 const PropTypes = require('prop-types');
+const Platform = require('Platform');
 const React = require('React');
 const ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 const StyleSheet = require('StyleSheet');
@@ -174,6 +175,9 @@ const TouchableHighlight = createReactClass({
      * shiftDistanceY: Defaults to 2.0.
      * tiltAngle: Defaults to 0.05.
      * magnification: Defaults to 1.0.
+     * pressMagnification: Defaults to 1.0.
+     * pressDuration: Defaults to 0.3.
+     * pressDelay: Defaults to 0.0.
      *
      * @platform ios
      */
@@ -232,11 +236,13 @@ const TouchableHighlight = createReactClass({
 
   touchableHandlePress: function(e: PressEvent) {
     clearTimeout(this._hideTimeout);
-    this._showUnderlay();
-    this._hideTimeout = setTimeout(
-      this._hideUnderlay,
-      this.props.delayPressOut,
-    );
+    if (!Platform.isTVOS) {
+      this._showUnderlay();
+      this._hideTimeout = setTimeout(
+        this._hideUnderlay,
+        this.props.delayPressOut,
+      );
+		}
     this.props.onPress && this.props.onPress(e);
   },
 

RNTester/js/ListExampleShared.js

@@ -64,6 +64,9 @@ class ItemComponent extends React.PureComponent<{
         onPress={this._onPress}
         onShowUnderlay={this.props.onShowUnderlay}
         onHideUnderlay={this.props.onHideUnderlay}
+        tvParallaxProperties={{
+          pressMagnification: 1.1,
+        }}
         style={horizontal ? styles.horizItem : styles.item}>
         <View style={[
           styles.row, horizontal && {width: HORIZ_WIDTH}, fixedHeight && {height: ITEM_HEIGHT}]}>

RNTester/js/RNTesterList.ios.js

@@ -191,7 +191,7 @@ const ComponentExamples: Array<RNTesterExample> = [
   {
     key: 'TouchableExample',
     module: require('./TouchableExample'),
-    supportsTVOS: false,
+    supportsTVOS: true,
   },
   {
     key: 'TransparentHitTestExample',

RNTester/js/TouchableExample.js

@@ -57,6 +57,7 @@ exports.examples = [
             style={styles.wrapper}
             activeOpacity={1}
             animationVelocity={0}
+            tvParallaxProperties={{pressMagnification: 1.3, pressDuration: 0.6}}
             underlayColor="rgb(210, 230, 255)"
             onPress={() => console.log('custom THW text - highlight')}>
             <View style={styles.wrapperCustom}>

React/Views/RCTTVView.m

@@ -29,24 +29,50 @@ @implementation RCTTVView
 - (instancetype)initWithFrame:(CGRect)frame
 {
   if (self = [super initWithFrame:frame]) {
-    self.tvParallaxProperties = @{
-      @"enabled": @YES,
-      @"shiftDistanceX": @2.0f,
-      @"shiftDistanceY": @2.0f,
-      @"tiltAngle": @0.05f,
-      @"magnification": @1.0f
-    };
+    dispatch_once(&onceToken, ^{
+      defaultTVParallaxProperties = @{
+        @"enabled": @YES,
+        @"shiftDistanceX": @2.0f,
+        @"shiftDistanceY": @2.0f,
+        @"tiltAngle": @0.05f,
+        @"magnification": @1.0f,
+        @"pressMagnification": @1.0f,
+        @"pressDuration": @0.3f,
+        @"pressDelay": @0.0f
+      };
+    });
+    self.tvParallaxProperties = defaultTVParallaxProperties;
   }
 
   return self;
 }
 
+static NSDictionary* defaultTVParallaxProperties = nil;
+static dispatch_once_t onceToken;
+
+- (void)setTvParallaxProperties:(NSDictionary *)tvParallaxProperties {
+  if (_tvParallaxProperties == nil) {
+    _tvParallaxProperties = [defaultTVParallaxProperties copy];
+    return;
+  }
+
+  NSMutableDictionary *newParallaxProperties = [NSMutableDictionary dictionaryWithDictionary:_tvParallaxProperties];
+  for (NSString *k in [defaultTVParallaxProperties allKeys]) {
+    if (tvParallaxProperties[k]) {
+      newParallaxProperties[k] = tvParallaxProperties[k];
+    }
+  }
+  _tvParallaxProperties = [newParallaxProperties copy];
+}
+
 RCT_NOT_IMPLEMENTED(- (instancetype)initWithCoder:unused)
 
 - (void)setIsTVSelectable:(BOOL)isTVSelectable {
   self->_isTVSelectable = isTVSelectable;
-  if(isTVSelectable) {
-    UITapGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleSelect:)];
+  if (isTVSelectable) {
+    UITapGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc] 
+                                           initWithTarget:self 
+                                                   action:@selector(handleSelect:)];
     recognizer.allowedPressTypes = @[@(UIPressTypeSelect)];
     _selectRecognizer = recognizer;
     [self addGestureRecognizer:_selectRecognizer];
@@ -59,8 +85,37 @@ - (void)setIsTVSelectable:(BOOL)isTVSelectable {
 
 - (void)handleSelect:(__unused UIGestureRecognizer *)r
 {
-  [[NSNotificationCenter defaultCenter] postNotificationName:RCTTVNavigationEventNotification
-                                                      object:@{@"eventType":@"select",@"tag":self.reactTag}];
+	if ([self.tvParallaxProperties[@"enabled"] boolValue] == YES) {
+    float magnification = [self.tvParallaxProperties[@"magnification"] floatValue];
+    float pressMagnification = [self.tvParallaxProperties[@"pressMagnification"] floatValue];
+
+		// Duration of press animation
+		float pressDuration = [self.tvParallaxProperties[@"pressDuration"] floatValue];
+
+		// Delay of press animation
+		float pressDelay = [self.tvParallaxProperties[@"pressDelay"] floatValue];
+
+    [[NSRunLoop currentRunLoop] runUntilDate:[NSDate dateWithTimeIntervalSinceNow:pressDelay]];
+
+    [UIView animateWithDuration:(pressDuration/2)
+      animations:^{
+        self.transform = CGAffineTransformMakeScale(pressMagnification, pressMagnification);
+      }
+      completion:^(__unused BOOL finished1){
+        [UIView animateWithDuration:(pressDuration/2)
+          animations:^{
+            self.transform = CGAffineTransformMakeScale(magnification, magnification);
+          }
+          completion:^(__unused BOOL finished2) {
+            [[NSNotificationCenter defaultCenter] postNotificationName:RCTTVNavigationEventNotification 
+              object:@{@"eventType":@"select",@"tag":self.reactTag}];
+          }];
+       }];
+
+	} else {
+		[[NSNotificationCenter defaultCenter] postNotificationName:RCTTVNavigationEventNotification
+															                          object:@{@"eventType":@"select",@"tag":self.reactTag}];
+	}
 }
 
 - (BOOL)isUserInteractionEnabled
@@ -81,23 +136,25 @@ - (void)addParallaxMotionEffects
 
   // Make horizontal movements shift the centre left and right
   UIInterpolatingMotionEffect *xShift = [[UIInterpolatingMotionEffect alloc]
-                                         initWithKeyPath:@"center.x"
-                                         type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
+                                          initWithKeyPath:@"center.x"
+                                                     type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
   xShift.minimumRelativeValue = @( shiftDistanceX * -1.0f);
   xShift.maximumRelativeValue = @( shiftDistanceX);
 
   // Make vertical movements shift the centre up and down
   UIInterpolatingMotionEffect *yShift = [[UIInterpolatingMotionEffect alloc]
-                                         initWithKeyPath:@"center.y"
-                                         type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis];
+                                          initWithKeyPath:@"center.y"
+                                                     type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis];
   yShift.minimumRelativeValue = @( shiftDistanceY * -1.0f);
   yShift.maximumRelativeValue = @( shiftDistanceY);
 
   // Size of tilt movements
   CGFloat const tiltAngle = [self.tvParallaxProperties[@"tiltAngle"] floatValue];
 
   // Now make horizontal movements effect a rotation about the Y axis for side-to-side rotation.
-  UIInterpolatingMotionEffect *xTilt = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"layer.transform" type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
+  UIInterpolatingMotionEffect *xTilt = [[UIInterpolatingMotionEffect alloc] 
+                                         initWithKeyPath:@"layer.transform"
+                                                    type:UIInterpolatingMotionEffectTypeTiltAlongHorizontalAxis];
 
   // CATransform3D value for minimumRelativeValue
   CATransform3D transMinimumTiltAboutY = CATransform3DIdentity;
@@ -114,7 +171,9 @@ - (void)addParallaxMotionEffects
   xTilt.maximumRelativeValue = [NSValue valueWithCATransform3D: transMaximumTiltAboutY];
 
   // Now make vertical movements effect a rotation about the X axis for up and down rotation.
-  UIInterpolatingMotionEffect *yTilt = [[UIInterpolatingMotionEffect alloc] initWithKeyPath:@"layer.transform" type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis];
+  UIInterpolatingMotionEffect *yTilt = [[UIInterpolatingMotionEffect alloc] 
+                                         initWithKeyPath:@"layer.transform" 
+                                                    type:UIInterpolatingMotionEffectTypeTiltAlongVerticalAxis];
 
   // CATransform3D value for minimumRelativeValue
   CATransform3D transMinimumTiltAboutX = CATransform3DIdentity;