Skip to content

Commit cd60be8

Browse files
realstone2realstone2
committed
feat: add example expo app
1 parent 79c5335 commit cd60be8

38 files changed

Lines changed: 13878 additions & 0 deletions

‎example/.gitignore‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
2+
3+
# dependencies
4+
node_modules/
5+
6+
# Expo
7+
.expo/
8+
dist/
9+
web-build/
10+
expo-env.d.ts
11+
12+
# Native
13+
.kotlin/
14+
*.orig.*
15+
*.jks
16+
*.p8
17+
*.p12
18+
*.key
19+
*.mobileprovision
20+
21+
# Metro
22+
.metro-health-check*
23+
24+
# debug
25+
npm-debug.*
26+
yarn-debug.*
27+
yarn-error.*
28+
29+
# macOS
30+
.DS_Store
31+
*.pem
32+
33+
# local env files
34+
.env*.local
35+
36+
# typescript
37+
*.tsbuildinfo
38+
39+
app-example

‎example/.vscode/settings.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"editor.codeActionsOnSave": {
3+
"source.fixAll": "explicit",
4+
"source.organizeImports": "explicit",
5+
"source.sortMembers": "explicit"
6+
}
7+
}

‎example/README.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# Welcome to your Expo app 👋
2+
3+
This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
4+
5+
## Get started
6+
7+
1. Install dependencies
8+
9+
```bash
10+
npm install
11+
```
12+
13+
2. Start the app
14+
15+
```bash
16+
npx expo start
17+
```
18+
19+
In the output, you'll find options to open the app in a
20+
21+
- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
22+
- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
23+
- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
24+
- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
25+
26+
You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
27+
28+
## Get a fresh project
29+
30+
When you're ready, run:
31+
32+
```bash
33+
npm run reset-project
34+
```
35+
36+
This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
37+
38+
## Learn more
39+
40+
To learn more about developing your project with Expo, look at the following resources:
41+
42+
- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
43+
- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
44+
45+
## Join the community
46+
47+
Join our community of developers creating universal apps.
48+
49+
- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
50+
- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.

‎example/app.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"expo": {
3+
"name": "example",
4+
"slug": "example",
5+
"version": "1.0.0",
6+
"orientation": "portrait",
7+
"icon": "./assets/images/icon.png",
8+
"scheme": "example",
9+
"userInterfaceStyle": "automatic",
10+
"newArchEnabled": true,
11+
"ios": {
12+
"supportsTablet": true
13+
},
14+
"android": {
15+
"adaptiveIcon": {
16+
"foregroundImage": "./assets/images/adaptive-icon.png",
17+
"backgroundColor": "#ffffff"
18+
},
19+
"edgeToEdgeEnabled": true
20+
},
21+
"web": {
22+
"bundler": "metro",
23+
"output": "static",
24+
"favicon": "./assets/images/favicon.png"
25+
},
26+
"plugins": [
27+
"expo-router",
28+
[
29+
"expo-splash-screen",
30+
{
31+
"image": "./assets/images/splash-icon.png",
32+
"imageWidth": 200,
33+
"resizeMode": "contain",
34+
"backgroundColor": "#ffffff"
35+
}
36+
]
37+
],
38+
"experiments": {
39+
"typedRoutes": true
40+
}
41+
}
42+
}

