diff --git a/apps/mobile/src/components/GeofenceStatus.tsx b/apps/mobile/src/components/GeofenceStatus.tsx index e5252b9..d5b0b5e 100644 --- a/apps/mobile/src/components/GeofenceStatus.tsx +++ b/apps/mobile/src/components/GeofenceStatus.tsx @@ -1,11 +1,22 @@ -import { View, Text, StyleSheet } from 'react-native' +import { View, Text, StyleSheet, TouchableOpacity } from 'react-native' import { LinearGradient } from 'expo-linear-gradient' import { Ionicons } from '@expo/vector-icons' +import { useState } from 'react' export const GeofenceStatus = () => { - // Simple mock geofence status - shows demo data - const isInside = false - const distance = '250 m' + const [isInside, setIsInside] = useState(false) + const [distance, setDistance] = useState('250 m') + const [loading, setLoading] = useState(false) + + const handleRefresh = () => { + setLoading(true) + // Simulate location check + setTimeout(() => { + setDistance(Math.random() > 0.5 ? '150 m' : '300 m') + setIsInside(Math.random() > 0.5) + setLoading(false) + }, 1000) + } return ( @@ -30,6 +41,18 @@ export const GeofenceStatus = () => { {isInside ? 'At Gym' : 'Away from Gym'} + + + @@ -70,6 +93,11 @@ const styles = StyleSheet.create({ fontWeight: '600', color: '#fff', }, + refreshButton: { + padding: 8, + borderRadius: 8, + backgroundColor: 'rgba(255, 255, 255, 0.2)', + }, content: { marginTop: 12, },