I am doing a location-based react native app and i wanted to enable locations of users. But suddenly i receive an error about babel config file here the error: appscreensEnableLocation.jsx: You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously. I will share my codes with you so anyone can help?
//here my babelconfig.js
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: ["nativewind/babel", "react-native-reanimated/plugin"],
};
};
// EnableLocation.jsx
import { View, Text, SafeAreaView, Image, TouchableOpacity } from 'react-native';
import * as Location from 'expo-location';
import { useEffect, useState } from 'react';
export default function EnableLocation({ navigation }) {
const [location, setLocation] = useState(null);
const [errorMsg, setErrorMsg] = useState(null);
useEffect(() => {
(async () => {
let { status } = await Location.requestForegroundPermissionsAsync();
if (status !== 'granted') {
setErrorMsg('Permission to access location was denied');
} else {
navigation.navigate('Intro');
}
let location = await Location.getCurrentPositionAsync({});
setLocation(location);
})();
}, []);
let text = 'Waiting..';
if (errorMsg) {
text = errorMsg;
} else if (location) {
text = JSON.stringify(location);
}
return (
<SafeAreaView className="flex-1 bg-white">
<View className="flex-row justify-items items-center">
<Image
className="ml-6 h-8 w-8 mr-52 mt-6"
source={require('../assetsApp/navigation.png')}
resizeMode="contain"
/>
<TouchableOpacity onPress={() => navigation.navigate('Intro')}>
<Text className="mt-6 ml-14 text-gray-400 font-customFont">Atla</Text>
</TouchableOpacity>
</View>
<View className="mt-4 ml-6">
<Text className="font-extrabold text-2xl">Konumu Etkinleştir</Text>
<Text className="mt-4 text-gray-500">Yakala konum açıkken daha iyi çalışır.</Text>
</View>
<View className="flex-1 justify-center items-center mt-5">
<Image
className="w-full h-full"
source={require('../assetsApp/yakala-konum.png')}
resizeMode="contain"
/>
</View>
<View>
<Text className="text-s text-gray-500 text-center mt-1 mb-2 mr-4 ml-4">
Yakala, uygulamayı kullanırken yakınınızdaki işletmeleri bulmak, size daha iyi bir deneyim sunmak ve daha fazlası için konumunuzu kullanır.
</Text>
<Text className="text-s text-gray-500 text-center mt-1 mb-2 mr-4 ml-4">Konum ayarlarınızı istediğiniz zaman değiştirebilirsiniz.</Text>
<Text className="text-s text-blue-600 text-center mt-1 mb-2 mr-4 ml-4">Daha fazlası</Text>
</View>
<View className="justify-center items-center h-12 m-4 rounded mt-6 mb-10 bg-red-400">
<TouchableOpacity onPress={{}}>
<Text className="text-center text-white font-medium text-lg">Tamam, anladım</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
}