Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How to get axios to work with expo (react native)

$
0
0

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!


Viewing all articles
Browse latest Browse all 6287

Trending Articles