[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;