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!