I'm building an app that fetches the user's location and stores the latitude and longitude in variables. I use those variables to fetch the user's county, state/province, and country using a google API. I have this in an index.ts file, so that I can use these consts in other files. I am using useState to store values to the variables.
First, I want to ask the user for their location. Based on that, it should use stateName, countryName, and countyName display those on a cards in a separate files. How can I do that with this project structure? And how can I use those variables in those card files?
index.ts
export const getLocation = () => { var [stateName, setstateName] = useState(String); var [countyName, setCountyName] = useState(null); var [countryName, setCountryName] = useState(null); var [stateNameshort, setstateNameshort] = useState(String); var [countryNameshort, setCountryNameshort] = useState(String); const [latitude, setlatitude] = useState(Number); const [longitude, setlongitude] = useState(Number); const [location, setLocation] = useState(Object); const [errorMsg, setErrorMsg] = useState(String); useEffect(() => { (async () => { if (Platform.OS === "android" && !Constants.isDevice) { setErrorMsg("Oops, this will not work on Snack in an Android emulator. Try it on your device!" ); return; } let { status } = await Location.requestPermissionsAsync(); if (status !== "granted") { setErrorMsg("Permission to access location was denied"); return; } let location = await Location.getCurrentPositionAsync({}); setLocation(location); const latitude = location.coords.latitude; setlatitude(latitude); const longitude = location.coords.longitude; setlongitude(longitude); })(); }, []); let text = "Waiting.."; if (errorMsg) { text = errorMsg; } else if (location) { text = JSON.stringify(location); } useEffect(() => { fetchLocationData(); return () => {}; }, []); const fetchLocationData = () => { async () => { fetch("https://maps.googleapis.com/maps/api/geocode/json?address=" + latitude +"," + longitude +"&key=" + apiKey ) .then((response) => response.json()) .then((responseJson) => { const resState = responseJson.results[0].address_components.filter( (x: any) => x.types.filter((t: Object) => t == "administrative_area_level_1") .length > 0 )[0].long_name; setstateName(resState); const resCounty = responseJson.results[0].address_components.filter( (x: any) => x.types.filter((t: Object) => t == "administrative_area_level_2") .length > 0 )[0].long_name; setCountyName(resCounty); const resCountry = responseJson.results[0].address_components.filter( (x: any) => x.types.filter((t: Object) => t == "country").length > 0 )[0].long_name; setCountryName(resCountry); const resStateShort = responseJson.results[0].address_components.filter( (x: any) => x.types.filter((t: Object) => t == "administrative_area_level_1") .length > 0 )[0].short_name; setstateNameshort(resStateShort); const resCountryShort = responseJson.results[0].address_components.filter( (x: any) => x.types.filter((t: Object) => t == "country").length > 0 )[0].short_name; setCountryNameshort(resCountryShort); if (countryNameshort === "US") { countryNameshort = "US" +"A"; } }) .catch((err) => { console.log(err); }); }; };}For example, I want to use countryName and display that in a Text component. How can I do that?
CountryCard.tsx
const CountriesCard = () => { return (<RectButton ><Text>{//countryName??}</Text></RectButton> );};CountyCard.tsx
const CountiesCard = () => { return (<RectButton ><Text>{//countyName??}</Text></RectButton> );};StateCard.tsx
const StateCard = () => { return (<RectButton ><Text>{//stateName??}</Text></RectButton> );};