feat: static & live location sharing (draft)

android/app/src/main/AndroidManifest.xml

@@ -19,6 +19,16 @@
     <!-- android 13 media permission -->
     <uses-permission android:name="android.permission.READ_MEDIA_AUDIO" />
 
+    <!-- Location -->
+    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+
+    <!-- If you stream/live share or track in background -->
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_LOCATION" />
+    <!-- Optional: only if you truly need background updates on Android 10+ -->
+    <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />
+
     <application
         android:name="chat.rocket.reactnative.MainApplication"
         android:allowBackup="false"

app.json

@@ -1,3 +1,10 @@
 {
-	"name": "RocketChatRN"
+	"name": "RocketChatRN",
+	"plugins": ["expo-web-browser"],
+	"expo": {
+		"extra": {
+			"GOOGLE_MAPS_API_KEY": "",
+			"OSM_API_KEY": ""
+		}
+	}
 }

app/containers/MessageComposer/components/Buttons/ActionsButton.tsx

@@ -9,7 +9,19 @@
 import { useAppSelector, usePermissions } from '../../../../lib/hooks';
 import { useCanUploadFile, useChooseMedia } from '../../hooks';
 import { useRoomContext } from '../../../../views/RoomView/context';
+import { Platform, PermissionsAndroid, InteractionManager } from 'react-native';
+import * as Location from 'expo-location';
+import { showErrorAlert } from '../../../../lib/methods/helpers';
+import { getCurrentPositionOnce } from '../../../../views/LocationShare/services/staticLocation';
+import { MapProviderName } from '../../../../views/LocationShare/services/mapProviders';
+import { useUserPreferences } from '../../../../lib/methods';
+import {
+	MAP_PROVIDER_PREFERENCE_KEY,
+	GOOGLE_MAPS_API_KEY_PREFERENCE_KEY,
+	OSM_API_KEY_PREFERENCE_KEY,
+	MAP_PROVIDER_DEFAULT
+} from '../../../../lib/constants';
 
 export const ActionsButton = () => {
 	const { rid, tmid, t } = useRoomContext();
 	const { closeEmojiKeyboardAndAction } = useContext(MessageInnerContext);
@@ -22,6 +34,30 @@
 	});
 	const { showActionSheet, hideActionSheet } = useActionSheet();
 	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
+	const userId = useAppSelector(state => state.login.user.id);
+
+	const [mapProvider] = useUserPreferences<MapProviderName>(`${MAP_PROVIDER_PREFERENCE_KEY}_${userId}`, MAP_PROVIDER_DEFAULT);
+	const [googleApiKey] = useUserPreferences<string>(`${GOOGLE_MAPS_API_KEY_PREFERENCE_KEY}_${userId}`, '');
+	const [osmApiKey] = useUserPreferences<string>(`${OSM_API_KEY_PREFERENCE_KEY}_${userId}`, '');
+
+	// --- Sheet transition helpers ---
+	const sheetBusyRef = React.useRef(false);
+	/** Safely close the current ActionSheet and then run `fn` (open next sheet) */
+	const openSheetSafely = (fn: () => void, delayMs = 350) => {
+		if (sheetBusyRef.current) return;
+		sheetBusyRef.current = true;
+
+		hideActionSheet();
+		InteractionManager.runAfterInteractions(() => {
+			setTimeout(() => {
+				try {
+					fn();
+				} finally {
+					sheetBusyRef.current = false;
+				}
+			}, delayMs);
+		});
+	};
 
 	const createDiscussion = async () => {
 		if (!rid) return;
@@ -34,62 +70,207 @@
 		}
 	};
 
