gib/expo_template
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add prettier

Browse Source
This commit is contained in:
Gabriel Brown
2025-01-28 08:45:02 -06:00
parent db606f2e2a
commit 5a821fc6b5
16 changed files with 115 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/(tabs)/_layout.tsx
View File

@ -25,19 +25,20 @@ export default function TabLayout() {
},
default: {},
}),
}}>
}}
>
<Tabs.Screen
name="index"
name='index'
options={{
title: 'Home',
tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
tabBarIcon: ({ color }) => <IconSymbol size={28} name='house.fill' color={color} />,
}}
/>
<Tabs.Screen
name="explore"
name='explore'
options={{
title: 'Explore',
tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
tabBarIcon: ({ color }) => <IconSymbol size={28} name='paperplane.fill' color={color} />,
}}
/>
</Tabs>

59
app/(tabs)/explore.tsx
View File

@ -14,78 +14,79 @@ export default function TabTwoScreen() {
headerImage={
<IconSymbol
size={310}
color="#808080"
name="chevron.left.forwardslash.chevron.right"
color='#808080'
name='chevron.left.forwardslash.chevron.right'
style={styles.headerImage}
/>
}>
}
>
<ThemedView style={styles.titleContainer}>
<ThemedText type="title">Explore</ThemedText>
<ThemedText type='title'>Explore</ThemedText>
</ThemedView>
<ThemedText>This app includes example code to help you get started.</ThemedText>
<Collapsible title="File-based routing">
<Collapsible title='File-based routing'>
<ThemedText>
This app has two screens:{' '}
<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
<ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
<ThemedText type='defaultSemiBold'>app/(tabs)/index.tsx</ThemedText> and{' '}
<ThemedText type='defaultSemiBold'>app/(tabs)/explore.tsx</ThemedText>
</ThemedText>
<ThemedText>
The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
The layout file in <ThemedText type='defaultSemiBold'>app/(tabs)/_layout.tsx</ThemedText>{' '}
sets up the tab navigator.
</ThemedText>
<ExternalLink href="https://docs.expo.dev/router/introduction">
<ThemedText type="link">Learn more</ThemedText>
<ExternalLink href='https://docs.expo.dev/router/introduction'>
<ThemedText type='link'>Learn more</ThemedText>
</ExternalLink>
</Collapsible>
<Collapsible title="Android, iOS, and web support">
<Collapsible title='Android, iOS, and web support'>
<ThemedText>
You can open this project on Android, iOS, and the web. To open the web version, press{' '}
<ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
<ThemedText type='defaultSemiBold'>w</ThemedText> in the terminal running this project.
</ThemedText>
</Collapsible>
<Collapsible title="Images">
<Collapsible title='Images'>
<ThemedText>
For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
<ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
For static images, you can use the <ThemedText type='defaultSemiBold'>@2x</ThemedText> and{' '}
<ThemedText type='defaultSemiBold'>@3x</ThemedText> suffixes to provide files for
different screen densities
</ThemedText>
<Image source={require('@/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} />
<ExternalLink href="https://reactnative.dev/docs/images">
<ThemedText type="link">Learn more</ThemedText>
<ExternalLink href='https://reactnative.dev/docs/images'>
<ThemedText type='link'>Learn more</ThemedText>
</ExternalLink>
</Collapsible>
<Collapsible title="Custom fonts">
<Collapsible title='Custom fonts'>
<ThemedText>
Open <ThemedText type="defaultSemiBold">app/_layout.tsx</ThemedText> to see how to load{' '}
Open <ThemedText type='defaultSemiBold'>app/_layout.tsx</ThemedText> to see how to load{' '}
<ThemedText style={{ fontFamily: 'SpaceMono' }}>
custom fonts such as this one.
</ThemedText>
</ThemedText>
<ExternalLink href="https://docs.expo.dev/versions/latest/sdk/font">
<ThemedText type="link">Learn more</ThemedText>
<ExternalLink href='https://docs.expo.dev/versions/latest/sdk/font'>
<ThemedText type='link'>Learn more</ThemedText>
</ExternalLink>
</Collapsible>
<Collapsible title="Light and dark mode components">
<Collapsible title='Light and dark mode components'>
<ThemedText>
This template has light and dark mode support. The{' '}
<ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
<ThemedText type='defaultSemiBold'>useColorScheme()</ThemedText> hook lets you inspect
what the user's current color scheme is, and so you can adjust UI colors accordingly.
</ThemedText>
<ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
<ThemedText type="link">Learn more</ThemedText>
<ExternalLink href='https://docs.expo.dev/develop/user-interface/color-themes/'>
<ThemedText type='link'>Learn more</ThemedText>
</ExternalLink>
</Collapsible>
<Collapsible title="Animations">
<Collapsible title='Animations'>
<ThemedText>
This template includes an example of an animated component. The{' '}
<ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
the powerful <ThemedText type="defaultSemiBold">react-native-reanimated</ThemedText>{' '}
<ThemedText type='defaultSemiBold'>components/HelloWave.tsx</ThemedText> component uses
the powerful <ThemedText type='defaultSemiBold'>react-native-reanimated</ThemedText>{' '}
library to create a waving hand animation.
</ThemedText>
{Platform.select({
ios: (
<ThemedText>
The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
The <ThemedText type='defaultSemiBold'>components/ParallaxScrollView.tsx</ThemedText>{' '}
component provides a parallax effect for the header image.
</ThemedText>
),

25
app/(tabs)/index.tsx
View File

@ -14,40 +14,41 @@ export default function HomeScreen() {
source={require('@/assets/images/partial-react-logo.png')}
style={styles.reactLogo}
/>
}>
}
>
<ThemedView style={styles.titleContainer}>
<ThemedText type="title">Welcome!</ThemedText>
<ThemedText type='title'>Welcome!</ThemedText>
<HelloWave />
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 1: Try it</ThemedText>
<ThemedText type='subtitle'>Step 1: Try it</ThemedText>
<ThemedText>
Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
Edit <ThemedText type='defaultSemiBold'>app/(tabs)/index.tsx</ThemedText> to see changes.
Press{' '}
<ThemedText type="defaultSemiBold">
<ThemedText type='defaultSemiBold'>
{Platform.select({
ios: 'cmd + d',
android: 'cmd + m',
web: 'F12'
web: 'F12',
})}
</ThemedText>{' '}
to open developer tools.
</ThemedText>
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 2: Explore</ThemedText>
<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 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 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>

6
app/+not-found.tsx
View File

@ -9,9 +9,9 @@ export default function NotFoundScreen() {
<>
<Stack.Screen options={{ title: 'Oops!' }} />
<ThemedView style={styles.container}>
<ThemedText type="title">This screen doesn't exist.</ThemedText>
<Link href="/" style={styles.link}>
<ThemedText type="link">Go to home screen!</ThemedText>
<ThemedText type='title'>This screen doesn't exist.</ThemedText>
<Link href='/' style={styles.link}>
<ThemedText type='link'>Go to home screen!</ThemedText>
</Link>
</ThemedView>
</>

6
app/_layout.tsx
View File

@ -30,10 +30,10 @@ export default function RootLayout() {
return (
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<Stack>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="+not-found" />
<Stack.Screen name='(tabs)' options={{ headerShown: false }} />
<Stack.Screen name='+not-found' />
</Stack>
<StatusBar style="auto" />
<StatusBar style='auto' />
</ThemeProvider>
);
}