Add Map screen with location permissions handling and integrate current location feature
This commit is contained in:
427
App.tsx
427
App.tsx
@@ -1,14 +1,14 @@
|
||||
import {
|
||||
StatusBar,
|
||||
useColorScheme,
|
||||
View,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
NativeModules,
|
||||
Image,
|
||||
ScrollView,
|
||||
StatusBar,
|
||||
useColorScheme,
|
||||
View,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
Alert,
|
||||
NativeModules,
|
||||
Image,
|
||||
ScrollView,
|
||||
} from 'react-native';
|
||||
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
||||
import { useState, useEffect } from 'react';
|
||||
@@ -18,241 +18,258 @@ import Register from './src/components/Register';
|
||||
import { authAPI } from './src/services/authAPI';
|
||||
import { networkService } from './src/services/networkService';
|
||||
import { ScannerScreen } from './src/screens/ScannerScreen';
|
||||
import Map from './src/screens/Map';
|
||||
|
||||
type Screen = 'login' | 'register' | 'home' | 'scanner';
|
||||
type Screen = 'login' | 'register' | 'home' | 'scanner' | 'map';
|
||||
|
||||
const { MyNativeModule } = NativeModules;
|
||||
|
||||
function App() {
|
||||
const isDarkMode = useColorScheme() === 'dark';
|
||||
const isDarkMode = useColorScheme() === 'dark';
|
||||
|
||||
const [currentScreen, setCurrentScreen] = useState<Screen>('login');
|
||||
const [isInitialized, setIsInitialized] = useState(false);
|
||||
const [isOnline, setIsOnline] = useState(true);
|
||||
const [currentUser, setCurrentUser] = useState<any>(null);
|
||||
const [qrCode, setQrCode] = useState<string | null>(null);
|
||||
const [isGeneratingQR, setIsGeneratingQR] = useState(false);
|
||||
const [scannedCodes, setScannedCodes] = useState<any[]>([]);
|
||||
const [currentScreen, setCurrentScreen] = useState<Screen>('login');
|
||||
const [isInitialized, setIsInitialized] = useState(false);
|
||||
const [isOnline, setIsOnline] = useState(true);
|
||||
const [currentUser, setCurrentUser] = useState<any>(null);
|
||||
const [qrCode, setQrCode] = useState<string | null>(null);
|
||||
const [isGeneratingQR, setIsGeneratingQR] = useState(false);
|
||||
const [scannedCodes, setScannedCodes] = useState<any[]>([]);
|
||||
|
||||
/* -------------------- INIT -------------------- */
|
||||
useEffect(() => {
|
||||
initializeApp();
|
||||
/* -------------------- INIT -------------------- */
|
||||
useEffect(() => {
|
||||
initializeApp();
|
||||
|
||||
console.log('MyNativeModule:', MyNativeModule);
|
||||
MyNativeModule?.greet?.('John').then((msg: any) => {
|
||||
console.log(msg);
|
||||
});
|
||||
console.log('MyNativeModule:', MyNativeModule);
|
||||
MyNativeModule?.greet?.('John').then((msg: any) => {
|
||||
console.log(msg);
|
||||
});
|
||||
|
||||
const unsubscribe = networkService.addListener(networkState => {
|
||||
setIsOnline(networkState.isConnected);
|
||||
});
|
||||
const unsubscribe = networkService.addListener(networkState => {
|
||||
setIsOnline(networkState.isConnected);
|
||||
});
|
||||
|
||||
return unsubscribe;
|
||||
}, []);
|
||||
return unsubscribe;
|
||||
}, []);
|
||||
|
||||
const initializeApp = async () => {
|
||||
try {
|
||||
await authAPI.initialize();
|
||||
const initializeApp = async () => {
|
||||
try {
|
||||
await authAPI.initialize();
|
||||
|
||||
const isLoggedIn = await authAPI.isLoggedIn();
|
||||
if (isLoggedIn) {
|
||||
const user = await authAPI.getCurrentUser();
|
||||
setCurrentUser(user);
|
||||
setCurrentScreen('home');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Initialization error:', error);
|
||||
} finally {
|
||||
setIsInitialized(true);
|
||||
}
|
||||
};
|
||||
const isLoggedIn = await authAPI.isLoggedIn();
|
||||
if (isLoggedIn) {
|
||||
const user = await authAPI.getCurrentUser();
|
||||
setCurrentUser(user);
|
||||
setCurrentScreen('home');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Initialization error:', error);
|
||||
} finally {
|
||||
setIsInitialized(true);
|
||||
}
|
||||
};
|
||||
|
||||
/* -------------------- NAVIGATION -------------------- */
|
||||
const navigateToLogin = () => {
|
||||
setCurrentUser(null);
|
||||
setQrCode(null);
|
||||
setCurrentScreen('login');
|
||||
};
|
||||
/* -------------------- NAVIGATION -------------------- */
|
||||
const navigateToLogin = () => {
|
||||
setCurrentUser(null);
|
||||
setQrCode(null);
|
||||
setCurrentScreen('login');
|
||||
};
|
||||
|
||||
const navigateToRegister = () => {
|
||||
setCurrentScreen('register');
|
||||
};
|
||||
const navigateToRegister = () => {
|
||||
setCurrentScreen('register');
|
||||
};
|
||||
|
||||
const navigateToHome = async () => {
|
||||
const user = await authAPI.getCurrentUser();
|
||||
setCurrentUser(user);
|
||||
setQrCode(null);
|
||||
setCurrentScreen('home');
|
||||
};
|
||||
const navigateToHome = async () => {
|
||||
const user = await authAPI.getCurrentUser();
|
||||
setCurrentUser(user);
|
||||
setQrCode(null);
|
||||
setCurrentScreen('home');
|
||||
};
|
||||
|
||||
const openScanner = () => {
|
||||
setCurrentScreen('scanner');
|
||||
};
|
||||
const openScanner = () => {
|
||||
setCurrentScreen('scanner');
|
||||
};
|
||||
|
||||
/* -------------------- ACTIONS -------------------- */
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await authAPI.logout();
|
||||
setQrCode(null);
|
||||
navigateToLogin();
|
||||
Alert.alert('Success', 'Logged out successfully');
|
||||
} catch {
|
||||
Alert.alert('Error', 'Failed to logout');
|
||||
}
|
||||
};
|
||||
const openMap = () => {
|
||||
setCurrentScreen('map');
|
||||
};
|
||||
|
||||
const showAppStatus = async () => {
|
||||
try {
|
||||
const status = await authAPI.getAppStatus();
|
||||
Alert.alert(
|
||||
'App Status',
|
||||
`Network: ${status.network.isOnline ? 'Online' : 'Offline'}
|
||||
/* -------------------- ACTIONS -------------------- */
|
||||
const handleLogout = async () => {
|
||||
try {
|
||||
await authAPI.logout();
|
||||
setQrCode(null);
|
||||
navigateToLogin();
|
||||
Alert.alert('Success', 'Logged out successfully');
|
||||
} catch {
|
||||
Alert.alert('Error', 'Failed to logout');
|
||||
}
|
||||
};
|
||||
|
||||
const showAppStatus = async () => {
|
||||
try {
|
||||
const status = await authAPI.getAppStatus();
|
||||
Alert.alert(
|
||||
'App Status',
|
||||
`Network: ${status.network.isOnline ? 'Online' : 'Offline'}
|
||||
Users: ${status.storage.totalUsers}
|
||||
Current User: ${status.authentication.currentUser || 'None'}
|
||||
Logged In: ${status.authentication.isLoggedIn ? 'Yes' : 'No'}`
|
||||
);
|
||||
} catch {
|
||||
Alert.alert('Error', 'Failed to get app status');
|
||||
}
|
||||
};
|
||||
);
|
||||
} catch {
|
||||
Alert.alert('Error', 'Failed to get app status');
|
||||
}
|
||||
};
|
||||
|
||||
const generateQRCode = async () => {
|
||||
if (!currentUser?.email) {
|
||||
Alert.alert('Error', 'No user email available');
|
||||
return;
|
||||
}
|
||||
const generateQRCode = async () => {
|
||||
if (!currentUser?.email) {
|
||||
Alert.alert('Error', 'No user email available');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsGeneratingQR(true);
|
||||
try {
|
||||
const qrData = `User: ${currentUser.fullName}\nEmail: ${currentUser.email}`;
|
||||
const base64Image = await MyNativeModule.generateQRCode(qrData, 300, 300);
|
||||
setQrCode(base64Image);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
Alert.alert('Error', 'Failed to generate QR code');
|
||||
} finally {
|
||||
setIsGeneratingQR(false);
|
||||
}
|
||||
};
|
||||
setIsGeneratingQR(true);
|
||||
try {
|
||||
const qrData = `User: ${currentUser.fullName}\nEmail: ${currentUser.email}`;
|
||||
const base64Image = await MyNativeModule.generateQRCode(qrData, 300, 300);
|
||||
setQrCode(base64Image);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
Alert.alert('Error', 'Failed to generate QR code');
|
||||
} finally {
|
||||
setIsGeneratingQR(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleScanResult = (result: any) => {
|
||||
setScannedCodes(prev => [
|
||||
{
|
||||
code: result.code,
|
||||
format: result.format,
|
||||
timestamp: new Date().toLocaleTimeString(),
|
||||
},
|
||||
...prev,
|
||||
]);
|
||||
const handleScanResult = (result: any) => {
|
||||
setScannedCodes(prev => [
|
||||
{
|
||||
code: result.code,
|
||||
format: result.format,
|
||||
timestamp: new Date().toLocaleTimeString(),
|
||||
},
|
||||
...prev,
|
||||
]);
|
||||
|
||||
Alert.alert(
|
||||
'Scanned Successfully',
|
||||
`Code: ${result.code}\nFormat: ${result.format}`,
|
||||
[{ text: 'OK', onPress: () => setCurrentScreen('home') }]
|
||||
);
|
||||
};
|
||||
Alert.alert(
|
||||
'Scanned Successfully',
|
||||
`Code: ${result.code}\nFormat: ${result.format}`,
|
||||
[{ text: 'OK', onPress: () => setCurrentScreen('home') }]
|
||||
);
|
||||
};
|
||||
|
||||
/* -------------------- RENDER -------------------- */
|
||||
const renderScreen = () => {
|
||||
switch (currentScreen) {
|
||||
case 'login':
|
||||
return (
|
||||
<Login
|
||||
onNavigateToRegister= { navigateToRegister }
|
||||
onLoginSuccess = { navigateToHome }
|
||||
/>
|
||||
);
|
||||
/* -------------------- RENDER -------------------- */
|
||||
const renderScreen = () => {
|
||||
switch (currentScreen) {
|
||||
case 'login':
|
||||
return (
|
||||
<Login
|
||||
onNavigateToRegister={navigateToRegister}
|
||||
onLoginSuccess={navigateToHome}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'register':
|
||||
return (
|
||||
<Register
|
||||
onNavigateToLogin= { navigateToLogin }
|
||||
onRegisterSuccess = { navigateToHome }
|
||||
/>
|
||||
);
|
||||
case 'register':
|
||||
return (
|
||||
<Register
|
||||
onNavigateToLogin={navigateToLogin}
|
||||
onRegisterSuccess={navigateToHome}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'scanner':
|
||||
return (
|
||||
<ScannerScreen
|
||||
presignedUrl= "https://your-backend-presigned-url.com"
|
||||
onScan = { handleScanResult }
|
||||
/>
|
||||
);
|
||||
case 'scanner':
|
||||
return (
|
||||
<ScannerScreen
|
||||
presignedUrl="https://your-backend-presigned-url.com"
|
||||
onScan={handleScanResult}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'home':
|
||||
return (
|
||||
<ScrollView style= { styles.homeContainer } contentContainerStyle = { styles.scrollContent } >
|
||||
<Text style={ styles.welcomeText }>
|
||||
Welcome, { currentUser?.fullName || 'User'
|
||||
}
|
||||
</Text>
|
||||
case 'home':
|
||||
return (
|
||||
<ScrollView style={styles.homeContainer} contentContainerStyle={styles.scrollContent} >
|
||||
<Text style={styles.welcomeText}>
|
||||
Welcome, {currentUser?.fullName || 'User'
|
||||
}
|
||||
</Text>
|
||||
|
||||
{
|
||||
qrCode && (
|
||||
<Image source={ { uri: qrCode } } style = { styles.qrImage } />
|
||||
)
|
||||
}
|
||||
{
|
||||
qrCode && (
|
||||
<Image source={{ uri: qrCode }} style={styles.qrImage} />
|
||||
)
|
||||
}
|
||||
|
||||
<TouchableOpacity style={ styles.scannerButton } onPress = { openScanner } >
|
||||
<Text style={ styles.buttonText }> Scan QR / Barcode </Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity style={styles.scannerButton} onPress={openScanner} >
|
||||
<Text style={styles.buttonText}> Scan QR / Barcode </Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
< TouchableOpacity
|
||||
style = { styles.qrButton }
|
||||
onPress = { generateQRCode }
|
||||
disabled = { isGeneratingQR }
|
||||
>
|
||||
<Text style={ styles.buttonText }>
|
||||
{ isGeneratingQR? 'Generating...': 'Generate QR Code' }
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
< TouchableOpacity
|
||||
style={styles.qrButton}
|
||||
onPress={generateQRCode}
|
||||
disabled={isGeneratingQR}
|
||||
>
|
||||
<Text style={styles.buttonText}>
|
||||
{isGeneratingQR ? 'Generating...' : 'Generate QR Code'}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
< TouchableOpacity style = { styles.statusButton } onPress = { showAppStatus } >
|
||||
<Text style={ styles.buttonText }> App Status </Text>
|
||||
</TouchableOpacity>
|
||||
< TouchableOpacity style={styles.statusButton} onPress={showAppStatus} >
|
||||
<Text style={styles.buttonText}> App Status </Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
< TouchableOpacity style = { styles.logoutButton } onPress = { handleLogout } >
|
||||
<Text style={ styles.buttonText }> Logout </Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
);
|
||||
< TouchableOpacity style={styles.mapButton} onPress={openMap} >
|
||||
<Text style={styles.buttonText}> Open Map </Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
< TouchableOpacity style={styles.logoutButton} onPress={handleLogout} >
|
||||
<Text style={styles.buttonText}> Logout </Text>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
);
|
||||
|
||||
/* -------------------- LOADING -------------------- */
|
||||
if (!isInitialized) {
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<View style= { styles.loadingContainer } >
|
||||
<Text style={ styles.loadingText }> Initializing...</Text>
|
||||
</View>
|
||||
</SafeAreaProvider>
|
||||
);
|
||||
}
|
||||
case 'map':
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
<Map onClose={() => setCurrentScreen('home')} />
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<StatusBar barStyle= { isDarkMode? 'light-content': 'dark-content' } />
|
||||
{ renderScreen() }
|
||||
</SafeAreaProvider>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
/* -------------------- LOADING -------------------- */
|
||||
if (!isInitialized) {
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<View style={styles.loadingContainer} >
|
||||
<Text style={styles.loadingText}> Initializing...</Text>
|
||||
</View>
|
||||
</SafeAreaProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
|
||||
{renderScreen()}
|
||||
</SafeAreaProvider>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
|
||||
loadingText: { fontSize: 18, fontWeight: '600' },
|
||||
homeContainer: { flex: 1 },
|
||||
scrollContent: { alignItems: 'center', padding: 20 },
|
||||
welcomeText: { fontSize: 24, fontWeight: '700', marginBottom: 20 },
|
||||
qrImage: { width: 300, height: 300, marginBottom: 20 },
|
||||
scannerButton: { backgroundColor: '#9333ea', padding: 14, borderRadius: 20, marginBottom: 10 },
|
||||
qrButton: { backgroundColor: '#10b981', padding: 14, borderRadius: 20, marginBottom: 10 },
|
||||
statusButton: { backgroundColor: '#3bb6d8', padding: 14, borderRadius: 20, marginBottom: 10 },
|
||||
logoutButton: { backgroundColor: '#ff6b6b', padding: 14, borderRadius: 20 },
|
||||
buttonText: { color: '#fff', fontWeight: '600' },
|
||||
loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
|
||||
loadingText: { fontSize: 18, fontWeight: '600' },
|
||||
homeContainer: { flex: 1 },
|
||||
scrollContent: { alignItems: 'center', padding: 20 },
|
||||
welcomeText: { fontSize: 24, fontWeight: '700', marginBottom: 20 },
|
||||
qrImage: { width: 300, height: 300, marginBottom: 20 },
|
||||
scannerButton: { backgroundColor: '#9333ea', padding: 14, borderRadius: 20, marginBottom: 10 },
|
||||
qrButton: { backgroundColor: '#10b981', padding: 14, borderRadius: 20, marginBottom: 10 },
|
||||
statusButton: { backgroundColor: '#3bb6d8', padding: 14, borderRadius: 20, marginBottom: 10 },
|
||||
mapButton: { backgroundColor: '#2563eb', padding: 14, borderRadius: 20, marginBottom: 10 },
|
||||
logoutButton: { backgroundColor: '#ff6b6b', padding: 14, borderRadius: 20 },
|
||||
buttonText: { color: '#fff', fontWeight: '600' },
|
||||
});
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
|
||||
|
||||
<uses-permission android:name="android.permission.INTERNET" />
|
||||
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
|
||||
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
|
||||
|
||||
<application
|
||||
android:name=".MainApplication"
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
<true/>
|
||||
</dict>
|
||||
<key>NSLocationWhenInUseUsageDescription</key>
|
||||
<string></string>
|
||||
<string>Used to show your current location on the map.</string>
|
||||
<key>RCTNewArchEnabled</key>
|
||||
<true/>
|
||||
<key>UIAppFonts</key>
|
||||
|
||||
@@ -1,72 +1,147 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { View, Text, Platform, Alert, Linking } from 'react-native';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { View, Text, Platform, Alert, Linking, StyleSheet, TouchableOpacity, ActivityIndicator } from 'react-native';
|
||||
import { check, PERMISSIONS, request, RESULTS } from 'react-native-permissions';
|
||||
import MapView, { Marker, PROVIDER_GOOGLE, Region } from 'react-native-maps';
|
||||
import Geolocation from '@react-native-community/geolocation';
|
||||
|
||||
export default function Map() {
|
||||
type Props = { onClose?: () => void };
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
const hasPermission = await requestLocationPermission();
|
||||
if (hasPermission) {
|
||||
console.log('Permission granted');
|
||||
} else {
|
||||
console.log('Permission denied');
|
||||
}
|
||||
};
|
||||
init();
|
||||
}, []);
|
||||
export default function Map({ onClose }: Props) {
|
||||
const [region, setRegion] = useState<Region | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [permissionStatus, setPermissionStatus] = useState<string>('loading');
|
||||
|
||||
async function requestLocationPermission(): Promise<boolean> {
|
||||
try {
|
||||
const permission = Platform.select({
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
setLoading(true);
|
||||
const status = await requestLocationPermission();
|
||||
if (status === 'granted') {
|
||||
getCurrentLocation();
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
init();
|
||||
}, []);
|
||||
|
||||
android: PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
|
||||
ios: PERMISSIONS.IOS.LOCATION_WHEN_IN_USE,
|
||||
default: PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
|
||||
});
|
||||
const getCurrentLocation = () => {
|
||||
setLoading(true);
|
||||
Geolocation.getCurrentPosition(
|
||||
(pos) => {
|
||||
const { latitude, longitude } = pos.coords;
|
||||
setRegion({ latitude, longitude, latitudeDelta: 0.01, longitudeDelta: 0.01 });
|
||||
setLoading(false);
|
||||
},
|
||||
(err) => {
|
||||
console.error(err);
|
||||
Alert.alert('Error', 'Failed to get current location');
|
||||
setLoading(false);
|
||||
},
|
||||
{ enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
|
||||
);
|
||||
};
|
||||
|
||||
const status = await check(permission);
|
||||
if (status === RESULTS.GRANTED) {
|
||||
console.log('Location permission already granted');
|
||||
return true;
|
||||
}
|
||||
async function requestLocationPermission(): Promise<'granted' | 'denied' | 'blocked' | 'unavailable'> {
|
||||
try {
|
||||
const permission = Platform.select({
|
||||
android: PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
|
||||
ios: PERMISSIONS.IOS.LOCATION_WHEN_IN_USE,
|
||||
default: PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
|
||||
});
|
||||
|
||||
if (status === RESULTS.UNAVAILABLE) {
|
||||
console.log('Location permission not available on this device');
|
||||
return false;
|
||||
}
|
||||
|
||||
const result = await request(permission);
|
||||
if (result === RESULTS.GRANTED) {
|
||||
console.log('Location permission granted');
|
||||
return true;
|
||||
} else if (result === RESULTS.DENIED) {
|
||||
console.log('Location permission denied');
|
||||
return false;
|
||||
} else if (result === RESULTS.BLOCKED) {
|
||||
console.log('Location permission permanently denied');
|
||||
Alert.alert(
|
||||
'Location Permission Blocked',
|
||||
'Location permission is required to use this feature.',
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{ text: 'Open Settings', onPress: () => Linking.openSettings() },
|
||||
],
|
||||
{ cancelable: true },
|
||||
);
|
||||
return false;
|
||||
}
|
||||
|
||||
return false;
|
||||
} catch (error) {
|
||||
console.error('Location permission error:', error);
|
||||
return false;
|
||||
}
|
||||
const status = await check(permission);
|
||||
if (status === RESULTS.GRANTED) {
|
||||
setPermissionStatus('granted');
|
||||
return 'granted';
|
||||
}
|
||||
|
||||
return (
|
||||
<View>
|
||||
<Text>Map</Text>
|
||||
if (status === RESULTS.UNAVAILABLE) {
|
||||
setPermissionStatus('unavailable');
|
||||
return 'unavailable';
|
||||
}
|
||||
|
||||
const result = await request(permission);
|
||||
if (result === RESULTS.GRANTED) {
|
||||
setPermissionStatus('granted');
|
||||
return 'granted';
|
||||
} else if (result === RESULTS.DENIED) {
|
||||
setPermissionStatus('denied');
|
||||
return 'denied';
|
||||
} else if (result === RESULTS.BLOCKED) {
|
||||
setPermissionStatus('blocked');
|
||||
Alert.alert(
|
||||
'Location Permission Blocked',
|
||||
'Location permission is required to use this feature.',
|
||||
[
|
||||
{ text: 'Cancel', style: 'cancel' },
|
||||
{ text: 'Open Settings', onPress: () => Linking.openSettings() },
|
||||
],
|
||||
{ cancelable: true },
|
||||
);
|
||||
return 'blocked';
|
||||
}
|
||||
|
||||
setPermissionStatus('unavailable');
|
||||
return 'unavailable';
|
||||
} catch (error) {
|
||||
console.error('Location permission error:', error);
|
||||
setPermissionStatus('unavailable');
|
||||
return 'unavailable';
|
||||
}
|
||||
}
|
||||
|
||||
const openSettings = () => Linking.openSettings();
|
||||
const retryPermission = async () => {
|
||||
setLoading(true);
|
||||
const res = await requestLocationPermission();
|
||||
if (res === 'granted') getCurrentLocation();
|
||||
else setLoading(false);
|
||||
};
|
||||
|
||||
const retryGetLocation = () => {
|
||||
if (permissionStatus === 'granted') getCurrentLocation();
|
||||
else retryPermission();
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<TouchableOpacity style={styles.closeButton} onPress={onClose}>
|
||||
<Text style={styles.closeText}>Back</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{loading ? (
|
||||
<ActivityIndicator size="large" />
|
||||
) : permissionStatus === 'blocked' ? (
|
||||
<View style={styles.center}>
|
||||
<Text style={{ marginBottom: 12 }}>Location permission is blocked. Open settings to enable it.</Text>
|
||||
<TouchableOpacity style={styles.actionButton} onPress={openSettings}><Text style={styles.actionText}>Open Settings</Text></TouchableOpacity>
|
||||
<TouchableOpacity style={styles.actionButton} onPress={retryPermission}><Text style={styles.actionText}>Retry</Text></TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
) : permissionStatus === 'denied' || permissionStatus === 'unavailable' ? (
|
||||
<View style={styles.center}>
|
||||
<Text style={{ marginBottom: 12 }}>Location permission is not available. Please allow location access.</Text>
|
||||
<TouchableOpacity style={styles.actionButton} onPress={retryPermission}><Text style={styles.actionText}>Request Permission</Text></TouchableOpacity>
|
||||
</View>
|
||||
) : region ? (
|
||||
<MapView style={styles.map} provider={PROVIDER_GOOGLE} region={region} showsUserLocation={true} showsMyLocationButton={true}>
|
||||
<Marker coordinate={{ latitude: region.latitude, longitude: region.longitude }} title="You are here" />
|
||||
</MapView>
|
||||
) : (
|
||||
<View style={styles.center}>
|
||||
<Text style={{ marginBottom: 12 }}>No location available</Text>
|
||||
<TouchableOpacity style={styles.actionButton} onPress={retryGetLocation}><Text style={styles.actionText}>Retry Location</Text></TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1 },
|
||||
map: { flex: 1 },
|
||||
closeButton: { position: 'absolute', top: 16, left: 16, zIndex: 10, padding: 8, backgroundColor: 'rgba(0,0,0,0.6)', borderRadius: 8 },
|
||||
closeText: { color: '#fff' },
|
||||
center: { flex: 1, justifyContent: 'center', alignItems: 'center' },
|
||||
actionButton: { backgroundColor: '#2563eb', padding: 12, borderRadius: 8, marginTop: 8 },
|
||||
actionText: { color: '#fff', fontWeight: '600' },
|
||||
});
|
||||
Reference in New Issue
Block a user