diff --git a/Libraries/NewAppScreen/components/Header.js b/Libraries/NewAppScreen/components/Header.js
index b69fa5a109..541a51ebf6 100644
--- a/Libraries/NewAppScreen/components/Header.js
+++ b/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,6 +28,7 @@ const Header = (): Node => {
},
]}
imageStyle={styles.logo}>
+
{
color: isDarkMode ? Colors.white : Colors.black,
},
]}>
- Welcome to React
+ Welcome to
+ {'\n'}
+ React Native
);
@@ -61,7 +65,7 @@ const styles = StyleSheet.create({
},
text: {
fontSize: 40,
- fontWeight: '600',
+ fontWeight: '700',
textAlign: 'center',
},
});
diff --git a/Libraries/NewAppScreen/components/HermesBadge.js b/Libraries/NewAppScreen/components/HermesBadge.js
new file mode 100644
index 0000000000..aa02f3a988
--- /dev/null
+++ b/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 ? (
+
+
+ Engine: Hermes
+
+
+ ) : null;
+};
+
+const styles = StyleSheet.create({
+ badge: {
+ position: 'absolute',
+ top: 8,
+ right: 12,
+ },
+ badgeText: {
+ fontSize: 14,
+ fontWeight: '600',
+ textAlign: 'right',
+ },
+});
+
+export default HermesBadge;
diff --git a/Libraries/NewAppScreen/index.js b/Libraries/NewAppScreen/index.js
index 4450683d79..9da6d362b3 100644
--- a/Libraries/NewAppScreen/index.js
+++ b/Libraries/NewAppScreen/index.js
@@ -10,10 +10,18 @@
'use strict';
-import Header from './components/Header';
-import LearnMoreLinks from './components/LearnMoreLinks';
import Colors from './components/Colors';
+import Header from './components/Header';
+import HermesBadge from './components/HermesBadge';
+import LearnMoreLinks from './components/LearnMoreLinks';
import DebugInstructions from './components/DebugInstructions';
import ReloadInstructions from './components/ReloadInstructions';
-export {Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions};
+export {
+ Colors,
+ Header,
+ HermesBadge,
+ LearnMoreLinks,
+ DebugInstructions,
+ ReloadInstructions,
+};
diff --git a/template/App.js b/template/App.js
index 5d410f6da3..f85f38d87a 100644
--- a/template/App.js
+++ b/template/App.js
@@ -59,20 +59,6 @@ const App: () => Node = () => {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
- const hermes = global.HermesInternal ? (
-
-
- Engine: Hermes
-
-
- ) : null;
-
return (
@@ -80,7 +66,6 @@ const App: () => Node = () => {
contentInsetAdjustmentBehavior="automatic"
style={backgroundStyle}>
- {hermes}
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;