add timestamp to onScroll on iOS (#46978)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/46978

changelog: [internal]

Add timestamp to onScroll event on Android.

Reviewed By: fabriziocucci

Differential Revision: D64068207

fbshipit-source-id: 3d4c31bbf43ef5f06af4933867380d3ef297b550

packages/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm

@@ -539,6 +539,7 @@ static inline UIViewAnimationOptions animationOptionsWithCurve(UIViewAnimationCu
   metrics.contentInset = RCTEdgeInsetsFromUIEdgeInsets(_scrollView.contentInset);
   metrics.containerSize = RCTSizeFromCGSize(_scrollView.bounds.size);
   metrics.zoomScale = _scrollView.zoomScale;
+  metrics.timestamp = CACurrentMediaTime();
 
   if (_layoutMetrics.layoutDirection == LayoutDirection::RightToLeft) {
     metrics.contentOffset.x = metrics.contentSize.width - metrics.containerSize.width - metrics.contentOffset.x;

packages/react-native/React/Views/ScrollView/RCTScrollEvent.m

@@ -16,6 +16,7 @@
   CGFloat _scrollViewZoomScale;
   NSDictionary *_userData;
   uint16_t _coalescingKey;
+  CFTimeInterval _timestamp;
 }
 
 @synthesize viewTag = _viewTag;
@@ -43,6 +44,7 @@
     _scrollViewZoomScale = scrollViewZoomScale;
     _userData = userData;
     _coalescingKey = coalescingKey;
+    _timestamp = CACurrentMediaTime();
   }
   return self;
 }
@@ -67,6 +69,7 @@ RCT_NOT_IMPLEMENTED(-(instancetype)init)
     @"contentSize" : @{@"width" : @(_scrollViewContentSize.width), @"height" : @(_scrollViewContentSize.height)},
     @"layoutMeasurement" : @{@"width" : @(_scrollViewFrame.size.width), @"height" : @(_scrollViewFrame.size.height)},
     @"zoomScale" : @(_scrollViewZoomScale ?: 1),
+    @"timestamp" : @(_timestamp * 1000),
   };
 
   if (_userData) {

packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollEvent.cpp

@@ -43,6 +43,7 @@ jsi::Value ScrollEvent::asJSIValue(jsi::Runtime& runtime) const {
   }
 
   payload.setProperty(runtime, "zoomScale", zoomScale);
+  payload.setProperty(runtime, "timestamp", timestamp * 1000);
 
   return payload;
 }
@@ -61,11 +62,12 @@ folly::dynamic ScrollEvent::asDynamic() const {
   auto containerSizeObj = folly::dynamic::object("width", containerSize.width)(
       "height", containerSize.height);
 
-  auto metrics = folly::dynamic::object(
-      "contentOffset", std::move(contentOffsetObj))(
-      "contentInset", std::move(contentInsetObj))(
-      "contentSize", std::move(contentSizeObj))(
-      "layoutMeasurement", std::move(containerSizeObj))("zoomScale", zoomScale);
+  auto metrics =
+      folly::dynamic::object("contentOffset", std::move(contentOffsetObj))(
+          "contentInset", std::move(contentInsetObj))(
+          "contentSize", std::move(contentSizeObj))(
+          "layoutMeasurement", std::move(containerSizeObj))(
+          "zoomScale", zoomScale)("timestamp", timestamp * 1000);
 
   return metrics;
 };
@@ -91,7 +93,7 @@ std::vector<DebugStringConvertibleObject> getDebugProps(
       {"layoutMeasurement",
        getDebugDescription(scrollEvent.layoutMeasurement, options)},
       {"zoomScale", getDebugDescription(scrollEvent.zoomScale, options)},
-  };
+      {"timestamp", getDebugDescription(scrollEvent.timestamp, options)}};
 }
 
 #endif

packages/react-native/ReactCommon/react/renderer/components/scrollview/ScrollEvent.h

@@ -21,6 +21,11 @@ struct ScrollEvent : public EventPayload {
   Size containerSize;
   Float zoomScale{};
 
+  /*
+   * The time in seconds when the touch occurred or when it was last mutated.
+   */
+  Float timestamp{};
+
   ScrollEvent() = default;
 
   folly::dynamic asDynamic() const;