text.txt

I am developing a simple mobile application that allows people to share their live location with others. I am currently trying to develop the part of it that will send regular location updates to the Firestone Database, and have it be fully functional on Android and iOS. I have it coded it in Native Expo React. When Radar detects a new location in the trip, it triggers a Webhook that calls my server.
I want to have my app work as efficiently as possible, with great accuracy and low battery usage. I am currently using Radar Labs' package to configure and setup location updates. I want to replicate the services of other apps like Google Maps sharing or WhatsApp sharing, but better.

Here is the current setup.

App.js
```javascript
// App.js
import React, { useEffect, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { onAuthStateChanged } from 'firebase/auth';
import { ref, update } from 'firebase/database';

import { auth, db } from './firebaseConfig';
import Radar from 'react-native-radar';

import * as Location from 'expo-location';
import * as IntentLauncher from 'expo-intent-launcher';
import { Linking, Platform } from 'react-native';

// Screens
import PermissionScreen from './screens/PermissionScreen';
import LoadingScreen from './screens/LoadingScreen';
import LoginScreen from './screens/LoginScreen';
import SignupScreen from './screens/SignupScreen';
import HomeScreen from './screens/HomeScreen';

const Stack = createStackNavigator();

export default function App() {
  // ----------------------------
  // 1) State for Location Perms
  // ----------------------------
  const [isCheckingPermissions, setIsCheckingPermissions] = useState(true);
  const [hasLocationPermissions, setHasLocationPermissions] = useState(false);
  const [permissionErrorMessage, setPermissionErrorMessage] = useState('');

  // ----------------------------
  // 2) State for Auth
  // ----------------------------
  const [user, setUser] = useState(null);
  const [initializing, setInitializing] = useState(true);

  // ----------------------------
  // 3) Check Location Perms
  //    On First Mount
  // ----------------------------
  useEffect(() => {
    (async () => {
      try {
        // 1) Request Foreground
        let fg = await Location.getForegroundPermissionsAsync();
        if (fg.status !== 'granted') {
          fg = await Location.requestForegroundPermissionsAsync();
          if (fg.status !== 'granted') {
            setPermissionErrorMessage(
              'App needs "While Using" location to function.'
            );
            setHasLocationPermissions(false);
            setIsCheckingPermissions(false);
            return;
          }
        }

        // 2) Request Background
        let bg = await Location.getBackgroundPermissionsAsync();
        if (bg.status !== 'granted') {
          bg = await Location.requestBackgroundPermissionsAsync();
        }

        if (bg.status !== 'granted') {
          // iOS may not grant 'Always' automatically. The user may have to manually enable it in Settings.
          setPermissionErrorMessage(
            'Please grant "Allow All the Time" location in Settings.'
          );
          setHasLocationPermissions(false);
        } else {
          setPermissionErrorMessage('');
          setHasLocationPermissions(true);
        }
      } catch (err) {
        console.log('Error checking permissions =>', err);
        setPermissionErrorMessage(
          'Error checking permissions. Please enable them in Settings.'
        );
        setHasLocationPermissions(false);
      } finally {
        setIsCheckingPermissions(false);
      }
    })();
  }, []);

  // ----------------------------
  // 4) Radar Setup
  //    But Only If We Have Perms
  // ----------------------------
  useEffect(() => {
    if (!hasLocationPermissions) return;

    // Initialize Radar
    Radar.initialize('prj_live_pk_2bb1459eda8faeaf64aa70990ca689ee231f5b42');
    Radar.setLogLevel('debug'); // Remove or set to 'none' in production

    Radar.on('error', (err) => {
      console.error('Radar error =>', err);
    });

    // Cleanup
    return () => {
      Radar.off('location');
      Radar.off('error');
    };
  }, [hasLocationPermissions]);

  // ----------------------------
  // 5) Auth Listener
  // ----------------------------
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
      setUser(currentUser);
      setInitializing(false);

      if (currentUser) {
        Radar.setUserId(currentUser.uid);
        Radar.setDescription(currentUser.email || 'Radar User');
        Radar.setMetadata({ role: 'tester' });

        // Request location permissions in two stages (foreground, then background)
        try {
          const fgStatus = await Radar.requestPermissions(false);
          console.log('Foreground perms =>', fgStatus);

          if (fgStatus === 'GRANTED_FOREGROUND') {
            const bgStatus = await Radar.requestPermissions(true);
            console.log('Background perms =>', bgStatus);
          }
        } catch (err) {
          console.error('Error requesting Radar permissions =>', err);
        }

        // Start custom tracking (only if we have perms)
        if (hasLocationPermissions) {
          // Configure the foreground notification on Android
          Radar.setForegroundServiceOptions({
            text: 'Location tracking is active',
            title: 'Tracking in background',
            updatesOnly: false,
            importance: 2,
          });

          // Radar.startTrackingCustom({
          //   desiredStoppedUpdateInterval: 60, // every 60s when "stopped"
          //   fastestStoppedUpdateInterval: 60,
          //   desiredMovingUpdateInterval: 60,  // every 60s when "moving"
          //   fastestMovingUpdateInterval: 30,  // won't go faster than 30s
          //   desiredSyncInterval: 20,          // sync to Radar server every 20s
          //   desiredAccuracy: 'high',
          //   stopDuration: 140,                // how long before considered "stopped"
          //   stopDistance: 70,                 // how far to move before "moving"
          //   replay: 'none',                   // do not replay offline updates
          //   sync: 'all',                      // sync all location updates
          //   useStoppedGeofence: false,
          //   showBlueBar: false,               // iOS: if true, user sees blue bar
          //   foregroundServiceEnabled: true,   // Android: show a persistent notif
          // });

          Radar.startTrip({
            tripOptions: {
              externalId: currentUser.uid,
              // mode: 'car'
            },
            trackingOptions: {
              desiredStoppedUpdateInterval: 60,
              fastestStoppedUpdateInterval: 60,
              desiredMovingUpdateInterval: 60,
              fastestMovingUpdateInterval: 30,
              desiredSyncInterval: 20,
              desiredAccuracy: "high",
              stopDuration: 140,
              stopDistance: 140,
              replay: "none",
              sync: "all",
              useStoppedGeofence: false,
              showBlueBar: false,
              syncGeofences: false,
              syncGeofencesLimit: 0,
              beacons: false,
              foregroundServiceEnabled: true
            }
          }).then((result) => {
            console.log('Radar trip started =>', result);
          });
        }
      } else {
        Radar.stopTracking();
      }
    });

    return () => unsubscribe();
  }, [hasLocationPermissions]);

  // ----------------------------
  // 6) Conditional Rendering
  // ----------------------------

  // 6a) If still checking perms, show spinner
  if (isCheckingPermissions) {
    return <LoadingScreen />;
  }

  // 6b) If we do NOT have location perms, block with a custom screen
  if (!hasLocationPermissions) {
    return (
      <PermissionBlockedScreen
        errorMessage={permissionErrorMessage}
        onOpenSettings={openAppSettings}
      />
    );
  }

  // 6c) If still initializing auth, show spinner
  if (initializing) {
    return <LoadingScreen />;
  }

  // 6d) If we have perms and have done auth check, show normal navigation
  return (
    <NavigationContainer>
      <Stack.Navigator>
        {user ? (
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={{ headerShown: false }}
          />
        ) : (
          <>
            <Stack.Screen
              name="Login"
              component={LoginScreen}
              options={{ headerShown: false }}
            />
            <Stack.Screen
              name="Signup"
              component={SignupScreen}
              options={{ headerShown: false }}
            />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// Helper function to open App Settings:
function openAppSettings() {
  if (Platform.OS === 'ios') {
    Linking.openURL('app-settings:');
  } else {
    // Replace "com.yourcompany.yourapp" with your actual Android package name
    IntentLauncher.startActivityAsync(
      IntentLauncher.ActivityAction.APPLICATION_DETAILS_SETTINGS,
      { data: 'package:com.antoninbeliard.loco' }
    );
  }
}

// Minimal “blocked permissions” screen:
function PermissionBlockedScreen({ errorMessage, onOpenSettings }) {
  return (
    <PermissionScreen
      title="Location Needed"
      message={errorMessage}
      buttonText="Open Settings"
      onPressButton={onOpenSettings}
    />
  );
}
```

