maartenvr98/Kliko
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor to new ThemedInput component

Browse source
This commit is contained in:
Maarten 2024-08-13 09:17:19 +02:00
parent f3c5667f0a
commit 0bfb70af8b
7 changed files with 90 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

36
app/(onboarding)/start.tsx
View file

@ -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,