Refactor to new ThemedInput component

app/(onboarding)/start.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Stack } from 'expo-router';
-import { StyleSheet, TextInput, TouchableOpacity } from 'react-native';
+import { StyleSheet, TouchableOpacity } from 'react-native';
 import { router } from 'expo-router';
 import DeviceInfo from 'react-native-device-info';
 import { useTranslation } from 'react-i18next';
@@ -15,6 +15,7 @@ import { Message } from '@/lib/services/message';
 import { Request } from '@/lib/services/request';
 import { store } from '@/lib/store/store';
 import { setSession } from '@/lib/store/dataStore';
+import ThemedInput from '@/lib/components/ThemedInput';
 
 export default function OnboardStartScreen() {
     const colorScheme = useColorScheme() ?? 'light';
@@ -67,33 +68,30 @@ export default function OnboardStartScreen() {
                 </ThemedView>
 
                 <ThemedView style={styles.inputContainer}>
-                    <ThemedText>{t( "onboarding.your-name" )}</ThemedText>
-                    <TextInput
-                        style={styles.input}
-                        onChangeText={setName}
+                    <ThemedInput
+                        label={t( "onboarding.your-name" )}
                         placeholder={t( "onboarding.name" )}
+                        onChangeText={setName}
                         value={name}
+                        style={{paddingTop: 20}}
                     />
-                </ThemedView>
 
-                <ThemedView style={styles.inputContainer}>
-                    <ThemedText>{t( "onboarding.your-address" )}</ThemedText>
-                    <TextInput
-                        style={styles.input}
-                        onChangeText={setZipcode}
+                    <ThemedInput
+                        label={t( "onboarding.your-address" )}
                         placeholder={t( "onboarding.zipcode" )}
+                        onChangeText={setZipcode}
                         value={zipcode}
+                        style={{paddingTop: 20}}
                     />
-                    <TextInput
-                        style={styles.input}
-                        onChangeText={setHouseNumber}
+
+                    <ThemedInput
                         placeholder={t( "onboarding.house-number" )}
+                        onChangeText={setHouseNumber}
                         value={houseNumber}
                         keyboardType="numeric"
                     />
                 </ThemedView>
 
-
                 <TouchableOpacity style={{ ...styles.button, backgroundColor: Colors[ colorScheme ].tint }} onPress={start}>
                     <ThemedText style={{ color: Colors.white }}>
                         {t( "onboarding.start" )}
@@ -118,15 +116,7 @@ const styles = StyleSheet.create( {
         justifyContent: 'center',
     },
     inputContainer: {
-        paddingTop: 20,
-    },
-    input: {
         width: 250,
-        borderWidth: 1,
-        padding: 10,
-        paddingLeft: 20,
-        borderRadius: 3,
-        marginBottom: 10,
     },
     button: {
         borderRadius: 5,

app/(tabs)/settings.tsx

@@ -223,6 +223,7 @@ export default function SettingsScreen() {
                 fields={[
                     {
                         name: 'name',
+                        title: t( "modal.name.name" ),
                         placeholder: t( "modal.name.your-name" ),
                         defaultValue: name,
                     },

app/index.tsx

@@ -2,14 +2,14 @@ import React, { useEffect } from 'react';
 import { Redirect, useRouter } from 'expo-router';
 import { useTranslation } from 'react-i18next';
 
+import '@/lib/localization/i18n';
+
 import { ThemedText } from '@/lib/components/ThemedText';
 import { ThemedView } from '@/lib/components/ThemedView';
 import { useToken } from '@/lib/context/AppProvider';
 import { Request } from '@/lib/services/request';
 import { store } from '@/lib/store/store';
 import { setSession } from '@/lib/store/dataStore';
-import '@/lib/localization/i18n';
-
 
 export default function OnboardStartScreen() {
     const { token, isLoading } = useToken();