react-native-tvos 0.66.3-1 → 0.66.3-2

package/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -13,10 +13,26 @@
 #import <React/RCTAssert.h>
 #import <React/RCTBorderDrawing.h>
 #import <React/RCTConversions.h>
+#import <React/RCTDefines.h>
+#import <React/RCTLog.h>
+
+#import <React/RCTRootComponentView.h>
+
 #import <react/renderer/components/view/ViewComponentDescriptor.h>
 #import <react/renderer/components/view/ViewEventEmitter.h>
 #import <react/renderer/components/view/ViewProps.h>
 
+typedef struct {
+  BOOL enabled;
+  float shiftDistanceX;
+  float shiftDistanceY;
+  float tiltAngle;
+  float magnification;
+  float pressMagnification;
+  float pressDuration;
+  float pressDelay;
+} ParallaxProperties;
+
 using namespace facebook::react;
 
 @implementation RCTViewComponentView {
@@ -26,7 +42,16 @@ using namespace facebook::react;
   BOOL _isJSResponder;
   BOOL _removeClippedSubviews;
   NSMutableArray<UIView *> *_reactSubviews;
+  BOOL _motionEffectsAdded;
+    UITapGestureRecognizer *_selectRecognizer;
   NSSet<NSString *> *_Nullable _propKeysManagedByAnimated_DO_NOT_USE_THIS_IS_BROKEN;
+  ParallaxProperties _tvParallaxProperties;
+  BOOL _hasTVPreferredFocus;
+  UIView *_nextFocusUp;
+  UIView *_nextFocusDown;
+  UIView *_nextFocusLeft;
+  UIView *_nextFocusRight;
+  UIView *_nextFocusActiveTarget;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame
@@ -35,7 +60,18 @@ using namespace facebook::react;
     static auto const defaultProps = std::make_shared<ViewProps const>();
     _props = defaultProps;
     _reactSubviews = [NSMutableArray new];
-#if !TARGET_OS_TV
+#if TARGET_OS_TV
+    _tvParallaxProperties.enabled = NO;
+    _tvParallaxProperties.shiftDistanceX = 0.0f;
+    _tvParallaxProperties.shiftDistanceY = 0.0f;
+    _tvParallaxProperties.tiltAngle = 0.0f;
+    _tvParallaxProperties.magnification = 0.0f;
+    _tvParallaxProperties.pressMagnification = 0.0f;
+    _tvParallaxProperties.pressDuration = 0.0f;
+    _tvParallaxProperties.pressDelay = 0.0f;
+    self.focusGuide = [UIFocusGuide new];
+    [self addLayoutGuide:self.focusGuide];
+#else
     self.multipleTouchEnabled = YES;
 #endif
   }
@@ -60,7 +96,6 @@ using namespace facebook::react;
     _contentView.frame = RCTCGRectFromRect(_layoutMetrics.getContentFrame());
   }
 }
