diff options
author | Paul Frazee <pfrazee@gmail.com> | 2022-06-08 15:52:12 -0500 |
---|---|---|
committer | Paul Frazee <pfrazee@gmail.com> | 2022-06-08 15:52:12 -0500 |
commit | 92ca49ab9a309510a5503a4df6a0ebcfba30f918 (patch) | |
tree | 55d6741b92bf613ba8e197084965a00fc09dfe28 /src/App.tsx | |
parent | efe65e70d7f8a4f30e4c780c5fdb56f3c81f377e (diff) | |
download | voidsky-92ca49ab9a309510a5503a4df6a0ebcfba30f918.tar.zst |
Add web target
Diffstat (limited to 'src/App.tsx')
-rw-r--r-- | src/App.tsx | 73 |
1 files changed, 19 insertions, 54 deletions
diff --git a/src/App.tsx b/src/App.tsx index 3927851be..e0a0241bb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -19,68 +19,39 @@ import { useColorScheme, View, } from 'react-native'; -import { NavigationContainer } from '@react-navigation/native'; -import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack'; - +import {NavigationContainer} from '@react-navigation/native'; import { - Colors, - DebugInstructions, - Header, - LearnMoreLinks, - ReloadInstructions, -} from 'react-native/Libraries/NewAppScreen'; + createNativeStackNavigator, + NativeStackScreenProps, +} from '@react-navigation/native-stack'; type RootStackParamList = { Home: undefined; - Profile: { name: string }; + Profile: {name: string}; }; const Stack = createNativeStackNavigator(); const Section: React.FC<{ title: string; }> = ({children, title}) => { - const isDarkMode = useColorScheme() === 'dark'; return ( <View style={styles.sectionContainer}> - <Text - style={[ - styles.sectionTitle, - { - color: isDarkMode ? Colors.white : Colors.black, - }, - ]}> - {title} - </Text> - <Text - style={[ - styles.sectionDescription, - { - color: isDarkMode ? Colors.light : Colors.dark, - }, - ]}> - {children} - </Text> + <Text style={styles.sectionTitle}>{title}</Text> + <Text style={styles.sectionDescription}>{children}</Text> </View> ); }; -const HomeScreen = ({ navigation }: NativeStackScreenProps<RootStackParamList, 'Home'>) => { +const HomeScreen = ({ + navigation, +}: NativeStackScreenProps<RootStackParamList, 'Home'>) => { const isDarkMode = useColorScheme() === 'dark'; - const backgroundStyle = { - backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, - }; return ( - <SafeAreaView style={backgroundStyle}> + <SafeAreaView> <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} /> - <ScrollView - contentInsetAdjustmentBehavior="automatic" - style={backgroundStyle}> - <Header /> - <View - style={{ - backgroundColor: isDarkMode ? Colors.black : Colors.white, - }}> + <ScrollView contentInsetAdjustmentBehavior="automatic"> + <View> <Section title="Step One"> Edit <Text style={styles.highlight}>App.tsx</Text> to change this screen and then come back to see your edits. @@ -89,35 +60,29 @@ const HomeScreen = ({ navigation }: NativeStackScreenProps<RootStackParamList, ' onPress={() => navigation.navigate('Profile', {name: 'Jane'})} /> </Section> - <Section title="See Your Changes"> - <ReloadInstructions /> - </Section> - <Section title="Debug"> - <DebugInstructions /> - </Section> <Section title="Learn More"> Read the docs to discover what to do next: </Section> - <LearnMoreLinks /> </View> </ScrollView> </SafeAreaView> - ) -} + ); +}; -const ProfileScreen = ({ navigation, route }: NativeStackScreenProps<RootStackParamList, 'Profile'>) => { +const ProfileScreen = ({ + route, +}: NativeStackScreenProps<RootStackParamList, 'Profile'>) => { return <Text>This is {route.params.name}'s profile</Text>; }; const App = () => { - return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} - options={{ title: 'Welcome' }} + options={{title: 'Welcome'}} /> <Stack.Screen name="Profile" component={ProfileScreen} /> </Stack.Navigator> |