From 514addc03ac1399e76ab2d8b15b9dead3390ac65 Mon Sep 17 00:00:00 2001 From: simek Date: Wed, 29 Apr 2020 11:48:37 +0200 Subject: [PATCH 1/3] move Hermes badge from template to NewAppScreen library --- .../NewAppScreen/components/HermesBadge.js | 46 +++++++++++++++++++ Libraries/NewAppScreen/index.js | 12 ++++- template/App.js | 28 +---------- 3 files changed, 58 insertions(+), 28 deletions(-) create mode 100644 Libraries/NewAppScreen/components/HermesBadge.js diff --git a/Libraries/NewAppScreen/components/HermesBadge.js b/Libraries/NewAppScreen/components/HermesBadge.js new file mode 100644 index 00000000000000..a8d3414d5958e0 --- /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({ + engine: { + position: 'absolute', + top: 8, + right: 12, + }, + footer: { + fontSize: 14, + fontWeight: '600', + textAlign: 'right', + }, +}); + +export default HermesBadge; diff --git a/Libraries/NewAppScreen/index.js b/Libraries/NewAppScreen/index.js index 4450683d792176..9da6d362b32924 100644 --- a/Libraries/NewAppScreen/index.js +++ b/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, +}; diff --git a/template/App.js b/template/App.js index 5d410f6da3f29a..75bf6dd8e6f427 100644 --- a/template/App.js +++ b/template/App.js @@ -22,6 +22,7 @@ import { Colors, DebugInstructions, Header, + HermesBadge, LearnMoreLinks, ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; @@ -59,20 +60,6 @@ const App: () => Node = () => { backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, }; - const hermes = global.HermesInternal ? ( - - - Engine: Hermes - - - ) : null; - return ( @@ -80,7 +67,7 @@ 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 +109,6 @@ const styles = StyleSheet.create({ highlight: { fontWeight: '700', }, - footer: { - fontSize: 12, - fontWeight: '600', - padding: 4, - paddingRight: 12, - textAlign: 'right', - }, }); export default App; From ee6f6875bd108b686ccfff380e00087c08608c60 Mon Sep 17 00:00:00 2001 From: simek Date: Wed, 29 Apr 2020 12:24:48 +0200 Subject: [PATCH 2/3] adjust styles naming --- Libraries/NewAppScreen/components/HermesBadge.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Libraries/NewAppScreen/components/HermesBadge.js b/Libraries/NewAppScreen/components/HermesBadge.js index a8d3414d5958e0..aa02f3a9881455 100644 --- a/Libraries/NewAppScreen/components/HermesBadge.js +++ b/Libraries/NewAppScreen/components/HermesBadge.js @@ -16,10 +16,10 @@ import Colors from './Colors'; const HermesBadge = (): Node => { const isDarkMode = useColorScheme() === 'dark'; return global.HermesInternal ? ( - + { }; const styles = StyleSheet.create({ - engine: { + badge: { position: 'absolute', top: 8, right: 12, }, - footer: { + badgeText: { fontSize: 14, fontWeight: '600', textAlign: 'right', From 8208447f637a547b34af78ce98b4b41132e7c710 Mon Sep 17 00:00:00 2001 From: simek Date: Wed, 29 Apr 2020 15:03:55 +0200 Subject: [PATCH 3/3] import Hermes badge in Header, adjust Header title --- Libraries/NewAppScreen/components/Header.js | 10 +++++++--- template/App.js | 2 -- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/Libraries/NewAppScreen/components/Header.js b/Libraries/NewAppScreen/components/Header.js index b69fa5a109149e..541a51ebf64431 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/template/App.js b/template/App.js index 75bf6dd8e6f427..f85f38d87adde7 100644 --- a/template/App.js +++ b/template/App.js @@ -22,7 +22,6 @@ import { Colors, DebugInstructions, Header, - HermesBadge, LearnMoreLinks, ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; @@ -67,7 +66,6 @@ const App: () => Node = () => { contentInsetAdjustmentBehavior="automatic" style={backgroundStyle}>
-