From 1c634a921887caf02f1b9fba6fd177c352f9ef78 Mon Sep 17 00:00:00 2001 From: simek Date: Tue, 14 Jul 2020 06:26:18 -0700 Subject: [PATCH] move Hermes badge from template to NewAppScreen library (#28783) Summary: Refs https://github.com/facebook/react-native/issues/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: https://github.com/facebook/react-native/pull/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 | 10 ++-- .../NewAppScreen/components/HermesBadge.js | 46 +++++++++++++++++++ Libraries/NewAppScreen/index.js | 14 ++++-- template/App.js | 26 ----------- 4 files changed, 64 insertions(+), 32 deletions(-) create mode 100644 Libraries/NewAppScreen/components/HermesBadge.js 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;