this repo has no description
hailey.at
1import { Image } from 'expo-image';
2import { Platform, StyleSheet } from 'react-native';
3
4import { Collapsible } from '@/components/Collapsible';
5import { ExternalLink } from '@/components/ExternalLink';
6import ParallaxScrollView from '@/components/ParallaxScrollView';
7import { ThemedText } from '@/components/ThemedText';
8import { ThemedView } from '@/components/ThemedView';
9import { IconSymbol } from '@/components/ui/IconSymbol';
10
11export default function TabTwoScreen() {
12 return (
13 <ParallaxScrollView
14 headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
15 headerImage={
16 <IconSymbol
17 size={310}
18 color="#808080"
19 name="chevron.left.forwardslash.chevron.right"
20 style={styles.headerImage}
21 />
22 }>
23 <ThemedView style={styles.titleContainer}>
24 <ThemedText type="title">Explore</ThemedText>
25 </ThemedView>
26 <ThemedText>This app includes example code to help you get started.</ThemedText>
27 <Collapsible title="File-based routing">
28 <ThemedText>
29 This app has two screens:{' '}
30 <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
31 <ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
32 </ThemedText>
33 <ThemedText>
34 The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
35 sets up the tab navigator.
36 </ThemedText>
37 <ExternalLink href="https://docs.expo.dev/router/introduction">
38 <ThemedText type="link">Learn more</ThemedText>
39 </ExternalLink>
40 </Collapsible>
41 <Collapsible title="Android, iOS, and web support">
42 <ThemedText>
43 You can open this project on Android, iOS, and the web. To open the web version, press{' '}
44 <ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
45 </ThemedText>
46 </Collapsible>
47 <Collapsible title="Images">
48 <ThemedText>
49 For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
50 <ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
51 different screen densities
52 </ThemedText>
53 <Image source={require('@/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} />
54 <ExternalLink href="https://reactnative.dev/docs/images">
55 <ThemedText type="link">Learn more</ThemedText>
56 </ExternalLink>
57 </Collapsible>
58 <Collapsible title="Custom fonts">
59 <ThemedText>
60 Open <ThemedText type="defaultSemiBold">app/_layout.tsx</ThemedText> to see how to load{' '}
61 <ThemedText style={{ fontFamily: 'SpaceMono' }}>
62 custom fonts such as this one.
63 </ThemedText>
64 </ThemedText>
65 <ExternalLink href="https://docs.expo.dev/versions/latest/sdk/font">
66 <ThemedText type="link">Learn more</ThemedText>
67 </ExternalLink>
68 </Collapsible>
69 <Collapsible title="Light and dark mode components">
70 <ThemedText>
71 This template has light and dark mode support. The{' '}
72 <ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
73 what the user's current color scheme is, and so you can adjust UI colors accordingly.
74 </ThemedText>
75 <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
76 <ThemedText type="link">Learn more</ThemedText>
77 </ExternalLink>
78 </Collapsible>
79 <Collapsible title="Animations">
80 <ThemedText>
81 This template includes an example of an animated component. The{' '}
82 <ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
83 the powerful <ThemedText type="defaultSemiBold">react-native-reanimated</ThemedText>{' '}
84 library to create a waving hand animation.
85 </ThemedText>
86 {Platform.select({
87 ios: (
88 <ThemedText>
89 The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
90 component provides a parallax effect for the header image.
91 </ThemedText>
92 ),
93 })}
94 </Collapsible>
95 </ParallaxScrollView>
96 );
97}
98
99const styles = StyleSheet.create({
100 headerImage: {
101 color: '#808080',
102 bottom: -90,
103 left: -35,
104 position: 'absolute',
105 },
106 titleContainer: {
107 flexDirection: 'row',
108 gap: 8,
109 },
110});