mobile-tabungan/app/add-income.tsx

97 lines
1.9 KiB
TypeScript

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,
},
});