Skip to content

Commit 5dc406c

Browse files
okwasniewskiokwasniewski
committed
feat: add expo example
1 parent 6b64338 commit 5dc406c

36 files changed

+30781
-1114
lines changed

‎apps/example-expo/.gitignore‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
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+
android
12+
ios
13+
14+
# Native
15+
*.orig.*
16+
*.jks
17+
*.p8
18+
*.p12
19+
*.key
20+
*.mobileprovision
21+
22+
# Metro
23+
.metro-health-check*
24+
25+
# debug
26+
npm-debug.*
27+
yarn-debug.*
28+
yarn-error.*
29+
30+
# macOS
31+
.DS_Store
32+
*.pem
33+
34+
# local env files
35+
.env*.local
36+
37+
# typescript
38+
*.tsbuildinfo
39+
40+
app-example

‎apps/example-expo/app.json‎

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

‎apps/example-expo/app/(tabs)/_layout.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
3+
import { withLayoutContext } from "expo-router";
4+
import createNativeBottomTabNavigator from '../../../../packages/react-native-bottom-tabs/src/react-navigation/navigators/createNativeBottomTabNavigator';
5+
6+
const Tabs = withLayoutContext(
7+
createNativeBottomTabNavigator().Navigator
8+
);
9+
10+
export default function TabLayout() {
11+
12+
return (
13+
<Tabs>
14+
<Tabs.Screen
15+
name="index"
16+
options={{
17+
title: 'Home',
18+
tabBarIcon: () => ({sfSymbol: 'house.fill'}),
19+
}}
20+
/>
21+
<Tabs.Screen
22+
name="explore"
23+
options={{
24+
title: 'Explore',
25+
tabBarIcon: () => ({sfSymbol: 'house.fill'}),
26+
}}
27+
/>
28+
</Tabs>
29+
);
30+
}

‎apps/example-expo/app/(tabs)/explore.tsx‎

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

‎apps/example-expo/app/(tabs)/index.tsx‎

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

‎apps/example-expo/app/+not-found.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Link, Stack } from 'expo-router';
2+
import { StyleSheet } from 'react-native';
3+
4+
import { ThemedText } from '@/components/ThemedText';
5+
import { ThemedView } from '@/components/ThemedView';
6+
7+
export default function NotFoundScreen() {
8+
return (
9+
<>
10+
<Stack.Screen options={{ title: 'Oops!' }} />
11+
<ThemedView style={styles.container}>
12+
<ThemedText type="title">This screen doesn't exist.</ThemedText>
13+
<Link href="/" style={styles.link}>
14+
<ThemedText type="link">Go to home screen!</ThemedText>
15+
</Link>
16+
</ThemedView>
17+
</>
18+
);
19+
}
20+
21+
const styles = StyleSheet.create({
22+
container: {
23+
flex: 1,
24+
alignItems: 'center',
25+
justifyContent: 'center',
26+
padding: 20,
27+
},
28+
link: {
29+
marginTop: 15,
30+
paddingVertical: 15,
31+
},
32+
});

‎apps/example-expo/app/_layout.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
2+
import { useFonts } from 'expo-font';
3+
import { Stack } from 'expo-router';
4+
import * as SplashScreen from 'expo-splash-screen';
5+
import { StatusBar } from 'expo-status-bar';
6+
import { useEffect } from 'react';
7+
8+
import { useColorScheme } from '@/hooks/useColorScheme';
9+
10+
// Prevent the splash screen from auto-hiding before asset loading is complete.
11+
SplashScreen.preventAutoHideAsync();
12+
13+
export default function RootLayout() {
14+
const colorScheme = useColorScheme();
15+
const [loaded] = useFonts({
16+
SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
17+
});
18+
19+
useEffect(() => {
20+
if (loaded) {
21+
SplashScreen.hideAsync();
22+
}
23+
}, [loaded]);
24+
25+
if (!loaded) {
26+
return null;
27+
}
28+
29+
return (
30+
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
31+
<Stack>
32+
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
33+
<Stack.Screen name="+not-found" />
34+
</Stack>
35+
<StatusBar style="auto" />
36+
</ThemeProvider>
37+
);
38+
}

‎apps/example-expo/assets/fonts/SpaceMono-Regular.ttf‎

91.1 KB
Binary file not shown.

‎apps/example-expo/assets/images/adaptive-icon.png‎

17.1 KB
Loading

‎apps/example-expo/assets/images/favicon.png‎

1.43 KB
Loading

0 commit comments

Comments
 (0)