diff --git a/app/(onboarding)/start.tsx b/app/(onboarding)/start.tsx
index a04542c..186619f 100644
--- a/app/(onboarding)/start.tsx
+++ b/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() {
- {t( "onboarding.your-name" )}
-
-
-
- {t( "onboarding.your-address" )}
-
-
-
{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,
diff --git a/app/(tabs)/settings.tsx b/app/(tabs)/settings.tsx
index 19680a9..684f4e3 100644
--- a/app/(tabs)/settings.tsx
+++ b/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,
},
diff --git a/app/index.tsx b/app/index.tsx
index 0c5e1f5..c9317c3 100644
--- a/app/index.tsx
+++ b/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();
diff --git a/assets/languages/en.json b/assets/languages/en.json
index 4c9cea9..1c41e24 100644
--- a/assets/languages/en.json
+++ b/assets/languages/en.json
@@ -68,6 +68,7 @@
"modal": {
"name": {
"title": "Change name",
+ "name": "Name",
"your-name": "Your name"
},
"address": {
diff --git a/assets/languages/nl.json b/assets/languages/nl.json
index 281680a..fe6de5f 100644
--- a/assets/languages/nl.json
+++ b/assets/languages/nl.json
@@ -68,6 +68,7 @@
"modal": {
"name": {
"title": "Naam wijzigen",
+ "name": "Naam",
"your-name": "Je naam"
},
"address": {
diff --git a/lib/components/EditModal.tsx b/lib/components/EditModal.tsx
index bb2a7a7..95f4048 100644
--- a/lib/components/EditModal.tsx
+++ b/lib/components/EditModal.tsx
@@ -11,6 +11,7 @@ import { Colors } from '@/lib/constants/Colors';
import { ThemedView } from '@/lib/components/ThemedView';
import { ThemedText } from '@/lib/components/ThemedText';
import { useColorScheme } from '@/lib/hooks/useColorScheme';
+import ThemedInput from '@/lib/components/ThemedInput';
interface Field {
name: string;
@@ -59,17 +60,13 @@ const CustomModal: React.FC = ({ title, visible, onClose, onSave
{title ? title : t( "modal.default.title" )}
{fields.map( (field, index) => (
-
- {field.title && {field.title}}
- handleInputChange( field.name, text )}
- value={inputValues[ field.name ] || ''}
- placeholderTextColor={Colors[ colorScheme ].text}
- />
-
-
+ handleInputChange( field.name, text )}
+ value={inputValues[ field.name ] || ''}
+ placeholder={field.placeholder}
+ />
) )}
diff --git a/lib/components/ThemedInput.tsx b/lib/components/ThemedInput.tsx
new file mode 100644
index 0000000..0060747
--- /dev/null
+++ b/lib/components/ThemedInput.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { TextInput, StyleSheet, TextInputProps, StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { ThemedView } from '@/lib/components/ThemedView';
+import { ThemedText } from '@/lib/components/ThemedText';
+import { Colors } from '@/lib/constants/Colors';
+import { useColorScheme } from '@/lib/hooks/useColorScheme';
+
+interface InputComponentProps extends TextInputProps {
+ label?: string;
+ style?: StyleProp;
+ inputStyle?: StyleProp;
+}
+
+const ThemedInput: React.FC = ({
+ label,
+ placeholder,
+ value,
+ onChangeText,
+ secureTextEntry = false,
+ keyboardType = 'default',
+ style,
+ inputStyle,
+ ...props
+}) => {
+ const colorScheme = useColorScheme() ?? 'light';
+
+ return (
+
+ {label && {label}}
+
+
+ );
+};
+
+const styles = StyleSheet.create( {
+ container: {
+ width: '100%',
+ },
+ label: {
+ marginBottom: 4,
+ },
+ input: {
+ width: '100%',
+ borderWidth: 1,
+ padding: 10,
+ paddingLeft: 20,
+ borderRadius: 3,
+ marginBottom: 10,
+ },
+} );
+
+export default ThemedInput;
\ No newline at end of file