diff --git a/Libraries/NewAppScreen/components/Colors.js b/Libraries/NewAppScreen/components/Colors.js index 19416c4cb4b094..471751de7580e4 100644 --- a/Libraries/NewAppScreen/components/Colors.js +++ b/Libraries/NewAppScreen/components/Colors.js @@ -16,5 +16,6 @@ export default { lighter: '#F3F3F3', light: '#DAE1E7', dark: '#444', + darker: '#222', black: '#000', }; diff --git a/Libraries/NewAppScreen/components/Header.js b/Libraries/NewAppScreen/components/Header.js index a2776b0b47f5d9..b69fa5a109149e 100644 --- a/Libraries/NewAppScreen/components/Header.js +++ b/Libraries/NewAppScreen/components/Header.js @@ -11,25 +11,40 @@ 'use strict'; import Colors from './Colors'; import type {Node} from 'react'; -import {Text, StyleSheet, ImageBackground} from 'react-native'; +import {ImageBackground, StyleSheet, Text, useColorScheme} from 'react-native'; import React from 'react'; -const Header = (): Node => ( - - Welcome to React - -); +const Header = (): Node => { + const isDarkMode = useColorScheme() === 'dark'; + return ( + + + Welcome to React + + + ); +}; const styles = StyleSheet.create({ background: { paddingBottom: 40, paddingTop: 96, paddingHorizontal: 32, - backgroundColor: Colors.lighter, }, logo: { opacity: 0.2, @@ -48,7 +63,6 @@ const styles = StyleSheet.create({ fontSize: 40, fontWeight: '600', textAlign: 'center', - color: Colors.black, }, }); diff --git a/Libraries/NewAppScreen/components/LearnMoreLinks.js b/Libraries/NewAppScreen/components/LearnMoreLinks.js index 9effd49e172093..9e12acc8ead130 100644 --- a/Libraries/NewAppScreen/components/LearnMoreLinks.js +++ b/Libraries/NewAppScreen/components/LearnMoreLinks.js @@ -12,8 +12,14 @@ import Colors from './Colors'; import type {Node} from 'react'; import openURLInBrowser from 'react-native/Libraries/Core/Devtools/openURLInBrowser'; -import {View, Text, StyleSheet, TouchableOpacity} from 'react-native'; -import React from 'react'; +import { + StyleSheet, + Text, + TouchableOpacity, + useColorScheme, + View, +} from 'react-native'; +import React, {Fragment} from 'react'; const links = [ { @@ -70,24 +76,40 @@ const links = [ }, ]; -const LinkList = (): Node => ( - - {links.map(({id, title, link, description}) => { - return ( - - +const LinkList = (): Node => { + const isDarkMode = useColorScheme() === 'dark'; + return ( + + {links.map(({id, title, link, description}) => ( + + openURLInBrowser(link)} style={styles.linkContainer}> {title} - {description} + + {description} + - - ); - })} - -); + + ))} + + ); +}; const styles = StyleSheet.create({ container: { @@ -112,11 +134,9 @@ const styles = StyleSheet.create({ paddingVertical: 16, fontWeight: '400', fontSize: 18, - color: Colors.dark, }, separator: { - backgroundColor: Colors.light, - height: 1, + height: StyleSheet.hairlineWidth, }, }); diff --git a/template/App.js b/template/App.js index 23cd158d89565c..5d410f6da3f29a 100644 --- a/template/App.js +++ b/template/App.js @@ -7,82 +7,109 @@ */ import React from 'react'; +import type {Node} from 'react'; import { SafeAreaView, - StyleSheet, ScrollView, - View, - Text, StatusBar, + StyleSheet, + Text, + useColorScheme, + View, } from 'react-native'; import { - Header, - LearnMoreLinks, Colors, DebugInstructions, + Header, + LearnMoreLinks, ReloadInstructions, } from 'react-native/Libraries/NewAppScreen'; -const App: () => React$Node = () => { +const Section = ({children, title}): Node => { + const isDarkMode = useColorScheme() === 'dark'; return ( - <> - - - -
- {global.HermesInternal == null ? null : ( - - Engine: Hermes - - )} - - - Step One - - Edit App.js to change this - screen and then come back to see your edits. - - - - See Your Changes - - - - - - Debug - - - - - - Learn More - - Read the docs to discover what to do next: - - - - - - - + + + {title} + + + {children} + + + ); +}; + +const App: () => Node = () => { + const isDarkMode = useColorScheme() === 'dark'; + + const backgroundStyle = { + backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, + }; + + const hermes = global.HermesInternal ? ( + + + Engine: Hermes + + + ) : null; + + return ( + + + +
+ {hermes} + +
+ Edit App.js to change this + screen and then come back to see your edits. +
+
+ +
+
+ +
+
+ Read the docs to discover what to do next: +
+ + + + ); }; const styles = StyleSheet.create({ - scrollView: { - backgroundColor: Colors.lighter, - }, engine: { position: 'absolute', right: 0, }, - body: { - backgroundColor: Colors.white, - }, sectionContainer: { marginTop: 32, paddingHorizontal: 24, @@ -90,19 +117,16 @@ const styles = StyleSheet.create({ sectionTitle: { fontSize: 24, fontWeight: '600', - color: Colors.black, }, sectionDescription: { marginTop: 8, fontSize: 18, fontWeight: '400', - color: Colors.dark, }, highlight: { fontWeight: '700', }, footer: { - color: Colors.dark, fontSize: 12, fontWeight: '600', padding: 4, diff --git a/template/android/app/src/main/res/values/styles.xml b/template/android/app/src/main/res/values/styles.xml index 62fe59fa485459..9fab0be743760d 100644 --- a/template/android/app/src/main/res/values/styles.xml +++ b/template/android/app/src/main/res/values/styles.xml @@ -1,7 +1,7 @@ - diff --git a/template/ios/HelloWorld/AppDelegate.m b/template/ios/HelloWorld/AppDelegate.m index c680572d44cce3..bea8d2b334b114 100644 --- a/template/ios/HelloWorld/AppDelegate.m +++ b/template/ios/HelloWorld/AppDelegate.m @@ -36,7 +36,11 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:( moduleName:@"HelloWorld" initialProperties:nil]; - rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; + if (@available(iOS 13.0, *)) { + rootView.backgroundColor = [UIColor systemBackgroundColor]; + } else { + rootView.backgroundColor = [UIColor whiteColor]; + } self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; UIViewController *rootViewController = [UIViewController new]; diff --git a/template/ios/HelloWorld/LaunchScreen.storyboard b/template/ios/HelloWorld/LaunchScreen.storyboard index 0d0edbb9640b43..e13962e9bf5470 100644 --- a/template/ios/HelloWorld/LaunchScreen.storyboard +++ b/template/ios/HelloWorld/LaunchScreen.storyboard @@ -16,32 +16,21 @@ - - + - - -