Fix View/Text displayName (#21950)

Summary: Adds the displayName prop to `View` and `Text` components. Because these now use `React.forwardRef`, they were showing as `Component` instead of their actual names. Thanks to ljharb for helping to pinpoint the source of the issue! Fixes #21937 Pull Request resolved: #21950 Differential Revision: D12827060 Pulled By: TheSavior fbshipit-source-id: d812cae14d53ad821ab5873e737db63ad1a989e3
facebook · Oct 29, 2018 · 7a914fc · 7a914fc
1 parent c91a2b3
commit 7a914fc
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 22 deletions.
diff --git a/Libraries/Components/View/View.js b/Libraries/Components/View/View.js
@@ -49,6 +49,7 @@ if (__DEV__) {
     };
     // $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
     ViewToExport = React.forwardRef(View);
+    ViewToExport.displayName = 'View';
   }
 }
 

diff --git a/Libraries/Text/Text.js b/Libraries/Text/Text.js
@@ -277,6 +277,7 @@ const Text = (
 };
 // $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
 const TextToExport = React.forwardRef(Text);
+TextToExport.displayName = 'Text';
 
 // TODO: Deprecate this.
 TextToExport.propTypes = DeprecatedTextPropTypes;

diff --git a/Libraries/YellowBox/Data/__tests__/__snapshots__/YellowBoxCategory-test.js.snap b/Libraries/YellowBox/Data/__tests__/__snapshots__/YellowBoxCategory-test.js.snap
@@ -2,94 +2,94 @@
 
 exports[`YellowBoxCategory renders a single substitution 1`] = `
 Array [
-  <Component
+  <Text
     style={
       Object {
         "fontWeight": "bold",
       }
     }
   >
     "A"
-  </Component>,
+  </Text>,
 ]
 `;
 
 exports[`YellowBoxCategory renders content with no substitutions 1`] = `
 Array [
-  <Component>
+  <Text>
     A
-  </Component>,
+  </Text>,
 ]
 `;
 
 exports[`YellowBoxCategory renders multiple substitutions 1`] = `
 Array [
-  <Component
+  <Text
     style={
       Object {
         "fontWeight": "bold",
       }
     }
   >
     "A"
-  </Component>,
-  <Component>
+  </Text>,
+  <Text>
      
-  </Component>,
-  <Component
+  </Text>,
+  <Text
     style={
       Object {
         "fontWeight": "bold",
       }
     }
   >
     "B"
-  </Component>,
-  <Component>
+  </Text>,
+  <Text>
      
-  </Component>,
-  <Component
+  </Text>,
+  <Text
     style={
       Object {
         "fontWeight": "bold",
       }
     }
   >
     "C"
-  </Component>,
+  </Text>,
 ]
 `;
 
 exports[`YellowBoxCategory renders substitutions with leading content 1`] = `
 Array [
-  <Component>
+  <Text>
     !
-  </Component>,
-  <Component
+  </Text>,
+  <Text
     style={
       Object {
         "fontWeight": "bold",
       }
     }
   >
     "A"
-  </Component>,
+  </Text>,
 ]
 `;
 
 exports[`YellowBoxCategory renders substitutions with trailing content 1`] = `
 Array [
-  <Component
+  <Text
     style={
       Object {
         "fontWeight": "bold",
       }
     }
   >
     "A"
-  </Component>,
-  <Component>
+  </Text>,
+  <Text>
     !
-  </Component>,
+  </Text>,
 ]
 `;