‎example/app/(tabs)/_layout.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Tabs } from 'expo-router';
2+
import React from 'react';
3+
import { Platform } from 'react-native';
4+
5+
import { HapticTab } from '@/components/HapticTab';
6+
import { IconSymbol } from '@/components/ui/IconSymbol';
7+
import TabBarBackground from '@/components/ui/TabBarBackground';
8+
import { Colors } from '@/constants/Colors';
9+
import { useColorScheme } from '@/hooks/useColorScheme';
10+
11+
export default function TabLayout() {
12+
const colorScheme = useColorScheme();
13+
14+
return (
15+
<Tabs
16+
screenOptions={{
17+
tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
18+
headerShown: false,
19+
tabBarButton: HapticTab,
20+
tabBarBackground: TabBarBackground,
21+
tabBarStyle: Platform.select({
22+
ios: {
23+
// Use a transparent background on iOS to show the blur effect
24+
position: 'absolute',
25+
},
26+
default: {},
27+
}),
28+
}}>
29+
<Tabs.Screen
30+
name="index"
31+
options={{
32+
title: 'Home',
33+
tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
34+
}}
35+
/>
36+
<Tabs.Screen
37+
name="explore"
38+
options={{
39+
title: 'Explore',
40+
tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
41+
}}
42+
/>
43+
</Tabs>
44+
);
45+
}

‎example/app/(tabs)/explore.tsx‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import { Image } from 'expo-image';
2+
import { Platform, StyleSheet } from 'react-native';
3+
4+
import { Collapsible } from '@/components/Collapsible';
5+
import { ExternalLink } from '@/components/ExternalLink';
6+
import ParallaxScrollView from '@/components/ParallaxScrollView';
7+
import { ThemedText } from '@/components/ThemedText';
8+
import { ThemedView } from '@/components/ThemedView';
9+
import { IconSymbol } from '@/components/ui/IconSymbol';
10+
11+
export 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&apos;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+
99+
const 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+
});

‎example/app/(tabs)/index.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import { Image } from 'expo-image';
2+
import { Platform, StyleSheet } from 'react-native';
3+
4+
import { HelloWave } from '@/components/HelloWave';
5+
import ParallaxScrollView from '@/components/ParallaxScrollView';
6+
import { ThemedText } from '@/components/ThemedText';
7+
import { ThemedView } from '@/components/ThemedView';
8+
9+
export default function HomeScreen() {
10+
return (
11+
<ParallaxScrollView
12+
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
13+
headerImage={
14+
<Image
15+
source={require('@/assets/images/partial-react-logo.png')}
16+
style={styles.reactLogo}
17+
/>
18+
}>
19+
<ThemedView style={styles.titleContainer}>
20+
<ThemedText type="title">Welcome!</ThemedText>
21+
<HelloWave />
22+
</ThemedView>
23+
<ThemedView style={styles.stepContainer}>
24+
<ThemedText type="subtitle">Step 1: Try it</ThemedText>
25+
<ThemedText>
26+
Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
27+
Press{' '}
28+
<ThemedText type="defaultSemiBold">
29+
{Platform.select({
30+
ios: 'cmd + d',
31+
android: 'cmd + m',
32+
web: 'F12',
33+
})}
34+
</ThemedText>{' '}
35+
to open developer tools.
36+
</ThemedText>
37+
</ThemedView>
38+
<ThemedView style={styles.stepContainer}>
39+
<ThemedText type="subtitle">Step 2: Explore</ThemedText>
40+
<ThemedText>
41+
{`Tap the Explore tab to learn more about what's included in this starter app.`}
42+
</ThemedText>
43+
</ThemedView>
44+
<ThemedView style={styles.stepContainer}>
45+
<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
46+
<ThemedText>
47+
{`When you're ready, run `}
48+
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
49+
<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
50+
<ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
51+
<ThemedText type="defaultSemiBold">app-example</ThemedText>.
52+
</ThemedText>
53+
</ThemedView>
54+
</ParallaxScrollView>
55+
);
56+
}
57+
58+
const styles = StyleSheet.create({
59+
titleContainer: {
60+
flexDirection: 'row',
61+
alignItems: 'center',
62+
gap: 8,
63+
},
64+
stepContainer: {
65+
gap: 8,
66+
marginBottom: 8,
67+
},
68+
reactLogo: {
69+
height: 178,
70+
width: 290,
71+
bottom: 0,
72+
left: 0,
73+
position: 'absolute',
74+
},
75+
});

0 commit comments

Comments
 (0)