Skip to content

Commit d74eb70

Browse files
krystxfkrystxf
committed
feat(app): react native
1 parent 1971bb6 commit d74eb70

39 files changed

+10963
-3941
lines changed

‎apps/react-native/.gitignore

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

‎apps/react-native/.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node-linker=hoisted

‎apps/react-native/README.md

+50
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.

‎apps/react-native/app.json

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"expo": {
3+
"name": "metro-now",
4+
"slug": "metro-now",
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+
[
28+
"expo-splash-screen",
29+
{
30+
"image": "./assets/images/splash-icon.png",
31+
"imageWidth": 200,
32+
"resizeMode": "contain",
33+
"backgroundColor": "#ffffff"
34+
}
35+
]
36+
],
37+
"experiments": {
38+
"typedRoutes": true
39+
}
40+
}
41+
}

‎apps/react-native/app/(tabs)/_layout.tsx

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
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+
>
30+
<Tabs.Screen
31+
name="index"
32+
options={{
33+
title: "Home",
34+
tabBarIcon: ({ color }) => (
35+
<IconSymbol size={28} name="house.fill" color={color} />
36+
),
37+
}}
38+
/>
39+
<Tabs.Screen
40+
name="explore"
41+
options={{
42+
title: "Explore",
43+
tabBarIcon: ({ color }) => (
44+
<IconSymbol
45+
size={28}
46+
name="paperplane.fill"
47+
color={color}
48+
/>
49+
),
50+
}}
51+
/>
52+
</Tabs>
53+
);
54+
}

‎apps/react-native/app/(tabs)/explore.tsx

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

0 commit comments

Comments
 (0)