-
 - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event
 {
   if (UIEdgeInsetsEqualToEdgeInsets(self.hitTestEdgeInsets, UIEdgeInsetsZero)) {
@@ -80,6 +115,290 @@ using namespace facebook::react;
   _backgroundColor = backgroundColor;
 }
 
+#if TARGET_OS_TV
+
+#pragma mark - Apple TV methods
+
+- (RCTRootComponentView *)containingRootView
+{
+  UIView *rootview = self;
+  if ([rootview class] == [RCTRootComponentView class]) {
+    return (RCTRootComponentView *)rootview;
+  }
+  do {
+    rootview = [rootview superview];
+  } while (([rootview class] != [RCTRootComponentView class]) && rootview != nil);
+  return (RCTRootComponentView *)rootview;
+}
+
+- (void)addFocusDestinations:(NSArray*)destinations {
+  
+  self.focusGuide.preferredFocusEnvironments = destinations;
+}
+
+- (void)sendFocusNotification:(__unused UIFocusUpdateContext *)context
+{
+    [self sendNotificationWithEventType:@"focus"];
+}
+
+- (void)sendBlurNotification:(__unused UIFocusUpdateContext *)context
+{
+    [self sendNotificationWithEventType:@"blur"];
+}
+
+- (void)sendSelectNotification:(UIGestureRecognizer *)recognizer
+{
+    [self sendNotificationWithEventType:@"select"];
+}
+
+- (void)sendNotificationWithEventType:(NSString * __nonnull)eventType
+{
+  [[NSNotificationCenter defaultCenter] postNotificationName:@"RCTTVNavigationEventNotification"
+                                                      object:@{
+                                                          @"eventType":eventType,
+                                                          @"tag":@([self tag]),
+                                                          @"target":@([self tag])
+                                                      }];
+}
+
+- (void)handleSelect:(__unused UIGestureRecognizer *)r
+{
+  if (_tvParallaxProperties.enabled == YES) {
+    float magnification = _tvParallaxProperties.magnification;
+    float pressMagnification = _tvParallaxProperties.pressMagnification;
+
+    // Duration of press animation
+    float pressDuration = _tvParallaxProperties.pressDuration;
+
+    // Delay of press animation
+    float pressDelay = _tvParallaxProperties.pressDelay;
+
+    [[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) {
+        [self sendSelectNotification:r];
+      }];
+    }];
+
+  } else {
+    [self sendSelectNotification:r];
+  }
+}
+
+- (void)addParallaxMotionEffects
+{
+  if(!_tvParallaxProperties.enabled) {
+    return;
+  }
+
+  if(_motionEffectsAdded == YES) {
+    return;
+  }
+
+  // Size of shift movements
+  CGFloat const shiftDistanceX = _tvParallaxProperties.shiftDistanceX;
+  CGFloat const shiftDistanceY = _tvParallaxProperties.shiftDistanceY;
+
+  // Make horizontal movements shift the centre left and right
+  UIInterpolatingMotionEffect *xShift =
+  [[UIInterpolatingMotionEffect alloc] 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];
+  yShift.minimumRelativeValue = @(shiftDistanceY * -1.0f);
+  yShift.maximumRelativeValue = @(shiftDistanceY);
+
+  // Size of tilt movements
+  CGFloat const tiltAngle = _tvParallaxProperties.tiltAngle;
+
+  // 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];
+
+  // CATransform3D value for minimumRelativeValue
+  CATransform3D transMinimumTiltAboutY = CATransform3DIdentity;
+  transMinimumTiltAboutY.m34 = 1.0 / 500;
+  transMinimumTiltAboutY = CATransform3DRotate(transMinimumTiltAboutY, tiltAngle * -1.0, 0, 1, 0);
+
+  // CATransform3D value for minimumRelativeValue
+  CATransform3D transMaximumTiltAboutY = CATransform3DIdentity;
+  transMaximumTiltAboutY.m34 = 1.0 / 500;
+  transMaximumTiltAboutY = CATransform3DRotate(transMaximumTiltAboutY, tiltAngle, 0, 1, 0);
+
+  // Set the transform property boundaries for the interpolation
+  xTilt.minimumRelativeValue = [NSValue valueWithCATransform3D:transMinimumTiltAboutY];
+  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];
+
+  // CATransform3D value for minimumRelativeValue
+  CATransform3D transMinimumTiltAboutX = CATransform3DIdentity;
+  transMinimumTiltAboutX.m34 = 1.0 / 500;
+  transMinimumTiltAboutX = CATransform3DRotate(transMinimumTiltAboutX, tiltAngle * -1.0, 1, 0, 0);
+
+  // CATransform3D value for minimumRelativeValue
+  CATransform3D transMaximumTiltAboutX = CATransform3DIdentity;
+  transMaximumTiltAboutX.m34 = 1.0 / 500;
+  transMaximumTiltAboutX = CATransform3DRotate(transMaximumTiltAboutX, tiltAngle, 1, 0, 0);
+
+  // Set the transform property boundaries for the interpolation
+  yTilt.minimumRelativeValue = [NSValue valueWithCATransform3D:transMinimumTiltAboutX];
+  yTilt.maximumRelativeValue = [NSValue valueWithCATransform3D:transMaximumTiltAboutX];
+
+  // Add all of the motion effects to this group
+  self.motionEffects = @[ xShift, yShift, xTilt, yTilt ];
+
+  float magnification = _tvParallaxProperties.magnification;
+
+  [UIView animateWithDuration:0.2 animations:^{
+    self.transform = CGAffineTransformScale(self.transform, magnification, magnification);
+  }];
+
+  _motionEffectsAdded = YES;
+}
+
+- (void)removeParallaxMotionEffects
+{
+  if(_motionEffectsAdded == NO) {
+    return;
+  }
+
+  [UIView animateWithDuration:0.2 animations:^{
+    float magnification = self->_tvParallaxProperties.magnification;
+    BOOL enabled = self->_tvParallaxProperties.enabled;
+    if (enabled && magnification) {
+      self.transform = CGAffineTransformScale(self.transform, 1.0/magnification, 1.0/magnification);
+    }
+  }];
+
+  for (UIMotionEffect *effect in [self.motionEffects copy]){
+    [self removeMotionEffect:effect];
+  }
+
+  _motionEffectsAdded = NO;
+}
+
+
+- (BOOL)isUserInteractionEnabled
+{
+    return YES;
+}
+
+- (BOOL)canBecomeFocused
+{
+  return _props->isTVSelectable;
+}
+
+- (NSArray<id<UIFocusEnvironment>> *)preferredFocusEnvironments {
+  if (_nextFocusActiveTarget == nil) return [super preferredFocusEnvironments];
+  UIView * nextFocusActiveTarget = _nextFocusActiveTarget;
+  _nextFocusActiveTarget = nil;
+  NSArray<id<UIFocusEnvironment>> * focusEnvironment = @[nextFocusActiveTarget];
+  return focusEnvironment;
+}
+
+- (BOOL) shouldUpdateFocusInContext:(UIFocusUpdateContext *)context {
+  if (self.isFocused) {
+    if (_nextFocusUp != nil && context.focusHeading == UIFocusHeadingUp) {
+      self->_nextFocusActiveTarget = _nextFocusUp;
+      [self setNeedsFocusUpdate];
+      return false;
+    }
+    if (_nextFocusDown != nil && context.focusHeading == UIFocusHeadingDown) {
+      self->_nextFocusActiveTarget = _nextFocusDown;
+      [self setNeedsFocusUpdate];
+      return false;
+    }
+    if (_nextFocusLeft != nil && context.focusHeading == UIFocusHeadingLeft) {
+      self->_nextFocusActiveTarget = _nextFocusLeft;
+      [self setNeedsFocusUpdate];
+      return false;
+    }
+    if (_nextFocusRight != nil && context.focusHeading == UIFocusHeadingRight) {
+      self->_nextFocusActiveTarget = _nextFocusRight;
+      [self setNeedsFocusUpdate];
+      return false;
+    }
+    self->_nextFocusActiveTarget = nil;
+    return true;
+  }
+  self->_nextFocusActiveTarget = nil;
+  return true;
+}
+
+- (void)didUpdateFocusInContext:(UIFocusUpdateContext *)context withAnimationCoordinator:(UIFocusAnimationCoordinator *)coordinator
+{
+    if (context.previouslyFocusedView == context.nextFocusedView) {
+      return;
+    }
+    if (context.nextFocusedView == self && self.isUserInteractionEnabled ) {
+      [self becomeFirstResponder];
+      [coordinator addCoordinatedAnimations:^(void){
+          [self addParallaxMotionEffects];
+          [self sendFocusNotification:context];
+      } completion:^(void){}];
+    } else {
+      [coordinator addCoordinatedAnimations:^(void){
+          [self removeParallaxMotionEffects];
+          [self sendBlurNotification:context];
+      } completion:^(void){}];
+      [self resignFirstResponder];
+    }
+}
+
+#endif
+
+#pragma mark - Native Commands
+
+- (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args
+{
+  NSLog(@"RCTViewComponentView handleCommand: %@", commandName);
+  if ([commandName isEqualToString:@"setDestinations"]) {
+#if TARGET_OS_TV
+    if ([args count] != 1) {
+      RCTLogError(
+          @"%@ command %@ received %d arguments, expected %d.", @"View", commandName, (int)[args count], 1);
+      return;
+    }
+    if (!RCTValidateTypeOfViewCommandArgument(args[0], [NSArray class], @"number", @"View", commandName, @"1st")) {
+      return;
+    }
+    NSArray *destinationTags = (NSArray<NSNumber *> *)args[0];
+    NSMutableArray *destinations = [NSMutableArray new];
+    RCTRootComponentView *rootView = [self containingRootView];
+    for (NSNumber *tag in destinationTags) {
+      UIView *view = [rootView viewWithTag:[tag intValue]];
+      if (view != nil) {
+        [destinations addObject:view];
+      }
+    }
+    [self addFocusDestinations:destinations];
+    return;
+#endif
+  }
+#if RCT_DEBUG
+  RCTLogError(@"%@ received command %@, which is not a supported command.", @"View", commandName);
+#endif
+}
+
 #pragma mark - RCTComponentViewProtocol
 
 + (ComponentDescriptorProvider)componentDescriptorProvider
@@ -361,11 +680,87 @@ using namespace facebook::react;
     self.accessibilityIdentifier = RCTNSStringFromString(newViewProps.testId);
   }
 
