diff options
Diffstat (limited to 'app/(tabs)/index.tsx')
-rw-r--r-- | app/(tabs)/index.tsx | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx new file mode 100644 index 0000000..462e8cd --- /dev/null +++ b/app/(tabs)/index.tsx @@ -0,0 +1,75 @@ +import { Image } from 'expo-image'; +import { Platform, StyleSheet } from 'react-native'; + +import { HelloWave } from '@/components/HelloWave'; +import ParallaxScrollView from '@/components/ParallaxScrollView'; +import { ThemedText } from '@/components/ThemedText'; +import { ThemedView } from '@/components/ThemedView'; + +export default function HomeScreen() { + return ( + <ParallaxScrollView + headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }} + headerImage={ + <Image + source={require('@/assets/images/partial-react-logo.png')} + style={styles.reactLogo} + /> + }> + <ThemedView style={styles.titleContainer}> + <ThemedText type="title">Welcome!</ThemedText> + <HelloWave /> + </ThemedView> + <ThemedView style={styles.stepContainer}> + <ThemedText type="subtitle">Step 1: Try it</ThemedText> + <ThemedText> + Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes. + Press{' '} + <ThemedText type="defaultSemiBold"> + {Platform.select({ + ios: 'cmd + d', + android: 'cmd + m', + web: 'F12', + })} + </ThemedText>{' '} + to open developer tools. + </ThemedText> + </ThemedView> + <ThemedView style={styles.stepContainer}> + <ThemedText type="subtitle">Step 2: Explore</ThemedText> + <ThemedText> + {`Tap the Explore tab to learn more about what's included in this starter app.`} + </ThemedText> + </ThemedView> + <ThemedView style={styles.stepContainer}> + <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText> + <ThemedText> + {`When you're ready, run `} + <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '} + <ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '} + <ThemedText type="defaultSemiBold">app</ThemedText> to{' '} + <ThemedText type="defaultSemiBold">app-example</ThemedText>. + </ThemedText> + </ThemedView> + </ParallaxScrollView> + ); +} + +const styles = StyleSheet.create({ + titleContainer: { + flexDirection: 'row', + alignItems: 'center', + gap: 8, + }, + stepContainer: { + gap: 8, + marginBottom: 8, + }, + reactLogo: { + height: 178, + width: 290, + bottom: 0, + left: 0, + position: 'absolute', + }, +}); |