Compare commits
No commits in common. "dbb4abc3265e7d26555275d2df17fc0c166796bc" and "1b95a02210d9907332830ff4d75f0b762b8202ff" have entirely different histories.
dbb4abc326
...
1b95a02210
43
.gitignore
vendored
43
.gitignore
vendored
@ -1,43 +0,0 @@
|
|||||||
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
|
|
||||||
|
|
||||||
# dependencies
|
|
||||||
node_modules/
|
|
||||||
|
|
||||||
# Expo
|
|
||||||
.expo/
|
|
||||||
dist/
|
|
||||||
web-build/
|
|
||||||
expo-env.d.ts
|
|
||||||
|
|
||||||
# Native
|
|
||||||
.kotlin/
|
|
||||||
*.orig.*
|
|
||||||
*.jks
|
|
||||||
*.p8
|
|
||||||
*.p12
|
|
||||||
*.key
|
|
||||||
*.mobileprovision
|
|
||||||
|
|
||||||
# Metro
|
|
||||||
.metro-health-check*
|
|
||||||
|
|
||||||
# debug
|
|
||||||
npm-debug.*
|
|
||||||
yarn-debug.*
|
|
||||||
yarn-error.*
|
|
||||||
|
|
||||||
# macOS
|
|
||||||
.DS_Store
|
|
||||||
*.pem
|
|
||||||
|
|
||||||
# local env files
|
|
||||||
.env*.local
|
|
||||||
|
|
||||||
# typescript
|
|
||||||
*.tsbuildinfo
|
|
||||||
|
|
||||||
app-example
|
|
||||||
|
|
||||||
# generated native folders
|
|
||||||
/ios
|
|
||||||
/android
|
|
||||||
1
.vscode/extensions.json
vendored
1
.vscode/extensions.json
vendored
@ -1 +0,0 @@
|
|||||||
{ "recommendations": ["expo.vscode-expo-tools"] }
|
|
||||||
7
.vscode/settings.json
vendored
7
.vscode/settings.json
vendored
@ -1,7 +0,0 @@
|
|||||||
{
|
|
||||||
"editor.codeActionsOnSave": {
|
|
||||||
"source.fixAll": "explicit",
|
|
||||||
"source.organizeImports": "explicit",
|
|
||||||
"source.sortMembers": "explicit"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
50
README.md
50
README.md
@ -1,50 +0,0 @@
|
|||||||
# Welcome to your Expo app 👋
|
|
||||||
|
|
||||||
This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
|
|
||||||
|
|
||||||
## Get started
|
|
||||||
|
|
||||||
1. Install dependencies
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm install
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Start the app
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npx expo start
|
|
||||||
```
|
|
||||||
|
|
||||||
In the output, you'll find options to open the app in a
|
|
||||||
|
|
||||||
- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
|
|
||||||
- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
|
|
||||||
- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
|
|
||||||
- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
|
|
||||||
|
|
||||||
You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
|
|
||||||
|
|
||||||
## Get a fresh project
|
|
||||||
|
|
||||||
When you're ready, run:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
npm run reset-project
|
|
||||||
```
|
|
||||||
|
|
||||||
This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
|
|
||||||
|
|
||||||
## Learn more
|
|
||||||
|
|
||||||
To learn more about developing your project with Expo, look at the following resources:
|
|
||||||
|
|
||||||
- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
|
|
||||||
- [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.
|
|
||||||
|
|
||||||
## Join the community
|
|
||||||
|
|
||||||
Join our community of developers creating universal apps.
|
|
||||||
|
|
||||||
- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
|
|
||||||
- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
|
|
||||||
48
app.json
48
app.json
@ -1,48 +0,0 @@
|
|||||||
{
|
|
||||||
"expo": {
|
|
||||||
"name": "hitung_duit",
|
|
||||||
"slug": "hitung_duit",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"orientation": "portrait",
|
|
||||||
"icon": "./assets/images/icon.png",
|
|
||||||
"scheme": "hitungduit",
|
|
||||||
"userInterfaceStyle": "automatic",
|
|
||||||
"newArchEnabled": true,
|
|
||||||
"ios": {
|
|
||||||
"supportsTablet": true
|
|
||||||
},
|
|
||||||
"android": {
|
|
||||||
"adaptiveIcon": {
|
|
||||||
"backgroundColor": "#E6F4FE",
|
|
||||||
"foregroundImage": "./assets/images/android-icon-foreground.png",
|
|
||||||
"backgroundImage": "./assets/images/android-icon-background.png",
|
|
||||||
"monochromeImage": "./assets/images/android-icon-monochrome.png"
|
|
||||||
},
|
|
||||||
"edgeToEdgeEnabled": true,
|
|
||||||
"predictiveBackGestureEnabled": false
|
|
||||||
},
|
|
||||||
"web": {
|
|
||||||
"output": "static",
|
|
||||||
"favicon": "./assets/images/favicon.png"
|
|
||||||
},
|
|
||||||
"plugins": [
|
|
||||||
"expo-router",
|
|
||||||
[
|
|
||||||
"expo-splash-screen",
|
|
||||||
{
|
|
||||||
"image": "./assets/images/splash-icon.png",
|
|
||||||
"imageWidth": 200,
|
|
||||||
"resizeMode": "contain",
|
|
||||||
"backgroundColor": "#ffffff",
|
|
||||||
"dark": {
|
|
||||||
"backgroundColor": "#000000"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
],
|
|
||||||
"experiments": {
|
|
||||||
"typedRoutes": true,
|
|
||||||
"reactCompiler": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,49 +0,0 @@
|
|||||||
import { Tabs } from "expo-router";
|
|
||||||
import { Ionicons } from "@expo/vector-icons";
|
|
||||||
|
|
||||||
export default function TabLayout() {
|
|
||||||
return (
|
|
||||||
<Tabs
|
|
||||||
screenOptions={{
|
|
||||||
headerShown: false,
|
|
||||||
tabBarActiveTintColor: "#2563EB",
|
|
||||||
tabBarInactiveTintColor: "#9CA3AF",
|
|
||||||
tabBarStyle: {
|
|
||||||
height: 65,
|
|
||||||
paddingBottom: 8,
|
|
||||||
paddingTop: 8,
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Tabs.Screen
|
|
||||||
name="index"
|
|
||||||
options={{
|
|
||||||
title: "Home",
|
|
||||||
tabBarIcon: ({ color, size }) => (
|
|
||||||
<Ionicons name="home" size={size} color={color} />
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Tabs.Screen
|
|
||||||
name="history"
|
|
||||||
options={{
|
|
||||||
title: "History",
|
|
||||||
tabBarIcon: ({ color, size }) => (
|
|
||||||
<Ionicons name="time" size={size} color={color} />
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Tabs.Screen
|
|
||||||
name="profile"
|
|
||||||
options={{
|
|
||||||
title: "Profile",
|
|
||||||
tabBarIcon: ({ color, size }) => (
|
|
||||||
<Ionicons name="person" size={size} color={color} />
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Tabs>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,166 +0,0 @@
|
|||||||
import { View, Text, StyleSheet, ScrollView } from "react-native";
|
|
||||||
import { Ionicons } from "@expo/vector-icons";
|
|
||||||
|
|
||||||
export default function HistoryScreen() {
|
|
||||||
const transactions = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
title: "Gaji Bulanan",
|
|
||||||
amount: "Rp 5.000.000",
|
|
||||||
type: "income",
|
|
||||||
date: "12 April 2026",
|
|
||||||
icon: "wallet",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
title: "Makan Siang",
|
|
||||||
amount: "Rp 50.000",
|
|
||||||
type: "expense",
|
|
||||||
date: "13 April 2026",
|
|
||||||
icon: "restaurant",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
title: "Transport",
|
|
||||||
amount: "Rp 20.000",
|
|
||||||
type: "expense",
|
|
||||||
date: "14 April 2026",
|
|
||||||
icon: "car",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
title: "Freelance Project",
|
|
||||||
amount: "Rp 1.500.000",
|
|
||||||
type: "income",
|
|
||||||
date: "15 April 2026",
|
|
||||||
icon: "briefcase",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ScrollView style={styles.container}>
|
|
||||||
<Text style={styles.title}>Riwayat Transaksi</Text>
|
|
||||||
<Text style={styles.subtitle}>
|
|
||||||
Semua pemasukan dan pengeluaran kamu
|
|
||||||
</Text>
|
|
||||||
|
|
||||||
{transactions.map((item) => (
|
|
||||||
<View key={item.id} style={styles.card}>
|
|
||||||
<View style={styles.leftSection}>
|
|
||||||
<View
|
|
||||||
style={[
|
|
||||||
styles.iconContainer,
|
|
||||||
item.type === "income"
|
|
||||||
? styles.incomeBg
|
|
||||||
: styles.expenseBg,
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<Ionicons
|
|
||||||
name={item.icon as any}
|
|
||||||
size={22}
|
|
||||||
color={item.type === "income" ? "#16A34A" : "#DC2626"}
|
|
||||||
/>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View>
|
|
||||||
<Text style={styles.transactionTitle}>{item.title}</Text>
|
|
||||||
<Text style={styles.transactionDate}>{item.date}</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<Text
|
|
||||||
style={[
|
|
||||||
styles.amount,
|
|
||||||
item.type === "income"
|
|
||||||
? styles.incomeText
|
|
||||||
: styles.expenseText,
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{item.type === "income" ? "+" : "-"} {item.amount}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
))}
|
|
||||||
</ScrollView>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
backgroundColor: "#F5F7FA",
|
|
||||||
padding: 20,
|
|
||||||
paddingTop: 55,
|
|
||||||
},
|
|
||||||
|
|
||||||
title: {
|
|
||||||
fontSize: 30,
|
|
||||||
fontWeight: "bold",
|
|
||||||
marginBottom: 6,
|
|
||||||
},
|
|
||||||
|
|
||||||
subtitle: {
|
|
||||||
fontSize: 15,
|
|
||||||
color: "#666",
|
|
||||||
marginBottom: 28,
|
|
||||||
},
|
|
||||||
|
|
||||||
card: {
|
|
||||||
backgroundColor: "#FFFFFF",
|
|
||||||
borderRadius: 18,
|
|
||||||
padding: 18,
|
|
||||||
marginBottom: 16,
|
|
||||||
flexDirection: "row",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
alignItems: "center",
|
|
||||||
shadowColor: "#000",
|
|
||||||
shadowOpacity: 0.05,
|
|
||||||
shadowRadius: 6,
|
|
||||||
elevation: 3,
|
|
||||||
},
|
|
||||||
|
|
||||||
leftSection: {
|
|
||||||
flexDirection: "row",
|
|
||||||
alignItems: "center",
|
|
||||||
gap: 14,
|
|
||||||
},
|
|
||||||
|
|
||||||
iconContainer: {
|
|
||||||
width: 48,
|
|
||||||
height: 48,
|
|
||||||
borderRadius: 14,
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
|
|
||||||
incomeBg: {
|
|
||||||
backgroundColor: "#DCFCE7",
|
|
||||||
},
|
|
||||||
|
|
||||||
expenseBg: {
|
|
||||||
backgroundColor: "#FEE2E2",
|
|
||||||
},
|
|
||||||
|
|
||||||
transactionTitle: {
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: "600",
|
|
||||||
marginBottom: 4,
|
|
||||||
},
|
|
||||||
|
|
||||||
transactionDate: {
|
|
||||||
fontSize: 13,
|
|
||||||
color: "#777",
|
|
||||||
},
|
|
||||||
|
|
||||||
amount: {
|
|
||||||
fontSize: 15,
|
|
||||||
fontWeight: "700",
|
|
||||||
},
|
|
||||||
|
|
||||||
incomeText: {
|
|
||||||
color: "#16A34A",
|
|
||||||
},
|
|
||||||
|
|
||||||
expenseText: {
|
|
||||||
color: "#DC2626",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,136 +0,0 @@
|
|||||||
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
|
|
||||||
import { router } from "expo-router";
|
|
||||||
import { Ionicons } from "@expo/vector-icons";
|
|
||||||
|
|
||||||
export default function HomeScreen() {
|
|
||||||
return (
|
|
||||||
<View style={styles.container}>
|
|
||||||
<Text style={styles.title}>Tabungan H.Hadi</Text>
|
|
||||||
<Text style={styles.subtitle}>Kelola pemasukan & pengeluaranmu untuk nikah </Text>
|
|
||||||
|
|
||||||
<View style={styles.balanceCard}>
|
|
||||||
<Text style={styles.balanceLabel}>Total Saldo</Text>
|
|
||||||
<Text style={styles.balanceAmount}>Rp 500.000.000.000</Text>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={styles.summaryContainer}>
|
|
||||||
<View style={styles.summaryCard}>
|
|
||||||
<Ionicons name="arrow-down-circle" size={30} color="#16A34A" />
|
|
||||||
<Text style={styles.summaryTitle}>Income</Text>
|
|
||||||
<Text style={styles.summaryAmount}>Rp 7.000.000</Text>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={styles.summaryCard}>
|
|
||||||
<Ionicons name="arrow-up-circle" size={30} color="#DC2626" />
|
|
||||||
<Text style={styles.summaryTitle}>Expense</Text>
|
|
||||||
<Text style={styles.summaryAmount}>Rp 2.000.000</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<TouchableOpacity
|
|
||||||
style={styles.buttonIncome}
|
|
||||||
onPress={() => router.push("/add-income")}
|
|
||||||
>
|
|
||||||
<Text style={styles.buttonText}>+ Tambah Pemasukan</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
|
|
||||||
<TouchableOpacity
|
|
||||||
style={styles.buttonExpense}
|
|
||||||
onPress={() => router.push("/add-expense")}
|
|
||||||
>
|
|
||||||
<Text style={styles.buttonText}>- Tambah Pengeluaran</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
backgroundColor: "#F5F7FA",
|
|
||||||
padding: 24,
|
|
||||||
paddingTop: 60,
|
|
||||||
},
|
|
||||||
|
|
||||||
title: {
|
|
||||||
fontSize: 30,
|
|
||||||
fontWeight: "bold",
|
|
||||||
marginBottom: 8,
|
|
||||||
},
|
|
||||||
|
|
||||||
subtitle: {
|
|
||||||
fontSize: 16,
|
|
||||||
color: "#666",
|
|
||||||
marginBottom: 28,
|
|
||||||
},
|
|
||||||
|
|
||||||
balanceCard: {
|
|
||||||
backgroundColor: "#2563EB",
|
|
||||||
borderRadius: 20,
|
|
||||||
padding: 24,
|
|
||||||
marginBottom: 24,
|
|
||||||
},
|
|
||||||
|
|
||||||
balanceLabel: {
|
|
||||||
color: "#E0E7FF",
|
|
||||||
fontSize: 16,
|
|
||||||
marginBottom: 8,
|
|
||||||
},
|
|
||||||
|
|
||||||
balanceAmount: {
|
|
||||||
color: "#FFFFFF",
|
|
||||||
fontSize: 32,
|
|
||||||
fontWeight: "bold",
|
|
||||||
},
|
|
||||||
|
|
||||||
summaryContainer: {
|
|
||||||
flexDirection: "row",
|
|
||||||
justifyContent: "space-between",
|
|
||||||
marginBottom: 32,
|
|
||||||
},
|
|
||||||
|
|
||||||
summaryCard: {
|
|
||||||
backgroundColor: "#FFFFFF",
|
|
||||||
width: "48%",
|
|
||||||
padding: 20,
|
|
||||||
borderRadius: 16,
|
|
||||||
alignItems: "center",
|
|
||||||
shadowColor: "#000",
|
|
||||||
shadowOpacity: 0.05,
|
|
||||||
shadowRadius: 6,
|
|
||||||
elevation: 3,
|
|
||||||
},
|
|
||||||
|
|
||||||
summaryTitle: {
|
|
||||||
marginTop: 10,
|
|
||||||
fontSize: 15,
|
|
||||||
color: "#666",
|
|
||||||
},
|
|
||||||
|
|
||||||
summaryAmount: {
|
|
||||||
marginTop: 6,
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: "600",
|
|
||||||
},
|
|
||||||
|
|
||||||
buttonIncome: {
|
|
||||||
backgroundColor: "#16A34A",
|
|
||||||
paddingVertical: 16,
|
|
||||||
borderRadius: 14,
|
|
||||||
alignItems: "center",
|
|
||||||
marginBottom: 16,
|
|
||||||
},
|
|
||||||
|
|
||||||
buttonExpense: {
|
|
||||||
backgroundColor: "#DC2626",
|
|
||||||
paddingVertical: 16,
|
|
||||||
borderRadius: 14,
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
|
|
||||||
buttonText: {
|
|
||||||
color: "#FFFFFF",
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: "600",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,137 +0,0 @@
|
|||||||
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
|
|
||||||
import { Ionicons } from "@expo/vector-icons";
|
|
||||||
|
|
||||||
export default function ProfileScreen() {
|
|
||||||
return (
|
|
||||||
<View style={styles.container}>
|
|
||||||
{/* Header */}
|
|
||||||
<Text style={styles.title}>Profile</Text>
|
|
||||||
<Text style={styles.subtitle}>Informasi pengguna aplikasi</Text>
|
|
||||||
|
|
||||||
{/* Profile Card */}
|
|
||||||
<View style={styles.profileCard}>
|
|
||||||
<View style={styles.avatar}>
|
|
||||||
<Ionicons name="person" size={40} color="#FFFFFF" />
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<Text style={styles.name}>Fahrul</Text>
|
|
||||||
<Text style={styles.email}>fahrul@email.com</Text>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* Info Card */}
|
|
||||||
<View style={styles.infoCard}>
|
|
||||||
<View style={styles.infoRow}>
|
|
||||||
<Ionicons name="wallet-outline" size={22} color="#2563EB" />
|
|
||||||
<Text style={styles.infoText}>Aplikasi: Hitung Duit</Text>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={styles.infoRow}>
|
|
||||||
<Ionicons name="phone-portrait-outline" size={22} color="#2563EB" />
|
|
||||||
<Text style={styles.infoText}>Versi: 1.0.0</Text>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<View style={styles.infoRow}>
|
|
||||||
<Ionicons name="school-outline" size={22} color="#2563EB" />
|
|
||||||
<Text style={styles.infoText}>Project Tugas Mobile Programming</Text>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
|
|
||||||
{/* Logout Button */}
|
|
||||||
<TouchableOpacity style={styles.logoutButton}>
|
|
||||||
<Ionicons name="log-out-outline" size={20} color="#FFFFFF" />
|
|
||||||
<Text style={styles.logoutText}>Logout</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
backgroundColor: "#F5F7FA",
|
|
||||||
padding: 24,
|
|
||||||
paddingTop: 60,
|
|
||||||
},
|
|
||||||
|
|
||||||
title: {
|
|
||||||
fontSize: 30,
|
|
||||||
fontWeight: "bold",
|
|
||||||
marginBottom: 6,
|
|
||||||
},
|
|
||||||
|
|
||||||
subtitle: {
|
|
||||||
fontSize: 15,
|
|
||||||
color: "#666",
|
|
||||||
marginBottom: 28,
|
|
||||||
},
|
|
||||||
|
|
||||||
profileCard: {
|
|
||||||
backgroundColor: "#2563EB",
|
|
||||||
borderRadius: 20,
|
|
||||||
padding: 28,
|
|
||||||
alignItems: "center",
|
|
||||||
marginBottom: 24,
|
|
||||||
},
|
|
||||||
|
|
||||||
avatar: {
|
|
||||||
width: 80,
|
|
||||||
height: 80,
|
|
||||||
borderRadius: 40,
|
|
||||||
backgroundColor: "rgba(255,255,255,0.25)",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
marginBottom: 16,
|
|
||||||
},
|
|
||||||
|
|
||||||
name: {
|
|
||||||
fontSize: 24,
|
|
||||||
fontWeight: "bold",
|
|
||||||
color: "#FFFFFF",
|
|
||||||
marginBottom: 6,
|
|
||||||
},
|
|
||||||
|
|
||||||
email: {
|
|
||||||
fontSize: 14,
|
|
||||||
color: "#DBEAFE",
|
|
||||||
},
|
|
||||||
|
|
||||||
infoCard: {
|
|
||||||
backgroundColor: "#FFFFFF",
|
|
||||||
borderRadius: 18,
|
|
||||||
padding: 20,
|
|
||||||
marginBottom: 28,
|
|
||||||
shadowColor: "#000",
|
|
||||||
shadowOpacity: 0.05,
|
|
||||||
shadowRadius: 6,
|
|
||||||
elevation: 3,
|
|
||||||
},
|
|
||||||
|
|
||||||
infoRow: {
|
|
||||||
flexDirection: "row",
|
|
||||||
alignItems: "center",
|
|
||||||
gap: 12,
|
|
||||||
marginBottom: 18,
|
|
||||||
},
|
|
||||||
|
|
||||||
infoText: {
|
|
||||||
fontSize: 15,
|
|
||||||
color: "#333",
|
|
||||||
flex: 1,
|
|
||||||
},
|
|
||||||
|
|
||||||
logoutButton: {
|
|
||||||
backgroundColor: "#DC2626",
|
|
||||||
paddingVertical: 16,
|
|
||||||
borderRadius: 14,
|
|
||||||
flexDirection: "row",
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
gap: 10,
|
|
||||||
},
|
|
||||||
|
|
||||||
logoutText: {
|
|
||||||
color: "#FFFFFF",
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: "600",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
import { Stack } from "expo-router";
|
|
||||||
import { StatusBar } from "expo-status-bar";
|
|
||||||
|
|
||||||
export default function RootLayout() {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Stack screenOptions={{ headerShown: false }}>
|
|
||||||
<Stack.Screen name="(tabs)" />
|
|
||||||
<Stack.Screen name="add-income" />
|
|
||||||
<Stack.Screen name="add-expense" />
|
|
||||||
</Stack>
|
|
||||||
|
|
||||||
<StatusBar style="auto" />
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,97 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import {
|
|
||||||
View,
|
|
||||||
Text,
|
|
||||||
TextInput,
|
|
||||||
StyleSheet,
|
|
||||||
TouchableOpacity,
|
|
||||||
} from "react-native";
|
|
||||||
import { router } from "expo-router";
|
|
||||||
|
|
||||||
export default function AddExpenseScreen() {
|
|
||||||
const [amount, setAmount] = useState("");
|
|
||||||
|
|
||||||
const formatRupiah = (value: string) => {
|
|
||||||
const numberString = value.replace(/[^,\d]/g, "");
|
|
||||||
const split = numberString.split(",");
|
|
||||||
const sisa = split[0].length % 3;
|
|
||||||
|
|
||||||
let rupiah = split[0].substring(0, sisa);
|
|
||||||
const ribuan = split[0].substring(sisa).match(/\d{3}/gi);
|
|
||||||
|
|
||||||
if (ribuan) {
|
|
||||||
const separator = sisa ? "." : "";
|
|
||||||
rupiah += separator + ribuan.join(".");
|
|
||||||
}
|
|
||||||
|
|
||||||
return rupiah ? `Rp ${rupiah}` : "";
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAmountChange = (value: string) => {
|
|
||||||
setAmount(formatRupiah(value));
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View style={styles.container}>
|
|
||||||
<Text style={styles.title}>Tambah Pengeluaran</Text>
|
|
||||||
|
|
||||||
<TextInput
|
|
||||||
placeholder="Nama pengeluaran"
|
|
||||||
style={styles.input}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<TextInput
|
|
||||||
placeholder="Jumlah uang"
|
|
||||||
keyboardType="numeric"
|
|
||||||
value={amount}
|
|
||||||
onChangeText={handleAmountChange}
|
|
||||||
style={styles.input}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<TouchableOpacity
|
|
||||||
style={styles.button}
|
|
||||||
onPress={() => router.back()}
|
|
||||||
>
|
|
||||||
<Text style={styles.buttonText}>Simpan</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
padding: 24,
|
|
||||||
backgroundColor: "#fff",
|
|
||||||
justifyContent: "center",
|
|
||||||
},
|
|
||||||
|
|
||||||
title: {
|
|
||||||
fontSize: 28,
|
|
||||||
fontWeight: "bold",
|
|
||||||
marginBottom: 24,
|
|
||||||
textAlign: "center",
|
|
||||||
},
|
|
||||||
|
|
||||||
input: {
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: "#ddd",
|
|
||||||
padding: 16,
|
|
||||||
borderRadius: 12,
|
|
||||||
marginBottom: 16,
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
|
|
||||||
button: {
|
|
||||||
backgroundColor: "#DC2626",
|
|
||||||
padding: 16,
|
|
||||||
borderRadius: 12,
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
|
|
||||||
buttonText: {
|
|
||||||
color: "#fff",
|
|
||||||
fontWeight: "600",
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,97 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import {
|
|
||||||
View,
|
|
||||||
Text,
|
|
||||||
TextInput,
|
|
||||||
StyleSheet,
|
|
||||||
TouchableOpacity,
|
|
||||||
} from "react-native";
|
|
||||||
import { router } from "expo-router";
|
|
||||||
|
|
||||||
export default function AddIncomeScreen() {
|
|
||||||
const [amount, setAmount] = useState("");
|
|
||||||
|
|
||||||
const formatRupiah = (value: string) => {
|
|
||||||
const numberString = value.replace(/[^,\d]/g, "");
|
|
||||||
const split = numberString.split(",");
|
|
||||||
const sisa = split[0].length % 3;
|
|
||||||
|
|
||||||
let rupiah = split[0].substring(0, sisa);
|
|
||||||
const ribuan = split[0].substring(sisa).match(/\d{3}/gi);
|
|
||||||
|
|
||||||
if (ribuan) {
|
|
||||||
const separator = sisa ? "." : "";
|
|
||||||
rupiah += separator + ribuan.join(".");
|
|
||||||
}
|
|
||||||
|
|
||||||
return rupiah ? `Rp ${rupiah}` : "";
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleAmountChange = (value: string) => {
|
|
||||||
setAmount(formatRupiah(value));
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<View style={styles.container}>
|
|
||||||
<Text style={styles.title}>Tambah Pemasukan</Text>
|
|
||||||
|
|
||||||
<TextInput
|
|
||||||
placeholder="Nama pemasukan"
|
|
||||||
style={styles.input}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<TextInput
|
|
||||||
placeholder="Jumlah uang"
|
|
||||||
keyboardType="numeric"
|
|
||||||
value={amount}
|
|
||||||
onChangeText={handleAmountChange}
|
|
||||||
style={styles.input}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<TouchableOpacity
|
|
||||||
style={styles.button}
|
|
||||||
onPress={() => router.back()}
|
|
||||||
>
|
|
||||||
<Text style={styles.buttonText}>Simpan</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
padding: 24,
|
|
||||||
backgroundColor: "#fff",
|
|
||||||
justifyContent: "center",
|
|
||||||
},
|
|
||||||
|
|
||||||
title: {
|
|
||||||
fontSize: 28,
|
|
||||||
fontWeight: "bold",
|
|
||||||
marginBottom: 24,
|
|
||||||
textAlign: "center",
|
|
||||||
},
|
|
||||||
|
|
||||||
input: {
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: "#ddd",
|
|
||||||
padding: 16,
|
|
||||||
borderRadius: 12,
|
|
||||||
marginBottom: 16,
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
|
|
||||||
button: {
|
|
||||||
backgroundColor: "#16A34A",
|
|
||||||
padding: 16,
|
|
||||||
borderRadius: 12,
|
|
||||||
alignItems: "center",
|
|
||||||
},
|
|
||||||
|
|
||||||
buttonText: {
|
|
||||||
color: "#fff",
|
|
||||||
fontWeight: "600",
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
import { Link } from 'expo-router';
|
|
||||||
import { StyleSheet } from 'react-native';
|
|
||||||
|
|
||||||
import { ThemedText } from '@/components/themed-text';
|
|
||||||
import { ThemedView } from '@/components/themed-view';
|
|
||||||
|
|
||||||
export default function ModalScreen() {
|
|
||||||
return (
|
|
||||||
<ThemedView style={styles.container}>
|
|
||||||
<ThemedText type="title">This is a modal</ThemedText>
|
|
||||||
<Link href="/" dismissTo style={styles.link}>
|
|
||||||
<ThemedText type="link">Go to home screen</ThemedText>
|
|
||||||
</Link>
|
|
||||||
</ThemedView>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
padding: 20,
|
|
||||||
},
|
|
||||||
link: {
|
|
||||||
marginTop: 15,
|
|
||||||
paddingVertical: 15,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 384 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
@ -1,25 +0,0 @@
|
|||||||
import { Href, Link } from 'expo-router';
|
|
||||||
import { openBrowserAsync, WebBrowserPresentationStyle } from 'expo-web-browser';
|
|
||||||
import { type ComponentProps } from 'react';
|
|
||||||
|
|
||||||
type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: Href & string };
|
|
||||||
|
|
||||||
export function ExternalLink({ href, ...rest }: Props) {
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
target="_blank"
|
|
||||||
{...rest}
|
|
||||||
href={href}
|
|
||||||
onPress={async (event) => {
|
|
||||||
if (process.env.EXPO_OS !== 'web') {
|
|
||||||
// Prevent the default behavior of linking to the default browser on native.
|
|
||||||
event.preventDefault();
|
|
||||||
// Open the link in an in-app browser.
|
|
||||||
await openBrowserAsync(href, {
|
|
||||||
presentationStyle: WebBrowserPresentationStyle.AUTOMATIC,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,18 +0,0 @@
|
|||||||
import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
|
|
||||||
import { PlatformPressable } from '@react-navigation/elements';
|
|
||||||
import * as Haptics from 'expo-haptics';
|
|
||||||
|
|
||||||
export function HapticTab(props: BottomTabBarButtonProps) {
|
|
||||||
return (
|
|
||||||
<PlatformPressable
|
|
||||||
{...props}
|
|
||||||
onPressIn={(ev) => {
|
|
||||||
if (process.env.EXPO_OS === 'ios') {
|
|
||||||
// Add a soft haptic feedback when pressing down on the tabs.
|
|
||||||
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
|
|
||||||
}
|
|
||||||
props.onPressIn?.(ev);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import Animated from 'react-native-reanimated';
|
|
||||||
|
|
||||||
export function HelloWave() {
|
|
||||||
return (
|
|
||||||
<Animated.Text
|
|
||||||
style={{
|
|
||||||
fontSize: 28,
|
|
||||||
lineHeight: 32,
|
|
||||||
marginTop: -6,
|
|
||||||
animationName: {
|
|
||||||
'50%': { transform: [{ rotate: '25deg' }] },
|
|
||||||
},
|
|
||||||
animationIterationCount: 4,
|
|
||||||
animationDuration: '300ms',
|
|
||||||
}}>
|
|
||||||
👋
|
|
||||||
</Animated.Text>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,79 +0,0 @@
|
|||||||
import type { PropsWithChildren, ReactElement } from 'react';
|
|
||||||
import { StyleSheet } from 'react-native';
|
|
||||||
import Animated, {
|
|
||||||
interpolate,
|
|
||||||
useAnimatedRef,
|
|
||||||
useAnimatedStyle,
|
|
||||||
useScrollOffset,
|
|
||||||
} from 'react-native-reanimated';
|
|
||||||
|
|
||||||
import { ThemedView } from '@/components/themed-view';
|
|
||||||
import { useColorScheme } from '@/hooks/use-color-scheme';
|
|
||||||
import { useThemeColor } from '@/hooks/use-theme-color';
|
|
||||||
|
|
||||||
const HEADER_HEIGHT = 250;
|
|
||||||
|
|
||||||
type Props = PropsWithChildren<{
|
|
||||||
headerImage: ReactElement;
|
|
||||||
headerBackgroundColor: { dark: string; light: string };
|
|
||||||
}>;
|
|
||||||
|
|
||||||
export default function ParallaxScrollView({
|
|
||||||
children,
|
|
||||||
headerImage,
|
|
||||||
headerBackgroundColor,
|
|
||||||
}: Props) {
|
|
||||||
const backgroundColor = useThemeColor({}, 'background');
|
|
||||||
const colorScheme = useColorScheme() ?? 'light';
|
|
||||||
const scrollRef = useAnimatedRef<Animated.ScrollView>();
|
|
||||||
const scrollOffset = useScrollOffset(scrollRef);
|
|
||||||
const headerAnimatedStyle = useAnimatedStyle(() => {
|
|
||||||
return {
|
|
||||||
transform: [
|
|
||||||
{
|
|
||||||
translateY: interpolate(
|
|
||||||
scrollOffset.value,
|
|
||||||
[-HEADER_HEIGHT, 0, HEADER_HEIGHT],
|
|
||||||
[-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75]
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]),
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Animated.ScrollView
|
|
||||||
ref={scrollRef}
|
|
||||||
style={{ backgroundColor, flex: 1 }}
|
|
||||||
scrollEventThrottle={16}>
|
|
||||||
<Animated.View
|
|
||||||
style={[
|
|
||||||
styles.header,
|
|
||||||
{ backgroundColor: headerBackgroundColor[colorScheme] },
|
|
||||||
headerAnimatedStyle,
|
|
||||||
]}>
|
|
||||||
{headerImage}
|
|
||||||
</Animated.View>
|
|
||||||
<ThemedView style={styles.content}>{children}</ThemedView>
|
|
||||||
</Animated.ScrollView>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
},
|
|
||||||
header: {
|
|
||||||
height: HEADER_HEIGHT,
|
|
||||||
overflow: 'hidden',
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
flex: 1,
|
|
||||||
padding: 32,
|
|
||||||
gap: 16,
|
|
||||||
overflow: 'hidden',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,60 +0,0 @@
|
|||||||
import { StyleSheet, Text, type TextProps } from 'react-native';
|
|
||||||
|
|
||||||
import { useThemeColor } from '@/hooks/use-theme-color';
|
|
||||||
|
|
||||||
export type ThemedTextProps = TextProps & {
|
|
||||||
lightColor?: string;
|
|
||||||
darkColor?: string;
|
|
||||||
type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
|
|
||||||
};
|
|
||||||
|
|
||||||
export function ThemedText({
|
|
||||||
style,
|
|
||||||
lightColor,
|
|
||||||
darkColor,
|
|
||||||
type = 'default',
|
|
||||||
...rest
|
|
||||||
}: ThemedTextProps) {
|
|
||||||
const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text');
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Text
|
|
||||||
style={[
|
|
||||||
{ color },
|
|
||||||
type === 'default' ? styles.default : undefined,
|
|
||||||
type === 'title' ? styles.title : undefined,
|
|
||||||
type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
|
|
||||||
type === 'subtitle' ? styles.subtitle : undefined,
|
|
||||||
type === 'link' ? styles.link : undefined,
|
|
||||||
style,
|
|
||||||
]}
|
|
||||||
{...rest}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
default: {
|
|
||||||
fontSize: 16,
|
|
||||||
lineHeight: 24,
|
|
||||||
},
|
|
||||||
defaultSemiBold: {
|
|
||||||
fontSize: 16,
|
|
||||||
lineHeight: 24,
|
|
||||||
fontWeight: '600',
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
fontSize: 32,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
lineHeight: 32,
|
|
||||||
},
|
|
||||||
subtitle: {
|
|
||||||
fontSize: 20,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
},
|
|
||||||
link: {
|
|
||||||
lineHeight: 30,
|
|
||||||
fontSize: 16,
|
|
||||||
color: '#0a7ea4',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,14 +0,0 @@
|
|||||||
import { View, type ViewProps } from 'react-native';
|
|
||||||
|
|
||||||
import { useThemeColor } from '@/hooks/use-theme-color';
|
|
||||||
|
|
||||||
export type ThemedViewProps = ViewProps & {
|
|
||||||
lightColor?: string;
|
|
||||||
darkColor?: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
|
|
||||||
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
|
|
||||||
|
|
||||||
return <View style={[{ backgroundColor }, style]} {...otherProps} />;
|
|
||||||
}
|
|
||||||
@ -1,45 +0,0 @@
|
|||||||
import { PropsWithChildren, useState } from 'react';
|
|
||||||
import { StyleSheet, TouchableOpacity } from 'react-native';
|
|
||||||
|
|
||||||
import { ThemedText } from '@/components/themed-text';
|
|
||||||
import { ThemedView } from '@/components/themed-view';
|
|
||||||
import { IconSymbol } from '@/components/ui/icon-symbol';
|
|
||||||
import { Colors } from '@/constants/theme';
|
|
||||||
import { useColorScheme } from '@/hooks/use-color-scheme';
|
|
||||||
|
|
||||||
export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
|
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
|
||||||
const theme = useColorScheme() ?? 'light';
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ThemedView>
|
|
||||||
<TouchableOpacity
|
|
||||||
style={styles.heading}
|
|
||||||
onPress={() => setIsOpen((value) => !value)}
|
|
||||||
activeOpacity={0.8}>
|
|
||||||
<IconSymbol
|
|
||||||
name="chevron.right"
|
|
||||||
size={18}
|
|
||||||
weight="medium"
|
|
||||||
color={theme === 'light' ? Colors.light.icon : Colors.dark.icon}
|
|
||||||
style={{ transform: [{ rotate: isOpen ? '90deg' : '0deg' }] }}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ThemedText type="defaultSemiBold">{title}</ThemedText>
|
|
||||||
</TouchableOpacity>
|
|
||||||
{isOpen && <ThemedView style={styles.content}>{children}</ThemedView>}
|
|
||||||
</ThemedView>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
heading: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
gap: 6,
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
marginTop: 6,
|
|
||||||
marginLeft: 24,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
import { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols';
|
|
||||||
import { StyleProp, ViewStyle } from 'react-native';
|
|
||||||
|
|
||||||
export function IconSymbol({
|
|
||||||
name,
|
|
||||||
size = 24,
|
|
||||||
color,
|
|
||||||
style,
|
|
||||||
weight = 'regular',
|
|
||||||
}: {
|
|
||||||
name: SymbolViewProps['name'];
|
|
||||||
size?: number;
|
|
||||||
color: string;
|
|
||||||
style?: StyleProp<ViewStyle>;
|
|
||||||
weight?: SymbolWeight;
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<SymbolView
|
|
||||||
weight={weight}
|
|
||||||
tintColor={color}
|
|
||||||
resizeMode="scaleAspectFit"
|
|
||||||
name={name}
|
|
||||||
style={[
|
|
||||||
{
|
|
||||||
width: size,
|
|
||||||
height: size,
|
|
||||||
},
|
|
||||||
style,
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
// Fallback for using MaterialIcons on Android and web.
|
|
||||||
|
|
||||||
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
|
|
||||||
import { SymbolWeight, SymbolViewProps } from 'expo-symbols';
|
|
||||||
import { ComponentProps } from 'react';
|
|
||||||
import { OpaqueColorValue, type StyleProp, type TextStyle } from 'react-native';
|
|
||||||
|
|
||||||
type IconMapping = Record<SymbolViewProps['name'], ComponentProps<typeof MaterialIcons>['name']>;
|
|
||||||
type IconSymbolName = keyof typeof MAPPING;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Add your SF Symbols to Material Icons mappings here.
|
|
||||||
* - see Material Icons in the [Icons Directory](https://icons.expo.fyi).
|
|
||||||
* - see SF Symbols in the [SF Symbols](https://developer.apple.com/sf-symbols/) app.
|
|
||||||
*/
|
|
||||||
const MAPPING = {
|
|
||||||
'house.fill': 'home',
|
|
||||||
'paperplane.fill': 'send',
|
|
||||||
'chevron.left.forwardslash.chevron.right': 'code',
|
|
||||||
'chevron.right': 'chevron-right',
|
|
||||||
} as IconMapping;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* An icon component that uses native SF Symbols on iOS, and Material Icons on Android and web.
|
|
||||||
* This ensures a consistent look across platforms, and optimal resource usage.
|
|
||||||
* Icon `name`s are based on SF Symbols and require manual mapping to Material Icons.
|
|
||||||
*/
|
|
||||||
export function IconSymbol({
|
|
||||||
name,
|
|
||||||
size = 24,
|
|
||||||
color,
|
|
||||||
style,
|
|
||||||
}: {
|
|
||||||
name: IconSymbolName;
|
|
||||||
size?: number;
|
|
||||||
color: string | OpaqueColorValue;
|
|
||||||
style?: StyleProp<TextStyle>;
|
|
||||||
weight?: SymbolWeight;
|
|
||||||
}) {
|
|
||||||
return <MaterialIcons color={color} size={size} name={MAPPING[name]} style={style} />;
|
|
||||||
}
|
|
||||||
@ -1,53 +0,0 @@
|
|||||||
/**
|
|
||||||
* Below are the colors that are used in the app. The colors are defined in the light and dark mode.
|
|
||||||
* There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { Platform } from 'react-native';
|
|
||||||
|
|
||||||
const tintColorLight = '#0a7ea4';
|
|
||||||
const tintColorDark = '#fff';
|
|
||||||
|
|
||||||
export const Colors = {
|
|
||||||
light: {
|
|
||||||
text: '#11181C',
|
|
||||||
background: '#fff',
|
|
||||||
tint: tintColorLight,
|
|
||||||
icon: '#687076',
|
|
||||||
tabIconDefault: '#687076',
|
|
||||||
tabIconSelected: tintColorLight,
|
|
||||||
},
|
|
||||||
dark: {
|
|
||||||
text: '#ECEDEE',
|
|
||||||
background: '#151718',
|
|
||||||
tint: tintColorDark,
|
|
||||||
icon: '#9BA1A6',
|
|
||||||
tabIconDefault: '#9BA1A6',
|
|
||||||
tabIconSelected: tintColorDark,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Fonts = Platform.select({
|
|
||||||
ios: {
|
|
||||||
/** iOS `UIFontDescriptorSystemDesignDefault` */
|
|
||||||
sans: 'system-ui',
|
|
||||||
/** iOS `UIFontDescriptorSystemDesignSerif` */
|
|
||||||
serif: 'ui-serif',
|
|
||||||
/** iOS `UIFontDescriptorSystemDesignRounded` */
|
|
||||||
rounded: 'ui-rounded',
|
|
||||||
/** iOS `UIFontDescriptorSystemDesignMonospaced` */
|
|
||||||
mono: 'ui-monospace',
|
|
||||||
},
|
|
||||||
default: {
|
|
||||||
sans: 'normal',
|
|
||||||
serif: 'serif',
|
|
||||||
rounded: 'normal',
|
|
||||||
mono: 'monospace',
|
|
||||||
},
|
|
||||||
web: {
|
|
||||||
sans: "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
|
|
||||||
serif: "Georgia, 'Times New Roman', serif",
|
|
||||||
rounded: "'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif",
|
|
||||||
mono: "SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
// https://docs.expo.dev/guides/using-eslint/
|
|
||||||
const { defineConfig } = require('eslint/config');
|
|
||||||
const expoConfig = require('eslint-config-expo/flat');
|
|
||||||
|
|
||||||
module.exports = defineConfig([
|
|
||||||
expoConfig,
|
|
||||||
{
|
|
||||||
ignores: ['dist/*'],
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
1
hitung_duit
Submodule
1
hitung_duit
Submodule
@ -0,0 +1 @@
|
|||||||
|
Subproject commit 1ec97b320eaf72907fa8b90273fc6d13a37138ca
|
||||||
@ -1 +0,0 @@
|
|||||||
export { useColorScheme } from 'react-native';
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
import { useEffect, useState } from 'react';
|
|
||||||
import { useColorScheme as useRNColorScheme } from 'react-native';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* To support static rendering, this value needs to be re-calculated on the client side for web
|
|
||||||
*/
|
|
||||||
export function useColorScheme() {
|
|
||||||
const [hasHydrated, setHasHydrated] = useState(false);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setHasHydrated(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const colorScheme = useRNColorScheme();
|
|
||||||
|
|
||||||
if (hasHydrated) {
|
|
||||||
return colorScheme;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 'light';
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
/**
|
|
||||||
* Learn more about light and dark modes:
|
|
||||||
* https://docs.expo.dev/guides/color-schemes/
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { Colors } from '@/constants/theme';
|
|
||||||
import { useColorScheme } from '@/hooks/use-color-scheme';
|
|
||||||
|
|
||||||
export function useThemeColor(
|
|
||||||
props: { light?: string; dark?: string },
|
|
||||||
colorName: keyof typeof Colors.light & keyof typeof Colors.dark
|
|
||||||
) {
|
|
||||||
const theme = useColorScheme() ?? 'light';
|
|
||||||
const colorFromProps = props[theme];
|
|
||||||
|
|
||||||
if (colorFromProps) {
|
|
||||||
return colorFromProps;
|
|
||||||
} else {
|
|
||||||
return Colors[theme][colorName];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
12886
package-lock.json
generated
12886
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
47
package.json
47
package.json
@ -1,47 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "hitung_duit",
|
|
||||||
"main": "expo-router/entry",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"scripts": {
|
|
||||||
"start": "expo start",
|
|
||||||
"reset-project": "node ./scripts/reset-project.js",
|
|
||||||
"android": "expo start --android",
|
|
||||||
"ios": "expo start --ios",
|
|
||||||
"web": "expo start --web",
|
|
||||||
"lint": "expo lint"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@expo/vector-icons": "^15.0.3",
|
|
||||||
"@react-navigation/bottom-tabs": "^7.4.0",
|
|
||||||
"@react-navigation/elements": "^2.6.3",
|
|
||||||
"@react-navigation/native": "^7.1.8",
|
|
||||||
"expo": "~54.0.33",
|
|
||||||
"expo-constants": "~18.0.13",
|
|
||||||
"expo-font": "~14.0.11",
|
|
||||||
"expo-haptics": "~15.0.8",
|
|
||||||
"expo-image": "~3.0.11",
|
|
||||||
"expo-linking": "~8.0.11",
|
|
||||||
"expo-router": "~6.0.23",
|
|
||||||
"expo-splash-screen": "~31.0.13",
|
|
||||||
"expo-status-bar": "~3.0.9",
|
|
||||||
"expo-symbols": "~1.0.8",
|
|
||||||
"expo-system-ui": "~6.0.9",
|
|
||||||
"expo-web-browser": "~15.0.10",
|
|
||||||
"react": "19.1.0",
|
|
||||||
"react-dom": "19.1.0",
|
|
||||||
"react-native": "0.81.5",
|
|
||||||
"react-native-gesture-handler": "~2.28.0",
|
|
||||||
"react-native-worklets": "0.5.1",
|
|
||||||
"react-native-reanimated": "~4.1.1",
|
|
||||||
"react-native-safe-area-context": "~5.6.0",
|
|
||||||
"react-native-screens": "~4.16.0",
|
|
||||||
"react-native-web": "~0.21.0"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/react": "~19.1.0",
|
|
||||||
"typescript": "~5.9.2",
|
|
||||||
"eslint": "^9.25.0",
|
|
||||||
"eslint-config-expo": "~10.0.0"
|
|
||||||
},
|
|
||||||
"private": true
|
|
||||||
}
|
|
||||||
@ -1,112 +0,0 @@
|
|||||||
#!/usr/bin/env node
|
|
||||||
|
|
||||||
/**
|
|
||||||
* This script is used to reset the project to a blank state.
|
|
||||||
* It deletes or moves the /app, /components, /hooks, /scripts, and /constants directories to /app-example based on user input and creates a new /app directory with an index.tsx and _layout.tsx file.
|
|
||||||
* You can remove the `reset-project` script from package.json and safely delete this file after running it.
|
|
||||||
*/
|
|
||||||
|
|
||||||
const fs = require("fs");
|
|
||||||
const path = require("path");
|
|
||||||
const readline = require("readline");
|
|
||||||
|
|
||||||
const root = process.cwd();
|
|
||||||
const oldDirs = ["app", "components", "hooks", "constants", "scripts"];
|
|
||||||
const exampleDir = "app-example";
|
|
||||||
const newAppDir = "app";
|
|
||||||
const exampleDirPath = path.join(root, exampleDir);
|
|
||||||
|
|
||||||
const indexContent = `import { Text, View } from "react-native";
|
|
||||||
|
|
||||||
export default function Index() {
|
|
||||||
return (
|
|
||||||
<View
|
|
||||||
style={{
|
|
||||||
flex: 1,
|
|
||||||
justifyContent: "center",
|
|
||||||
alignItems: "center",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Text>Edit app/index.tsx to edit this screen.</Text>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const layoutContent = `import { Stack } from "expo-router";
|
|
||||||
|
|
||||||
export default function RootLayout() {
|
|
||||||
return <Stack />;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const rl = readline.createInterface({
|
|
||||||
input: process.stdin,
|
|
||||||
output: process.stdout,
|
|
||||||
});
|
|
||||||
|
|
||||||
const moveDirectories = async (userInput) => {
|
|
||||||
try {
|
|
||||||
if (userInput === "y") {
|
|
||||||
// Create the app-example directory
|
|
||||||
await fs.promises.mkdir(exampleDirPath, { recursive: true });
|
|
||||||
console.log(`📁 /${exampleDir} directory created.`);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Move old directories to new app-example directory or delete them
|
|
||||||
for (const dir of oldDirs) {
|
|
||||||
const oldDirPath = path.join(root, dir);
|
|
||||||
if (fs.existsSync(oldDirPath)) {
|
|
||||||
if (userInput === "y") {
|
|
||||||
const newDirPath = path.join(root, exampleDir, dir);
|
|
||||||
await fs.promises.rename(oldDirPath, newDirPath);
|
|
||||||
console.log(`➡️ /${dir} moved to /${exampleDir}/${dir}.`);
|
|
||||||
} else {
|
|
||||||
await fs.promises.rm(oldDirPath, { recursive: true, force: true });
|
|
||||||
console.log(`❌ /${dir} deleted.`);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.log(`➡️ /${dir} does not exist, skipping.`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create new /app directory
|
|
||||||
const newAppDirPath = path.join(root, newAppDir);
|
|
||||||
await fs.promises.mkdir(newAppDirPath, { recursive: true });
|
|
||||||
console.log("\n📁 New /app directory created.");
|
|
||||||
|
|
||||||
// Create index.tsx
|
|
||||||
const indexPath = path.join(newAppDirPath, "index.tsx");
|
|
||||||
await fs.promises.writeFile(indexPath, indexContent);
|
|
||||||
console.log("📄 app/index.tsx created.");
|
|
||||||
|
|
||||||
// Create _layout.tsx
|
|
||||||
const layoutPath = path.join(newAppDirPath, "_layout.tsx");
|
|
||||||
await fs.promises.writeFile(layoutPath, layoutContent);
|
|
||||||
console.log("📄 app/_layout.tsx created.");
|
|
||||||
|
|
||||||
console.log("\n✅ Project reset complete. Next steps:");
|
|
||||||
console.log(
|
|
||||||
`1. Run \`npx expo start\` to start a development server.\n2. Edit app/index.tsx to edit the main screen.${
|
|
||||||
userInput === "y"
|
|
||||||
? `\n3. Delete the /${exampleDir} directory when you're done referencing it.`
|
|
||||||
: ""
|
|
||||||
}`
|
|
||||||
);
|
|
||||||
} catch (error) {
|
|
||||||
console.error(`❌ Error during script execution: ${error.message}`);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
rl.question(
|
|
||||||
"Do you want to move existing files to /app-example instead of deleting them? (Y/n): ",
|
|
||||||
(answer) => {
|
|
||||||
const userInput = answer.trim().toLowerCase() || "y";
|
|
||||||
if (userInput === "y" || userInput === "n") {
|
|
||||||
moveDirectories(userInput).finally(() => rl.close());
|
|
||||||
} else {
|
|
||||||
console.log("❌ Invalid input. Please enter 'Y' or 'N'.");
|
|
||||||
rl.close();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": "expo/tsconfig.base",
|
|
||||||
"compilerOptions": {
|
|
||||||
"strict": true,
|
|
||||||
"paths": {
|
|
||||||
"@/*": [
|
|
||||||
"./*"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"include": [
|
|
||||||
"**/*.ts",
|
|
||||||
"**/*.tsx",
|
|
||||||
".expo/types/**/*.ts",
|
|
||||||
"expo-env.d.ts"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user