move Hermes badge from template to NewAppScreen library

Libraries/NewAppScreen/components/Header.js

@@ -9,10 +9,11 @@
  */
 
 'use strict';
-import Colors from './Colors';
 import type {Node} from 'react';
 import {ImageBackground, StyleSheet, Text, useColorScheme} from 'react-native';
 import React from 'react';
+import Colors from './Colors';
+import HermesBadge from './HermesBadge';
 
 const Header = (): Node => {
   const isDarkMode = useColorScheme() === 'dark';
@@ -27,14 +28,17 @@ const Header = (): Node => {
         },
       ]}
       imageStyle={styles.logo}>
+      <HermesBadge />
       <Text
         style={[
           styles.text,
           {
             color: isDarkMode ? Colors.white : Colors.black,
           },
         ]}>
-        Welcome to React
+        Welcome to
+        {'\n'}
+        React Native
       </Text>
     </ImageBackground>
   );
@@ -61,7 +65,7 @@ const styles = StyleSheet.create({
   },
   text: {
     fontSize: 40,
-    fontWeight: '600',
+    fontWeight: '700',
     textAlign: 'center',
   },
 });

Libraries/NewAppScreen/components/HermesBadge.js

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import React from 'react';
+import type {Node} from 'react';
+import {StyleSheet, Text, useColorScheme, View} from 'react-native';
+import Colors from './Colors';
+
+const HermesBadge = (): Node => {
+  const isDarkMode = useColorScheme() === 'dark';
+  return global.HermesInternal ? (
+    <View style={styles.badge}>
+      <Text
+        style={[
+          styles.badgeText,
+          {
+            color: isDarkMode ? Colors.light : Colors.dark,
+          },
+        ]}>
+        Engine: Hermes
+      </Text>
+    </View>
+  ) : null;
+};
+
+const styles = StyleSheet.create({
+  badge: {
+    position: 'absolute',
+    top: 8,
+    right: 12,
+  },
+  badgeText: {
+    fontSize: 14,
+    fontWeight: '600',
+    textAlign: 'right',
+  },
+});
+
+export default HermesBadge;

Libraries/NewAppScreen/index.js

@@ -10,10 +10,18 @@
 
 'use strict';
 
+import Colors from './components/Colors';
 import Header from './components/Header';
+import HermesBadge from './components/HermesBadge';
 import LearnMoreLinks from './components/LearnMoreLinks';
-import Colors from './components/Colors';
 import DebugInstructions from './components/DebugInstructions';
 import ReloadInstructions from './components/ReloadInstructions';
 
-export {Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions};
+export {
+  Colors,
+  Header,
+  HermesBadge,
+  LearnMoreLinks,
+  DebugInstructions,
+  ReloadInstructions,
+};

template/App.js

@@ -59,28 +59,13 @@ const App: () => Node = () => {
     backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
   };
 
-  const hermes = global.HermesInternal ? (
-    <View style={styles.engine}>
-      <Text
-        style={[
-          styles.footer,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        Engine: Hermes
-      </Text>
-    </View>
-  ) : null;
-
   return (
     <SafeAreaView style={backgroundStyle}>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
       <ScrollView
         contentInsetAdjustmentBehavior="automatic"
         style={backgroundStyle}>
         <Header />
-        {hermes}
         <View
           style={{
             backgroundColor: isDarkMode ? Colors.black : Colors.white,
@@ -106,10 +91,6 @@ const App: () => Node = () => {
 };
 
 const styles = StyleSheet.create({
-  engine: {
-    position: 'absolute',
-    right: 0,
-  },
   sectionContainer: {
     marginTop: 32,
     paddingHorizontal: 24,
@@ -126,13 +107,6 @@ const styles = StyleSheet.create({
   highlight: {
     fontWeight: '700',
   },
-  footer: {
-    fontSize: 12,
-    fontWeight: '600',
-    padding: 4,
-    paddingRight: 12,
-    textAlign: 'right',
-  },
 });
 
 export default App;