I have this function that fetches the user's location using expo-location and a google API. I want to make it so if the user denies permission for location services, it returns a box on the homescreen saying that Location Services are off. Is conditional rendering a way to do this?
useMappedLocation.tsx
interface GeoEntry { address_components:[ {types:("country"|"administrative_area_level_1"|"administrative_area_level_2")[] short_name:string, long_name:string } ]}interface MappedLocation { state:string, stateShort: string, country:string, countryShort:string, county:string,}async function askLocation(){ return await Location.requestForegroundPermissionsAsync();}async function getLocation(){ return await Location.getCurrentPositionAsync({});}async function getFirstGeoEntry() : Promise<GeoEntry>{ await askLocation() let location = await getLocation(); const longitude = location.coords.longitude const latitude = location.coords.latitude const response = await fetch("https://maps.googleapis.com/maps/api/geocode/json?address=" + latitude +"," + longitude +"&key=" + apiKey ) const json = await response.json(); return json.results[0]}function getStateNameLong(geoEntry:GeoEntry){ return geoEntry.address_components.filter( (x: any) => x.types.filter((t: Object) => t == "administrative_area_level_1") .length > 0 )[0].long_name}function getStateNameShort(geoEntry:GeoEntry){ return geoEntry.address_components.filter( (x: any) => x.types.filter((t: Object) => t == "administrative_area_level_1") .length > 0 )[0].short_name}function getCountryNameLong(geoEntry:GeoEntry){ return geoEntry.address_components.filter( (x: any) => x.types.filter((t: Object) => t == "country").length > 0 )[0].long_name}function getCountryNameShort(geoEntry:GeoEntry){ var countryNameShort = geoEntry.address_components.filter( (x: any) => x.types.filter((t: Object) => t == "country").length > 0 )[0].short_name if (countryNameShort === 'US') { countryNameShort = 'USA' } return countryNameShort}function getCountyNameLong(geoEntry:GeoEntry){ return geoEntry.address_components.filter( (x: any) => x.types.filter((t: Object) => t == "administrative_area_level_2").length > 0 )[0].long_name} export async function getMappedLocation() : Promise<MappedLocation>{ const geoEntry = await getFirstGeoEntry(); return { country:getCountryNameLong(geoEntry), countryShort:getCountryNameShort(geoEntry), state:getStateNameLong(geoEntry), stateShort: getStateNameShort(geoEntry), county:getCountyNameLong(geoEntry), }}export const useMappedLocation = () => { const [mappedLocation,setMappedLocation] = useState<MappedLocation>(Object); useEffect(() => { (async () => { setMappedLocation(await getMappedLocation()) })() }, []) return mappedLocation;}