diff options
Diffstat (limited to 'App.tsx')
-rw-r--r-- | App.tsx | 118 |
1 files changed, 0 insertions, 118 deletions
diff --git a/App.tsx b/App.tsx deleted file mode 100644 index 125fe1b..0000000 --- a/App.tsx +++ /dev/null | |||
@@ -1,118 +0,0 @@ | |||
1 | /** | ||
2 | * Sample React Native App | ||
3 | * https://github.com/facebook/react-native | ||
4 | * | ||
5 | * @format | ||
6 | */ | ||
7 | |||
8 | import React from 'react'; | ||
9 | import type {PropsWithChildren} from 'react'; | ||
10 | import { | ||
11 | SafeAreaView, | ||
12 | ScrollView, | ||
13 | StatusBar, | ||
14 | StyleSheet, | ||
15 | Text, | ||
16 | useColorScheme, | ||
17 | View, | ||
18 | } from 'react-native'; | ||
19 | |||
20 | import { | ||
21 | Colors, | ||
22 | DebugInstructions, | ||
23 | Header, | ||
24 | LearnMoreLinks, | ||
25 | ReloadInstructions, | ||
26 | } from 'react-native/Libraries/NewAppScreen'; | ||
27 | |||
28 | type SectionProps = PropsWithChildren<{ | ||
29 | title: string; | ||
30 | }>; | ||
31 | |||
32 | function Section({children, title}: SectionProps): React.JSX.Element { | ||
33 | const isDarkMode = useColorScheme() === 'dark'; | ||
34 | return ( | ||
35 | <View style={styles.sectionContainer}> | ||
36 | <Text | ||
37 | style={[ | ||
38 | styles.sectionTitle, | ||
39 | { | ||
40 | color: isDarkMode ? Colors.white : Colors.black, | ||
41 | }, | ||
42 | ]}> | ||
43 | {title} | ||
44 | </Text> | ||
45 | <Text | ||
46 | style={[ | ||
47 | styles.sectionDescription, | ||
48 | { | ||
49 | color: isDarkMode ? Colors.light : Colors.dark, | ||
50 | }, | ||
51 | ]}> | ||
52 | {children} | ||
53 | </Text> | ||
54 | </View> | ||
55 | ); | ||
56 | } | ||
57 | |||
58 | function App(): React.JSX.Element { | ||
59 | const isDarkMode = useColorScheme() === 'dark'; | ||
60 | |||
61 | const backgroundStyle = { | ||
62 | backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, | ||
63 | }; | ||
64 | |||
65 | return ( | ||
66 | <SafeAreaView style={backgroundStyle}> | ||
67 | <StatusBar | ||
68 | barStyle={isDarkMode ? 'light-content' : 'dark-content'} | ||
69 | backgroundColor={backgroundStyle.backgroundColor} | ||
70 | /> | ||
71 | <ScrollView | ||
72 | contentInsetAdjustmentBehavior="automatic" | ||
73 | style={backgroundStyle}> | ||
74 | <Header /> | ||
75 | <View | ||
76 | style={{ | ||
77 | backgroundColor: isDarkMode ? Colors.black : Colors.white, | ||
78 | }}> | ||
79 | <Section title="Step One"> | ||
80 | Edit <Text style={styles.highlight}>App.tsx</Text> to change this | ||
81 | screen and then come back to see your edits. | ||
82 | </Section> | ||
83 | <Section title="See Your Changes"> | ||
84 | <ReloadInstructions /> | ||
85 | </Section> | ||
86 | <Section title="Debug"> | ||
87 | <DebugInstructions /> | ||
88 | </Section> | ||
89 | <Section title="Learn More"> | ||
90 | Read the docs to discover what to do next: | ||
91 | </Section> | ||
92 | <LearnMoreLinks /> | ||
93 | </View> | ||
94 | </ScrollView> | ||
95 | </SafeAreaView> | ||
96 | ); | ||
97 | } | ||
98 | |||
99 | const styles = StyleSheet.create({ | ||
100 | sectionContainer: { | ||
101 | marginTop: 32, | ||
102 | paddingHorizontal: 24, | ||
103 | }, | ||
104 | sectionTitle: { | ||
105 | fontSize: 24, | ||
106 | fontWeight: '600', | ||
107 | }, | ||
108 | sectionDescription: { | ||
109 | marginTop: 8, | ||
110 | fontSize: 18, | ||
111 | fontWeight: '400', | ||
112 | }, | ||
113 | highlight: { | ||
114 | fontWeight: '700', | ||
115 | }, | ||
116 | }); | ||
117 | |||
118 | export default App; | ||