هدا المكون component يجعل التطبيق بطيئًا لأنني استخدمت فيه animation هل يمكن فعل شئ فى الكود حتى يكون أسرع ؟

هدا الكمبوننت يجعل التطبيق بطيئا لاننى استخدمت فيه animation  واستخدمته بكثرة فى أغلب سكرينات التطبيق .. هل يمكن فعل شئ فى الكود حتى يكون اسرع ؟

import React, {useEffect, useState, useRef, FC} from 'react';
import {
  Text,
  View,
  Animated,
  StyleProp,
  ViewStyle,
  TextStyle,
  TextInput,
  StyleSheet,
  I18nManager,
} from 'react-native';
import {PixelPerfect} from './helper/pixelPerfect';

interface AnimatedInputInter {
  label: string;
  styleContainer?: StyleProp<ViewStyle>;
  styleLabelCon?: StyleProp<ViewStyle>;
  styleTextCon?: StyleProp<ViewStyle>;
  styleLabel?: StyleProp<TextStyle>;
  styleCustomWord?: StyleProp<TextStyle>;
  styleTextInput?: StyleProp<TextStyle>;
  keyboardType?: any;
  hasIcon?: boolean;
  multiline?: boolean;
  customIcon?: JSX.Element | JSX.Element[];
  styleIconCon?: StyleProp<ViewStyle>;
  secureTextEntry?: boolean;
  hasWord?: boolean;
  customWord?: JSX.Element | JSX.Element[];
  oneColor?: boolean | string;
}

export const AnimatedInput: FC<AnimatedInputInter> = ({
  label,
  styleContainer,
  styleLabelCon,
  styleLabel,
  styleTextInput,
  keyboardType,
  hasIcon,
  hasWord,
  customWord,
  customIcon,
  styleIconCon,
  secureTextEntry,
  styleCustomWord,
  styleTextCon,
  multiline,
  oneColor,
  ...props
}) => {
  const [value, setValue] = useState('');
  const [fontSize, setFontSize] = useState(14);
  const [fontColor, setFontColor] = useState('#515C6F');
  const moveText = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    if (value !== '') {
      moveTextTop();
    } else if (value === '') {
      moveTextBottom();
    }
  }, [value]);

  const onChangeText = (text: string) => {
    setValue(text);
  };

  const onFocusHandler = () => {
    if (value !== '') {
      moveTextTop();
    }
  };

  const onBlurHandler = () => {
    if (value === '') {
      moveTextBottom();
    }
  };

  const moveTextTop = () => {
    Animated.timing(moveText, {
      toValue: 1,
      duration: 200,
      useNativeDriver: true,
    }).start();
    setFontSize(12);
    setFontColor('rgba(81,92,111,.5)');
  };

  const moveTextBottom = () => {
    Animated.timing(moveText, {
      toValue: 0,
      duration: 200,
      useNativeDriver: true,
    }).start();
    setFontSize(14);
    setFontColor('#515C6F');
  };

  const yVal = moveText.interpolate({
    inputRange: [0, 1],
    outputRange: [4, -7],
  });

  const animStyle = {
    transform: [
      {
        translateY: yVal,
      },
    ],
  };

  return (
    <View style={[styles.container, styleContainer]}>
      {hasIcon &&
        (customIcon ? (
          <View style={[styles.iconCon, styleIconCon]}>{customIcon}</View>
        ) : (
          <View style={styles.iconCon}>
            <Text>X</Text>
          </View>
        ))}

      <Animated.View
        style={[
          styles.labelCon,
          animStyle,
          {left: hasIcon ? PixelPerfect(100) : PixelPerfect(30)},
          styleLabelCon,
        ]}>
        <Text
          style={[
            styles.label,
            styleLabel,
            {fontSize: fontSize, color: oneColor ? oneColor : fontColor},
          ]}>
          {label}
        </Text>
      </Animated.View>
      <View
        style={[
          {
            width: hasWord ? '80%' : '100%',
            paddingTop: 5,
          },
        ]}>
        <TextInput
          textAlign={I18nManager.isRTL ? 'right' : 'left'}
          onPressIn={moveTextTop}
          style={[
            styles.input,
            styleTextInput,
            {
              width: '100%',
              height: '40%',
            },
          ]}
          // value={value}

          onChangeText={(text: string) => onChangeText(text)}
          editable={true}
          onFocus={onFocusHandler}
          onBlur={onBlurHandler}
          blurOnSubmit
          placeholderTextColor={'#727C8E'}
          keyboardType={keyboardType}
          secureTextEntry={secureTextEntry}
          multiline={multiline}
          {...props}
        />
      </View>

      {hasWord &&
        (customWord ? (
          <View style={[styles.TextCon, styleTextCon]}>{customWord}</View>
        ) : (
          <View style={styles.TextCon}>
            <Text style={styleCustomWord}>X</Text>
          </View>
        ))}
    </View>
  );
};
export default AnimatedInput;

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#FFFFFF',
    paddingHorizontal: 10,
    borderColor: '#bdbdbd',
    borderRadius: 2,
    width: '100%',
    alignSelf: 'center',
    height: PixelPerfect(140),
    flexDirection: 'row',
    alignItems: 'center',
  },
  input: {
    fontSize: PixelPerfect(25),
    color: '#000',
    height: '55%',
    flex: 4,
    marginTop: PixelPerfect(40),
  },
  label: {
    color: '#7C8AA3',
    fontSize: PixelPerfect(25),
  },
  labelCon: {
    top: PixelPerfect(40),
    position: 'absolute',
    borderRadius: 90,
  },
  iconCon: {
    height: '100%',
    width: PixelPerfect(70),
    justifyContent: 'center',
    alignItems: 'center',
  },
  TextCon: {
    height: '100%',
    width: PixelPerfect(100),
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
});