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

مامعنى هذه الرسالة وكيف اعالجها react native

أحمد عبد الله2

السؤال

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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...