+#if TARGET_OS_TV
+  // `isTVSelectable`
+  if (oldViewProps.isTVSelectable != newViewProps.isTVSelectable) {
+    if (newViewProps.isTVSelectable) {
+      UITapGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc] initWithTarget:self
+                                                                                   action:@selector(handleSelect:)];
+      recognizer.allowedPressTypes = @[ @(UIPressTypeSelect) ];
+      _selectRecognizer = recognizer;
+      [self addGestureRecognizer:_selectRecognizer];
+    } else {
+      if (_selectRecognizer) {
+        [self removeGestureRecognizer:_selectRecognizer];
+      }
+    }
+  }
+  // `tvParallaxProperties
+  if (oldViewProps.tvParallaxProperties != newViewProps.tvParallaxProperties) {
+    _tvParallaxProperties.enabled = newViewProps.tvParallaxProperties.enabled.has_value() ?
+                                      newViewProps.tvParallaxProperties.enabled.value() :
+                                      newViewProps.isTVSelectable;
+    _tvParallaxProperties.shiftDistanceX = [self getFloat:newViewProps.tvParallaxProperties.shiftDistanceX orDefault:2.0];
+    _tvParallaxProperties.shiftDistanceY = [self getFloat:newViewProps.tvParallaxProperties.shiftDistanceY orDefault:2.0];
+    _tvParallaxProperties.tiltAngle = [self getFloat:newViewProps.tvParallaxProperties.tiltAngle orDefault:0.05];
+    _tvParallaxProperties.magnification = [self getFloat:newViewProps.tvParallaxProperties.magnification orDefault:1.0];
+    _tvParallaxProperties.pressMagnification = [self getFloat:newViewProps.tvParallaxProperties.pressMagnification orDefault:1.0];
+    _tvParallaxProperties.pressDuration = [self getFloat:newViewProps.tvParallaxProperties.pressDuration orDefault:0.3];
+    _tvParallaxProperties.pressDelay = [self getFloat:newViewProps.tvParallaxProperties.pressDelay orDefault:0.0];
+  }
+  // `hasTVPreferredFocus
+  if (oldViewProps.hasTVPreferredFocus != newViewProps.hasTVPreferredFocus) {
+    _hasTVPreferredFocus = newViewProps.hasTVPreferredFocus;
+  }
+  // `nextFocusUp`
+  if (oldViewProps.nextFocusUp != newViewProps.nextFocusUp) {
+    if (newViewProps.nextFocusUp.has_value()) {
+      UIView *rootView = [self containingRootView];
+      _nextFocusUp = [rootView viewWithTag:newViewProps.nextFocusUp.value()];
+    } else {
+      _nextFocusUp = nil;
+    }
+  }
+  // `nextFocusDown`
+  if (oldViewProps.nextFocusDown != newViewProps.nextFocusDown) {
+    if (newViewProps.nextFocusDown.has_value()) {
+      UIView *rootView = [self containingRootView];
+      _nextFocusDown = [rootView viewWithTag:newViewProps.nextFocusDown.value()];
+    } else {
+      _nextFocusDown = nil;
+    }
+  }
+  // `nextFocusLeft`
+  if (oldViewProps.nextFocusLeft != newViewProps.nextFocusLeft) {
+    if (newViewProps.nextFocusLeft.has_value()) {
+      UIView *rootView = [self containingRootView];
+      _nextFocusLeft = [rootView viewWithTag:newViewProps.nextFocusLeft.value()];
+    } else {
+      _nextFocusLeft = nil;
+    }
+  }
+  // `nextFocusRight`
+  if (oldViewProps.nextFocusRight != newViewProps.nextFocusRight) {
+    if (newViewProps.nextFocusRight.has_value()) {
+      UIView *rootView = [self containingRootView];
+      _nextFocusRight = [rootView viewWithTag:newViewProps.nextFocusRight.value()];
+    } else {
+      _nextFocusRight = nil;
+    }
+  }
+#endif
+
+
   _needsInvalidateLayer = _needsInvalidateLayer || needsInvalidateLayer;
 
   _props = std::static_pointer_cast<ViewProps const>(props);
 }
 
