Skip to content

Commit 20ae835

Browse files
okwasniewskiokwasniewski
authored
feat: add expo template to quickly get started (#256)
* feat: add expo template * feat: necessary configuration * docs: update getting started * chore: release expo-template
1 parent 75e3791 commit 20ae835

37 files changed

+3165
-68
lines changed

‎docs/docs/docs/getting-started/quick-start.mdx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@ import { PackageManagerTabs } from '@theme';
22

33
# Quick Start
44

5+
## Create a new project with Native Tabs
6+
7+
If you don't have an existing project, you can create a new [Expo](https://expo.dev) app using the following command:
8+
9+
10+
```sh
11+
npx create-expo-app@latest NativeTabs --template @bottom-tabs/expo-template
12+
```
13+
514
## Installation
615

716
<PackageManagerTabs command="install react-native-bottom-tabs" />

‎packages/expo-template/CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# @bottom-tabs/expo-template
2+
3+
## 0.0.2
4+
5+
### Patch Changes
6+
7+
- [#256](https://github.com/callstackincubator/react-native-bottom-tabs/pull/256) [`098f523`](https://github.com/callstackincubator/react-native-bottom-tabs/commit/098f523d195dbe010357d09ebcf71ff8484c25af) Thanks [@okwasniewski](https://github.com/okwasniewski)! - feat: initial release

‎packages/expo-template/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 + Native Tabs 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.

‎packages/expo-template/app.json‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{
2+
"expo": {
3+
"name": "HelloWorld",
4+
"slug": "expo-template-default",
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+
},
14+
"android": {
15+
"adaptiveIcon": {
16+
"foregroundImage": "./assets/images/adaptive-icon.png",
17+
"backgroundColor": "#ffffff"
18+
}
19+
},
20+
"web": {
21+
"bundler": "metro",
22+
"output": "static",
23+
"favicon": "./assets/images/favicon.png"
24+
},
25+
"plugins": [
26+
"expo-router",
27+
"react-native-bottom-tabs",
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+
"expo-build-properties",
39+
{
40+
"ios": {
41+
"useFrameworks": "static"
42+
}
43+
}
44+
]
45+
],
46+
"experiments": {
47+
"typedRoutes": true
48+
}
49+
}
50+
}

‎packages/expo-template/app/(tabs)/_layout.tsx‎

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

‎packages/expo-template/app/(tabs)/explore.tsx‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
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+
>
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+
});

‎packages/expo-template/app/(tabs)/index.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
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+
>
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+
});

‎packages/expo-template/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)