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);