Skip to content

Commit 15a47fb

Browse files
okwasniewskiokwasniewski
committed
feat: add expo example
1 parent a175601 commit 15a47fb

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+6540
-2209
lines changed

‎.eslintrc.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
module.exports = {
2+
root: true,
3+
extends: ['@react-native', 'prettier'],
4+
plugins: ['prettier'],
5+
rules: {
6+
'react/react-in-jsx-scope': 'off',
7+
'prettier/prettier': [
8+
'error',
9+
{
10+
quoteProps: 'consistent',
11+
singleQuote: true,
12+
tabWidth: 2,
13+
trailingComma: 'es5',
14+
useTabs: false,
15+
},
16+
],
17+
},
18+
ignorePatterns: ['**/lib/**', '**/dist/**', '**/node_modules/**'],
19+
};

‎.yarnrc.yml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
nodeLinker: node-modules
2-
nmHoistingLimits: workspaces
32

43
plugins:
54
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs

‎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: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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(createNativeBottomTabNavigator().Navigator);
7+
8+
function TabLayout() {
9+
return (
10+
<Tabs>
11+
<Tabs.Screen
12+
name="index"
13+
options={{
14+
title: 'Home',
15+
tabBarIcon: () => ({ sfSymbol: 'house.fill' }),
16+
}}
17+
/>
18+
<Tabs.Screen
19+
name="explore"
20+
options={{
21+
title: 'Explore',
22+
tabBarIcon: () => ({ sfSymbol: 'house.fill' }),
23+
}}
24+
/>
25+
</Tabs>
26+
);
27+
}
28+
29+
export default TabLayout;

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

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

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

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
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+
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+
>
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{' '}
27+
<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText>{' '}
28+
to see changes. Press{' '}
29+
<ThemedText type="defaultSemiBold">
30+
{Platform.select({
31+
ios: 'cmd + d',
32+
android: 'cmd + m',
33+
web: 'F12',
34+
})}
35+
</ThemedText>{' '}
36+
to open developer tools.
37+
</ThemedText>
38+
</ThemedView>
39+
<ThemedView style={styles.stepContainer}>
40+
<ThemedText type="subtitle">Step 2: Explore</ThemedText>
41+
<ThemedText>
42+
Tap the Explore tab to learn more about what's included in this
43+
starter app.
44+
</ThemedText>
45+
</ThemedView>
46+
<ThemedView style={styles.stepContainer}>
47+
<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
48+
<ThemedText>
49+
When you're ready, run{' '}
50+
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText>{' '}
51+
to get a fresh <ThemedText type="defaultSemiBold">app</ThemedText>{' '}
52+
directory. This will move the current{' '}
53+
<ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
54+
<ThemedText type="defaultSemiBold">app-example</ThemedText>.
55+
</ThemedText>
56+
</ThemedView>
57+
</ParallaxScrollView>
58+
);
59+
}
60+
61+
const styles = StyleSheet.create({
62+
titleContainer: {
63+
flexDirection: 'row',
64+
alignItems: 'center',
65+
gap: 8,
66+
},
67+
stepContainer: {
68+
gap: 8,
69+
marginBottom: 8,
70+
},
71+
reactLogo: {
72+
height: 178,
73+
width: 290,
74+
bottom: 0,
75+
left: 0,
76+
position: 'absolute',
77+
},
78+
});
79+
80+
export default HomeScreen;

‎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+
});

0 commit comments

Comments
 (0)