اذهب إلى المحتوى

السؤال

نشر

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

 

import React, {useState} from 'react';
import {Text, StyleSheet, Image, View, TouchableOpacity} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import Icon from 'react-native-vector-icons/Feather';
import Picker from 'react-native-image-crop-picker';

import LongButton from '../../components/buttons/LongButton';
import NavigationHeader from '../../components/shared/NavigationHeader';
import SafeView from '../../components/shared/SafeView';
import BasicInput from '../../components/textInputs/BasicInput';
import {phoneHeight, phoneWidth} from '../../theme/Dimensions';
import {MyColors} from '../../theme/MyColos';
import {MyFonts} from '../../theme/MyFonts';

export default function UpdateProfileScreen({route}: any) {
  const navigation = useNavigation();
  const item = route.params;
  const [userImage, setUserImage] = useState(item.image);
  const [canEditName, setCanEditName] = useState(false);
  const [canEditPhone, setCanEditPhone] = useState(false);
  const [canEditEmail, setCanEditEmail] = useState(false);

  const openGallery = () => {
    Picker.openPicker({
      width: 300,
      height: 400,
      cropping: true,
    }).then(image => {
      console.log(image);
      setUserImage(image.path);
    });
  };

  return (
    <SafeView style={styles.container}>
      <NavigationHeader
        title="تعديل بيانات الحساب"
        onBackPress={() => navigation.goBack()}
      />
      <View>
        <Image source={{uri: userImage}} style={styles.userImage} />
        <TouchableOpacity style={styles.cameraContainer} onPress={openGallery}>
          <Icon name="camera" size={phoneHeight * 0.03} color="white" />
        </TouchableOpacity>
      </View>

      <Text style={styles.inputLabel}>اسم المستخدم</Text>
      <BasicInput
        hasIcon
        defaultValue={item.name}
        iconName="edit"
        iconColor={canEditName ? MyColors.darkAqua : MyColors.gray}
        editable={canEditName}
        onPress={() => setCanEditName(!canEditName)}
      />

      <Text style={styles.inputLabel}>رقم الجوال</Text>
      <BasicInput
        hasIcon
        defaultValue={item.phone}
        iconName="edit"
        iconColor={canEditPhone ? MyColors.darkAqua : MyColors.gray}
        editable={canEditPhone}
        onPress={() => setCanEditPhone(!canEditPhone)}
      />

      <Text style={styles.inputLabel}>البريد الإلكترونى</Text>
      <BasicInput
        hasIcon
        defaultValue={item.email}
        iconName="edit"
        iconColor={canEditEmail ? MyColors.darkAqua : MyColors.gray}
        editable={canEditEmail}
        onPress={() => setCanEditEmail(!canEditEmail)}
      />
      <Text
        onPress={() => navigation.navigate('UpdatePassword')}
        style={styles.forgetPassword}>
        تعديل كلمة المرور
      </Text>

      <LongButton
        style={styles.button}
        title="حفظ التغييرات"
        onPress={() => console.log('Save')}
      />
    </SafeView>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
  },
  inputLabel: {
    alignSelf: 'flex-end',
    fontFamily: MyFonts.Medium,
    fontSize: 15,
    color: MyColors.darkBlue,
    marginRight: phoneWidth * 0.1,
    marginVertical: phoneHeight * 0.01,
    marginTop: phoneHeight * 0.02,
  },
  forgetPassword: {
    alignSelf: 'flex-end',
    fontFamily: MyFonts.Medium,
    fontSize: 15,
    color: MyColors.darkAqua,
    marginRight: phoneWidth * 0.1,
    marginVertical: phoneHeight * 0.01,
    marginTop: phoneHeight * 0.02,
  },
  button: {
    marginTop: 50,
  },
  cameraContainer: {
    height: phoneHeight * 0.06,
    width: phoneHeight * 0.06,
    zIndex: 1,
    position: 'relative',
    bottom: phoneHeight * 0.06,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: MyColors.darkAqua,
    borderRadius: phoneHeight * 0.03,
  },
  userImage: {
    height: phoneHeight * 0.2,
    width: phoneHeight * 0.2,
    borderRadius: phoneHeight * 0.1,
  },
});

 

Recommended Posts

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...