|
3 | 3 | * https://github.com/facebook/react-native |
4 | 4 | * |
5 | 5 | * @format |
6 | | - * @flow |
| 6 | + * @flow strict-local |
7 | 7 | */ |
8 | 8 |
|
9 | 9 | import React from 'react'; |
| 10 | +import type {Node} from 'react'; |
10 | 11 | import { |
11 | 12 | SafeAreaView, |
12 | | - StyleSheet, |
13 | 13 | ScrollView, |
14 | | - View, |
15 | | - Text, |
16 | 14 | StatusBar, |
| 15 | + StyleSheet, |
| 16 | + Text, |
| 17 | + useColorScheme, |
| 18 | + View, |
17 | 19 | } from 'react-native'; |
18 | 20 |
|
19 | 21 | import { |
20 | | - Header, |
21 | | - LearnMoreLinks, |
22 | 22 | Colors, |
23 | 23 | DebugInstructions, |
| 24 | + Header, |
| 25 | + LearnMoreLinks, |
24 | 26 | ReloadInstructions, |
25 | 27 | } from 'react-native/Libraries/NewAppScreen'; |
26 | 28 |
|
27 | | -const App: () => React$Node = () => { |
| 29 | +const Section = ({children, title}): Node => { |
| 30 | + const isDarkMode = useColorScheme() === 'dark'; |
28 | 31 | return ( |
29 | | - <> |
30 | | - <StatusBar barStyle="dark-content" /> |
31 | | - <SafeAreaView> |
32 | | - <ScrollView |
33 | | - contentInsetAdjustmentBehavior="automatic" |
34 | | - style={styles.scrollView}> |
35 | | - <Header /> |
36 | | - {global.HermesInternal == null ? null : ( |
37 | | - <View style={styles.engine}> |
38 | | - <Text style={styles.footer}>Engine: Hermes</Text> |
39 | | - </View> |
40 | | - )} |
41 | | - <View style={styles.body}> |
42 | | - <View style={styles.sectionContainer}> |
43 | | - <Text style={styles.sectionTitle}>Step One</Text> |
44 | | - <Text style={styles.sectionDescription}> |
45 | | - Edit <Text style={styles.highlight}>App.js</Text> to change this |
46 | | - screen and then come back to see your edits. |
47 | | - </Text> |
48 | | - </View> |
49 | | - <View style={styles.sectionContainer}> |
50 | | - <Text style={styles.sectionTitle}>See Your Changes</Text> |
51 | | - <Text style={styles.sectionDescription}> |
52 | | - <ReloadInstructions /> |
53 | | - </Text> |
54 | | - </View> |
55 | | - <View style={styles.sectionContainer}> |
56 | | - <Text style={styles.sectionTitle}>Debug</Text> |
57 | | - <Text style={styles.sectionDescription}> |
58 | | - <DebugInstructions /> |
59 | | - </Text> |
60 | | - </View> |
61 | | - <View style={styles.sectionContainer}> |
62 | | - <Text style={styles.sectionTitle}>Learn More</Text> |
63 | | - <Text style={styles.sectionDescription}> |
64 | | - Read the docs to discover what to do next: |
65 | | - </Text> |
66 | | - </View> |
67 | | - <LearnMoreLinks /> |
68 | | - </View> |
69 | | - </ScrollView> |
70 | | - </SafeAreaView> |
71 | | - </> |
| 32 | + <View style={styles.sectionContainer}> |
| 33 | + <Text |
| 34 | + style={[ |
| 35 | + styles.sectionTitle, |
| 36 | + { |
| 37 | + color: isDarkMode ? Colors.white : Colors.black, |
| 38 | + }, |
| 39 | + ]}> |
| 40 | + {title} |
| 41 | + </Text> |
| 42 | + <Text |
| 43 | + style={[ |
| 44 | + styles.sectionDescription, |
| 45 | + { |
| 46 | + color: isDarkMode ? Colors.light : Colors.dark, |
| 47 | + }, |
| 48 | + ]}> |
| 49 | + {children} |
| 50 | + </Text> |
| 51 | + </View> |
| 52 | + ); |
| 53 | +}; |
| 54 | + |
| 55 | +const App: () => Node = () => { |
| 56 | + const isDarkMode = useColorScheme() === 'dark'; |
| 57 | + |
| 58 | + const backgroundStyle = { |
| 59 | + backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, |
| 60 | + }; |
| 61 | + |
| 62 | + return ( |
| 63 | + <SafeAreaView style={backgroundStyle}> |
| 64 | + <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} /> |
| 65 | + <ScrollView |
| 66 | + contentInsetAdjustmentBehavior="automatic" |
| 67 | + style={backgroundStyle}> |
| 68 | + <Header /> |
| 69 | + <View |
| 70 | + style={{ |
| 71 | + backgroundColor: isDarkMode ? Colors.black : Colors.white, |
| 72 | + }}> |
| 73 | + <Section title="Step One"> |
| 74 | + Edit <Text style={styles.highlight}>App.js</Text> to change this |
| 75 | + screen and then come back to see your edits. |
| 76 | + </Section> |
| 77 | + <Section title="See Your Changes"> |
| 78 | + <ReloadInstructions /> |
| 79 | + </Section> |
| 80 | + <Section title="Debug"> |
| 81 | + <DebugInstructions /> |
| 82 | + </Section> |
| 83 | + <Section title="Learn More"> |
| 84 | + Read the docs to discover what to do next: |
| 85 | + </Section> |
| 86 | + <LearnMoreLinks /> |
| 87 | + </View> |
| 88 | + </ScrollView> |
| 89 | + </SafeAreaView> |
72 | 90 | ); |
73 | 91 | }; |
74 | 92 |
|
75 | 93 | const styles = StyleSheet.create({ |
76 | | - scrollView: { |
77 | | - backgroundColor: Colors.lighter, |
78 | | - }, |
79 | | - engine: { |
80 | | - position: 'absolute', |
81 | | - right: 0, |
82 | | - }, |
83 | | - body: { |
84 | | - backgroundColor: Colors.white, |
85 | | - }, |
86 | 94 | sectionContainer: { |
87 | 95 | marginTop: 32, |
88 | 96 | paddingHorizontal: 24, |
89 | 97 | }, |
90 | 98 | sectionTitle: { |
91 | 99 | fontSize: 24, |
92 | 100 | fontWeight: '600', |
93 | | - color: Colors.black, |
94 | 101 | }, |
95 | 102 | sectionDescription: { |
96 | 103 | marginTop: 8, |
97 | 104 | fontSize: 18, |
98 | 105 | fontWeight: '400', |
99 | | - color: Colors.dark, |
100 | 106 | }, |
101 | 107 | highlight: { |
102 | 108 | fontWeight: '700', |
103 | 109 | }, |
104 | | - footer: { |
105 | | - color: Colors.dark, |
106 | | - fontSize: 12, |
107 | | - fontWeight: '600', |
108 | | - padding: 4, |
109 | | - paddingRight: 12, |
110 | | - textAlign: 'right', |
111 | | - }, |
112 | 110 | }); |
113 | 111 |
|
114 | 112 | export default App; |
0 commit comments