Skip to content

Commit 2bd8e18

Browse files
ngocdevvngocdevv
committed
first commit
0 parents  commit 2bd8e18

34 files changed

+14895
-0
lines changed

‎.github/copilot-instructions.md‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!-- .github/copilot-instructions.md -->
2+
3+
# Repo-specific Copilot instructions (concise)
4+
5+
Purpose: Help an AI coding assistant be immediately productive in this Expo React Native project.
6+
7+
- Big picture (what matters)
8+
- This is an Expo React Native app (Expo SDK ~54) with two parallel entry patterns: `App.tsx` (main app) and an Expo Router tree under `app/` (`app/index.tsx`). Changes to navigation or app bootstrapping may live in either place — prefer `App.tsx` for global providers and `app/` for route pages.
9+
- UI and interactions are animation-heavy (React Native Reanimated + Gesture Handler + Skia). Editing animations will usually touch files under `src/components/` (look for `useSharedValue`, `useAnimatedStyle`, `FadeInUp`, etc.).
10+
11+
- Key files & dirs (start here)
12+
- `App.tsx` — root providers (SafeArea, gesture handler, fonts loading). Good first place to add global wrappers.
13+
- `app/index.tsx` — Expo Router sample page (file-based routes). Create new routes under `app/`.
14+
- `src/components/` — UI building blocks. Notable subfolders: `bottom-tab`, `circle-time`, `time-range`, `header`, `footer`.
15+
- `src/screens/onboarding-screen.tsx` — example screen (current working file).
16+
- `constants/theme.ts` — color palette and fonts (source of truth for colors / light-dark behavior).
17+
- `assets/fonts/` and `assets/images/` — custom fonts and images; fonts loaded in `App.tsx` via `useFonts`.
18+
- `scripts/reset-project.js` — resets project skeleton; reference before running destructive changes.
19+
20+
- Project conventions and patterns
21+
- TypeScript path alias: `@/*` maps to `./*` (use imports like `@/components/...`). Check `tsconfig.json`.
22+
- Component creation: add a directory in `src/components/{Name}/` and export from an `index.tsx` file. Parent files usually import via `@/components/{Name}`.
23+
- Animations: search for `useSharedValue`, `useAnimatedStyle`, and `FadeInUp` to find animation logic to modify. Haptic feedback uses `expo-haptics` near interaction handlers.
24+
- Platform-specific code: there are web-specific hooks (`use-color-scheme.web.ts`). Use `Platform.select` where needed.
25+
26+
- Developer workflows & important commands
27+
- Start dev server: `npm start` (Expo). Platform shortcuts: `npm run ios`, `npm run android`, `npm run web`.
28+
- Clear Metro cache if debugging bundler issues: `npx expo start --clear`.
29+
- Linting: `npm run lint` (uses Expo ESLint flat config). Run autofix when suggested by ESLint.
30+
- Reset template (destructive): `npm run reset-project` — inspect `scripts/reset-project.js` before running.
31+
32+
- Integration points & dependencies to watch
33+
- Reanimated (v4) + Gesture Handler — animation code frequently uses shared values. Ensure Reanimated Babel plugin is configured if editing animation internals.
34+
- Expo Router vs `react-navigation`-style imports — prefer file-based routing under `app/` for new pages.
35+
- Skia (`@shopify/react-native-skia`) used for drawing — changes here affect native rendering and may need native rebuilds.
36+
37+
- Quick examples to guide edits
38+
- Importing a component: import Footer from '@/components/footer';
39+
- Finding animation blocks: grep for `useSharedValue` or `FadeInUp` to locate animated components.
40+
- Changing theme color: edit `constants/theme.ts` and track where tokens are used across `src/components/`.
41+
42+
- Safety notes for AI actions
43+
- Do not run `npm run reset-project` without explicit user confirmation — it is destructive.
44+
- Avoid changing Babel/native build configs unless necessary; discuss before modifying `babel.config.js` or native deps.
45+
46+
If anything here is unclear or you want me to include more examples (search patterns, common edit recipes, or tests), tell me which area to expand and I'll iterate.

‎.gitignore‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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
40+
41+
# generated native folders
42+
/ios
43+
/android

‎.vscode/extensions.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{ "recommendations": ["expo.vscode-expo-tools"] }

‎.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+
}