+- (float)getFloat:(better::optional<float>)property orDefault:(float)defaultValue
+{
+  return property.has_value() ? (float)property.value() : defaultValue;
+}
+
 - (void)updateEventEmitter:(EventEmitter::Shared const &)eventEmitter
 {
   assert(std::dynamic_pointer_cast<ViewEventEmitter const>(eventEmitter));
@@ -389,6 +784,25 @@ using namespace facebook::react;
   if (_contentView) {
     _contentView.frame = RCTCGRectFromRect(_layoutMetrics.getContentFrame());
   }
+  
+#if TARGET_OS_TV
+  [self.focusGuide.topAnchor constraintEqualToAnchor:self.topAnchor].active = YES;
+  [self.focusGuide.bottomAnchor constraintEqualToAnchor:self.bottomAnchor].active = YES;
+  [self.focusGuide.widthAnchor constraintEqualToAnchor:self.widthAnchor].active = YES;
+  [self.focusGuide.heightAnchor constraintEqualToAnchor:self.heightAnchor].active = YES;
+  
+  if (_hasTVPreferredFocus) {
+    RCTRootComponentView *rootview = [self containingRootView];
+    if (rootview != nil && rootview.reactPreferredFocusedView != self) {
+      rootview.reactPreferredFocusedView = self;
+      [rootview setNeedsFocusUpdate];
+      [rootview updateFocusIfNeeded];
+    }
+  }
+
+#endif
+
+  
 }
 
 - (BOOL)isJSResponder