+	const openCurrentPreview = async (provider: MapProviderName) => {
+		try {
+			if (!rid) {
+				showErrorAlert(I18n.t('Room_not_available'), I18n.t('Oops'));
+				return;
+			}
+
+			if (Platform.OS === 'android') {
+				const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION);
+				if (granted !== PermissionsAndroid.RESULTS.GRANTED) {
+					showErrorAlert(I18n.t('Location_permission_required'), I18n.t('Oops'));
+					return;
+				}
+			} else {
+				const { status } = await Location.requestForegroundPermissionsAsync();
+				if (status !== 'granted') {
+					showErrorAlert(I18n.t('Location_permission_required'), I18n.t('Oops'));
+					return;
+				}
+			}
+
+			const coords = await getCurrentPositionOnce();
+
+			const params = {
+				rid,
+				tmid,
+				provider,
+				coords,
+				googleKey: provider === 'google' ? googleApiKey : undefined,
+				osmKey: provider === 'osm' ? osmApiKey : undefined
+			};
+
+			InteractionManager.runAfterInteractions(() => {
+				if (isMasterDetail) {
+					Navigation.navigate('ModalStackNavigator', { screen: 'LocationPreviewModal', params });
+				} else {
+					Navigation.navigate('LocationPreviewModal', params);
+				}
+			});
+		} catch (e: any) {
+			showErrorAlert(e?.message || I18n.t('Could_not_get_location'), I18n.t('Oops'));
+		}
+	};
+
+	const openLivePreview = async (provider: MapProviderName) => {
+		try {
+			if (!rid) {
+				showErrorAlert(I18n.t('Room_not_available'), I18n.t('Oops'));
+				return;
+			}
+
+			if (Platform.OS === 'android') {
+				const res = await PermissionsAndroid.requestMultiple([
+					PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
+					PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION
+				]);
+				const fine = res[PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION];
+				const coarse = res[PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION];
+				if (fine !== PermissionsAndroid.RESULTS.GRANTED && coarse !== PermissionsAndroid.RESULTS.GRANTED) {
+					throw new Error(I18n.t('Permission_denied'));
+				}
+			} else {
+				const { status } = await Location.requestForegroundPermissionsAsync();
+				if (status !== 'granted') {
+					throw new Error(I18n.t('Location_permission_required'));
+				}
+			}
+
+			const params = {
+				rid,
+				tmid,
+				provider,
+				googleKey: provider === 'google' ? googleApiKey : undefined,
+				osmKey: provider === 'osm' ? osmApiKey : undefined
+			};
+
+			// Defer navigation until after sheets/animations are done
+			InteractionManager.runAfterInteractions(() => {
+				// @ts-ignore
+				if (isMasterDetail) {
+					Navigation.navigate('ModalStackNavigator', { screen: 'LiveLocationPreviewModal', params });
+				} else {
+					Navigation.navigate('LiveLocationPreviewModal', params);
+				}
+			});
+		} catch (e: any) {
+			showErrorAlert(e?.message || I18n.t('Could_not_get_location'), I18n.t('Oops'));
+		}
+	};
+
+	const openModeSheetForProvider = (provider: MapProviderName) => {
+		const modeOptions: TActionSheetOptionsItem[] = [
+			{
+				title: I18n.t('Share_current_location'),
+				icon: 'pin-map',
+				onPress: () => {
+					// sheet -> navigation: close current sheet safely, then start flow
+					openSheetSafely(() => openCurrentPreview(provider));
+				}
+			},
+			{
+				title: I18n.t('Start_live_location'),
+				icon: 'live',
+				onPress: () => {
+					// sheet -> navigation: close current sheet safely, then start flow
+					openSheetSafely(() => openLivePreview(provider));
+				}
+			}
+		];
+		showActionSheet({ options: modeOptions });
+	};
+
 	const onPress = () => {
 		const options: TActionSheetOptionsItem[] = [];
+
 		if (t === 'l' && permissionToViewCannedResponses) {
 			options.push({
 				title: I18n.t('Canned_Responses'),
 				icon: 'canned-response',
-				onPress: () => Navigation.navigate('CannedResponsesListView', { rid })
+				onPress: () => {
+					hideActionSheet();
+					InteractionManager.runAfterInteractions(() => {
+						Navigation.navigate('CannedResponsesListView', { rid });
+					});
+				}
 			});
 		}
+
 		if (permissionToUpload) {
 			options.push(
 				{
 					title: I18n.t('Take_a_photo'),
 					icon: 'camera-photo',
 					onPress: () => {
 						hideActionSheet();
-						// This is necessary because the action sheet does not close properly on Android
-						setTimeout(() => {
+						InteractionManager.runAfterInteractions(() => {
 							takePhoto();
-						}, 250);
+						});
 					}
 				},
 				{
 					title: I18n.t('Take_a_video'),
 					icon: 'camera',
 					onPress: () => {
 						hideActionSheet();
-						// This is necessary because the action sheet does not close properly on Android
-						setTimeout(() => {
+						InteractionManager.runAfterInteractions(() => {
 							takeVideo();
-						}, 250);
+						});
 					}
 				},
 				{
 					title: I18n.t('Choose_from_library'),
 					icon: 'image',
 					onPress: () => {
 						hideActionSheet();
-						// This is necessary because the action sheet does not close properly on Android
-						setTimeout(() => {
+						InteractionManager.runAfterInteractions(() => {
 							chooseFromLibrary();
-						}, 250);
+						});
 					}
 				},
 				{
 					title: I18n.t('Choose_file'),
 					icon: 'attach',
-					onPress: () => chooseFile()
+					onPress: () => {
+						hideActionSheet();
+						InteractionManager.runAfterInteractions(() => {
+							chooseFile();
+						});
+					}
 				}
 			);
 		}
 
 		options.push({
 			title: I18n.t('Create_Discussion'),
 			icon: 'discussions',
-			onPress: () => createDiscussion()
+			onPress: () => {
+				hideActionSheet();
+				InteractionManager.runAfterInteractions(() => {
+					createDiscussion();
+				});
+			}
+		});
+
+		options.push({
+			title: I18n.t('Share_Location'),
+			icon: 'pin-map',
+			onPress: () => {
+				// Check if the user has configured API keys for their preferred provider
+				const needsApiKey = (mapProvider === 'google' && !googleApiKey) || (mapProvider === 'osm' && !osmApiKey);
+
+				if (needsApiKey) {
+					showErrorAlert(
+						I18n.t('API_key_required', { provider: mapProvider === 'google' ? 'Google Maps' : 'OpenStreetMap' }),
+						I18n.t('Please_configure_API_key_in_settings')
+					);
+					return;
+				}
+
+				openSheetSafely(() => openModeSheetForProvider(mapProvider));
+			}
 		});
 
 		closeEmojiKeyboardAndAction(showActionSheet, { options });