'React Native App rendering screen slow with reusable functional components

I am having issues with rendering a screen faster, more specifically rendering a Settings screen. I noticed that the issue stems from my reusable functional components having to render data. If I remove these components it will render faster. I have a couple options when it comes to create a list item for settings page. One is a "Switch" component the other is a "Button" Component. An example that I go through is when I click the Settings button it takes about 3 seconds to render the page and for it to become visible. If I click the home button it responds almost instantaneously. Hoping someone can guide me in the right direction with the best practices. Thank you

Here is some code...

export function Settings({ navigation }) {
...
    const SettingsSwitchOption = React.memo(({ title, info, switchFN, switchState }) => {
        return (
            <Pressable onPress={()=>{switchFN()}}>
                <Box borderBottomWidth="1" _dark={{ borderColor: "gray.600" }} borderColor="coolGray.200" pl="4" pr="5" height="125">
                    <HStack space={3} h="100%" alignItems="center" justifyContent="center">

                        <VStack width="80%" px={3}>
                            <Text fontSize={20} fontWeight="light" _dark={{
                                color: "warmGray.50"
                            }} color="coolGray.800">
                                {title}
                            </Text>
                            <Text mt={2} color="coolGray.600" _dark={{
                                color: "warmGray.200"
                            }}>
                                {info}
                            </Text>
                        </VStack>
                        <Spacer />
                        <Box w="20%" px={3}>
                            <Switch offTrackColor="gray.100" onTrackColor="primary.100" onThumbColor="light.100" offThumbColor="light.100" isChecked={switchState} onToggle={() => switchFN()} />
                        </Box>
                    </HStack>
                </Box>
            </Pressable>
        )
    });

    const SettingsButtonOption = React.memo(({ title, info, buttonFN, iconName, iconColor }) => {

        return (
            <Pressable onPress={()=>{buttonFN()}}>
            <Box borderBottomWidth="1" _dark={{ borderColor: "gray.600" }} borderColor="coolGray.200" pl="4" pr="5" height="125">
                <HStack space={3} h="100%" alignItems="center" justifyContent="center">

                    <VStack width="80%" px={3}>
                        <Text fontSize={20} fontWeight="light" _dark={{
                            color: "warmGray.50"
                        }} color="coolGray.800">
                            {title}
                        </Text>
                        <Text mt={2} color="coolGray.600" _dark={{
                            color: "warmGray.200"
                        }}>
                            {info}
                        </Text>
                    </VStack>
                    <Spacer />
                    <Box w="20%" px={3}>
                        <IconButton variant="solid" bg="transparent" onPress={() => buttonFN()}
                            icon={<Icon as={MaterialCommunityIcons} size="10" name={iconName}
                                _dark={{ color: "#000" }} />} _icon={{ color: iconColor, size: "md" }}
                            _hover={{ backgroundColor: 'gray.200' }} _pressed={{ backgroundColor: 'gray.200' }} _focus={{ backgroundColor: 'gray.100' }} />
                    </Box>
                </HStack>
            </Box>
            </Pressable>
        )
    });
...
return(
      {/* LOGOUT */}
      <SettingsButtonOption title="Logout" info="Sign out of account." buttonFN={logout} 
       iconName="logout-variant" iconColor="danger.500" />
      {/* WIFI UPLOADS ONLY */}
      <SettingsSwitchOption title="WiFi Uploads Only" info="All files, images, videos, etc will only upload on WiFi" switchFN={togglewifiuploads} switchState={wfuoChecked} />

...More components
)


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source