package/React/Fabric/Mounting/RCTComponentViewFactory.mm

@@ -30,6 +30,7 @@
 #import "RCTFabricComponentsPlugins.h"
 #import "RCTImageComponentView.h"
 #import "RCTLegacyViewManagerInteropComponentView.h"
+#import "RCTModalHostViewComponentView.h"
 #import "RCTMountingTransactionObserving.h"
 #import "RCTParagraphComponentView.h"
 #import "RCTRootComponentView.h"
@@ -73,6 +74,7 @@ static Class<RCTComponentViewProtocol> RCTComponentViewClassWithName(const char
     [componentViewFactory registerComponentViewClass:[RCTViewComponentView class]];
     [componentViewFactory registerComponentViewClass:[RCTParagraphComponentView class]];
     [componentViewFactory registerComponentViewClass:[RCTTextInputComponentView class]];
+    [componentViewFactory registerComponentViewClass:[RCTModalHostViewComponentView class]];
 
     Class<RCTComponentViewProtocol> imageClass = RCTComponentViewClassWithName("Image");
     [componentViewFactory registerComponentViewClass:imageClass];

package/React/Views/RCTTVView.h

@@ -65,4 +65,9 @@
  */
 - (void)removeParallaxMotionEffects;
 
+
+- (void)addFocusGuide:(NSArray*)destinations;
+
+@property (nonatomic, strong) UIFocusGuide * focusGuide;
+
 @end

package/React/Views/RCTTVView.m

@@ -375,4 +375,20 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithCoder : unused)
   }
 }
 
+- (void)addFocusGuide:(NSArray*)destinations {
+  
+  UIView *origin = [self reactSuperview];
+  if (self.focusGuide == nil && origin != nil) {
+    self.focusGuide = [UIFocusGuide new];
+    [self addLayoutGuide:self.focusGuide];
+    
+    [self.focusGuide.widthAnchor constraintEqualToAnchor:origin.widthAnchor].active = YES;
+    [self.focusGuide.heightAnchor constraintEqualToAnchor:origin.heightAnchor].active = YES;
+    [self.focusGuide.topAnchor constraintEqualToAnchor:origin.topAnchor].active = YES;
+    [self.focusGuide.leftAnchor constraintEqualToAnchor:origin.leftAnchor].active = YES;
+  }
+  
+  self.focusGuide.preferredFocusEnvironments = destinations;
+}
+
 @end

package/React/Views/RCTViewManager.m

@@ -435,4 +435,21 @@ RCT_EXPORT_SHADOW_PROPERTY(onLayout, RCTDirectEventBlock)
 
 RCT_EXPORT_SHADOW_PROPERTY(direction, YGDirection)
 
+#if TARGET_OS_TV
+RCT_EXPORT_METHOD(setDestinations : (nonnull NSNumber *)viewTag reactTags : (NSArray<NSNumber *> *)destinationTags)
+{
+  [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+    RCTTVView *view = (RCTTVView *)viewRegistry[viewTag];
+    NSMutableArray* destinations = [NSMutableArray array];
+    for (NSNumber *  tag in destinationTags) {
+      RCTTVView *destination = (RCTTVView*)viewRegistry[tag];
+      if (destination != nil) {
+        [destinations addObject:destination];
+      }
+    }
+    [view addFocusGuide:destinations];
+  }];  
+}
+#endif
+
 @end

package/ReactAndroid/gradle.properties

@@ -1,4 +1,4 @@
-VERSION_NAME=0.66.3-1
+VERSION_NAME=0.66.3-2
 GROUP=com.facebook.react
 
 POM_NAME=ReactNative