1- import Material3Avatar from "@/components/material3-avatar" ;
21import PhoneNumberInput from "@/components/phone-number-input" ;
2+ import PhotoPicker from "@/components/photo-picker" ;
33import { additionalFields } from "@/constants/AdditionalFields" ;
44import { getAvatarColor } from "@/lib/avatar-utils" ;
55import { getCountryByCode } from "@/lib/countries" ;
@@ -67,6 +67,8 @@ export default function EditContactScreen() {
6767 handleSubmit,
6868 formState : { errors, isSubmitting, isValid } ,
6969 reset,
70+ setValue,
71+ watch,
7072 } = useForm < ContactFormData > ( {
7173 defaultValues : {
7274 name : contact ?. name || "" ,
@@ -88,12 +90,15 @@ export default function EditContactScreen() {
8890 birthday : contact ?. birthday || "" ,
8991 labels : contact ?. labels || "" ,
9092 nickname : contact ?. nickname || "" ,
93+ photo : contact ?. photo || "" ,
9194 } ,
9295 mode : "onChange" ,
9396 } ) ;
9497
9598 const onDismissSnackBar = ( ) => setVisible ( false ) ;
9699
100+ const photoUri = watch ( "photo" ) ;
101+
97102 const removeFieldAndReset = ( fieldKey : string ) => {
98103 const newVisibleFields = new Set ( visibleFields ) ;
99104 newVisibleFields . delete ( fieldKey ) ;
@@ -215,6 +220,7 @@ export default function EditContactScreen() {
215220 birthday : data . birthday || "" ,
216221 labels : data . labels ?. trim ( ) || "" ,
217222 nickname : data . nickname ?. trim ( ) || "" ,
223+ photo : data . photo || "" ,
218224 } ) ;
219225
220226 if ( success ) {
@@ -238,20 +244,19 @@ export default function EditContactScreen() {
238244 return (
239245 < KeyboardAvoidingView
240246 behavior = { Platform . OS === "ios" ? "padding" : "height" }
241- style = { [ styles . container , { paddingBottom : insets . bottom } ] }
247+ style = { styles . container }
242248 >
243249 < ScrollView
244250 contentContainerStyle = { [
245251 styles . scrollContent ,
246- { paddingBottom : insets . bottom } ,
252+ { paddingBottom : insets . bottom + 16 } ,
247253 ] }
248254 >
249255 < View style = { styles . formContainer } >
250- < Material3Avatar
251- letter = { letter }
252- backgroundColor = { avatarBackgroundColor }
253- textColor = { avatarTextColor }
254- style = { { marginVertical : 20 , alignSelf : "center" } }
256+ < PhotoPicker
257+ photo = { photoUri }
258+ onPhotoChange = { ( uri ) => setValue ( "photo" , uri ) }
259+ disabled = { isSubmitting }
255260 />
256261 < View >
257262 < Controller
@@ -347,6 +352,7 @@ export default function EditContactScreen() {
347352 }
348353 style = { styles . addFieldButton }
349354 labelStyle = { { fontSize : 16 } }
355+ contentStyle = { { marginVertical : 5 } }
350356 disabled = {
351357 isSubmitting || visibleFields . size >= additionalFields . length
352358 }
@@ -360,6 +366,7 @@ export default function EditContactScreen() {
360366 disabled = { ! isValid || isSubmitting }
361367 style = { styles . saveButton }
362368 labelStyle = { { fontSize : 16 } }
369+ contentStyle = { { marginVertical : 5 } }
363370 >
364371 Save Changes
365372 </ Button >
@@ -405,31 +412,8 @@ const styles = StyleSheet.create({
405412 } ,
406413 addFieldButton : {
407414 borderRadius : 50 ,
408- paddingVertical : 5 ,
409415 } ,
410416 saveButton : {
411- paddingVertical : 5 ,
412417 borderRadius : 50 ,
413418 } ,
414- bottomSheetContent : {
415- flex : 1 ,
416- paddingVertical : 16 ,
417- } ,
418- bottomSheetBackground : {
419- borderTopLeftRadius : 20 ,
420- borderTopRightRadius : 20 ,
421- } ,
422- header : {
423- flexDirection : "row" ,
424- justifyContent : "space-between" ,
425- alignItems : "center" ,
426- paddingVertical : 16 ,
427- paddingHorizontal : 24 ,
428- } ,
429- title : {
430- fontWeight : "600" ,
431- } ,
432- list : {
433- paddingHorizontal : 16 ,
434- } ,
435419} ) ;
0 commit comments