move Hermes badge from template to NewAppScreen library (#28783)

Summary:
Refs #28711

This PR moves Hermes badge component from the template to the `NewAppScreen` library. The main motivation behind this change was to simplify a bit template code.

I assumed that it is not important to expose `global.HermesInternal` to the template users:
* If this assumption is true, I think that there are no other reason to leave this component inside `App` in comparison to other `NewAppScreen` components,
* If this assumption is false, I can adjust this PR and move `HermesInternal` check from the badge component to the `App`.

I was trying to avoid calling `useColorScheme` when Hermes is disabled, but placing hook inside the conditional branch causes ESLint warning (react-hooks/rules-of-hooks).

This PR includes also small style tweaks for the badge - since there are no background padding can be omitted and spacing can be added adjusted tweaking `top` and `left` properties and `fontSize` has been adjusted just for the readability.

In the last commit, I have gone a bit further and moved `HermesBadge` to the `Header` component and I have also changed slightly the `Header` title (React -> React Native) and it's styling.
> I'm not sure if after this change `HermesBadge` export in `NewAppScreen` components list is still required, but maybe this badge will be useful for someone. If it's a mistake I can update the PR and remove this export.

## Changelog

[Internal][Changed] move Hermes badge from the template to the NewAppScreen library

Pull Request resolved: #28783

Test Plan:
Template app do not redbox on Android emulator with and without Hermes enabled.

## Preview
Android with Hermes enabled and adjusted header:

![Screenshot_1588164908](https://user-images.githubusercontent.com/719641/80599357-16dc8900-8a2b-11ea-8b3e-9a2cb26d3470.png)

iOS with adjusted header:

![IMG_6551](https://user-images.githubusercontent.com/719641/80599445-3bd0fc00-8a2b-11ea-8215-318625ddad13.PNG)

Reviewed By: GijsWeterings

Differential Revision: D22493822

Pulled By: cpojer

fbshipit-source-id: 3440e10f2d59f268ca8851a6e002f0ff23fa839c

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;