I creating a application that shows the device info, i need to show if the wifi and mobile data are on, but even with the two on, only shows the wifi is on. There is any way to show the two at the same time?? I’m using the expo with react-native-device-info and using @react-native-community/netinfo to get the network info.

import { View, Text } from 'react-native'
import React, { useEffect, useState } from 'react'
import * as Location from 'expo-location';
import NetInfo from '@react-native-community/netinfo';
import { useBatteryLevel } from 'expo-battery';
import * as Device from 'expo-device';
import * as Network from 'expo-network';
import * as Cellular from 'expo-cellular';
import Background from '@/components/Background';
import { FontAwesome, FontAwesome5, FontAwesome6, Ionicons, MaterialCommunityIcons, MaterialIcons } from '@expo/vector-icons';
// import { getTotalDiskCapacity, getFreeDiskStorage } from "react-native-device-info"
import DeviceInfo from 'react-native-device-info';
import 'expo-dev-client';


export default function Diagnostico() {
    const batteryLevel = useBatteryLevel();
    const [isWifiOn, setIsWifiOn] = useState<boolean>(false)
    const [isMobileDataOn, setIsMobileDataOn] = useState<boolean>(false)
    const [isAirplaneModeOn, setIsAirplaneModeOn] = useState<boolean>(false)
    const [isGPSEnabled, setIsGPSEnabled] = useState<boolean>(false)
    const [memoryUsed, setMemoryUsed] = useState<number>(0)

  
    useEffect(() => {



        const load = async () => {
            const permissionForeground = await Location.requestForegroundPermissionsAsync();
            const permissionBackground = await Location.requestForegroundPermissionsAsync();

            if (permissionForeground.granted || permissionBackground.granted) {
                // const isGPSEnabled = await Location.hasServicesEnabledAsync();
                setIsGPSEnabled(await Location.hasServicesEnabledAsync())
            } else {
                console.log('Location permission denied');
            }

            console.log(`RAM: ${Device?.totalMemory! / 1e+9} bytes`);
            // setMemoryUsed(Device?.totalMemory! / 1e+9)
            // console.log(`Available Memory: ${Device?.availableMemory} bytes`);


            const netInfo = await NetInfo.fetch();
            setIsWifiOn(netInfo.isWifiEnabled!)

            setIsAirplaneModeOn(await DeviceInfo.isAirplaneMode())

            const totalMemory = await DeviceInfo.getTotalMemory();
            const usedMemory = await DeviceInfo.getUsedMemory();
            const memoryUsedPercentage = (usedMemory / totalMemory) * 100;

            setMemoryUsed(memoryUsedPercentage);
        }
        load()

        // Cleanup subscription on unmount

    }, [])

    useEffect(() => {
        const checkConnections = async () => {
            // Verifica o estado do Wi-Fi e dos dados móveis simultaneamente
            const state = await NetInfo.fetch();

            // Verifica se o Wi-Fi está conectado
            const isWifiConnected = state.type === 'wifi' && state.isConnected;
            setIsWifiOn(isWifiConnected);

            // Verifica se os dados móveis estão disponíveis mesmo com o Wi-Fi ligado
            const isCellularAvailable = state.details !== null && state.details.isConnectionExpensive;
            setIsMobileDataOn(isCellularAvailable || (state.type === 'cellular' && state.isConnected));
        };

        // Inicializa a verificação das conexões
        checkConnections();

        // Monitora mudanças na conexão
        const unsubscribe = NetInfo.addEventListener(() => {
            checkConnections();
        });

        return () => {
            unsubscribe();
        };
    }, []);

    // let deviceId = DeviceInfo.getDeviceId();

    return (
        <View className='flex-1'>
            <Background>
                <View className='flex-row justify-between items-center'>
                    <Ionicons className='w-[15%]' name="cellular" size={18} color="black" />
                    <Text className={'text-white text-lg font-bold flex-1'}>Dados Moveis: </Text>
                    <Text className={`text-lg font-bold ${isMobileDataOn ? 'text-green-pastel' : 'text-red-soft'}`}>{isMobileDataOn ? "Ligado" : "Desligado"}</Text>
                </View>
                <View className='flex-row justify-between items-center'>
                    <FontAwesome className='w-[15%]' name="wifi" size={18} color="black" />
                    <Text className={'text-white text-lg font-bold flex-1'}>Wifi: </Text>
                    <Text className={`text-lg font-bold ${isWifiOn ? 'text-green-pastel' : 'text-red-soft'}`}>{isWifiOn ? "Ligado" : "Desligado"}</Text>
                </View>
                <View className='flex-row justify-between items-center'>
                    <MaterialIcons className='w-[15%]' name="airplanemode-active" size={18} color="black" />
                    <Text className={'text-white text-lg font-bold flex-1'}>Modo avião: </Text>
                    <Text className={`text-lg font-bold ${isAirplaneModeOn ? 'text-green-pastel' : 'text-red-soft'}`}>{isAirplaneModeOn ? "Ligado" : "Desligado"}</Text>
                </View>
                <View className='flex-row justify-between items-center'>
                    <FontAwesome6 className='w-[15%]' name="map-location-dot" size={18} color="black" />
                    <Text className={'text-white text-lg font-bold flex-1'}>GPS: </Text>
                    <Text className={`text-lg font-bold ${isGPSEnabled ? 'text-green-pastel' : 'text-red-soft'}`}>{isGPSEnabled ? "Ligado" : "Desligado"}</Text>
                </View>
                <View className='flex-row justify-between items-center'>
                    <FontAwesome className='w-[15%]' name="battery-3" size={18} color="black" />
                    <Text className={'text-white text-lg font-bold flex-1'}>Current Battery Level: </Text>
                    <Text className={`text-lg font-bold ${batteryLevel * 100 > 50 ? 'text-green-pastel' : 'text-red-soft'}`}>{(batteryLevel * 100).toFixed(0)}%</Text>
                </View>
                <View className='flex-row justify-between items-center'>
                    {/* <MaterialCommunityIcons name="memory" size={18} color="black" /> */}
                    <FontAwesome5 className='w-[15%]' name="memory" size={18} color="black" />
                    <Text className={'text-white text-lg font-bold flex-1'}>Memória usada: </Text>
                    <Text className={`text-lg font-bold ${memoryUsed < 50 ? 'text-green-pastel' : 'text-red-soft'}`}>{memoryUsed.toFixed(0)}%</Text>
                </View>
            </Background>
        </View>
    )
}