|
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