diff --git a/Libraries/Components/AppleTV/TVViewPropTypes.js b/Libraries/Components/AppleTV/TVViewPropTypes.js index b2c426d86241e3..c29d624940012b 100644 --- a/Libraries/Components/AppleTV/TVViewPropTypes.js +++ b/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 */ diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js index 02dc6bcc076e3b..f85a2c4607e0cd 100644 --- a/Libraries/Components/Touchable/TouchableHighlight.js +++ b/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); }, diff --git a/RNTester/js/ListExampleShared.js b/RNTester/js/ListExampleShared.js index d9569efb0d1c97..3544042b52b277 100644 --- a/RNTester/js/ListExampleShared.js +++ b/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}> diff --git a/RNTester/js/RNTesterList.ios.js b/RNTester/js/RNTesterList.ios.js index b01a54d792be68..0bae78364ad08f 100644 --- a/RNTester/js/RNTesterList.ios.js +++ b/RNTester/js/RNTesterList.ios.js @@ -191,7 +191,7 @@ const ComponentExamples: Array = [ { key: 'TouchableExample', module: require('./TouchableExample'), - supportsTVOS: false, + supportsTVOS: true, }, { key: 'TransparentHitTestExample', diff --git a/RNTester/js/TouchableExample.js b/RNTester/js/TouchableExample.js index 4977daafdfcda3..94eabec17b928d 100644 --- a/RNTester/js/TouchableExample.js +++ b/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')}> diff --git a/React/Views/RCTTVView.m b/React/Views/RCTTVView.m index 204b6f390d9288..79fd010c9e95c8 100644 --- a/React/Views/RCTTVView.m +++ b/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,15 +136,15 @@ - (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); @@ -97,7 +152,9 @@ - (void)addParallaxMotionEffects 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;