From 235d9017cf0f4334ef90a6ce46b6bd4e9d3367bc Mon Sep 17 00:00:00 2001
From: Kevin Gozali <fkg@fb.com>
Date: Tue, 7 Aug 2018 21:20:58 -0700
Subject: [PATCH] added small UI indicator for fabric-based surfaces

Summary: To make debugging/testing easier, optionally display fabric label on the top-right of the surface if it's rendered on fabric mode.

Reviewed By: mdvacca

Differential Revision: D9206473

fbshipit-source-id: ef6f0396ff749f2a0415688b1cf4fe1a4b83124d
---
 Libraries/ReactNative/ReactFabricIndicator.js | 42 +++++++++++++++++++
 Libraries/ReactNative/renderApplication.js    |  5 +++
 2 files changed, 47 insertions(+)
 create mode 100644 Libraries/ReactNative/ReactFabricIndicator.js

diff --git a/Libraries/ReactNative/ReactFabricIndicator.js b/Libraries/ReactNative/ReactFabricIndicator.js
new file mode 100644
index 000000000..23b95f8c1
--- /dev/null
+++ b/Libraries/ReactNative/ReactFabricIndicator.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+const React = require('React');
+const StyleSheet = require('StyleSheet');
+const Text = require('Text');
+const View = require('View');
+
+function ReactFabricIndicator(): React.Node {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>FABRIC</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0, 0.25)',
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    padding: 2,
+  },
+  text: {
+    fontSize: 6,
+    color: '#ffffff',
+  },
+});
+
+module.exports = ReactFabricIndicator;
diff --git a/Libraries/ReactNative/renderApplication.js b/Libraries/ReactNative/renderApplication.js
index 7d699f754..193262fc6 100644
--- a/Libraries/ReactNative/renderApplication.js
+++ b/Libraries/ReactNative/renderApplication.js
@@ -12,6 +12,7 @@
 
 const AppContainer = require('AppContainer');
 const React = require('React');
+const ReactFabricIndicator = require('ReactFabricIndicator');
 
 const invariant = require('fbjs/lib/invariant');
 
@@ -24,12 +25,16 @@ function renderApplication<Props: Object>(
   rootTag: any,
   WrapperComponent?: ?React.ComponentType<*>,
   fabric?: boolean,
+  showFabricIndicator?: boolean,
 ) {
   invariant(rootTag, 'Expect to have a valid rootTag, instead got ', rootTag);
 
   let renderable = (
     <AppContainer rootTag={rootTag} WrapperComponent={WrapperComponent}>
       <RootComponent {...initialProps} rootTag={rootTag} />
+      {fabric === true && showFabricIndicator === true ? (
+        <ReactFabricIndicator />
+      ) : null}
     </AppContainer>
   );