screens/HomeScreen.js
```javascript
// screens/HomeScreen.js
import React, { useState, useEffect, useRef, useMemo } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Modal,
  Button,
  TextInput,
  SafeAreaView,
  ScrollView,
  Alert,
  ActivityIndicator
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { signOut } from 'firebase/auth';
import { auth, db } from '../firebaseConfig';
import { ref, onValue, off, update, get } from 'firebase/database';
import Radar from 'react-native-radar';
import Mapbox, { MapView, LocationPuck, MarkerView, Camera, UserTrackingMode } from '@rnmapbox/maps';
import { MaterialIcons } from '@expo/vector-icons';
import { FontAwesome5 } from '@expo/vector-icons';
import { SearchBar, ListItem, Divider, Avatar } from '@rneui/themed';
import * as ImagePicker from 'expo-image-picker';
import * as ImageManipulator from 'expo-image-manipulator';
import BottomSheet, { BottomSheetScrollView, BottomSheetModal, BottomSheetModalProvider, BottomSheetView } from '@gorhom/bottom-sheet';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

import {
  shareLocation,
  stopSharingLocation,
  stopReceivingLocation,
} from '../sharingUtils';

import { COLORS } from '../colors';

/* -------------------------
   Utility Functions
------------------------- */
function getTimeAgo(timestamp) {
  const now = Date.now();
  const diffInSeconds = Math.floor((now - timestamp) / 1000);
  if (diffInSeconds < 60) return `${diffInSeconds} sec. ago`;
  const diffInMinutes = Math.floor(diffInSeconds / 60);
  if (diffInMinutes < 60) return `${diffInMinutes} min. ago`;
  const diffInHours = Math.floor(diffInMinutes / 60);
  if (diffInHours < 24) return `${diffInHours} hr. ago`;
  const diffInDays = Math.floor(diffInHours / 24);
  if (diffInDays < 7) return `${diffInDays} day${diffInDays > 1 ? 's' : ''} ago`;
  const diffInWeeks = Math.floor(diffInDays / 7);
  if (diffInWeeks < 52) return `${diffInWeeks} week${diffInWeeks > 1 ? 's' : ''} ago`;
  const diffInYears = Math.floor(diffInWeeks / 52);
  return `${diffInYears} year${diffInYears > 1 ? 's' : ''} ago`;
}

function getDistanceFromLatLonInMiles(lat1, lon1, lat2, lon2) {
  const R = 3958.8; // Earth radius in miles
  const deg2rad = (deg) => deg * (Math.PI / 180);
  const dLat = deg2rad(lat2 - lat1);
  const dLon = deg2rad(lon2 - lon1);
  const a =
    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.cos(deg2rad(lat1)) *
    Math.cos(deg2rad(lat2)) *
    Math.sin(dLon / 2) *
    Math.sin(dLon / 2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  return R * c;
}

/* -------------------------
   Small live components
------------------------- */
const LiveTimeAgo = ({ timestamp }) => {
  const [timeAgo, setTimeAgo] = useState(getTimeAgo(timestamp));
  useEffect(() => {
    const interval = setInterval(() => {
      setTimeAgo(getTimeAgo(timestamp));
    }, 2000);
    return () => clearInterval(interval);
  }, [timestamp]);
  return <Text>{timeAgo}</Text>;
};

const LiveDistance = ({ currentLocation, userLocation }) => {
  const [distanceText, setDistanceText] = useState("");
  useEffect(() => {
    const calculateDistance = () => {
      if (currentLocation && userLocation) {
        const distance = getDistanceFromLatLonInMiles(
          currentLocation.latitude,
          currentLocation.longitude,
          userLocation.latitude,
          userLocation.longitude
        );
        setDistanceText(distance.toFixed(1) + ' mi');
      } else {
        setDistanceText("");
      }
    };
    calculateDistance();
    const interval = setInterval(calculateDistance, 2000);
    return () => clearInterval(interval);
  }, [currentLocation, userLocation]);
  return <Text style={styles.distanceText}>{distanceText}</Text>;
};

/* -------------------------
   Marker component (map)
------------------------- */
const UserMarker = ({ user, onPress }) => {
  return (
    <TouchableOpacity activeOpacity={0.8} onPress={onPress}>
      <View style={markerStyles.container}>
        <Avatar
          rounded
          source={
            user.avatar && user.avatar.link
              ? { uri: user.avatar.link }
              : { uri: "data:image/png" }
          }
          icon={
            !user.avatar || !user.avatar.link
              ? { name: 'person-outline', type: 'material', size: 24 }
              : undefined
          }
          size={30}
          containerStyle={
            !user.avatar || !user.avatar.link
              ? { backgroundColor: '#c2c2c2' }
              : {}
          }
        />
        <Text style={markerStyles.nameText}>{user.firstName}</Text>
      </View>
    </TouchableOpacity>
  );
};

const markerStyles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: 'white',
    padding: 5,
    borderRadius: 20,
    borderWidth: 1,
    borderColor: 'gray',
  },
  nameText: {
    color: 'black',
    marginLeft: 5,
    fontSize: 16,
  },
});

/* -------------------------
   Bottom Sheet User Item 
   (for map’s people list)
------------------------- */
const BottomSheetUserItem = ({ user, currentLocation, onPress }) => {
  return (
    <ListItem bottomDivider containerStyle={{ backgroundColor: 'transparent' }} onPress={onPress}>
      <Avatar
        rounded
        source={
          user.avatar && user.avatar.link
            ? { uri: user.avatar.link }
            : { uri: "data:image/png" }
        }
        icon={
          !user.avatar || !user.avatar.link
            ? { name: 'person-outline', type: 'material', size: 24 }
            : undefined
        }
        size={30}
        containerStyle={
          !user.avatar || !user.avatar.link
            ? { backgroundColor: '#c2c2c2' }
            : {}
        }
      />
      <ListItem.Content>
        <View style={styles.userItemHeader}>
          <ListItem.Title>
            {(`${user.firstName || ''} ${user.lastName || ''}`).trim()}
          </ListItem.Title>
          <LiveDistance currentLocation={currentLocation} userLocation={user.location} />
        </View>
        <ListItem.Subtitle>
          <LiveTimeAgo timestamp={user.locationTimestamp} />
        </ListItem.Subtitle>
      </ListItem.Content>
    </ListItem>
  );
};

/* -------------------------
   Social User Item 
   (for People modal – with sharing status text)
------------------------- */
const SocialUserItem = ({ user, sharingWithIds, receivingFromIds, onPress }) => {
  const [statusText, setStatusText] = useState('');
  useEffect(() => {
    const amSharing = sharingWithIds.includes(user.uid);
    const amReceiving = receivingFromIds.includes(user.uid);
    let text = '';
    if (amSharing && amReceiving) {
      text = 'Both of you are sharing';
    } else if (amSharing && !amReceiving) {
      text = 'Receiving your location';
    } else if (!amSharing && amReceiving) {
      text = 'Is sharing with you';
    } else {
      text = 'Neither of you are sharing';
    }
    setStatusText(text);
  }, [user, sharingWithIds, receivingFromIds]);
  return (
    <ListItem bottomDivider onPress={() => onPress(user)}>
      <Avatar
        rounded
        source={
          user.avatar && user.avatar.link
            ? { uri: user.avatar.link }
            : { uri: "data:image/png" }
        }
        icon={
          !user.avatar || !user.avatar.link
            ? { name: 'person-outline', type: 'material', size: 26 }
            : undefined
        }
        size={30}
        containerStyle={
          !user.avatar || !user.avatar.link
            ? { backgroundColor: '#c2c2c2' }
            : {}
        }
      />
      <ListItem.Content>
        <ListItem.Title>
          {(`${user.firstName || ''} ${user.lastName || ''}`).trim()}
        </ListItem.Title>
        <ListItem.Subtitle>{statusText}</ListItem.Subtitle>
      </ListItem.Content>
    </ListItem>
  );
};

/* -------------------------
   Sharing Options Dialog 
   (for People modal items only)
------------------------- */
function SharingDialog({ targetUser, sharingStatus, onShare, onStopSharing, onStopReceiving, onClose }) {
  let message = '';
  let actions = [];
  if (sharingStatus.amSharing && !sharingStatus.amReceiving) {
    message = `You are sharing your location with ${targetUser.firstName}`;
    actions.push({ title: 'Stop Sharing My Location', onPress: onStopSharing });
  } else if (!sharingStatus.amSharing && sharingStatus.amReceiving) {
    message = `${targetUser.firstName} is sharing their location`;
    actions.push({ title: 'Share My Location', onPress: onShare });
    actions.push({ title: `Remove ${targetUser.firstName}`, onPress: onStopReceiving });
  } else if (sharingStatus.amSharing && sharingStatus.amReceiving) {
    message = 'You are both sharing';
    actions.push({ title: 'Stop Sharing My Location', onPress: onStopSharing });
    actions.push({ title: `Remove ${targetUser.firstName}`, onPress: onStopReceiving });
  } else {
    message = 'Neither of you are sharing';
    actions.push({ title: 'Share My Location', onPress: onShare });
  }
  return (
    <View style={SharingStyles.dialogContainer}>
      <Text style={SharingStyles.dialogMessage}>{message}</Text>
      {actions.map((action, index) => (
        <View key={index} style={SharingStyles.buttonContainer}>
          <Button
            title={action.title}
            onPress={() => {
              action.onPress();
              onClose();
            }}
          />
        </View>
      ))}
      <View style={SharingStyles.buttonContainer}>
        <Button title="Cancel" onPress={onClose} />
      </View>
    </View>
  );
}

/* -------------------------
   Main HomeScreen Component
------------------------- */
export default function HomeScreen() {
  const insets = useSafeAreaInsets();

  /* --- Map & location state --- */
  const [currentLocation, setCurrentLocation] = useState(null);
  const cameraRef = useRef(null);
  const initialCameraCentered = useRef(false);
  const [tracking, setTracking] = useState(false);

  /* --- Modal & UI state --- */
  const [showSettings, setShowSettings] = useState(false);
  const [settingsFirstName, setSettingsFirstName] = useState('');
  const [settingsLastName, setSettingsLastName] = useState('');
  const [firstNameError, setFirstNameError] = useState(false);
  const [lastNameError, setLastNameError] = useState(false);
  const [avatarUri, setAvatarUri] = useState(null);
  const [avatarData, setAvatarData] = useState(null);
  const [uploading, setUploading] = useState(false);

  const [showSocial, setShowSocial] = useState(false);
  const [expanded1, setExpanded1] = useState(false);
  const [expanded2, setExpanded2] = useState(true);
  const [search, setSearch] = useState('');
  const [searchResults, setSearchResults] = useState([]);

  /* --- Real‑time sharing list states --- */
  const [sharingWithIds, setSharingWithIds] = useState([]);
  const [receivingFromIds, setReceivingFromIds] = useState([]);
  const [sharingWithData, setSharingWithData] = useState({}); // keyed by uid
  const [receivingFromData, setReceivingFromData] = useState({}); // keyed by uid

  /* --- Selected user states --- */
  // For main bottom sheet (user info modal on map)
  const [selectedUserInfo, setSelectedUserInfo] = useState(null);
  // For People modal (sharing options)
  const [selectedSocialUser, setSelectedSocialUser] = useState(null);
  const [selectedUserLocationName, setSelectedUserLocationName] = useState("");
  // These sharing status objects are computed in real time
  const [userSharingStatus, setUserSharingStatus] = useState({ amSharing: false, amReceiving: false });

  /* --- Mapbox setup --- */
  useEffect(() => {
    Mapbox.setAccessToken('pk.eyJ1IjoidG90b2IxMjE3IiwiYSI6ImNsbXo4NHdocjA4dnEya215cjY0aWJ1cGkifQ.OMzA6Q8VnHLHZP-P8ACBRw');
    Mapbox.setTelemetryEnabled(false);
  }, []);

  /* --- Radar foreground tracking --- */
  useEffect(() => {
    const trackLocation = () => {
      Radar.trackOnce({ desiredAccuracy: 'high' })
        .then((result) => {
          if (result.location) {
            setCurrentLocation(result.location);
          }
        })
        .catch((err) => {
          console.log('Radar trackOnce error =>', err);
        });
    };
    trackLocation();
    const intervalId = setInterval(trackLocation, 10000);
    return () => clearInterval(intervalId);
  }, []);

  useEffect(() => {
    if (currentLocation && !initialCameraCentered.current) {
      cameraRef.current?.setCamera({
        centerCoordinate: [currentLocation.longitude, currentLocation.latitude],
        zoomLevel: 16,
        animationMode: 'none',
        animationDuration: 0,
      });
      initialCameraCentered.current = true;
    }
  }, [currentLocation]);

  /* --- Real‑time sharing lists subscriptions --- */
  // "sharingWith" list (users you are sharing your location with)
  useEffect(() => {
    const currentUser = auth.currentUser;
    if (!currentUser) return;
    const sharingWithRef = ref(db, `users/${currentUser.uid}/sharingWith`);
    const unsubscribe = onValue(sharingWithRef, (snapshot) => {
      const data = snapshot.val() || {};
      // Always force a new array reference so the dependent effect fires
      setSharingWithIds(Object.keys(data));
    });
    return () => unsubscribe();
  }, []);

  // "receivingFrom" list (users sharing with you)
  useEffect(() => {
    const currentUser = auth.currentUser;
    if (!currentUser) return;
    const receivingFromRef = ref(db, `users/${currentUser.uid}/receivingFrom`);
    const unsubscribe = onValue(receivingFromRef, (snapshot) => {
      const data = snapshot.val() || {};
      setReceivingFromIds(Object.keys(data));
    });
    return () => unsubscribe();
  }, []);


  // Subscribe to each user in "sharingWith"
  const sharingWithListenersRef = useRef({});
  useEffect(() => {
    // Unsubscribe from any uid no longer in sharingWithIds.
    Object.keys(sharingWithListenersRef.current).forEach((uid) => {
      if (!sharingWithIds.includes(uid)) {
        // Unsubscribe from this user’s listener
        sharingWithListenersRef.current[uid]();
        delete sharingWithListenersRef.current[uid];
        // Remove the user's data from state
        setSharingWithData((prev) => {
          const newData = { ...prev };
          delete newData[uid];
          return newData;
        });
      }
    });
    // For each uid in sharingWithIds, attach a listener if not already attached.
    sharingWithIds.forEach((uid) => {
      if (!sharingWithListenersRef.current[uid]) {
        const userRef = ref(db, `users/${uid}`);
        const unsubscribe = onValue(userRef, (snapshot) => {
          const userData = snapshot.val();
          setSharingWithData((prev) => ({ ...prev, [uid]: { uid, ...userData } }));
        });
        sharingWithListenersRef.current[uid] = unsubscribe;
      }
    });
    // No cleanup here so we don't remove listeners unnecessarily.
  }, [sharingWithIds]);

  // Cleanup all sharingWith listeners when the component unmounts
  useEffect(() => {
    return () => {
      Object.values(sharingWithListenersRef.current).forEach((unsubscribe) => unsubscribe());
      sharingWithListenersRef.current = {};
    };
  }, []);

  // Subscribe to each user in "receivingFrom"
  const receivingFromListenersRef = useRef({});
  useEffect(() => {
    Object.keys(receivingFromListenersRef.current).forEach((uid) => {
      if (!receivingFromIds.includes(uid)) {
        receivingFromListenersRef.current[uid]();
        delete receivingFromListenersRef.current[uid];
        setReceivingFromData((prev) => {
          const newData = { ...prev };
          delete newData[uid];
          return newData;
        });
      }
    });
    receivingFromIds.forEach((uid) => {
      if (!receivingFromListenersRef.current[uid]) {
        const userRef = ref(db, `users/${uid}`);
        const unsubscribe = onValue(userRef, (snapshot) => {
          const userData = snapshot.val();
          setReceivingFromData((prev) => ({ ...prev, [uid]: { uid, ...userData } }));
        });
        receivingFromListenersRef.current[uid] = unsubscribe;
      }
    });
  }, [receivingFromIds]);

  useEffect(() => {
    return () => {
      Object.values(receivingFromListenersRef.current).forEach((unsubscribe) => unsubscribe());
      receivingFromListenersRef.current = {};
    };
  }, []);

  /* --- Compute markers from receivingFrom users --- */
  const markers = useMemo(() => {
    return Object.values(receivingFromData).filter((user) => user.location);
  }, [receivingFromData]);

  /* --- Search Users (excluding self) --- */
  useEffect(() => {
    if (search.trim().length > 0) {
      const currentUser = auth.currentUser;
      const usersRef = ref(db, 'users');
      get(usersRef)
        .then((snapshot) => {
          if (snapshot.exists()) {
            const usersData = snapshot.val();
            const searchLower = search.toLowerCase();
            let results = [];
            for (const uid in usersData) {
              if (currentUser && uid === currentUser.uid) continue;
              const user = usersData[uid];
              const fullName = ((user.firstName || '') + ' ' + (user.lastName || '')).trim().toLowerCase();
              const email = (user.email || '').toLowerCase();
              if (fullName.includes(searchLower) || email.includes(searchLower)) {
                results.push({ uid, ...user });
              }
            }
            setSearchResults(results);
          } else {
            setSearchResults([]);
          }
        })
        .catch((err) => {
          console.error('Error fetching users:', err);
          setSearchResults([]);
        });
    } else {
      setSearchResults([]);
    }
  }, [search]);

  /* --- Settings modal: fetch current profile data --- */
  useEffect(() => {
    if (showSettings) {
      setFirstNameError(false);
      setLastNameError(false);
      const user = auth.currentUser;
      if (user) {
        get(ref(db, 'users/' + user.uid))
          .then((snapshot) => {
            if (snapshot.exists()) {
              const data = snapshot.val();
              setSettingsFirstName(data.firstName || '');
              setSettingsLastName(data.lastName || '');
              if (data.avatar) {
                setAvatarData(data.avatar);
                setAvatarUri(data.avatar.link || null);
              } else {
                setAvatarData(null);
                setAvatarUri(null);
              }
            }
          })
          .catch((err) => {
            console.log('Error fetching settings data:', err);
          });
      }
    }
  }, [showSettings]);

  /* --- Update sharing status for the main user info modal --- */
  useEffect(() => {
    if (selectedUserInfo) {
      setUserSharingStatus({
        amSharing: sharingWithIds.includes(selectedUserInfo.uid),
        amReceiving: receivingFromIds.includes(selectedUserInfo.uid)
      });
    }
  }, [selectedUserInfo, sharingWithIds, receivingFromIds]);

  /* --- Handlers for People modal (social user items) --- */
  const handleSocialUserPress = (user) => {
    // When a People modal user item is tapped, only open the sharing options modal.
    setSelectedSocialUser(user);
  };

  /* --- Handlers for main bottom sheet user items --- */
  const bottomSheetRef = useRef(null);
  const userInfoModalRef = useRef(null);
  const snapPoints = useMemo(() => ['10%', '32%', '80%'], []);
  const openUserInfo = (user) => {
    // Center map on user’s location and open the user info modal.
    if (tracking) {
      setTracking(false);
      setTimeout(() => {
        cameraRef.current?.setCamera({
          centerCoordinate: [user.location.longitude, user.location.latitude],
          animationMode: 'flyTo',
          animationDuration: 1000,
        });
      }, 150);
    } else {
      cameraRef.current?.setCamera({
        centerCoordinate: [user.location.longitude, user.location.latitude],
        animationMode: 'flyTo',
        animationDuration: 1000,
      });
    }
    bottomSheetRef.current?.close();
    setSelectedUserInfo(user);
  };

  const closeUserInfo = () => {
    userInfoModalRef.current?.dismiss();
    setSelectedUserInfo(null);
    bottomSheetRef.current?.snapToIndex(1);
  };

  useEffect(() => {
    if (selectedUserInfo && userInfoModalRef.current) {
      userInfoModalRef.current.present();
    }
  }, [selectedUserInfo]);

  /* --- Toggle tracking --- */
  const toggleTracking = () => {
    if (!tracking) {
      setTracking(true);
      if (currentLocation) {
        cameraRef.current?.setCamera({
          centerCoordinate: [currentLocation.longitude, currentLocation.latitude],
          zoomLevel: 16,
          animationMode: 'flyTo',
          animationDuration: 1000,
        });
      }
    } else {
      setTracking(false);
    }
  };

  /* --- Name validation and update --- */
  const validateName = (name) => {
    const regex = /^[A-Za-z]+$/;
    return name.trim().length > 0 && name.length <= 20 && regex.test(name);
  };

  const handleFirstNameChange = (text) => {
    setSettingsFirstName(text);
    if (validateName(text)) {
      setFirstNameError(false);
      const user = auth.currentUser;
      if (user) {
        update(ref(db, 'users/' + user.uid), { firstName: text }).catch((err) =>
          console.log('Error updating first name:', err)
        );
      }
    } else {
      setFirstNameError(true);
    }
  };

  const handleLastNameChange = (text) => {
    setSettingsLastName(text);
    if (validateName(text)) {
      setLastNameError(false);
      const user = auth.currentUser;
      if (user) {
        update(ref(db, 'users/' + user.uid), { lastName: text }).catch((err) =>
          console.log('Error updating last name:', err)
        );
      }
    } else {
      setLastNameError(true);
    }
  };

  /* --- Sign out --- */
  const handleSignOut = async () => {
    try {
      await signOut(auth);
    } catch (error) {
      console.log('Error signing out:', error);
    }
  };

  /* --- Image upload handlers (unchanged) --- */
  const IMGUR_CLIENT_ID = '4916641447bc9f6';

  const deleteImgurImage = async (deleteHash) => {
    try {
      const authHeader = 'Client-ID ' + IMGUR_CLIENT_ID;
      const response = await fetch(`https://api.imgur.com/3/image/${deleteHash}`, {
        method: 'DELETE',
        headers: {
          Authorization: authHeader,
          Accept: 'application/json',
        },
      });
      const result = await response.json();
      if (result.success) {
        console.log('Old avatar deleted successfully from Imgur');
      } else {
        console.error('Failed to delete old avatar from Imgur:', result);
      }
    } catch (error) {
      console.error('Error deleting old avatar:', error);
    }
  };

  const resizeImageIfNeeded = async (uri, width, height) => {
    if (width <= 500 && height <= 500) {
      return uri;
    }
    const maxDimension = 1000;
    const scaleFactor = Math.min(maxDimension / width, maxDimension / height);
    const newWidth = Math.round(width * scaleFactor);
    const newHeight = Math.round(height * scaleFactor);
    const manipResult = await ImageManipulator.manipulateAsync(
      uri,
      [{ resize: { width: newWidth, height: newHeight } }],
      { compress: 0.8, format: ImageManipulator.SaveFormat.JPEG }
    );
    return manipResult.uri;
  };

  const uploadImage = async (uri) => {
    try {
      setUploading(true);
      let formData = new FormData();
      const uriParts = uri.split('.');
      const fileType = uriParts[uriParts.length - 1];
      formData.append('image', {
        uri: uri,
        name: `avatar.${fileType}`,
        type: `image/${fileType}`,
      });
      const authHeader = 'Client-ID ' + IMGUR_CLIENT_ID;
      const response = await fetch('https://api.imgur.com/3/image', {
        method: 'POST',
        headers: {
          Authorization: authHeader,
          Accept: 'application/json',
        },
        body: formData,
      });
      const result = await response.json();
      if (result.success) {
        if (avatarData && avatarData.deletehash) {
          await deleteImgurImage(avatarData.deletehash);
        }
        const currentUser = auth.currentUser;
        if (currentUser) {
          await update(ref(db, 'users/' + currentUser.uid), { avatar: result.data });
          setAvatarData(result.data);
          setAvatarUri(result.data.link);
          Alert.alert('Success', 'Avatar updated successfully.');
        } else {
          Alert.alert('Error', 'User not logged in.');
        }
      } else {
        console.error('Imgur upload failed:', result);
        Alert.alert('Upload failed', 'Failed to upload image to Imgur.');
      }
    } catch (error) {
      console.error('Error uploading image:', error);
      Alert.alert('Error', 'An error occurred while uploading the image.');
    } finally {
      setUploading(false);
    }
  };

  const handleSelectImage = async () => {
    const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
    if (!permissionResult.granted) {
      Alert.alert('Permission required', 'Permission to access the media library is required!');
      return;
    }
    let pickerResult = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ["images"],
      allowsEditing: true,
      aspect: [1, 1],
      quality: 1,
    });
    if (!pickerResult.canceled) {
      const asset = pickerResult.assets[0];
      const resizedUri = await resizeImageIfNeeded(asset.uri, asset.width, asset.height);
      await uploadImage(resizedUri);
    }
  };

  const handleRemovePicture = async () => {
    if (!avatarData || !avatarData.deletehash) {
      Alert.alert('No avatar', 'No avatar to remove.');
      return;
    }
    try {
      setUploading(true);
      await deleteImgurImage(avatarData.deletehash);
      const currentUser = auth.currentUser;
      if (currentUser) {
        await update(ref(db, 'users/' + currentUser.uid), { avatar: null });
        setAvatarData(null);
        setAvatarUri(null);
        Alert.alert('Success', 'Avatar removed successfully.');
      } else {
        Alert.alert('Error', 'User not logged in.');
      }
    } catch (error) {
      console.error('Error removing avatar:', error);
      Alert.alert('Error', 'An error occurred while removing the avatar.');
    } finally {
      setUploading(false);
    }
  };

  /* --- Reverse geocoding for user info modal --- */
  const fetchReverseGeocode = async (lat, lon) => {
    try {
      const response = await fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${lat}&lon=${lon}`);
      const data = await response.json();
      if (data && data.display_name) {
        setSelectedUserLocationName(data.display_name);
      } else {
        setSelectedUserLocationName("Location not found");
      }
    } catch (error) {
      console.error("Error fetching reverse geocode:", error);
      setSelectedUserLocationName("Error fetching location");
    }
  };

  useEffect(() => {
    if (selectedUserInfo) {
      const loc = selectedUserInfo.location || null;
      if (loc) {
        fetchReverseGeocode(loc.latitude, loc.longitude);
      }
    }
  }, [selectedUserInfo]);

  /* --- Handlers for toggling sharing in user info modal --- */
  const handleToggleShare = async () => {
    if (!selectedUserInfo) return;
    if (userSharingStatus.amSharing) {
      await stopSharingLocation(auth.currentUser.uid, selectedUserInfo.uid);
    } else {
      await shareLocation(auth.currentUser.uid, selectedUserInfo.uid);
    }
  };

  const handleRemoveSharing = async () => {
    if (!selectedUserInfo) return;
    await stopReceivingLocation(auth.currentUser.uid, selectedUserInfo.uid);
    setTimeout(() => {
      if (!receivingFromIds.includes(selectedUserInfo.uid)) {
        closeUserInfo();
      }
    }, 500);
  };

  /* --- Compute sharing status for People modal item --- */
  const socialUserSharingStatus = selectedSocialUser
    ? {
      amSharing: sharingWithIds.includes(selectedSocialUser.uid),
      amReceiving: receivingFromIds.includes(selectedSocialUser.uid),
    }
    : { amSharing: false, amReceiving: false };

  /* -------------------------
     Render
  ------------------------- */
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <BottomSheetModalProvider>
      <View style={styles.container}>
          {/* Full-screen Map */}
          <MapView
            style={StyleSheet.absoluteFillObject}
            attributionEnabled={false}
            logoEnabled={false}
            scaleBarEnabled={false}
            compassEnabled={true}
            compassViewPosition={0}
            compassViewMargins={{ x: 15, y: 64 }}
            compassFadeWhenNorth={false}
          >
            <LocationPuck
              topImage="topImage"
              visible={true}
              // scale={['interpolate', ['linear'], ['zoom'], 10, 1.0, 20, 4.0]}
              pulsing={{
                isEnabled: true,
                color: COLORS.navy,
                radius: 50.0,
              }}
            />
            <Camera
              ref={cameraRef}
              zoomLevel={16}
              followUserLocation={tracking}
              followUserMode={UserTrackingMode.Follow}
              followZoomLevel={16}
              onUserTrackingModeChange={(event) => {
                if (!event.nativeEvent.payload.followUserLocation && tracking) {
                  setTracking(false);
                }
              }}
            />
            {markers.map((user) => (
              <MarkerView
                key={user.uid}
                id={user.uid}
                coordinate={[user.location.longitude, user.location.latitude]}
                allowOverlapWithPuck={true}
                allowOverlap={true}
              >
                <UserMarker user={user} onPress={() => openUserInfo(user)} />
              </MarkerView>
            ))}
          </MapView>

          {/* Top row with Settings and People buttons */}
          <View style={[styles.topRow, { top: insets.top }]}>
            <TouchableOpacity style={styles.iconButton} onPress={() => setShowSettings(true)}>
              <MaterialIcons name="settings" size={24} color="black" />
            </TouchableOpacity>
            <TouchableOpacity style={styles.iconButton} onPress={() => setShowSocial(true)}>
              <FontAwesome5 name="user-friends" size={20} color="black" />
            </TouchableOpacity>
          </View>

          <TouchableOpacity
            style={[styles.trackButton, { top: insets.top + 54 }, tracking && styles.trackButtonActive]}
            onPress={toggleTracking}
          >
            <MaterialIcons name="my-location" size={24} color={tracking ? '#fff' : '#000'} />
          </TouchableOpacity>

          {/* ------------- Settings Modal ------------- */}
          <Modal
            animationType="slide"
            transparent={false}
            visible={showSettings}
            onRequestClose={() => setShowSettings(false)}
          >
            <SafeAreaView style={styles.modalContainer}>
              <View style={styles.modalHeader}>
                <Text style={styles.modalTitle}>Settings</Text>
                <TouchableOpacity onPress={() => setShowSettings(false)}>
                  <MaterialIcons name="close" size={28} color="#000" />
                </TouchableOpacity>
              </View>
              <ScrollView style={styles.modalContent} contentContainerStyle={styles.modalScroll}>
                <View style={styles.currentLocationContainer}>
                  {currentLocation ? (
                    <Text style={styles.currentLocationText}>
                      {currentLocation.latitude.toFixed(6)} {currentLocation.longitude.toFixed(6)}
                    </Text>
                  ) : (
                    <Text style={styles.currentLocationText}>No location yet...</Text>
                  )}
                </View>
                <View style={styles.avatarContainer}>
                  <Avatar
                    size={100}
                    rounded
                    source={avatarUri ? { uri: avatarUri } : { uri: "data:image/png" }}
                    icon={!avatarUri ? { name: 'person', type: 'material' } : undefined}
                    containerStyle={styles.avatar}
                  />
                  {uploading && (
                    <ActivityIndicator style={{ marginVertical: 10 }} size="small" color="#00ADB5" />
                  )}
                  <View style={styles.avatarButtonsContainer}>
                    <TouchableOpacity style={styles.avatarButton} onPress={handleSelectImage} disabled={uploading}>
                      <Text style={styles.avatarButtonText}>{avatarUri ? 'Replace Image' : 'Select Image'}</Text>
                    </TouchableOpacity>
                    {avatarUri && (
                      <TouchableOpacity style={styles.avatarButton} onPress={handleRemovePicture} disabled={uploading}>
                        <Text style={styles.avatarButtonText}>Remove Picture</Text>
                      </TouchableOpacity>
                    )}
                  </View>
                </View>
                <Text style={styles.label}>First Name</Text>
                <TextInput
                  style={[styles.input, firstNameError && styles.errorInput]}
                  placeholder="First Name"
                  value={settingsFirstName}
                  onChangeText={handleFirstNameChange}
                />
                <Text style={styles.label}>Last Name</Text>
                <TextInput
                  style={[styles.input, lastNameError && styles.errorInput]}
                  placeholder="Last Name"
                  value={settingsLastName}
                  onChangeText={handleLastNameChange}
                />
              </ScrollView>
              <View style={styles.modalFooter}>
                <TouchableOpacity style={styles.logoutButton} onPress={handleSignOut}>
                  <Text style={styles.logoutButtonText}>Log Out</Text>
                </TouchableOpacity>
              </View>
            </SafeAreaView>
          </Modal>

          {/* ------------- People (Social) Modal ------------- */}
          <Modal
            animationType="slide"
            transparent={false}
            visible={showSocial}
            onRequestClose={() => setShowSocial(false)}
          >
            <SafeAreaView style={styles.modalContainer}>
              <View style={styles.modalHeader}>
                <Text style={styles.modalTitle}>People</Text>
                <TouchableOpacity onPress={() => setShowSocial(false)}>
                  <MaterialIcons name="close" size={28} color="#000" />
                </TouchableOpacity>
              </View>
              <ScrollView style={styles.modalContent} contentContainerStyle={styles.modalScroll}>
                <SearchBar
                  placeholder="Search..."
                  onChangeText={setSearch}
                  value={search}
                  platform="default"
                  containerStyle={styles.searchContainer}
                  inputContainerStyle={styles.searchInputContainer}
                  inputStyle={styles.searchInput}
                />
                {search.trim().length > 0 ? (
                  <>
                    {searchResults.length > 0 ? (
                      searchResults.map((user) => (
                        <SocialUserItem
                          key={user.uid}
                          user={user}
                          sharingWithIds={sharingWithIds}
                          receivingFromIds={receivingFromIds}
                          onPress={handleSocialUserPress}
                        />
                      ))
                    ) : (
                      <Text style={{ textAlign: 'center', marginTop: 20 }}>No users found.</Text>
                    )}
                  </>
                ) : (
                  <>
                    <ListItem.Accordion
                      content={
                        <ListItem.Content>
                          <ListItem.Title>Sharing With</ListItem.Title>
                        </ListItem.Content>
                      }
                      isExpanded={expanded1}
                      onPress={() => setExpanded1(!expanded1)}
                    >
                      {Object.values(sharingWithData).length > 0 ? (
                        Object.values(sharingWithData).map((user) => (
                          <SocialUserItem
                            key={user.uid}
                            user={user}
                            sharingWithIds={sharingWithIds}
                            receivingFromIds={receivingFromIds}
                            onPress={handleSocialUserPress}
                          />
                        ))
                      ) : (
                        <Text style={{ margin: 10, textAlign: 'center' }}>
                          You are not sharing your location yet.
                        </Text>
                      )}
                    </ListItem.Accordion>
                    <Divider style={{ width: '100%' }} insetType="middle" width={1} orientation="horizontal" />
                    <ListItem.Accordion
                      content={
                        <ListItem.Content>
                          <ListItem.Title>Receiving Locations</ListItem.Title>
                        </ListItem.Content>
                      }
                      isExpanded={expanded2}
                      onPress={() => setExpanded2(!expanded2)}
                    >
                      {Object.values(receivingFromData).length > 0 ? (
                        Object.values(receivingFromData).map((user) => (
                          <SocialUserItem
                            key={user.uid}
                            user={user}
                            sharingWithIds={sharingWithIds}
                            receivingFromIds={receivingFromIds}
                            onPress={handleSocialUserPress}
                          />
                        ))
                      ) : (
                        <Text style={{ margin: 10, textAlign: 'center' }}>
                          Nobody has shared with you yet.
                        </Text>
                      )}
                    </ListItem.Accordion>
                  </>
                )}
              </ScrollView>
            </SafeAreaView>
          </Modal>

          {/* ------------- Sharing Options Modal (for People modal items) ------------- */}
          {selectedSocialUser && (
            <Modal
              animationType="fade"
              transparent={true}
              presentationStyle="overFullScreen"
              visible={!!selectedSocialUser}
              onRequestClose={() => setSelectedSocialUser(null)}
            >
              <View style={dialogStyles.overlay}>
                <View style={dialogStyles.dialogBox}>
                  <SharingDialog
                    targetUser={selectedSocialUser}
                    sharingStatus={socialUserSharingStatus}
                    onShare={async () => {
                      await shareLocation(auth.currentUser.uid, selectedSocialUser.uid);
                    }}
                    onStopSharing={async () => {
                      await stopSharingLocation(auth.currentUser.uid, selectedSocialUser.uid);
                    }}
                    onStopReceiving={async () => {
                      await stopReceivingLocation(auth.currentUser.uid, selectedSocialUser.uid);
                    }}
                    onClose={() => setSelectedSocialUser(null)}
                  />
                </View>
              </View>
            </Modal>
          )}

          {/* ------------- Main Bottom Sheet (for users sharing with you) ------------- */}
          <BottomSheet
            ref={bottomSheetRef}
            index={1}
            snapPoints={snapPoints}
            enableDynamicSizing={false}
            enablePanDownToClose={false}
            backgroundStyle={{ borderRadius: 20 }}
          >
            <BottomSheetScrollView contentContainerStyle={styles.bottomSheetContent}>
              <Text style={styles.bottomSheetTitle}>People</Text>
              {Object.values(receivingFromData).length > 0 ? (
                Object.values(receivingFromData).map((user) => (
                  <BottomSheetUserItem
                    key={user.uid}
                    user={user}
                    currentLocation={currentLocation}
                    onPress={() => openUserInfo(user)}
                  />
                ))
              ) : (
                <Text style={{ textAlign: 'center', padding: 20 }}>
                  No one is sharing location with you.
                </Text>
              )}
            </BottomSheetScrollView>
          </BottomSheet>

          {/* ------------- User Info Bottom Sheet Modal (for map items) ------------- */}
          <BottomSheetModal
            ref={userInfoModalRef}
            index={0}
            snapPoints={['32%', '80%']}
            enableDynamicSizing={false}
            onDismiss={closeUserInfo}
            backgroundStyle={{ borderRadius: 20 }}
          >
            {selectedUserInfo && (
              <BottomSheetView style={{ padding: 20 }}>
                <View style={styles.userInfoHeader}>
                  <Text style={styles.userInfoName}>
                    {(`${selectedUserInfo.firstName || ''} ${selectedUserInfo.lastName || ''}`).trim()}
                  </Text>
                  <TouchableOpacity style={styles.userInfoCloseButton} onPress={closeUserInfo}>
                    <MaterialIcons name="close" size={24} color="#000" />
                  </TouchableOpacity>
                </View>
                <Text style={styles.userInfoLocation}>
                  {selectedUserLocationName ? selectedUserLocationName : "Loading location..."}
                </Text>
                <Text style={styles.userInfoTimestamp}>
                  <LiveTimeAgo timestamp={selectedUserInfo.locationTimestamp} />
                </Text>
                <View style={styles.userInfoButtonsContainer}>
                  <TouchableOpacity style={styles.userInfoButton} onPress={handleToggleShare}>
                    <Text style={[styles.userInfoButtonText, { color: userSharingStatus.amSharing ? "red" : COLORS.black }]}>
                      {userSharingStatus.amSharing ? "Stop Sharing My Location" : "Share My Location"}
                    </Text>
                  </TouchableOpacity>
                  <Divider style={{ width: '100%', marginVertical: 5 }} />
                  {userSharingStatus.amReceiving && (
                    <TouchableOpacity style={styles.userInfoButton} onPress={handleRemoveSharing}>
                      <Text style={styles.userInfoButtonText}>
                        Remove {selectedUserInfo.firstName}
                      </Text>
                    </TouchableOpacity>
                  )}
                </View>
              </BottomSheetView>
            )}
          </BottomSheetModal>
        </View>
      </BottomSheetModalProvider>
    </GestureHandlerRootView>
  );
}

/* -------------------------
   Styles
------------------------- */
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  topRow: {
    position: 'absolute',
    top: 10,
    left: 0,
    right: 0,
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 15,
    zIndex: 999,
  },
  iconButton: {
    width: 47,
    height: 47,
    borderRadius: 25,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
    elevation: 3,
  },
  trackButton: {
    position: 'absolute',
    top: 64,
    right: 15,
    width: 47,
    height: 47,
    borderRadius: 25,
    backgroundColor: '#fff',
    justifyContent: 'center',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
    elevation: 3,
    zIndex: 999,
  },
  trackButtonActive: {
    backgroundColor: '#00ADB5',
  },
  currentLocationContainer: {
    alignItems: 'center',
    marginVertical: 20,
  },
  currentLocationText: {
    fontSize: 16,
    textAlign: 'center',
    color: '#000',
  },
  modalContainer: {
    flex: 1,
    backgroundColor: '#fff',
  },
  modalHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 20,
    paddingTop: 20,
    paddingBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
  modalTitle: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#000',
  },
  modalContent: {
    flex: 1,
    paddingHorizontal: 20,
    paddingVertical: 10,
  },
  modalScroll: {
    flexGrow: 1,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    padding: 10,
    marginBottom: 15,
  },
  errorInput: {
    borderColor: 'red',
  },
  label: {
    fontSize: 16,
    color: '#000',
    marginBottom: 5,
    marginTop: 15,
  },
  searchContainer: {
    backgroundColor: 'transparent',
    borderTopWidth: 0,
    borderBottomWidth: 0,
    paddingHorizontal: 0,
    marginBottom: 20,
  },
  searchInputContainer: {
    backgroundColor: '#eee',
    borderRadius: 5,
  },
  searchInput: {
    color: '#000',
  },
  avatarContainer: {
    alignItems: 'center',
    marginVertical: 20,
  },
  avatar: {
    backgroundColor: '#ccc',
  },
  avatarButtonsContainer: {
    flexDirection: 'row',
    marginTop: 10,
  },
  avatarButton: {
    backgroundColor: COLORS.navy,
    paddingHorizontal: 15,
    paddingVertical: 8,
    borderRadius: 10,
    marginHorizontal: 5,
  },
  avatarButtonText: {
    color: '#fff',
  },
  modalFooter: {
    padding: 20,
    borderTopWidth: 1,
    borderColor: '#ccc',
    alignItems: 'center',
  },
  logoutButton: {
    backgroundColor: '#f54242',
    borderRadius: 10,
    paddingHorizontal: 15,
    paddingVertical: 10,
  },
  logoutButtonText: {
    color: '#fff',
    fontSize: 16,
  },
  bottomSheetContent: {
    backgroundColor: 'white',
    paddingBottom: 20,
  },
  bottomSheetTitle: {
    fontSize: 24,
    fontWeight: 'bold',
    padding: 10,
    paddingLeft: 20,
    textAlign: 'left',
  },
  userItemHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  distanceText: {
    fontSize: 14,
    textAlign: 'right',
    color: '#888',
  },
  userInfoHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 10,
  },
  userInfoName: {
    fontSize: 24,
    fontWeight: 'bold',
    flex: 1,
  },
  userInfoCloseButton: {
    width: 36,
    height: 36,
    borderRadius: 18,
    backgroundColor: '#e0e0e0',
    justifyContent: 'center',
    alignItems: 'center',
  },
  userInfoLocation: {
    fontSize: 14,
    color: '#555',
    marginBottom: 5,
  },
  userInfoTimestamp: {
    fontSize: 14,
    color: '#555',
    marginBottom: 15,
  },
  userInfoButtonsContainer: {
    flexDirection: 'column',
    justifyContent: 'space-around',
    padding: 5,
    backgroundColor: COLORS.white,
    borderRadius: 10,
  },
  userInfoButton: {
    // backgroundColor: "red",
    padding: 5,
    borderRadius: 5,
    marginVertical: 5,
    alignItems: 'center',
  },
  userInfoButtonText: {
    color: "red",
    fontSize: 16,
  },
});

const dialogStyles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  dialogBox: {
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 20,
    marginHorizontal: 20,
    width: '80%',
  },
});

const SharingStyles = StyleSheet.create({
  dialogContainer: {
    backgroundColor: '#fff',
    padding: 20,
    marginHorizontal: 20,
    borderRadius: 8,
    alignItems: 'center',
  },
  dialogMessage: {
    fontSize: 16,
    marginBottom: 15,
    textAlign: 'center',
  },
  buttonContainer: {
    marginVertical: 5,
    width: '100%',
  },
});
```

sharingUtils.js
```javascript
// sharingUtils.js
import { ref, update, get } from 'firebase/database';
import { db } from './firebaseConfig';

/**
 * Returns the sharing status between the current user and a target user.
 * @param {string} currentUid – Your UID.
 * @param {string} targetUid – The target user's UID.
 * @returns {Promise<{amSharing: boolean, amReceiving: boolean}>}
 */
export const getSharingStatus = async (currentUid, targetUid) => {
  try {
    // Check whether targetUid is in your sharingWith and receivingFrom lists.
    const sharingWithSnap = await get(ref(db, `users/${currentUid}/sharingWith/${targetUid}`));
    const receivingFromSnap = await get(ref(db, `users/${currentUid}/receivingFrom/${targetUid}`));
    return {
      amSharing: sharingWithSnap.exists(),
      amReceiving: receivingFromSnap.exists(),
    };
  } catch (error) {
    console.error('Error fetching sharing status:', error);
    return { amSharing: false, amReceiving: false };
  }
};

/**
 * Begins sharing your location with the target user.
 */
export const shareLocation = async (currentUid, targetUid) => {
  try {
    const updates = {};
    // Add targetUid to your sharingWith list…
    updates[`users/${currentUid}/sharingWith/${targetUid}`] = true;
    // …and add your uid to the target's receivingFrom list.
    updates[`users/${targetUid}/receivingFrom/${currentUid}`] = true;
    await update(ref(db), updates);
  } catch (error) {
    console.error('Error sharing location:', error);
  }
};

/**
 * Stops sharing your location with the target user.
 */
export const stopSharingLocation = async (currentUid, targetUid) => {
  try {
    const updates = {};
    // Remove targetUid from your sharingWith list…
    updates[`users/${currentUid}/sharingWith/${targetUid}`] = null;
    // …and remove your uid from the target's receivingFrom list.
    updates[`users/${targetUid}/receivingFrom/${currentUid}`] = null;
    await update(ref(db), updates);
  } catch (error) {
    console.error('Error stopping sharing location:', error);
  }
};

/**
 * Stops receiving the target user's location.
 */
export const stopReceivingLocation = async (currentUid, targetUid) => {
  try {
    const updates = {};
    // Remove targetUid from your receivingFrom list…
    updates[`users/${currentUid}/receivingFrom/${targetUid}`] = null;
    // …and remove your uid from the target's sharingWith list.
    updates[`users/${targetUid}/sharingWith/${currentUid}`] = null;
    await update(ref(db), updates);
  } catch (error) {
    console.error('Error stopping receiving location:', error);
  }
};
```

firebaseConfig.js
```javascript
// firebaseConfig.js
import { initializeApp } from 'firebase/app';
import { getDatabase } from 'firebase/database';
import { initializeAuth, getReactNativePersistence } from 'firebase/auth';
import AsyncStorage from '@react-native-async-storage/async-storage';

// Replace with your own Firebase config!
const firebaseConfig = {
    apiKey: "AIzaSyAR24CQPymO-X5-6L-JeKRGfyqXm3n8MOs",
    authDomain: "totob12-loco.firebaseapp.com",
    projectId: "totob12-loco",
    storageBucket: "totob12-loco.firebasestorage.app",
    messagingSenderId: "1079141322842",
    appId: "1:1079141322842:web:ea9606c2ad097ea3f30863"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

// Set up Auth with persistence:
export const auth = initializeAuth(app, {
    persistence: getReactNativePersistence(AsyncStorage),
});

// Initialize and export the Realtime Database instead of Firestore:
export const db = getDatabase(app);
```

package.json
```json
{
  "name": "loco",
  "license": "0BSD",
  "version": "0.1.4",
  "main": "index.js",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@react-native-async-storage/async-storage": "1.23.1",
    "@react-navigation/native": "^7.0.14",
    "@react-navigation/stack": "^7.1.1",
    "@rneui/base": "^4.0.0-rc.7",
    "@rneui/themed": "^4.0.0-rc.8",
    "@rnmapbox/maps": "^10.1.33",
    "dotenv": "^16.4.7",
    "expo": "~52.0.24",
    "expo-background-fetch": "~13.0.4",
    "expo-dev-client": "~5.0.9",
    "expo-image-manipulator": "~13.0.6",
    "expo-image-picker": "~16.0.5",
    "expo-intent-launcher": "~12.0.2",
    "expo-location": "~18.0.5",
    "expo-status-bar": "~2.0.0",
    "expo-task-manager": "~12.0.4",
    "firebase": "^11.1.0",
    "react": "18.3.1",
    "react-native": "0.76.5",
    "react-native-gesture-handler": "~2.20.2",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-maps": "1.18.0",
    "react-native-radar": "^3.19.1",
    "react-native-reanimated": "~3.16.1",
    "react-native-safe-area-context": "4.12.0",
    "react-native-screens": "~4.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}
```

app.config.js
```javscript
import 'dotenv/config';

export default ({ config }) => {
  return {
    ...config,
    "name": "loco",
    "slug": "loco",
    "version": "0.1.5",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "platforms": ["ios", "android"],
    "userInterfaceStyle": "light",
    "newArchEnabled": false,
    "experiments": {
      "turboModules": false,
      "coreModules": false,
      "unoptimizedReports": false,
      "enableAsyncDefaults": false,
      "concurrentRoot": false,
      "fabric": false
    },
    "plugins": [
      [
        "react-native-radar",
        {
          "iosFraud": false,
          // "iosNSLocationWhenInUseUsageDescription": "We use your location to help share your position in real-time.",
          // "iosNSLocationAlwaysAndWhenInUseUsageDescription": "Background location is used so your friends can see your location even if the app is closed.",
          "iosBackgroundMode": true,
          "androidFraud": false,
          "androidBackgroundPermission": true,
          "androidFineLocationPermission": true,
          "addRadarSDKMotion": false
        }
      ],
      [
        "@rnmapbox/maps",
        {
          "RNMapboxMapsDownloadToken": process.env.MAPBOX_DOWNLOADS_TOKEN,
          "RNMapboxMapsVersion": "11.8.0"
        }
      ],
      [
        "expo-location",
        {
          // "locationWhenInUsePermission": "Show current location on map.",
          // "locationAlwaysPermission": "Background location usage...",
          // "locationAlwaysAndWhenInUsePermission": "Allow Loco to use your location.",
          "isIosBackgroundLocationEnabled": true,
          "isAndroidBackgroundLocationEnabled": true
        }
      ],
      ["expo-image-picker"],
      [
        "expo-splash-screen",
        {
          "backgroundColor": "#19456B",
          "image": "./assets/splash.png",
          "imageWidth": 200
        }
      ]
    ],
    "ios": {
      "buildNumber": "0.1.5",
      "supportsTablet": true,
      "bundleIdentifier": "com.antoninbeliard.loco",
      "infoPlist": {
        "UIBackgroundModes": [
          "location",
          "fetch"
        ],
        "NSLocationWhenInUseUsageDescription": "We need your location to show your position on the map and share it with friends.",
        "NSLocationAlwaysAndWhenInUseUsageDescription": "We need background location access to share your live location with friends, even when the app is in the background or closed.",
        "NSLocationAlwaysUsageDescription": "We need background location access to share your live location with friends, even when the app is in the background or closed." // Include this for older iOS versions, even though it's deprecated.
      }
    },
    "android": {
      "package": "com.antoninbeliard.loco",
      "icon": "./assets/icon.png",
      "permissions": [
        "ACCESS_FINE_LOCATION",
        "ACCESS_COARSE_LOCATION",
        "ACCESS_BACKGROUND_LOCATION",
        "FOREGROUND_SERVICE"
      ]
    },
    "permissions": [
      "ACCESS_COARSE_LOCATION",
      "ACCESS_FINE_LOCATION",
      "ACCESS_BACKGROUND_LOCATION",
      "FOREGROUND_SERVICE",
      "FOREGROUND_SERVICE_LOCATION",
      "WAKE_LOCK"
    ],
    "extra": {
      "eas": {
        "projectId": "eacea42d-f4e8-4a94-b43a-f19dc934865e"
      }
    }
  };
};
```

Here is the code that runs my server that will get the Webhooks:

```javascript
// index.js
require('dotenv').config();
const express = require('express');
const crypto = require('crypto');
const admin = require('firebase-admin');

// Initialize Firebase Admin
const serviceAccount = JSON.parse(process.env.FIREBASE_SERVICE_ACCOUNT);

admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
    databaseURL: 'https://totob12-loco-default-rtdb.firebaseio.com/'
});

const app = express();
const PORT = process.env.PORT || 3000;

// Middleware to parse incoming JSON bodies
app.use(express.json());

// Function to verify the Radar webhook signature
function verifyRadarSignature(req) {
    const signingId = req.headers['x-radar-signing-id'];
    const signature = req.headers['x-radar-signature'];

    if (!signingId || !signature) {
        console.error('Missing Radar signature headers.');
        return false;
    }

    // Use the token from an environment variable if set
    const token = process.env.RADAR_WEBHOOK_TOKEN || 'null';
    const hmac = crypto.createHmac('sha1', token);
    hmac.update(signingId);
    const computedSignature = hmac.digest('hex');

    if (computedSignature !== signature) {
        console.error('Invalid Radar signature:', { computedSignature, signature });
        return false;
    }
    return true;
}

// POST endpoint for Radar webhooks
app.post('/api', async (req, res) => {
    // Verify the request is coming from Radar
    if (!verifyRadarSignature(req)) {
        return res.status(403).send('Forbidden: Invalid signature');
    }

    // Radar may send a single event (key: "event") or multiple events (key: "events")
    let events = [];
    if (req.body.event) {
        events.push(req.body.event);
    } else if (req.body.events && Array.isArray(req.body.events)) {
        events = req.body.events;
    } else {
        console.error('No event data found in request body.');
        return res.status(400).send('Bad Request: No event data');
    }

    // console.log(events);

    // Process each event received from Radar
    for (const event of events) {
        try {
            // Extract the user ID. Radar’s payload nests the user info in "user"
            const userId = event.user && event.user.userId ? event.user.userId : null;
            if (!userId) {
                console.error('No userId found in event:', event);
                continue; // Skip this event if no userId is found
            }

            // Ensure that the event contains valid location data
            if (event.location &&
                event.location.coordinates &&
                event.location.coordinates.length === 2) {

                // Radar sends coordinates as [longitude, latitude]
                const [longitude, latitude] = event.location.coordinates;
                // Use the event's createdAt timestamp if available; otherwise use Firebase's server timestamp
                const timestamp = event.createdAt
                    ? new Date(event.createdAt).getTime()
                    : admin.database.ServerValue.TIMESTAMP;

                // Update the user's location in the Firebase Realtime Database
                await admin.database().ref(`users/${userId}`).update({
                    location: { latitude, longitude },
                    locationTimestamp: timestamp,
                });

                console.log(`Updated location for user ${userId}: (${latitude}, ${longitude})`);
            } else {
                console.error('Event does not contain valid location data:', event);
            }
        } catch (error) {
            console.error('Error processing event:', error);
        }
    }

    // Always respond with a 2xx status code to acknowledge receipt
    res.status(200).send('OK');
});

// A simple health-check endpoint (optional)
app.get('/health', (req, res) => {
    res.send('Server is healthy');
});

// Start the server
app.listen(PORT, () => {
    console.log(`Radar Webhook server listening on port ${PORT}`);
});
```

This setup works, but I've got a few issues on iOS. On Android, tapping a user from any of the user lists in the People modal will open a sharing option modal: on iPhone, nothing happens, with no error. After that, I can still move around the app, but the map dowsnt respond.
To fix this, I want to try and replace the Sharing Options Modal with a Bottom Sheet Modal. It will look and feel like the user info bottom sheet modal, but this one should open above the people modal, and show the usual sharing buttons for that user.
I want you to fully develop and implement this. Here is some documentation to help:

```
Usage
Here is a simple usage of the Bottom Sheet Modal, with non-scrollable content. For more scrollable usage please read Scrollables.

import React, { useCallback, useMemo, useRef } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import {
  BottomSheetModal,
  BottomSheetView,
  BottomSheetModalProvider,
} from '@gorhom/bottom-sheet';

const App = () => {
  // ref
  const bottomSheetModalRef = useRef<BottomSheetModal>(null);

  // callbacks
  const handlePresentModalPress = useCallback(() => {
    bottomSheetModalRef.current?.present();
  }, []);
  const handleSheetChanges = useCallback((index: number) => {
    console.log('handleSheetChanges', index);
  }, []);

  // renders
  return (
      <GestureHandlerRootView style={styles.container}>
        <BottomSheetModalProvider>
          <Button
            onPress={handlePresentModalPress}
            title="Present Modal"
            color="black"
          />
          <BottomSheetModal
            ref={bottomSheetModalRef}
            onChange={handleSheetChanges}
          >
            <BottomSheetView style={styles.contentContainer}>
              <Text>Awesome 🎉</Text>
            </BottomSheetView>
        </BottomSheetModal>
        </BottomSheetModalProvider>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    justifyContent: 'center',
    backgroundColor: 'grey',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
  },
});

export default App;
```