I am trying to call the local weather from openweathermap in my react native app. I have tested the url in both the browser and the code in a plain react project and it works. However in react native it does not.

Here is my code:

function Overview() {
    const appState = useRef(AppState.currentState);
    const [count, setCount] = useState(0);
    const [active, setActive] = useState(false);
    const [latitude, setLatitude] = useState(0);
    const [longitude, setLongitude] = useState(0);
    const [temperature, setTemperature] = useState('');
    const API_KEY = '{...apikey...}';

    const getLocationAsync = async () => {
        let {status} = await Location.requestForegroundPermissionsAsync();
        if (status !== 'granted') {
            console.log('Location Permission Error')
        }

        const loc = await Location.getCurrentPositionAsync({});

        setLatitude(loc.coords.latitude);
        setLongitude(loc.coords.longitude);
    }

    const getTemperature = useCallback(async () => {
        const url = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude.toFixed(2)}&lon=${longitude.toFixed(2)}&appid=${API_KEY}`;

        console.log("my provided url is set to:", url);

        const response = await axios.get(url);
        if (response.data) {
            setTemperature(response.data.main.temp);
        }
    }, [latitude, longitude])

    useEffect(() => {
        appState.current.match('active') ? setActive(true) : setActive(false)
        active && setInterval(() => setCount((oldCount) => oldCount + 1), 60000);
        getLocationAsync();

        return () => {
            clearInterval();
        };
    }, [active]);

    useEffect(() => {
        getTemperature()
            .catch(console.error);

    }, [getTemperature])

    return (
        <View style={{margin: 32}}>
            <View style={{marginBottom: 32}}>
                <Text style={{fontSize: 36, fontFamily: 'Roboto_400Regular'}}>Great!</Text>
                <Text style={{fontSize: 16, color: '#878787', fontFamily: 'Roboto_400Regular'}}>Average mood 23%</Text>
            </View>
            <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                <OverviewContainer title="Weather" value={temperature ? temperature : "no data"}/>
                <OverviewContainer title="Time on app" value={secondsToHms(count)}/>
            </View>
        </View>
    );
}

Originally I thought it may be an issue with my code but corrected it to make sure it worked. I have read in other questions that in expo you need to add your ip and port to the url. However upon trying this I still couldnt get it to work. Any help would be great!