‎App.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
2+
import { useFonts } from 'expo-font';
3+
import React from 'react';
4+
import { SafeAreaProvider } from 'react-native-safe-area-context';
5+
6+
// Import screens
7+
import { GestureHandlerRootView } from 'react-native-gesture-handler';
8+
import { OnboardingScreen } from './src/screens/onboarding-screen';
9+
10+
const Tab = createBottomTabNavigator();
11+
12+
const App = () => {
13+
const [fontsLoaded] = useFonts({
14+
'CooperFiveOpti-Black': require("./assets/fonts/CooperFiveOpti-Black.otf"),
15+
'CaveatBrush-Regular': require("./assets/fonts/CaveatBrush-Regular.ttf"),
16+
'Piepia W01 Regular': require("./assets/fonts/Piepie W01 Regular.ttf"),
17+
});
18+
19+
if (!fontsLoaded) {
20+
return null; // Or return a loading spinner
21+
}
22+
23+
return (
24+
<GestureHandlerRootView style={{ flex: 1 }}>
25+
<SafeAreaProvider>
26+
<OnboardingScreen />
27+
</SafeAreaProvider>
28+
</GestureHandlerRootView>
29+
);
30+
};
31+
32+
export default App;

‎CLAUDE.md‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
# CLAUDE.md
2+
3+
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
4+
5+
## Project Overview
6+
7+
This is an **Expo React Native** application targeting iOS, Android, and Web platforms. The app appears to be a purchase/payment template with a circular time selection interface, bottom navigation, and animated components.
8+
9+
## Quick Start
10+
11+
### Development Server
12+
```bash
13+
# Start Expo development server (default)
14+
npm start
15+
16+
# Platform-specific commands
17+
npm run ios # iOS simulator/device
18+
npm run android # Android emulator/device
19+
npm run web # Web browser
20+
```
21+
22+
### Code Quality
23+
```bash
24+
npm run lint # Run ESLint with Expo configuration
25+
```
26+
27+
### Project Reset
28+
```bash
29+
npm run reset-project # Reset project to blank state
30+
```
31+
32+
## Architecture
33+
34+
### Entry Points
35+
- **Main App**: `App.tsx` - Root component with gesture handler, safe area provider, and font loading
36+
- **Router App**: `app/index.tsx` - Sample Expo Router page (file-based routing structure)
37+
38+
### Component Structure
39+
```
40+
/src/components/
41+
├── bottom-tab/ # Bottom navigation with 5 tabs (home, payments, project, messages, team)
42+
├── circle-time/ # Circular draggable time slider with Reanimated
43+
├── footer/ # Footer component
44+
├── header/ # Header with avatar and settings
45+
├── queued/ # Queued items component
46+
└── time-range/ # Time range selection component
47+
```
48+
49+
### Directory Layout
50+
```
51+
/constants/
52+
└── theme.ts # Color palette (light/dark mode) and font definitions
53+
54+
/hooks/
55+
├── use-color-scheme.ts # Theme hook
56+
└── use-color-scheme.web.ts # Web-specific theme hook
57+
58+
/assets/
59+
├── fonts/ # Custom fonts (SF-Pro-Rounded-Bold.otf)
60+
└── images/ # App images (avatars, icons)
61+
62+
/scripts/
63+
└── reset-project.js # Project reset utility
64+
```
65+
66+
### Key Technologies
67+
- **Expo SDK 54** with React Native 0.81.5
68+
- **Expo Router** (file-based routing in `/app`)
69+
- **React Native Reanimated** for animations (FadeInUp, shared values)
70+
- **Expo Linear Gradient** for visual effects
71+
- **React Native Gesture Handler** for touch interactions
72+
- **@gorhom/bottom-sheet** for bottom sheet components
73+
- **@shopify/react-native-skia** for high-performance drawing
74+
- **Expo Haptics** for tactile feedback
75+
76+
## Development Configuration
77+
78+
### TypeScript
79+
- Strict mode enabled in `tsconfig.json`
80+
- Path mapping: `@/*` maps to `./*` (e.g., `@/components` → `./components`)
81+
- Extends Expo's base TypeScript configuration
82+
83+
### Code Style
84+
- **ESLint**: Expo config with flat config format (`eslint.config.js`)
85+
- **VSCode Settings**: Auto-fix, organize imports, and sort members on save
86+
- **Recommended Extension**: Expo VSCode Tools (`expo.vscode-expo-tools`)
87+
88+
### Expo Configuration
89+
- **App Name**: PurchaseTemplate
90+
- **Bundle Identifier**: purchasetemplate
91+
- **New Architecture**: Enabled
92+
- **React Compiler**: Enabled (experimental)
93+
- **Edge-to-Edge**: Enabled on Android
94+
- **Supports Tablet**: iOS
95+
96+
## Key Implementation Patterns
97+
98+
### 1. Font Loading
99+
Custom fonts loaded via `useFonts` hook:
100+
```typescript
101+
const [fontsLoaded] = useFonts({
102+
'SF-Pro-Rounded-Bold': require('./assets/fonts/SF-Pro-Rounded-Bold.otf'),
103+
});
104+
```
105+
106+
### 2. Animated Components
107+
Components use React Native Reanimated with shared values:
108+
```typescript
109+
const selectedDuration = useSharedValue(5);
110+
// Animated.View entering={FadeInUp.duration(600)}
111+
```
112+
113+
### 3. Safe Areas
114+
All screen edges handled with `useSafeAreaInsets`:
115+
```typescript
116+
const { top, bottom } = useSafeAreaInsets();
117+
```
118+
119+
### 4. Icons
120+
Using `@expo/vector-icons`:
121+
- FontAwesome for header icons
122+
- AntDesign for bottom tab icons
123+
124+
### 5. Color Scheme
125+
Theme colors defined in `/constants/theme.ts` with light/dark mode support.
126+
127+
## Development Tips
128+
129+
### Running Tests
130+
- No test runner configured (no Jest, Detox, or testing library found)
131+
- Consider adding testing setup if needed
132+
133+
### Debugging
134+
- Use `npx expo start --clear` to clear Metro cache if needed
135+
- Shake device/emulator to open Expo DevTools
136+
- Check Metro bundler logs for build errors
137+
138+
### Platform-Specific Code
139+
- Platform-specific hooks: `use-color-scheme.ts` vs `use-color-scheme.web.ts`
140+
- Platform.select() used for font definitions in theme.ts
141+
142+
## Common Tasks
143+
144+
### Adding a New Component
145+
1. Create directory in `/src/components/{ComponentName}/`
146+
2. Export component in `index.tsx`
147+
3. Import and use in relevant parent component
148+
149+
### Adding a New Route
150+
1. Create file in `/app/` directory for Expo Router
151+
2. Use `expo-router` navigation (`useRouter`, `usePathname`)
152+
153+
### Modifying Theme
154+
1. Update colors/fonts in `/constants/theme.ts`
155+
2. Colors use standard React Native color values
156+
3. Fonts use Platform.select for OS-specific defaults
157+
158+
### Resetting Project
159+
Run `npm run reset-project` - This will either move or delete existing app structure and create a blank template.
160+
161+
## Dependencies
162+
163+
### Major Dependencies
164+
- `react`: 19.1.0
165+
- `react-native`: 0.81.5
166+
- `expo`: ~54.0.20
167+
- `@react-navigation/native`: ^7.1.8
168+
- `react-native-reanimated`: ~4.1.1
169+
170+
### Development Dependencies
171+
- `typescript`: ~5.9.2
172+
- `eslint`: ^9.25.0
173+
- `eslint-config-expo`: ~10.0.0
174+
175+
## Known Quirks
176+
177+
1. **Dual Structure**: The repo has both traditional `App.tsx` structure and Expo Router structure in `/app/`. Main app uses `App.tsx`.
178+
179+
2. **Custom Fonts**: SF-Pro-Rounded-Bold font is loaded manually - ensure font file exists in `/assets/fonts/`.
180+
181+
3. **Animation Heavy**: Components use React Native Reanimated extensively - ensure proper understanding of shared values and animated styles.
182+
183+
4. **Platform Paths**: TypeScript path mapping `@/*` → `./*` means imports can use `@/` prefix from anywhere.

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
## 📱 Demo
2+
3+
<div align="center">
4+
5+
![Demo](video.gif)

