Fix View/Text displayName (#21950)

rajivshah3 · facebook-github-bot · commit 7a914fcef4ae · 2018-10-29T12:42:10.000-07:00
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
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>,
 ]
 `;

Original file line number	Diff line number	Diff line change
`@@ -49,6 +49,7 @@ if (__DEV__) {`
`49`	`49`	`};`
`50`	`50`	// $FlowFixMe - TODO T29156721 `React.forwardRef` is not defined in Flow, yet.
`51`	`51`	`ViewToExport = React.forwardRef(View);`
	`52`	`+ ViewToExport.displayName = 'View';`
`52`	`53`	`}`
`53`	`54`	`}`
`54`	`55`
Original file line number	Diff line number	Diff line change
`@@ -2,94 +2,94 @@`
`2`	`2`
`3`	`3`	exports[`YellowBoxCategory renders a single substitution 1`] = `
`4`	`4`	`Array [`
`5`		`- <Component`
	`5`	`+ <Text`
`6`	`6`	`style={`
`7`	`7`	`Object {`
`8`	`8`	`"fontWeight": "bold",`
`9`	`9`	`}`
`10`	`10`	`}`
`11`	`11`	`>`
`12`	`12`	`"A"`
`13`		`- </Component>,`
	`13`	`+ </Text>,`
`14`	`14`	`]`
`15`	`15`	`;
`16`	`16`
`17`	`17`	exports[`YellowBoxCategory renders content with no substitutions 1`] = `
`18`	`18`	`Array [`
`19`		`- <Component>`
	`19`	`+ <Text>`
`20`	`20`	`A`
`21`		`- </Component>,`
	`21`	`+ </Text>,`
`22`	`22`	`]`
`23`	`23`	`;
`24`	`24`
`25`	`25`	exports[`YellowBoxCategory renders multiple substitutions 1`] = `
`26`	`26`	`Array [`
`27`		`- <Component`
	`27`	`+ <Text`
`28`	`28`	`style={`
`29`	`29`	`Object {`
`30`	`30`	`"fontWeight": "bold",`
`31`	`31`	`}`
`32`	`32`	`}`
`33`	`33`	`>`
`34`	`34`	`"A"`
`35`		`- </Component>,`
`36`		`- <Component>`
	`35`	`+ </Text>,`
	`36`	`+ <Text>`
`37`	`37`
`38`		`- </Component>,`
`39`		`- <Component`
	`38`	`+ </Text>,`
	`39`	`+ <Text`
`40`	`40`	`style={`
`41`	`41`	`Object {`
`42`	`42`	`"fontWeight": "bold",`
`43`	`43`	`}`
`44`	`44`	`}`
`45`	`45`	`>`
`46`	`46`	`"B"`
`47`		`- </Component>,`
`48`		`- <Component>`
	`47`	`+ </Text>,`
	`48`	`+ <Text>`
`49`	`49`
`50`		`- </Component>,`
`51`		`- <Component`
	`50`	`+ </Text>,`
	`51`	`+ <Text`
`52`	`52`	`style={`
`53`	`53`	`Object {`
`54`	`54`	`"fontWeight": "bold",`
`55`	`55`	`}`
`56`	`56`	`}`
`57`	`57`	`>`
`58`	`58`	`"C"`
`59`		`- </Component>,`
	`59`	`+ </Text>,`
`60`	`60`	`]`
`61`	`61`	`;
`62`	`62`
`63`	`63`	exports[`YellowBoxCategory renders substitutions with leading content 1`] = `
`64`	`64`	`Array [`
`65`		`- <Component>`
	`65`	`+ <Text>`
`66`	`66`	`!`
`67`		`- </Component>,`
`68`		`- <Component`
	`67`	`+ </Text>,`
	`68`	`+ <Text`
`69`	`69`	`style={`
`70`	`70`	`Object {`
`71`	`71`	`"fontWeight": "bold",`
`72`	`72`	`}`
`73`	`73`	`}`
`74`	`74`	`>`
`75`	`75`	`"A"`
`76`		`- </Component>,`
	`76`	`+ </Text>,`
`77`	`77`	`]`
`78`	`78`	`;
`79`	`79`
`80`	`80`	exports[`YellowBoxCategory renders substitutions with trailing content 1`] = `
`81`	`81`	`Array [`
`82`		`- <Component`
	`82`	`+ <Text`
`83`	`83`	`style={`
`84`	`84`	`Object {`
`85`	`85`	`"fontWeight": "bold",`
`86`	`86`	`}`
`87`	`87`	`}`
`88`	`88`	`>`
`89`	`89`	`"A"`
`90`		`- </Component>,`
`91`		`- <Component>`
	`90`	`+ </Text>,`
	`91`	`+ <Text>`
`92`	`92`	`!`
`93`		`- </Component>,`
	`93`	`+ </Text>,`
`94`	`94`	`]`
`95`	`95`	`;