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; | ||