I’m developing a form page in React Native using TextInput from react-native-paper. The page is experiencing slow load times and glitches when the screen orientation changes for adujusting the width and height of the inputs. Below is a simplified version of my code:
The page takes too long to load.
There are glitches when changing the screen orientation.
How can I optimize the load time of this form page?
What are the best practices for handling screen orientation changes smoothly in React Native?
Are there specific techniques or libraries that can help improve the performance of forms with multiple TextInput components?
I’ve been exploring various optimization techniques but haven’t found a satisfactory solution yet. Any guidance or suggestions would be greatly appreciated!

import {
  Alert,
  KeyboardAvoidingView,
  LayoutAnimation,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';
import React, {useMemo, useState} from 'react';
import {Checkbox, TextInput} from 'react-native-paper';
import { useOrientationChange } from 'react-native-orientation-locker';

const MemoTextInput = React.memo(TextInput);

type Form = {
  name: string;
  dob: Date | undefined;
  age: number | null;
  temporaryAddress: {
    address: string;
    city: string;
    state: string;
    country: string;
    pincode: number | null;
  };
  permanentAddress: {
    address: string;
    city: string;
    state: string;
    country: string;
    pincode: number | null;
  };
  mobile: number | null;
  education: {
    school: string;
    degree: string;
    field: string;
    startDate: Date | null;
    endDate: Date | null;
  };
};

const Forms: React.FC = () => {
  const {colors} = useTheme();
  const screenContext = useScreenContext();
  const isPortrait = screenContext.windowWidth > screenContext.windowHeight;
  
  const screenStyles = useMemo(() => {
    return styles(
      screenContext,
      screenContext[isPortrait ? 'windowWidth' : 'windowHeight'],
      screenContext[isPortrait ? 'windowHeight' : 'windowWidth'],
      colors,
    );
  }, [screenContext, isPortrait, colors]);

  const [isDate, setisDate] = useState(false);
  const [checked, setChecked] = React.useState(false);
  const currentYear = new Date().getFullYear();

  const [formData, setFormData] = useState<Form>({
    name: '',
    mobile: null,
    permanentAddress: {
      address: '',
      city: '',
      country: '',
      pincode: null,
      state: '',
    },
    temporaryAddress: {
      address: '',
      city: '',
      country: '',
      pincode: null,
      state: '',
    },
    dob: undefined,
    age: null,
    education: {
      degree: '',
      endDate: null,
      field: '',
      school: '',
      startDate: null,
    },
  });

  const handleInputChange = (
    field: keyof Form,
    value: any,
    subField?: string,
  ) => {
    setFormData(prevFormData => {
      if (
        field === 'permanentAddress' ||
        field === 'temporaryAddress' ||
        field === 'education'
      ) {
        return {
          ...prevFormData,
          [field]: {
            ...prevFormData[field],
            [subField!]: value,
          },
        };
      } else {
        return {
          ...prevFormData,
          [field]: value,
        };
      }
    });
  };

  useMemo(() => {
    if (formData.dob) {
      let userAge = currentYear - formData?.dob?.getFullYear();
      setFormData(prevFormData => ({
        ...prevFormData,
        age: userAge,
      }));
    }
  }, [formData.dob]);

  useOrientationChange(() => {
    LayoutAnimation.configureNext({
      duration: 500,
      create: {type: 'linear', property: 'scaleXY'},
      update: {type: 'spring', springDamping: 90},
      delete: {type: 'linear', property: 'opacity'},
    });
  });

  return (
    <ScrollView>
      <KeyboardAvoidingView enabled style={screenStyles.container}>
        <View id="content" style={screenStyles.contentContainer}>
          <MemoTextInput
            label="Name"
            placeholder="name"
            mode="outlined"
            value={formData.name}
            onChangeText={value => handleInputChange('name', value)}
            style={screenStyles.inputContainer}
          />
          <MemoTextInput
            label="Mobile"
            placeholder="Mobile Number"
            value={formData.mobile?.toString()}
            onChangeText={value => handleInputChange('mobile', value)}
            mode="outlined"
            style={screenStyles.inputContainer}
          />
          <View style={screenStyles.inputContainer}>
            <DatePickerComponent
              setNewDate={value => handleInputChange('dob', value)}
            />
          </View>
          {formData.age !== null && (
            <View>
              <Text style={{color: colors.text, textAlign: 'left'}}>
                {formData.age} Years
              </Text>
            </View>
          )}
          <MemoTextInput
            label="address"
            value={formData.permanentAddress.address?.toString()}
            onChangeText={value =>
              handleInputChange('permanentAddress', value, 'address')
            }
            mode="outlined"
            style={screenStyles.inputContainer}
          />
          <MemoTextInput
            label="state"
            value={formData.permanentAddress.state?.toString()}
            onChangeText={value =>
              handleInputChange('permanentAddress', value, 'state')
            }
            mode="outlined"
            style={screenStyles.inputContainer}
          />
          <MemoTextInput
            label="pincode"
            value={formData.permanentAddress.pincode?.toString()}
            onChangeText={value =>
              handleInputChange('permanentAddress', value, 'pincode')
            }
            mode="outlined"
            style={screenStyles.inputContainer}
          />
          <MemoTextInput
            label="city"
            value={
              checked
                ? formData.permanentAddress.city?.toString()
                : formData.temporaryAddress.city?.toString()
            }
            onChangeText={value =>
              handleInputChange('temporaryAddress', value, 'city')
            }
            readOnly={checked ? true : false}
            mode="outlined"
            style={screenStyles.inputContainer}
          />
          <MemoTextInput
            label="state"
            value={
              checked
                ? formData.permanentAddress.state?.toString()
                : formData.temporaryAddress.state?.toString()
            }
            onChangeText={value =>
              handleInputChange('temporaryAddress', value, 'state')
            }
            mode="outlined"
            readOnly={checked ? true : false}
            style={screenStyles.inputContainer}
          />
        </View>
      </KeyboardAvoidingView>
    </ScrollView>
  );
};

export default React.memo(Forms);