Annotate <Image> components in QPL logging using ImageAnalyticsTagContext

Reviewed By: mdvacca

Differential Revision: D21696266

fbshipit-source-id: b5c9d167e9da77ed969f7b4bdea1af9dd2e471ae

Author: p-sun

Libraries/Image/Image.ios.js

@@ -15,6 +15,7 @@ const React = require('react');
 const ReactNative = require('../Renderer/shims/ReactNative'); // eslint-disable-line no-unused-vars
 const StyleSheet = require('../StyleSheet/StyleSheet');
 
+const ImageAnalyticsTagContext = require('./ImageAnalyticsTagContext').default;
 const flattenStyle = require('../StyleSheet/flattenStyle');
 const resolveAssetSource = require('./resolveAssetSource');
 
@@ -124,14 +125,21 @@ let Image = (props: ImagePropsType, forwardedRef) => {
   }
 
   return (
-    <ImageViewNativeComponent
-      {...props}
-      ref={forwardedRef}
-      style={style}
-      resizeMode={resizeMode}
-      tintColor={tintColor}
-      source={sources}
-    />
+    <ImageAnalyticsTagContext.Consumer>
+      {analyticTag => {
+        return (
+          <ImageViewNativeComponent
+            {...props}
+            ref={forwardedRef}
+            style={style}
+            resizeMode={resizeMode}
+            tintColor={tintColor}
+            source={sources}
+            internal_analyticTag={analyticTag}
+          />
+        );
+      }}
+    </ImageAnalyticsTagContext.Consumer>
   );
 };
 

Libraries/Image/RCTImageURLLoaderWithAttribution.h

@@ -15,6 +15,7 @@ namespace react {
 struct ImageURLLoaderAttribution {
   int32_t nativeViewTag = 0;
   int32_t surfaceId = 0;
+  NSString *analyticTag;
 };
 
 } // namespace react

Libraries/Image/RCTImageView.h

@@ -22,5 +22,6 @@
 @property (nonatomic, copy) NSArray<RCTImageSource *> *imageSources;
 @property (nonatomic, assign) CGFloat blurRadius;
 @property (nonatomic, assign) RCTResizeMode resizeMode;
+@property (nonatomic, copy) NSString *internal_analyticTag;
 
 @end

Libraries/Image/RCTImageView.mm

@@ -216,6 +216,13 @@ - (void)setResizeMode:(RCTResizeMode)resizeMode
   }
 }
 
+- (void)setInternal_analyticTag:(NSString *)internal_analyticTag {
+    if (_internal_analyticTag != internal_analyticTag) {
+        _internal_analyticTag = internal_analyticTag;
+        _needsReload = YES;
+    }
+}
+
 - (void)cancelImageLoad
 {
   [_loaderRequest cancel];
@@ -341,6 +348,7 @@ - (void)reloadImage
                                                                        attribution:{
                                                                                    .nativeViewTag = [self.reactTag intValue],
                                                                                    .surfaceId = [self.rootTag intValue],
+                                                                                   .analyticTag = self.internal_analyticTag
                                                                                    }
                                                                      progressBlock:progressHandler
                                                                   partialLoadBlock:partialLoadHandler

Libraries/Image/RCTImageViewManager.mm

@@ -40,6 +40,7 @@ - (UIView *)view
 RCT_EXPORT_VIEW_PROPERTY(onLoad, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onLoadEnd, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(resizeMode, RCTResizeMode)
+RCT_EXPORT_VIEW_PROPERTY(internal_analyticTag, NSString)
 RCT_REMAP_VIEW_PROPERTY(source, imageSources, NSArray<RCTImageSource *>);
 RCT_CUSTOM_VIEW_PROPERTY(tintColor, UIColor, RCTImageView)
 {

Libraries/Image/__tests__/__snapshots__/Image-test.js.snap

@@ -12,6 +12,7 @@ exports[`<Image /> should render as <Image> when mocked 1`] = `
 
 exports[`<Image /> should render as <RCTImageView> when not mocked 1`] = `
 <RCTImageView
+  internal_analyticTag={null}
   resizeMode="cover"
   source={
     Array [