currently im having a weird issue with regards to rendering my API. (im using Expo GO)
Im using Axios, which calls the API inside of a UseEffect once I get location of the device.
The problem I’m facing is that the screen only renders the fetched data once i save or cntrl+s on VS Code.
Ive tried to log the array, get nothing once the function is called.
Ive also tried adding a button to call the function instead, only then it renders, which makes sense as it triggers a re-render.
WHEN I ENTER THE COMPONENT:
enter image description here
WHEN I SAVE THE FILE, IT THEN FETCHES DATA:
enter image description here
Would be much appreciated if anyone can help, maybe im missing some basic knowledge of how this works. Thanks guys!
import axios from 'axios';
import { SafeAreaView, StyleSheet, Text, View, Button, Alert, ScrollView, RefreshControl } from 'react-native';
import React, { Component, useState, useEffect, createContext } from 'react';
import { winners } from '../screens/MainScreen';
import * as Location from 'expo-location';
import { useIsFocused } from '@react-navigation/native';
const API = () => {
const resturant = winners;
const isFocused = useIsFocused();
const [NamesFound, setNamesFound] = useState(0);
const APIKey ='xxxxxxxxxx';
const [Result, SetResult] = useState([]);
const [Names, SetNames] = useState([]);
const [lat, Setlat] = useState();
const [long, Setlong] = useState();
// const [location, setLocation] = useState(null);
const [errorMsg, setErrorMsg] = useState(null);
const [address, setAddress] = useState(null);
const [RestAddress, setRestAddress] = useState([]);
const [refreshing, setRefreshing] = useState(false);
const [loading, setLoading] = useState(true);
const wait = (timeout) => {
return new Promise(resolve => setTimeout(resolve, timeout));
}
const onRefresh = React.useCallback(() => {
setRefreshing(true);
wait(2000).then(() => setRefreshing(false));
}, []);
const SampleFunction=(item)=>{
Alert.alert(item);
}
const getLocation = () => {
(async () => {
let { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') {
setErrorMsg('Permission to access location was denied');
}
Location.setGoogleApiKey(APIKey);
// console.log(status)
let { coords } = await Location.getCurrentPositionAsync();
// setLocation(coords);
Setlat(coords.latitude);
Setlong(coords.longitude);
if (coords) {
let { longitude, latitude } = coords;
let regionName = await Location.reverseGeocodeAsync({
longitude,
latitude,
});
setAddress(regionName[0].city);
console.log(regionName[0].city);
}
})();
};
var config = {
method: 'get',
url: 'https://maps.googleapis.com/maps/api/place/textsearch/json?location='+lat+','+long+'&key='+APIKey+'&status=&query='+resturant,
headers: { }
};
useEffect(() => {
const fetchData = async () =>{
setLoading(true);
try {
const {data: response} = await axios(config);
SetResult(response.results);
console.log(Result.map((name)=> name.name));
SetNames(Result.map((name)=> name.name))
setNamesFound(Names.length);
console.log('API function called.')
console.log (Names);
} catch (error) {
console.error(error.message);
}
setLoading(false);
}
getLocation();
fetchData();
}, []);
return(
<SafeAreaView style={styles.container}>
{loading && <Text>Loading....</Text>}
{!loading && isFocused && (
<><Text style={styles.MainText}>{NamesFound} {winners}s within {address}</Text><ScrollView
style={styles.scroll}
refreshControl={<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh} />}
>
{Names.map((item, key) => (
<Text key={key} style={styles.TextStyle} onPress={SampleFunction.bind(this, item)}> {item} </Text>)
)}
</ScrollView></>
)}
{/* <Button title='CLICK ME FOR API' onPress={CallAPI} style={styles.btn}></Button> */}
</SafeAreaView>
);
};