I'm working on my react native project where I have a map screen in which the user can select their location.
The problem I'm facing is that I keep getting that error pointing to that particular screen, however I have a default export and I couldn't find any syntax error. I'm using TypeScript. Here's the code:
import * as React from "react";import { MapView } from "expo";import { View, StyleSheet, Dimensions } from "react-native";import PrimaryText from "../assets/constants/PrimaryText";import Loader from "../components/Loader";import * as Location from "expo-location";export default function MapSelectLocation({ route, navigation }: any) { const [location, setLocation]: [null | string | any, any] = React.useState( null ); const [errorMsg, setErrorMsg]: [null | string | any, any] = React.useState( null ); React.useEffect(() => { (async () => { let { status } = await Location.requestPermissionsAsync(); if (status !== "granted") { setErrorMsg("Permission to access location was denied"); } let location = await Location.getCurrentPositionAsync({}); setLocation(location); })(); }); if (errorMsg) { return (<View><PrimaryText> Por favor, habilitá la ubicación en tu celular.</PrimaryText></View> ); } if (location) { let userLatitude = location.coords.latitude; let userLongitude = location.coords.longitude; return (<MapView style={styles.mapStyle} initialRegion={{ latitude: userLatitude, longitude: userLongitude, latitudeDelta: 1, longitudeDelta: 1, }}></MapView> ); } return <Loader />;}const styles = StyleSheet.create({ mapStyle: { width: Dimensions.get("window").width, height: Dimensions.get("window").height, },});A summary of the functionality: The component gets the user location and displays as the initialRegion. That's it for now.