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

Conditional rendering for Location services in React Native

$
0
0

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;}

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>