[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

@@ -14,6 +14,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');
@@ -110,6 +111,9 @@ var 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
      */
@@ -208,12 +212,13 @@ var TouchableHighlight = createReactClass({
 
   touchableHandlePress: function(e: Event) {
     this.clearTimeout(this._hideTimeout);
-    this._showUnderlay();
-    /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
-     * suppresses an error when upgrading Flow's support for React. To see the
-     * error delete this comment and run Flow. */
-    this._hideTimeout = this.setTimeout(this._hideUnderlay,
-      this.props.delayPressOut || 100);
+    if (!Platform.isTVOS) {
+      this._showUnderlay();
+      /* $FlowFixMe(>=0.53.0 site=react_native_fb,react_native_oss) This comment
+       * suppresses an error when upgrading Flow's support for React. To see the
+       * error delete this comment and run Flow. */
+      this._hideTimeout = this.setTimeout(this._hideUnderlay, this.props.delayPressOut || 100);
+		}
     this.props.onPress && this.props.onPress(e);
   },
 

Libraries/Components/Touchable/TouchableOpacity.js

@@ -64,7 +64,18 @@ var TouchableOpacity = createReactClass({
      */
     activeOpacity: PropTypes.number,
     /**
-     * Apple TV parallax effects
+     * *(Apple TV only)* Object with properties to control Apple TV parallax effects.
+     *
+     * enabled: If true, parallax effects are enabled.  Defaults to true.
+     * shiftDistanceX: Defaults to 2.0.
+     * 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
      */
     tvParallaxProperties: PropTypes.object,
   },

RNTester/js/ListExampleShared.js

@@ -64,6 +64,10 @@ 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

@@ -181,7 +181,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,18 +29,43 @@ @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 {
@@ -59,8 +84,40 @@ - (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