feat: amountField

app/(tabs)/_layout.tsx

@@ -25,6 +25,7 @@ export default function Layout() {
             tabBarInactiveTintColor: colors.tabIconDefault,
             headerShown: false,
             tabBarStyle: styles.tabBar,
+            tabBarHideOnKeyboard: true
     }
 
     if(!authState?.authenticated){

app/(tabs)/home/_layout.tsx

@@ -24,7 +24,9 @@ export default function _Layout() {
         title: "test",
         headerShown: false,
       }}/>
-      <Stack.Screen name="addItem"/>
+      <Stack.Screen name="addItem" options={{
+        title: "new Expense",
+      }}/>
       <Stack.Screen name="userSettings" options={{
         animation: "slide_from_left",
         title: "User Settings",

app/(tabs)/home/addItem.tsx

@@ -1,10 +1,26 @@
-import { View, Text } from 'react-native'
-import React from 'react'
+import { View, Text, StyleSheet, TextInput, NativeSyntheticEvent, TextInputKeyPressEventData, TouchableOpacity } from 'react-native'
+import React, { useRef, useState } from 'react'
+import { SIZES } from '../../../constants/theme'
+import { useTheme } from '../../contexts/ThemeContext'
+import { AutoDecimalInput } from '../../../components'
 
-export default function addItem() {
+export default function AddItem() {
+  const value = useRef<string>("");
+  const [formatedValue, setFormatedValue] = useState<string>("");
+
+  const handleValueChange = (formatedValue: string) => {
+    setFormatedValue(formatedValue);
+  }
+  console.log(formatedValue)
   return (
-    <View>
-      <Text>addItem</Text>
+    <View style={styles.container}>
+      <AutoDecimalInput onValueChange={handleValueChange} label='Amount'></AutoDecimalInput>
     </View>
   )
-}
+}
+
+const styles = StyleSheet.create({
+  container: {
+    margin: SIZES.normal,
+  }
+})

app/(tabs)/home/index.tsx

@@ -74,15 +74,15 @@ export default function Page() {
     return (
         <SafeAreaView edges={["left", "right", "top"]} style={[styles.safeAreaViewStyle, {backgroundColor: colors.containerColor}]}>
             {plusShow && <Plus onPress={()=>{
-                // router.push("/(tabs)/home/addItem");
+                router.push("/(tabs)/home/addItem");
 
-                executeQuery({sql: "SELECT guid FROM category", args: []}).then((result) => {
-                    if("rows" in result[0]) {
-                        newExpense("Test Title", result[0]["rows"][0]["guid"], "69.69.1234", 100).then(() => {
-                            reFetch();
-                        });
-                    }
-                })
+                // executeQuery({sql: "SELECT guid FROM category", args: []}).then((result) => {
+                //     if("rows" in result[0]) {
+                //         newExpense("Test Title", result[0]["rows"][0]["guid"], "69.69.1234", 100).then(() => {
+                //             reFetch();
+                //         });
+                //     }
+                // })
             }}/>}
 
             {isLoading && <LoadingSymbol/>}

components/common/AutoDecimalInput.tsx

@@ -0,0 +1,97 @@
+import { View, Text, TouchableOpacity, TextInput, StyleSheet, NativeSyntheticEvent, TextInputKeyPressEventData } from 'react-native'
+import React, {LegacyRef, MutableRefObject, useRef, useState} from 'react'
+import colors from '../../constants/colors';
+import { SIZES } from '../../constants/theme';
+import { useTheme } from '../../app/contexts/ThemeContext';
+
+const formatDecimal = (value: string)=>{
+  switch(value.length){
+    case 0:
+      return "";
+    case 1:
+      return "0.0"+value
+    case 2:
+      return "0."+value
+    default:
+      return value.substring(0, value.length - 2) + "." + value.substring(value.length - 2, value.length)
+  }
+}
+
+interface AutoDecimalInputProps{
+  onValueChange?: (formattedValue: string) => void | undefined
+  label: string,
+}
+
+const AutoDecimalInput: React.FC<AutoDecimalInputProps> = ({onValueChange, label}) => {
+  const { colors } = useTheme();
+  const inputRef = useRef<TextInput>(null);
+  const [pressedNumbers, setPressedNumbers] = useState<string>("");
+
+  const update = (newValues : string) => {
+    if(onValueChange){
+      onValueChange(formatDecimal(newValues))
+    }
+    setPressedNumbers(newValues);
+  }
+
+  const handleInput = (e: NativeSyntheticEvent<TextInputKeyPressEventData>)=>{
+    const pressedKey:string = e.nativeEvent.key
+    if(Number.isInteger(Number.parseInt(pressedKey))){
+      if(pressedNumbers.length === 0 && pressedKey === "0"){
+        return
+      }
+      update(pressedNumbers + pressedKey)
+    }else if(pressedKey === "Backspace"){
+      update(pressedNumbers.substring(0, pressedNumbers.length - 1))
+    }
+  }
+  return (
+    <TouchableOpacity activeOpacity={1} style={[styles.inputContainer, {backgroundColor: colors.elementDefaultColor}]} onPress={()=>{
+      if(inputRef.current)
+        inputRef.current.focus()
+    }}>
+      <Text style={[styles.text, {color: colors.primaryText}]}>{label}</Text>
+      <View style={styles.currencyWrapper}>
+        <TextInput 
+          style={[styles.text, {color: colors.primaryText}]}
+          keyboardType='number-pad'
+          ref={inputRef}
+          onKeyPress={handleInput}
+          placeholder='0.00'
+          textAlign='right'
+          placeholderTextColor={colors.secondaryText}
+          value={formatDecimal(pressedNumbers)}
+        />
+        <Text style={styles.currency}>EUR</Text>
+      </View>
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    margin: SIZES.normal,
+  },
+  inputContainer: {
+    borderRadius: 20,
+    flexDirection: "row",
+    justifyContent: 'space-between'
+  },
+  text:{
+    fontSize: SIZES.large,
+    marginVertical: 12,
+    marginHorizontal: 15,
+  },
+  currency: {
+    fontSize: SIZES.normal,
+    color: "#007acc",
+    marginRight: 15,
+  },
+  currencyWrapper: {
+    flexDirection:"row",
+    justifyContent: 'flex-end',
+    alignItems: "center"
+  }
+})
+
+export default AutoDecimalInput;

components/index.tsx

@@ -9,8 +9,9 @@ import SearchBar from "./common/SearchBar"
 import NavigationButton from "./common/button"
 import LoadingSymbol from "./common/loadingSymbol"
 import Plus from "./common/plus"
+import AutoDecimalInput from "./common/AutoDecimalInput"
 
-//budget
+//login
 import BudgetHeader from "./budget/budgetHeader"
 import CategoryItem from "./budget/categoryItem"
 import CustomColorPicker from "./budget/customColorPicker"
@@ -22,6 +23,6 @@ import Input from "./login/input"
 export {
   BudgetHeader, ButtonSetting, CategoryItem, CustomCard, CustomColorPicker, ExpenseItem, Input,
   LoadingSymbol, NavigationButton, Plus,
-  SearchBar, ToggleSetting, TypeSelectorSwitch, Welcome
+  SearchBar, ToggleSetting, TypeSelectorSwitch, Welcome, AutoDecimalInput
 }