‎app.json‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{
2+
"expo": {
3+
"name": "OnboardingAnimation",
4+
"slug": "onboardinganimation",
5+
"version": "1.0.0",
6+
"orientation": "portrait",
7+
"icon": "./assets/images/icon.png",
8+
"scheme": "onboardinganimation",
9+
"userInterfaceStyle": "automatic",
10+
"newArchEnabled": true,
11+
"ios": {
12+
"supportsTablet": true
13+
},
14+
"android": {
15+
"adaptiveIcon": {
16+
"backgroundColor": "#E6F4FE",
17+
"foregroundImage": "./assets/images/android-icon-foreground.png",
18+
"backgroundImage": "./assets/images/android-icon-background.png",
19+
"monochromeImage": "./assets/images/android-icon-monochrome.png"
20+
},
21+
"edgeToEdgeEnabled": true,
22+
"predictiveBackGestureEnabled": false
23+
},
24+
"web": {
25+
"output": "static",
26+
"favicon": "./assets/images/favicon.png"
27+
},
28+
"plugins": [
29+
[
30+
"expo-font",
31+
{
32+
"fonts": [
33+
"./assets/fonts/COOPBL.TTF"
34+
]
35+
}
36+
],
37+
[
38+
"expo-splash-screen",
39+
{
40+
"image": "./assets/images/splash-icon.png",
41+
"imageWidth": 200,
42+
"resizeMode": "contain",
43+
"backgroundColor": "#ffffff",
44+
"dark": {
45+
"backgroundColor": "#000000"
46+
}
47+
}
48+
]
49+
],
50+
"experiments": {
51+
"reactCompiler": true
52+
}
53+
}
54+
}

0 commit comments

Comments
 (0)