From 393937fbe0ea3b00ba35fd79af0462e4258d83dc Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Tue, 3 Mar 2026 15:53:14 -0300
Subject: [PATCH 01/20] base action sheet

---
 app/containers/NewMediaCall/index.tsx         | 59 +++++++++++++++++++
 app/i18n/locales/en.json                      |  2 +
 .../RoomView/components/HeaderCallButton.tsx  | 10 +++-
 3 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 app/containers/NewMediaCall/index.tsx

diff --git a/app/containers/NewMediaCall/index.tsx b/app/containers/NewMediaCall/index.tsx
new file mode 100644
index 00000000000..541d9228c94
--- /dev/null
+++ b/app/containers/NewMediaCall/index.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import I18n from '../../i18n';
+import { useTheme } from '../../theme';
+import { FormTextInput } from '../TextInput';
+import Button from '../Button';
+import sharedStyles from '../../views/Styles';
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		paddingHorizontal: 24
+	},
+	title: {
+		fontSize: 20,
+		lineHeight: 28,
+		...sharedStyles.textBold
+	},
+	inputLabel: {
+		fontSize: 16,
+		lineHeight: 24,
+		marginBottom: 16,
+		...sharedStyles.textRegular
+	},
+	inputContainer: {
+		marginTop: 28,
+		marginBottom: 8
+	}
+});
+
+export const NewMediaCall = (): React.ReactElement => {
+	const { colors } = useTheme();
+
+	return (
+		<View style={styles.container}>
+			<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('New_call')}</Text>
+
+			<FormTextInput
+				containerStyle={styles.inputContainer}
+				iconRight='search'
+				bottomSheet
+				showErrorMessage={false}
+				testID='new-media-call-search-input'
+			/>
+			<Text style={[styles.inputLabel, { color: colors.fontDefault }]}>{I18n.t('Enter_username_or_number')}</Text>
+
+			<Button
+				title={I18n.t('Call')}
+				onPress={() => {}}
+				backgroundColor={colors.buttonBackgroundSuccessDefault}
+				color={colors.buttonFontPrimary}
+				testID='new-media-call-button'
+			/>
+		</View>
+	);
+};
+
+export default NewMediaCall;
diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json
index 34fdb91f4e3..7ca335bb0e4 100644
--- a/app/i18n/locales/en.json
+++ b/app/i18n/locales/en.json
@@ -329,6 +329,7 @@
   "Enter_E2EE_Password_description": "Enter your E2EE password to view and send encrypted messages.\n\nPassword need to be entered on each device.",
   "Enter_manually": "Enter manually",
   "Enter_the_code": "Enter the code we just emailed you.",
+  "Enter_username_or_number": "Enter username or number",
   "Error_Download_file": "Error while downloading file",
   "Error_incorrect_password": "Incorrect password",
   "Error_play_video": "There was an error while playing this video",
@@ -573,6 +574,7 @@
   "Name_required": "Name required",
   "Never": "Never",
   "New_chat_transfer": "New chat transfer: {{agent}} returned the chat to the queue",
+  "New_call": "New call",
   "New_Message": "New message",
   "New_Password": "New password",
   "Next": "Next",
diff --git a/app/views/RoomView/components/HeaderCallButton.tsx b/app/views/RoomView/components/HeaderCallButton.tsx
index fc530f102e8..4645709cbdb 100644
--- a/app/views/RoomView/components/HeaderCallButton.tsx
+++ b/app/views/RoomView/components/HeaderCallButton.tsx
@@ -5,6 +5,8 @@ import { useVideoConf } from '../../../lib/hooks/useVideoConf';
 import { mediaSessionInstance } from '../../../lib/services/voip/MediaSessionInstance';
 import type { TSubscriptionModel } from '../../../definitions';
 import { useMediaCallPermission } from '../../../lib/hooks/useMediaCallPermission';
+import NewMediaCall from '../../../containers/NewMediaCall';
+import { showActionSheetRef } from '../../../containers/ActionSheet';
 
 export const HeaderCallButton = ({
 	rid,
@@ -24,8 +26,12 @@ export const HeaderCallButton = ({
 
 	if (hasMediaCallPermission) {
 		const handlePress = () => {
-			if (!room) return;
-			mediaSessionInstance.startCallByRoom(room);
+			// if (!room) return;
+			// mediaSessionInstance.startCallByRoom(room);
+			showActionSheetRef({
+				children: <NewMediaCall />,
+				snaps: [480]
+			});
 		};
 
 		return (

From 70663fc7eeb8baaff4e99ca0eca089267aa222cb Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Wed, 4 Mar 2026 15:34:32 -0300
Subject: [PATCH 02/20] base autocomplete

---
 app/containers/NewMediaCall/PeerItem.tsx      |  50 ++++++
 app/containers/NewMediaCall/PeerList.tsx      |  30 ++++
 app/containers/NewMediaCall/SelectedPeer.tsx  |  75 +++++++++
 app/containers/NewMediaCall/index.tsx         | 151 +++++++++++++++---
 app/lib/constants/colors.ts                   |   2 +-
 app/lib/constants/defaultSettings.ts          |   3 +
 .../useMediaCallPermission.ts                 |   4 +-
 .../voip/getPeerAutocompleteOptions.ts        | 106 ++++++++++++
 .../services/voip/usePeerAutocompleteStore.ts |  56 +++++++
 9 files changed, 453 insertions(+), 24 deletions(-)
 create mode 100644 app/containers/NewMediaCall/PeerItem.tsx
 create mode 100644 app/containers/NewMediaCall/PeerList.tsx
 create mode 100644 app/containers/NewMediaCall/SelectedPeer.tsx
 create mode 100644 app/lib/services/voip/getPeerAutocompleteOptions.ts
 create mode 100644 app/lib/services/voip/usePeerAutocompleteStore.ts

diff --git a/app/containers/NewMediaCall/PeerItem.tsx b/app/containers/NewMediaCall/PeerItem.tsx
new file mode 100644
index 00000000000..b980510f225
--- /dev/null
+++ b/app/containers/NewMediaCall/PeerItem.tsx
@@ -0,0 +1,50 @@
+import { Pressable, View, Text, StyleSheet } from 'react-native';
+
+import { useTheme } from '../../theme';
+import type { TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
+import { CustomIcon } from '../CustomIcon';
+import Avatar from '../Avatar';
+import Status from '../Status';
+import sharedStyles from '../../views/Styles';
+
+export const PeerItem = ({ item, onSelectOption }: { item: TPeerItem; onSelectOption: (item: TPeerItem) => void }) => {
+	const { colors } = useTheme();
+
+	const isSip = item.type === 'sip';
+
+	return (
+		<Pressable style={styles.row} onPress={() => onSelectOption(item)} testID={`new-media-call-option-${item.value}`}>
+			{isSip ? (
+				<CustomIcon name='phone-in' size={20} color={colors.fontSecondaryInfo} style={{ marginHorizontal: 10 }} />
+			) : (
+				<Avatar text={item.username || item.label} size={28} style={{ marginHorizontal: 10, borderRadius: 4 }} />
+			)}
+			{!isSip ? (
+				<View style={styles.statusWrap}>
+					<Status id={item.value} status={item.status || 'offline'} size={20} />
+				</View>
+			) : null}
+			<Text style={[styles.rowName, { color: colors.fontDefault }]} numberOfLines={1}>
+				{item.label}
+			</Text>
+		</Pressable>
+	);
+};
+
+const styles = StyleSheet.create({
+	row: {
+		minHeight: 54,
+		flexDirection: 'row',
+		alignItems: 'center',
+		paddingHorizontal: 6
+	},
+	rowName: {
+		flex: 1,
+		fontSize: 18,
+		lineHeight: 26,
+		...sharedStyles.textMedium
+	},
+	statusWrap: {
+		marginRight: 10
+	}
+});
diff --git a/app/containers/NewMediaCall/PeerList.tsx b/app/containers/NewMediaCall/PeerList.tsx
new file mode 100644
index 00000000000..208386eb589
--- /dev/null
+++ b/app/containers/NewMediaCall/PeerList.tsx
@@ -0,0 +1,30 @@
+import { FlatList } from 'react-native';
+
+import type { TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
+import { PeerItem } from './PeerItem';
+import * as List from '../List';
+
+export const PeerList = ({
+	shouldShowOptions,
+	options,
+	onSelectOption
+}: {
+	shouldShowOptions: boolean;
+	options: TPeerItem[];
+	onSelectOption: (item: TPeerItem) => void;
+}) => {
+	if (!shouldShowOptions) return null;
+
+	const renderItem = ({ item }: { item: TPeerItem }) => <PeerItem item={item} onSelectOption={onSelectOption} />;
+
+	return (
+		<FlatList
+			data={options}
+			contentContainerStyle={{ flexShrink: 1 }}
+			keyExtractor={item => item.value}
+			keyboardShouldPersistTaps='always'
+			renderItem={renderItem}
+			ItemSeparatorComponent={List.Separator}
+		/>
+	);
+};
diff --git a/app/containers/NewMediaCall/SelectedPeer.tsx b/app/containers/NewMediaCall/SelectedPeer.tsx
new file mode 100644
index 00000000000..fe8c0b6bf4a
--- /dev/null
+++ b/app/containers/NewMediaCall/SelectedPeer.tsx
@@ -0,0 +1,75 @@
+import { View, Pressable, Text, StyleSheet } from 'react-native';
+
+import { useTheme } from '../../theme';
+import { CustomIcon } from '../CustomIcon';
+import Avatar from '../Avatar';
+import Status from '../Status';
+import type { TPeerInfo } from '../../lib/services/voip/getPeerAutocompleteOptions';
+import sharedStyles from '../../views/Styles';
+import I18n from '../../i18n';
+
+const styles = StyleSheet.create({
+	statusWrap: {
+		marginRight: 10
+	},
+	selectedTagContainer: {
+		marginBottom: 16
+	},
+	selectedTag: {
+		alignSelf: 'flex-start',
+		minHeight: 48,
+		borderRadius: 4,
+		paddingHorizontal: 10,
+		flexDirection: 'row',
+		alignItems: 'center'
+	},
+	selectedTagName: {
+		fontSize: 16,
+		lineHeight: 24,
+		...sharedStyles.textMedium
+	},
+	removeButton: {
+		marginLeft: 10,
+		padding: 2
+	}
+});
+
+export const SelectedPeer = ({
+	selectedPeer,
+	selectedLabel,
+	clearSelection
+}: {
+	selectedPeer: TPeerInfo | null;
+	selectedLabel: string;
+	clearSelection: () => void;
+}) => {
+	const { colors } = useTheme();
+
+	if (!selectedPeer) return null;
+
+	return (
+		<View style={styles.selectedTagContainer}>
+			<View style={[styles.selectedTag, { backgroundColor: colors.buttonBackgroundSecondaryDefault }]}>
+				{'number' in selectedPeer ? (
+					<CustomIcon name='phone-in' size={20} color={colors.fontSecondaryInfo} />
+				) : (
+					<>
+						<Avatar text={selectedPeer.username || selectedPeer.displayName} size={28} style={{ borderRadius: 4 }} />
+						<View style={[styles.statusWrap, { marginLeft: 10 }]}>
+							<Status id={selectedPeer.userId} status={selectedPeer.status || 'offline'} size={20} />
+						</View>
+					</>
+				)}
+				<Text style={[styles.selectedTagName, { color: colors.buttonFontSecondary }]}>{selectedLabel}</Text>
+				<Pressable
+					onPress={clearSelection}
+					style={styles.removeButton}
+					accessibilityRole='button'
+					accessibilityLabel={I18n.t('Remove')}
+					testID='new-media-call-clear-selected-peer'>
+					<CustomIcon name='close' size={16} color={colors.buttonFontSecondary} />
+				</Pressable>
+			</View>
+		</View>
+	);
+};
diff --git a/app/containers/NewMediaCall/index.tsx b/app/containers/NewMediaCall/index.tsx
index 541d9228c94..3e9102c7c54 100644
--- a/app/containers/NewMediaCall/index.tsx
+++ b/app/containers/NewMediaCall/index.tsx
@@ -1,57 +1,166 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useMemo, useState } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import I18n from '../../i18n';
 import { useTheme } from '../../theme';
 import { FormTextInput } from '../TextInput';
-import Button from '../Button';
+import Avatar from '../Avatar';
+import { CustomIcon } from '../CustomIcon';
+import Status from '../Status';
 import sharedStyles from '../../views/Styles';
+import { textInputDebounceTime } from '../../lib/constants/debounceConfig';
+import { useDebounce } from '../../lib/methods/helpers';
+import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
+import type { TPeerInfo, TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
+import { mediaSessionInstance } from '../../lib/services/voip/MediaSessionInstance';
+import { hideActionSheetRef } from '../ActionSheet';
+import { PeerList } from './PeerList';
+import { SelectedPeer } from './SelectedPeer';
 
 const styles = StyleSheet.create({
 	container: {
 		flex: 1,
-		paddingHorizontal: 24
+		paddingHorizontal: 16
 	},
 	title: {
 		fontSize: 20,
 		lineHeight: 28,
+		marginTop: 4,
 		...sharedStyles.textBold
 	},
+	searchContainer: {
+		marginTop: 28,
+		marginBottom: 8
+	},
+	searchInputContainer: {
+		marginBottom: 0
+	},
 	inputLabel: {
 		fontSize: 16,
 		lineHeight: 24,
 		marginBottom: 16,
 		...sharedStyles.textRegular
 	},
-	inputContainer: {
-		marginTop: 28,
-		marginBottom: 8
+
+	callButton: {
+		height: 52,
+		marginTop: 32,
+		borderRadius: 4,
+		alignItems: 'center',
+		justifyContent: 'center',
+		flexDirection: 'row',
+		gap: 4
+	},
+	callText: {
+		fontSize: 16,
+		lineHeight: 24,
+		...sharedStyles.textMedium
 	}
 });
 
 export const NewMediaCall = (): React.ReactElement => {
 	const { colors } = useTheme();
+	const [searchText, setSearchText] = useState('');
+
+	const options = usePeerAutocompleteStore(state => state.options);
+	const selectedPeer = usePeerAutocompleteStore(state => state.selectedPeer);
+	const fetchOptions = usePeerAutocompleteStore(state => state.fetchOptions);
+	const setSelectedPeer = usePeerAutocompleteStore(state => state.setSelectedPeer);
+	const setFilter = usePeerAutocompleteStore(state => state.setFilter);
+	const clearSelection = usePeerAutocompleteStore(state => state.clearSelection);
+
+	const debouncedFetchOptions = useDebounce((value: string) => {
+		fetchOptions(value);
+	}, textInputDebounceTime);
+
+	const handleChangeText = (value: string) => {
+		setSearchText(value);
+		setFilter(value);
+		clearSelection();
+		debouncedFetchOptions(value);
+	};
+
+	const handleSelectOption = (option: TPeerItem) => {
+		const peerInfo: TPeerInfo =
+			option.type === 'sip'
+				? { number: option.label }
+				: {
+						userId: option.value,
+						displayName: option.label,
+						username: option.username,
+						callerId: option.callerId,
+						status: option.status
+				  };
+
+		setSelectedPeer(peerInfo);
+		setSearchText('');
+		setFilter('');
+		fetchOptions('');
+	};
+
+	const selectedLabel = useMemo(() => {
+		if (!selectedPeer) {
+			return '';
+		}
+
+		return 'number' in selectedPeer ? selectedPeer.number : selectedPeer.displayName;
+	}, [selectedPeer]);
+
+	const handleCall = () => {
+		if (!selectedPeer) {
+			return;
+		}
+
+		if ('number' in selectedPeer) {
+			mediaSessionInstance.startCall(selectedPeer.number, 'sip');
+		} else {
+			mediaSessionInstance.startCall(selectedPeer.userId, 'user');
+		}
+
+		hideActionSheetRef();
+	};
+
+	const isCallDisabled = !selectedPeer;
+	const shouldShowOptions = !selectedPeer && searchText.trim().length > 0 && options.length > 0;
 
 	return (
-		<View style={styles.container}>
+		<View style={[styles.container, { backgroundColor: colors.surfaceLight }]}>
 			<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('New_call')}</Text>
 
-			<FormTextInput
-				containerStyle={styles.inputContainer}
-				iconRight='search'
-				bottomSheet
-				showErrorMessage={false}
-				testID='new-media-call-search-input'
-			/>
+			<View style={styles.searchContainer}>
+				<FormTextInput
+					containerStyle={styles.searchInputContainer}
+					iconRight='search'
+					bottomSheet
+					showErrorMessage={false}
+					testID='new-media-call-search-input'
+					value={searchText}
+					onChangeText={handleChangeText}
+				/>
+			</View>
 			<Text style={[styles.inputLabel, { color: colors.fontDefault }]}>{I18n.t('Enter_username_or_number')}</Text>
 
-			<Button
-				title={I18n.t('Call')}
-				onPress={() => {}}
-				backgroundColor={colors.buttonBackgroundSuccessDefault}
-				color={colors.buttonFontPrimary}
+			<SelectedPeer selectedPeer={selectedPeer} selectedLabel={selectedLabel} clearSelection={clearSelection} />
+			<PeerList shouldShowOptions={shouldShowOptions} options={options} onSelectOption={handleSelectOption} />
+
+			<Pressable
+				style={[
+					styles.callButton,
+					{
+						backgroundColor: isCallDisabled ? colors.buttonBackgroundSuccessDisabled : colors.buttonBackgroundSuccessDefault
+					}
+				]}
+				disabled={isCallDisabled}
+				onPress={handleCall}
+				accessibilityRole='button'
+				accessibilityLabel={I18n.t('Call')}
 				testID='new-media-call-button'
-			/>
+				android_ripple={{ color: colors.buttonBackgroundSuccessPress }}>
+				<CustomIcon name='phone' size={24} color={isCallDisabled ? colors.buttonPrimaryDisabled : colors.fontWhite} />
+				<Text style={[styles.callText, { color: isCallDisabled ? colors.buttonPrimaryDisabled : colors.fontWhite }]}>
+					{I18n.t('Call')}
+				</Text>
+			</Pressable>
 		</View>
 	);
 };
diff --git a/app/lib/constants/colors.ts b/app/lib/constants/colors.ts
index 2db1dbc6807..b36fe19de57 100644
--- a/app/lib/constants/colors.ts
+++ b/app/lib/constants/colors.ts
@@ -120,7 +120,7 @@ const dark = {
 	fontAnnotation: '#9EA2A8',
 	fontHint: '#9EA2A8',
 	fontSecondaryInfo: '#9EA2A8',
-	fontDefault: '#E4E7EA',
+	fontDefault: '#C1C7D0',
 	fontTitlesLabels: '#F2F3F5',
 	fontInfo: '#739EDE',
 	fontDanger: '#CF6E7A',
diff --git a/app/lib/constants/defaultSettings.ts b/app/lib/constants/defaultSettings.ts
index be63b56c559..d137e23905b 100644
--- a/app/lib/constants/defaultSettings.ts
+++ b/app/lib/constants/defaultSettings.ts
@@ -312,5 +312,8 @@ export const defaultSettings = {
 	VoIP_TeamCollab_Ice_Gathering_Timeout: {
 		type: 'valueAsNumber'
 	},
+	VoIP_TeamCollab_SIP_Integration_For_Internal_Calls: {
+		type: 'valueAsBoolean'
+	},
 	...deprecatedSettings
 } as const;
diff --git a/app/lib/hooks/useMediaCallPermission/useMediaCallPermission.ts b/app/lib/hooks/useMediaCallPermission/useMediaCallPermission.ts
index 15e039bcf9f..e0f9afd4f5a 100644
--- a/app/lib/hooks/useMediaCallPermission/useMediaCallPermission.ts
+++ b/app/lib/hooks/useMediaCallPermission/useMediaCallPermission.ts
@@ -2,8 +2,8 @@ import { useAppSelector } from '../useAppSelector';
 import { usePermissions } from '../usePermissions';
 
 export const useMediaCallPermission = () => {
-	const enterpriseModules = useAppSelector(state => state.enterpriseModules);
-	const isVoipModuleAvailable = enterpriseModules.includes('teams-voip');
+	// const enterpriseModules = useAppSelector(state => state.enterpriseModules);
+	const isVoipModuleAvailable = true; // enterpriseModules.includes('teams-voip');
 	const [allowInternalVoiceCall, allowExternalVoiceCall] = usePermissions([
 		'allow-internal-voice-calls',
 		'allow-external-voice-calls'
diff --git a/app/lib/services/voip/getPeerAutocompleteOptions.ts b/app/lib/services/voip/getPeerAutocompleteOptions.ts
new file mode 100644
index 00000000000..dc7f58f5264
--- /dev/null
+++ b/app/lib/services/voip/getPeerAutocompleteOptions.ts
@@ -0,0 +1,106 @@
+import type { TUserStatus } from '../../../definitions';
+import { usersAutoComplete } from '../restApi';
+import { store as reduxStore } from '../../store/auxStore';
+
+export type TPeerItem =
+	| { type: 'user'; value: string; label: string; username?: string; callerId?: string; status?: TUserStatus }
+	| { type: 'sip'; value: string; label: string };
+
+export type TPeerInfo =
+	| { userId: string; displayName: string; username?: string; callerId?: string; status?: TUserStatus }
+	| { number: string };
+
+type TUserAutocompleteResponse = {
+	success?: boolean;
+	items?: Array<{
+		_id: string;
+		name?: string;
+		username?: string;
+		freeSwitchExtension?: string;
+		status?: TUserStatus;
+	}>;
+};
+
+const getExtensionFromPeerInfo = (peerInfo?: TPeerInfo | null): string | undefined => {
+	if (!peerInfo) {
+		return undefined;
+	}
+
+	if ('callerId' in peerInfo) {
+		return peerInfo.callerId;
+	}
+
+	if ('number' in peerInfo) {
+		return peerInfo.number;
+	}
+
+	return undefined;
+};
+
+const getPeerUsername = (peerInfo?: TPeerInfo | null): string | undefined => {
+	if (!peerInfo || !('username' in peerInfo)) {
+		return undefined;
+	}
+
+	return peerInfo.username;
+};
+
+// TODO: hook?
+export const getPeerAutocompleteOptions = async ({
+	filter,
+	peerInfo
+}: {
+	filter: string;
+	peerInfo?: TPeerInfo | null;
+}): Promise<TPeerItem[]> => {
+	const term = filter.trim();
+	if (!term) {
+		return [];
+	}
+
+	const currentUsername = reduxStore.getState().login.user.username as string | undefined;
+	const peerUsername = getPeerUsername(peerInfo);
+	const peerExtension = getExtensionFromPeerInfo(peerInfo);
+	const forceSIPRouting = Boolean(reduxStore.getState().settings.VoIP_TeamCollab_SIP_Integration_For_Internal_Calls);
+
+	const conditions =
+		peerExtension || forceSIPRouting
+			? {
+					$and: [
+						forceSIPRouting ? { freeSwitchExtension: { $exists: true } } : null,
+						peerExtension ? { freeSwitchExtension: { $ne: peerExtension } } : null
+					].filter(Boolean)
+			  }
+			: undefined;
+
+	const exceptions = [currentUsername, peerUsername].filter(Boolean);
+	const selector = {
+		term,
+		exceptions,
+		...(conditions && { conditions })
+	};
+
+	const response = (await usersAutoComplete(selector)) as TUserAutocompleteResponse;
+	const canUseItems = response?.success ?? true;
+
+	const userOptions: TPeerItem[] = canUseItems
+		? (response?.items || [])
+				.filter(item => !!item?._id && !!(item.name || item.username))
+				.map(item => ({
+					type: 'user',
+					value: item._id,
+					label: item.name || item.username || '',
+					username: item.username,
+					callerId: item.freeSwitchExtension,
+					status: item.status
+				}))
+		: [];
+
+	const sipOption: TPeerItem = {
+		type: 'sip',
+		value: term,
+		label: term
+	};
+
+	return [sipOption, ...userOptions];
+};
diff --git a/app/lib/services/voip/usePeerAutocompleteStore.ts b/app/lib/services/voip/usePeerAutocompleteStore.ts
new file mode 100644
index 00000000000..eb832e0314e
--- /dev/null
+++ b/app/lib/services/voip/usePeerAutocompleteStore.ts
@@ -0,0 +1,56 @@
+import { create } from 'zustand';
+
+import { getPeerAutocompleteOptions, type TPeerInfo, type TPeerOption } from './getPeerAutocompleteOptions';
+
+type TPeerAutocompleteState = {
+	options: TPeerOption[];
+	selectedPeer: TPeerInfo | null;
+	filter: string;
+};
+
+type TPeerAutocompleteActions = {
+	fetchOptions: (filter: string) => Promise<void>;
+	setSelectedPeer: (peer: TPeerInfo | null) => void;
+	setFilter: (filter: string) => void;
+	clearSelection: () => void;
+};
+
+export type TPeerAutocompleteStore = TPeerAutocompleteState & TPeerAutocompleteActions;
+
+export const usePeerAutocompleteStore = create<TPeerAutocompleteStore>((set, get) => ({
+	options: [],
+	selectedPeer: null,
+	filter: '',
+
+	fetchOptions: async (filter: string) => {
+		const term = filter.trim();
+		if (!term) {
+			set({ options: [] });
+			return;
+		}
+
+		try {
+			const currentPeer = get().selectedPeer;
+			const options = await getPeerAutocompleteOptions({
+				filter: term,
+				peerInfo: currentPeer
+			});
+
+			set({ options });
+		} catch {
+			// Keep current data on failure as requested
+		}
+	},
+
+	setSelectedPeer: (peer: TPeerInfo | null) => {
+		set({ selectedPeer: peer });
+	},
+
+	setFilter: (filter: string) => {
+		set({ filter });
+	},
+
+	clearSelection: () => {
+		set({ selectedPeer: null });
+	}
+}));

From 62b723aa0ef41019752270be35bd848bf126100c Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Wed, 4 Mar 2026 15:55:35 -0300
Subject: [PATCH 03/20] refactor components

---
 app/containers/NewMediaCall/Container.tsx     |  76 ++++++++
 app/containers/NewMediaCall/CreateCall.tsx    |  70 +++++++
 app/containers/NewMediaCall/PeerList.tsx      |  40 ++--
 app/containers/NewMediaCall/SelectedPeer.tsx  |  79 ++++----
 app/containers/NewMediaCall/index.tsx         | 174 ++----------------
 .../services/voip/usePeerAutocompleteStore.ts |   6 +-
 6 files changed, 229 insertions(+), 216 deletions(-)
 create mode 100644 app/containers/NewMediaCall/Container.tsx
 create mode 100644 app/containers/NewMediaCall/CreateCall.tsx

diff --git a/app/containers/NewMediaCall/Container.tsx b/app/containers/NewMediaCall/Container.tsx
new file mode 100644
index 00000000000..b8061da6d1c
--- /dev/null
+++ b/app/containers/NewMediaCall/Container.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import I18n from '../../i18n';
+import { useTheme } from '../../theme';
+import { FormTextInput } from '../TextInput';
+import sharedStyles from '../../views/Styles';
+import { textInputDebounceTime } from '../../lib/constants/debounceConfig';
+import { useDebounce } from '../../lib/methods/helpers';
+import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		paddingHorizontal: 16
+	},
+	title: {
+		fontSize: 20,
+		lineHeight: 28,
+		marginTop: 4,
+		...sharedStyles.textBold
+	},
+	searchContainer: {
+		marginTop: 28,
+		marginBottom: 8
+	},
+	searchInputContainer: {
+		marginBottom: 0
+	},
+	inputLabel: {
+		fontSize: 16,
+		lineHeight: 24,
+		marginBottom: 16,
+		...sharedStyles.textRegular
+	}
+});
+
+export const Container = ({ children }: { children: React.ReactElement[] }) => {
+	const { colors } = useTheme();
+
+	const filter = usePeerAutocompleteStore(state => state.filter);
+	const setFilter = usePeerAutocompleteStore(state => state.setFilter);
+	const fetchOptions = usePeerAutocompleteStore(state => state.fetchOptions);
+	const clearSelection = usePeerAutocompleteStore(state => state.clearSelection);
+
+	const debouncedFetchOptions = useDebounce((value: string) => {
+		fetchOptions(value);
+	}, textInputDebounceTime);
+
+	const handleChangeText = (value: string) => {
+		setFilter(value);
+		clearSelection();
+		debouncedFetchOptions(value);
+	};
+
+	return (
+		<View style={[styles.container, { backgroundColor: colors.surfaceLight }]}>
+			<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('New_call')}</Text>
+
+			<View style={styles.searchContainer}>
+				<FormTextInput
+					containerStyle={styles.searchInputContainer}
+					iconRight='search'
+					bottomSheet
+					showErrorMessage={false}
+					testID='new-media-call-search-input'
+					onChangeText={handleChangeText}
+					value={filter}
+				/>
+			</View>
+			<Text style={[styles.inputLabel, { color: colors.fontDefault }]}>{I18n.t('Enter_username_or_number')}</Text>
+
+			{children}
+		</View>
+	);
+};
diff --git a/app/containers/NewMediaCall/CreateCall.tsx b/app/containers/NewMediaCall/CreateCall.tsx
new file mode 100644
index 00000000000..c7ad288f75d
--- /dev/null
+++ b/app/containers/NewMediaCall/CreateCall.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text } from 'react-native';
+
+import I18n from '../../i18n';
+import { useTheme } from '../../theme';
+import { CustomIcon } from '../CustomIcon';
+import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
+import { mediaSessionInstance } from '../../lib/services/voip/MediaSessionInstance';
+import { hideActionSheetRef } from '../ActionSheet';
+import sharedStyles from '../../views/Styles';
+
+const styles = StyleSheet.create({
+	callButton: {
+		height: 52,
+		marginTop: 32,
+		borderRadius: 4,
+		alignItems: 'center',
+		justifyContent: 'center',
+		flexDirection: 'row',
+		gap: 4
+	},
+	callText: {
+		fontSize: 16,
+		lineHeight: 24,
+		...sharedStyles.textMedium
+	}
+});
+
+export const CreateCall = () => {
+	const { colors } = useTheme();
+
+	const selectedPeer = usePeerAutocompleteStore(state => state.selectedPeer);
+
+	const handleCall = () => {
+		if (!selectedPeer) {
+			return;
+		}
+
+		if ('number' in selectedPeer) {
+			mediaSessionInstance.startCall(selectedPeer.number, 'sip');
+		} else {
+			mediaSessionInstance.startCall(selectedPeer.userId, 'user');
+		}
+
+		hideActionSheetRef();
+	};
+
+	const isCallDisabled = !selectedPeer;
+
+	return (
+		<Pressable
+			style={[
+				styles.callButton,
+				{
+					backgroundColor: isCallDisabled ? colors.buttonBackgroundSuccessDisabled : colors.buttonBackgroundSuccessDefault
+				}
+			]}
+			disabled={isCallDisabled}
+			onPress={handleCall}
+			accessibilityRole='button'
+			accessibilityLabel={I18n.t('Call')}
+			testID='new-media-call-button'
+			android_ripple={{ color: colors.buttonBackgroundSuccessPress }}>
+			<CustomIcon name='phone' size={24} color={isCallDisabled ? colors.buttonPrimaryDisabled : colors.fontWhite} />
+			<Text style={[styles.callText, { color: isCallDisabled ? colors.buttonPrimaryDisabled : colors.fontWhite }]}>
+				{I18n.t('Call')}
+			</Text>
+		</Pressable>
+	);
+};
diff --git a/app/containers/NewMediaCall/PeerList.tsx b/app/containers/NewMediaCall/PeerList.tsx
index 208386eb589..315345d6341 100644
--- a/app/containers/NewMediaCall/PeerList.tsx
+++ b/app/containers/NewMediaCall/PeerList.tsx
@@ -1,21 +1,37 @@
 import { FlatList } from 'react-native';
 
-import type { TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
+import type { TPeerInfo, TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
 import { PeerItem } from './PeerItem';
 import * as List from '../List';
+import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
 
-export const PeerList = ({
-	shouldShowOptions,
-	options,
-	onSelectOption
-}: {
-	shouldShowOptions: boolean;
-	options: TPeerItem[];
-	onSelectOption: (item: TPeerItem) => void;
-}) => {
-	if (!shouldShowOptions) return null;
+export const PeerList = () => {
+	const setSelectedPeer = usePeerAutocompleteStore(state => state.setSelectedPeer);
+	const selectedPeer = usePeerAutocompleteStore(state => state.selectedPeer);
+	const setFilter = usePeerAutocompleteStore(state => state.setFilter);
+	const fetchOptions = usePeerAutocompleteStore(state => state.fetchOptions);
+	const options = usePeerAutocompleteStore(state => state.options);
 
-	const renderItem = ({ item }: { item: TPeerItem }) => <PeerItem item={item} onSelectOption={onSelectOption} />;
+	if (selectedPeer) return null;
+
+	const handleSelectOption = (option: TPeerItem) => {
+		const peerInfo: TPeerInfo =
+			option.type === 'sip'
+				? { number: option.label }
+				: {
+						userId: option.value,
+						displayName: option.label,
+						username: option.username,
+						callerId: option.callerId,
+						status: option.status
+				  };
+
+		setSelectedPeer(peerInfo);
+		setFilter('');
+		fetchOptions('');
+	};
+
+	const renderItem = ({ item }: { item: TPeerItem }) => <PeerItem item={item} onSelectOption={handleSelectOption} />;
 
 	return (
 		<FlatList
diff --git a/app/containers/NewMediaCall/SelectedPeer.tsx b/app/containers/NewMediaCall/SelectedPeer.tsx
index fe8c0b6bf4a..4caf7a99659 100644
--- a/app/containers/NewMediaCall/SelectedPeer.tsx
+++ b/app/containers/NewMediaCall/SelectedPeer.tsx
@@ -1,49 +1,26 @@
+import { useMemo } from 'react';
 import { View, Pressable, Text, StyleSheet } from 'react-native';
 
 import { useTheme } from '../../theme';
 import { CustomIcon } from '../CustomIcon';
 import Avatar from '../Avatar';
 import Status from '../Status';
-import type { TPeerInfo } from '../../lib/services/voip/getPeerAutocompleteOptions';
 import sharedStyles from '../../views/Styles';
 import I18n from '../../i18n';
+import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
 
-const styles = StyleSheet.create({
-	statusWrap: {
-		marginRight: 10
-	},
-	selectedTagContainer: {
-		marginBottom: 16
-	},
-	selectedTag: {
-		alignSelf: 'flex-start',
-		minHeight: 48,
-		borderRadius: 4,
-		paddingHorizontal: 10,
-		flexDirection: 'row',
-		alignItems: 'center'
-	},
-	selectedTagName: {
-		fontSize: 16,
-		lineHeight: 24,
-		...sharedStyles.textMedium
-	},
-	removeButton: {
-		marginLeft: 10,
-		padding: 2
-	}
-});
-
-export const SelectedPeer = ({
-	selectedPeer,
-	selectedLabel,
-	clearSelection
-}: {
-	selectedPeer: TPeerInfo | null;
-	selectedLabel: string;
-	clearSelection: () => void;
-}) => {
+export const SelectedPeer = () => {
 	const { colors } = useTheme();
+	const selectedPeer = usePeerAutocompleteStore(state => state.selectedPeer);
+	const clearSelection = usePeerAutocompleteStore(state => state.clearSelection);
+
+	const selectedLabel = useMemo(() => {
+		if (!selectedPeer) {
+			return '';
+		}
+
+		return 'number' in selectedPeer ? selectedPeer.number : selectedPeer.displayName;
+	}, [selectedPeer]);
 
 	if (!selectedPeer) return null;
 
@@ -54,8 +31,8 @@ export const SelectedPeer = ({
 					<CustomIcon name='phone-in' size={20} color={colors.fontSecondaryInfo} />
 				) : (
 					<>
-						<Avatar text={selectedPeer.username || selectedPeer.displayName} size={28} style={{ borderRadius: 4 }} />
-						<View style={[styles.statusWrap, { marginLeft: 10 }]}>
+						<Avatar text={selectedPeer.username || selectedPeer.displayName} size={28} />
+						<View style={styles.statusWrap}>
 							<Status id={selectedPeer.userId} status={selectedPeer.status || 'offline'} size={20} />
 						</View>
 					</>
@@ -73,3 +50,29 @@ export const SelectedPeer = ({
 		</View>
 	);
 };
+
+const styles = StyleSheet.create({
+	statusWrap: {
+		marginRight: 10
+	},
+	selectedTagContainer: {
+		marginBottom: 16
+	},
+	selectedTag: {
+		alignSelf: 'flex-start',
+		minHeight: 48,
+		borderRadius: 4,
+		paddingHorizontal: 10,
+		flexDirection: 'row',
+		alignItems: 'center'
+	},
+	selectedTagName: {
+		fontSize: 16,
+		lineHeight: 24,
+		...sharedStyles.textMedium
+	},
+	removeButton: {
+		marginLeft: 10,
+		padding: 2
+	}
+});
diff --git a/app/containers/NewMediaCall/index.tsx b/app/containers/NewMediaCall/index.tsx
index 3e9102c7c54..12d8e1c1837 100644
--- a/app/containers/NewMediaCall/index.tsx
+++ b/app/containers/NewMediaCall/index.tsx
@@ -1,168 +1,16 @@
-import React, { useMemo, useState } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import React from 'react';
 
-import I18n from '../../i18n';
-import { useTheme } from '../../theme';
-import { FormTextInput } from '../TextInput';
-import Avatar from '../Avatar';
-import { CustomIcon } from '../CustomIcon';
-import Status from '../Status';
-import sharedStyles from '../../views/Styles';
-import { textInputDebounceTime } from '../../lib/constants/debounceConfig';
-import { useDebounce } from '../../lib/methods/helpers';
-import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
-import type { TPeerInfo, TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
-import { mediaSessionInstance } from '../../lib/services/voip/MediaSessionInstance';
-import { hideActionSheetRef } from '../ActionSheet';
 import { PeerList } from './PeerList';
 import { SelectedPeer } from './SelectedPeer';
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		paddingHorizontal: 16
-	},
-	title: {
-		fontSize: 20,
-		lineHeight: 28,
-		marginTop: 4,
-		...sharedStyles.textBold
-	},
-	searchContainer: {
-		marginTop: 28,
-		marginBottom: 8
-	},
-	searchInputContainer: {
-		marginBottom: 0
-	},
-	inputLabel: {
-		fontSize: 16,
-		lineHeight: 24,
-		marginBottom: 16,
-		...sharedStyles.textRegular
-	},
-
-	callButton: {
-		height: 52,
-		marginTop: 32,
-		borderRadius: 4,
-		alignItems: 'center',
-		justifyContent: 'center',
-		flexDirection: 'row',
-		gap: 4
-	},
-	callText: {
-		fontSize: 16,
-		lineHeight: 24,
-		...sharedStyles.textMedium
-	}
-});
-
-export const NewMediaCall = (): React.ReactElement => {
-	const { colors } = useTheme();
-	const [searchText, setSearchText] = useState('');
-
-	const options = usePeerAutocompleteStore(state => state.options);
-	const selectedPeer = usePeerAutocompleteStore(state => state.selectedPeer);
-	const fetchOptions = usePeerAutocompleteStore(state => state.fetchOptions);
-	const setSelectedPeer = usePeerAutocompleteStore(state => state.setSelectedPeer);
-	const setFilter = usePeerAutocompleteStore(state => state.setFilter);
-	const clearSelection = usePeerAutocompleteStore(state => state.clearSelection);
-
-	const debouncedFetchOptions = useDebounce((value: string) => {
-		fetchOptions(value);
-	}, textInputDebounceTime);
-
-	const handleChangeText = (value: string) => {
-		setSearchText(value);
-		setFilter(value);
-		clearSelection();
-		debouncedFetchOptions(value);
-	};
-
-	const handleSelectOption = (option: TPeerItem) => {
-		const peerInfo: TPeerInfo =
-			option.type === 'sip'
-				? { number: option.label }
-				: {
-						userId: option.value,
-						displayName: option.label,
-						username: option.username,
-						callerId: option.callerId,
-						status: option.status
-				  };
-
-		setSelectedPeer(peerInfo);
-		setSearchText('');
-		setFilter('');
-		fetchOptions('');
-	};
-
-	const selectedLabel = useMemo(() => {
-		if (!selectedPeer) {
-			return '';
-		}
-
-		return 'number' in selectedPeer ? selectedPeer.number : selectedPeer.displayName;
-	}, [selectedPeer]);
-
-	const handleCall = () => {
-		if (!selectedPeer) {
-			return;
-		}
-
-		if ('number' in selectedPeer) {
-			mediaSessionInstance.startCall(selectedPeer.number, 'sip');
-		} else {
-			mediaSessionInstance.startCall(selectedPeer.userId, 'user');
-		}
-
-		hideActionSheetRef();
-	};
-
-	const isCallDisabled = !selectedPeer;
-	const shouldShowOptions = !selectedPeer && searchText.trim().length > 0 && options.length > 0;
-
-	return (
-		<View style={[styles.container, { backgroundColor: colors.surfaceLight }]}>
-			<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('New_call')}</Text>
-
-			<View style={styles.searchContainer}>
-				<FormTextInput
-					containerStyle={styles.searchInputContainer}
-					iconRight='search'
-					bottomSheet
-					showErrorMessage={false}
-					testID='new-media-call-search-input'
-					value={searchText}
-					onChangeText={handleChangeText}
-				/>
-			</View>
-			<Text style={[styles.inputLabel, { color: colors.fontDefault }]}>{I18n.t('Enter_username_or_number')}</Text>
-
-			<SelectedPeer selectedPeer={selectedPeer} selectedLabel={selectedLabel} clearSelection={clearSelection} />
-			<PeerList shouldShowOptions={shouldShowOptions} options={options} onSelectOption={handleSelectOption} />
-
-			<Pressable
-				style={[
-					styles.callButton,
-					{
-						backgroundColor: isCallDisabled ? colors.buttonBackgroundSuccessDisabled : colors.buttonBackgroundSuccessDefault
-					}
-				]}
-				disabled={isCallDisabled}
-				onPress={handleCall}
-				accessibilityRole='button'
-				accessibilityLabel={I18n.t('Call')}
-				testID='new-media-call-button'
-				android_ripple={{ color: colors.buttonBackgroundSuccessPress }}>
-				<CustomIcon name='phone' size={24} color={isCallDisabled ? colors.buttonPrimaryDisabled : colors.fontWhite} />
-				<Text style={[styles.callText, { color: isCallDisabled ? colors.buttonPrimaryDisabled : colors.fontWhite }]}>
-					{I18n.t('Call')}
-				</Text>
-			</Pressable>
-		</View>
-	);
-};
+import { Container } from './Container';
+import { CreateCall } from './CreateCall';
+
+export const NewMediaCall = (): React.ReactElement => (
+	<Container>
+		<SelectedPeer />
+		<PeerList />
+		<CreateCall />
+	</Container>
+);
 
 export default NewMediaCall;
diff --git a/app/lib/services/voip/usePeerAutocompleteStore.ts b/app/lib/services/voip/usePeerAutocompleteStore.ts
index eb832e0314e..cec2a065242 100644
--- a/app/lib/services/voip/usePeerAutocompleteStore.ts
+++ b/app/lib/services/voip/usePeerAutocompleteStore.ts
@@ -1,9 +1,9 @@
 import { create } from 'zustand';
 
-import { getPeerAutocompleteOptions, type TPeerInfo, type TPeerOption } from './getPeerAutocompleteOptions';
+import { getPeerAutocompleteOptions, type TPeerInfo, type TPeerItem } from './getPeerAutocompleteOptions';
 
 type TPeerAutocompleteState = {
-	options: TPeerOption[];
+	options: TPeerItem[];
 	selectedPeer: TPeerInfo | null;
 	filter: string;
 };
@@ -38,7 +38,7 @@ export const usePeerAutocompleteStore = create<TPeerAutocompleteStore>((set, get
 
 			set({ options });
 		} catch {
-			// Keep current data on failure as requested
+			console.log('Failed to fetch options');
 		}
 	},
 

From 9ef3a0e2ad74dfdb32d05f09ea0a0bc71fbe441c Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Wed, 4 Mar 2026 16:50:33 -0300
Subject: [PATCH 04/20] Small refactor and auto fill peer

---
 app/containers/NewMediaCall/Container.tsx     | 53 ++++++++++---------
 app/containers/NewMediaCall/CreateCall.tsx    | 34 ++++++------
 app/containers/NewMediaCall/PeerItem.tsx      |  2 +-
 app/containers/NewMediaCall/SelectedPeer.tsx  |  2 +-
 .../RoomView/components/HeaderCallButton.tsx  | 12 +++--
 5 files changed, 53 insertions(+), 50 deletions(-)

diff --git a/app/containers/NewMediaCall/Container.tsx b/app/containers/NewMediaCall/Container.tsx
index b8061da6d1c..bfff6f6a8a3 100644
--- a/app/containers/NewMediaCall/Container.tsx
+++ b/app/containers/NewMediaCall/Container.tsx
@@ -9,32 +9,6 @@ import { textInputDebounceTime } from '../../lib/constants/debounceConfig';
 import { useDebounce } from '../../lib/methods/helpers';
 import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
 
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		paddingHorizontal: 16
-	},
-	title: {
-		fontSize: 20,
-		lineHeight: 28,
-		marginTop: 4,
-		...sharedStyles.textBold
-	},
-	searchContainer: {
-		marginTop: 28,
-		marginBottom: 8
-	},
-	searchInputContainer: {
-		marginBottom: 0
-	},
-	inputLabel: {
-		fontSize: 16,
-		lineHeight: 24,
-		marginBottom: 16,
-		...sharedStyles.textRegular
-	}
-});
-
 export const Container = ({ children }: { children: React.ReactElement[] }) => {
 	const { colors } = useTheme();
 
@@ -74,3 +48,30 @@ export const Container = ({ children }: { children: React.ReactElement[] }) => {
 		</View>
 	);
 };
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		paddingHorizontal: 16,
+		paddingTop: 16
+	},
+	title: {
+		fontSize: 20,
+		lineHeight: 28,
+		marginTop: 4,
+		...sharedStyles.textBold
+	},
+	searchContainer: {
+		marginTop: 28,
+		marginBottom: 8
+	},
+	searchInputContainer: {
+		marginBottom: 0
+	},
+	inputLabel: {
+		fontSize: 16,
+		lineHeight: 24,
+		marginBottom: 16,
+		...sharedStyles.textRegular
+	}
+});
diff --git a/app/containers/NewMediaCall/CreateCall.tsx b/app/containers/NewMediaCall/CreateCall.tsx
index c7ad288f75d..04735da317e 100644
--- a/app/containers/NewMediaCall/CreateCall.tsx
+++ b/app/containers/NewMediaCall/CreateCall.tsx
@@ -9,23 +9,6 @@ import { mediaSessionInstance } from '../../lib/services/voip/MediaSessionInstan
 import { hideActionSheetRef } from '../ActionSheet';
 import sharedStyles from '../../views/Styles';
 
-const styles = StyleSheet.create({
-	callButton: {
-		height: 52,
-		marginTop: 32,
-		borderRadius: 4,
-		alignItems: 'center',
-		justifyContent: 'center',
-		flexDirection: 'row',
-		gap: 4
-	},
-	callText: {
-		fontSize: 16,
-		lineHeight: 24,
-		...sharedStyles.textMedium
-	}
-});
-
 export const CreateCall = () => {
 	const { colors } = useTheme();
 
@@ -68,3 +51,20 @@ export const CreateCall = () => {
 		</Pressable>
 	);
 };
+
+const styles = StyleSheet.create({
+	callButton: {
+		height: 52,
+		marginTop: 32,
+		borderRadius: 4,
+		alignItems: 'center',
+		justifyContent: 'center',
+		flexDirection: 'row',
+		gap: 4
+	},
+	callText: {
+		fontSize: 16,
+		lineHeight: 24,
+		...sharedStyles.textMedium
+	}
+});
diff --git a/app/containers/NewMediaCall/PeerItem.tsx b/app/containers/NewMediaCall/PeerItem.tsx
index b980510f225..7915e988cc8 100644
--- a/app/containers/NewMediaCall/PeerItem.tsx
+++ b/app/containers/NewMediaCall/PeerItem.tsx
@@ -21,7 +21,7 @@ export const PeerItem = ({ item, onSelectOption }: { item: TPeerItem; onSelectOp
 			)}
 			{!isSip ? (
 				<View style={styles.statusWrap}>
-					<Status id={item.value} status={item.status || 'offline'} size={20} />
+					<Status id={item.value} size={20} />
 				</View>
 			) : null}
 			<Text style={[styles.rowName, { color: colors.fontDefault }]} numberOfLines={1}>
diff --git a/app/containers/NewMediaCall/SelectedPeer.tsx b/app/containers/NewMediaCall/SelectedPeer.tsx
index 4caf7a99659..3654b7cde72 100644
--- a/app/containers/NewMediaCall/SelectedPeer.tsx
+++ b/app/containers/NewMediaCall/SelectedPeer.tsx
@@ -33,7 +33,7 @@ export const SelectedPeer = () => {
 					<>
 						<Avatar text={selectedPeer.username || selectedPeer.displayName} size={28} />
 						<View style={styles.statusWrap}>
-							<Status id={selectedPeer.userId} status={selectedPeer.status || 'offline'} size={20} />
+							<Status id={selectedPeer.userId} size={20} />
 						</View>
 					</>
 				)}
diff --git a/app/views/RoomView/components/HeaderCallButton.tsx b/app/views/RoomView/components/HeaderCallButton.tsx
index 4645709cbdb..74a6a2fa5f5 100644
--- a/app/views/RoomView/components/HeaderCallButton.tsx
+++ b/app/views/RoomView/components/HeaderCallButton.tsx
@@ -2,11 +2,12 @@ import React from 'react';
 
 import * as HeaderButton from '../../../containers/Header/components/HeaderButton';
 import { useVideoConf } from '../../../lib/hooks/useVideoConf';
-import { mediaSessionInstance } from '../../../lib/services/voip/MediaSessionInstance';
 import type { TSubscriptionModel } from '../../../definitions';
 import { useMediaCallPermission } from '../../../lib/hooks/useMediaCallPermission';
 import NewMediaCall from '../../../containers/NewMediaCall';
 import { showActionSheetRef } from '../../../containers/ActionSheet';
+import { getUidDirectMessage } from '../../../lib/methods/helpers/helpers';
+import { usePeerAutocompleteStore } from '../../../lib/services/voip/usePeerAutocompleteStore';
 
 export const HeaderCallButton = ({
 	rid,
@@ -26,11 +27,12 @@ export const HeaderCallButton = ({
 
 	if (hasMediaCallPermission) {
 		const handlePress = () => {
-			// if (!room) return;
-			// mediaSessionInstance.startCallByRoom(room);
+			if (!room) return;
+			const otherUserId = getUidDirectMessage(room);
+			if (!otherUserId) return;
+			usePeerAutocompleteStore.getState().setSelectedPeer({ userId: otherUserId, displayName: room.name });
 			showActionSheetRef({
-				children: <NewMediaCall />,
-				snaps: [480]
+				children: <NewMediaCall />
 			});
 		};
 

From 117cb0ddeca7a9b7a27bf5b0ca9af19286966f58 Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Thu, 5 Mar 2026 10:18:42 -0300
Subject: [PATCH 05/20] refactor: update NewMediaCall components for improved
 type handling and structure

---
 .../NewMediaCall/Container.stories.tsx        |  75 ++++++++++
 app/containers/NewMediaCall/Container.tsx     |   2 +-
 .../NewMediaCall/CreateCall.stories.tsx       |  57 ++++++++
 .../NewMediaCall/NewMediaCall.stories.tsx     | 132 ++++++++++++++++++
 app/containers/NewMediaCall/NewMediaCall.tsx  |  14 ++
 .../NewMediaCall/PeerItem.stories.tsx         |  57 ++++++++
 app/containers/NewMediaCall/PeerItem.tsx      |  52 ++-----
 app/containers/NewMediaCall/PeerItemInner.tsx |  51 +++++++
 .../NewMediaCall/PeerList.stories.tsx         |  60 ++++++++
 .../NewMediaCall/SelectedPeer.stories.tsx     |  79 +++++++++++
 app/containers/NewMediaCall/SelectedPeer.tsx  |  35 +----
 app/containers/NewMediaCall/index.tsx         |  17 +--
 app/containers/Status/Status.tsx              |   3 +-
 .../services/voip/usePeerAutocompleteStore.ts |   4 +-
 .../RoomView/components/HeaderCallButton.tsx  |   2 +-
 15 files changed, 546 insertions(+), 94 deletions(-)
 create mode 100644 app/containers/NewMediaCall/Container.stories.tsx
 create mode 100644 app/containers/NewMediaCall/CreateCall.stories.tsx
 create mode 100644 app/containers/NewMediaCall/NewMediaCall.stories.tsx
 create mode 100644 app/containers/NewMediaCall/NewMediaCall.tsx
 create mode 100644 app/containers/NewMediaCall/PeerItem.stories.tsx
 create mode 100644 app/containers/NewMediaCall/PeerItemInner.tsx
 create mode 100644 app/containers/NewMediaCall/PeerList.stories.tsx
 create mode 100644 app/containers/NewMediaCall/SelectedPeer.stories.tsx

diff --git a/app/containers/NewMediaCall/Container.stories.tsx b/app/containers/NewMediaCall/Container.stories.tsx
new file mode 100644
index 00000000000..4aaa6dbaf52
--- /dev/null
+++ b/app/containers/NewMediaCall/Container.stories.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import BottomSheet from '@discord/bottom-sheet';
+
+import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
+import { Container } from './Container';
+
+const styles = StyleSheet.create({
+	root: {
+		flex: 1
+	},
+	placeholder: {
+		marginTop: 8,
+		padding: 12,
+		borderRadius: 6,
+		backgroundColor: '#efefef'
+	}
+});
+
+const setStoreState = (filter: string) => {
+	usePeerAutocompleteStore.setState({
+		filter,
+		selectedPeer: null,
+		options: []
+	});
+};
+
+const PlaceholderChildren = () => (
+	<View style={styles.placeholder}>
+		<Text>Mock children placeholder</Text>
+	</View>
+);
+
+const BottomSheetWrapper = ({ children }: { children: React.ReactNode }) => (
+	<View style={styles.root}>
+		<BottomSheet
+			index={0}
+			snapPoints={['95%']}
+			handleComponent={null}
+			enablePanDownToClose={false}
+			backgroundStyle={{ backgroundColor: 'transparent' }}>
+			<View style={styles.root}>{children}</View>
+		</BottomSheet>
+	</View>
+);
+
+export default {
+	title: 'NewMediaCall/Container',
+	component: Container,
+	decorators: [
+		(Story: React.ComponentType) => (
+			<BottomSheetWrapper>
+				<Story />
+			</BottomSheetWrapper>
+		)
+	]
+};
+
+export const Default = () => {
+	setStoreState('');
+	return (
+		<Container>
+			<PlaceholderChildren />
+		</Container>
+	);
+};
+
+export const WithFilter = () => {
+	setStoreState('alice');
+	return (
+		<Container>
+			<PlaceholderChildren />
+		</Container>
+	);
+};
diff --git a/app/containers/NewMediaCall/Container.tsx b/app/containers/NewMediaCall/Container.tsx
index bfff6f6a8a3..895cdebc5c7 100644
--- a/app/containers/NewMediaCall/Container.tsx
+++ b/app/containers/NewMediaCall/Container.tsx
@@ -9,7 +9,7 @@ import { textInputDebounceTime } from '../../lib/constants/debounceConfig';
 import { useDebounce } from '../../lib/methods/helpers';
 import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
 
-export const Container = ({ children }: { children: React.ReactElement[] }) => {
+export const Container = ({ children }: { children: React.ReactElement[] | React.ReactElement }) => {
 	const { colors } = useTheme();
 
 	const filter = usePeerAutocompleteStore(state => state.filter);
diff --git a/app/containers/NewMediaCall/CreateCall.stories.tsx b/app/containers/NewMediaCall/CreateCall.stories.tsx
new file mode 100644
index 00000000000..a3e5283d3a1
--- /dev/null
+++ b/app/containers/NewMediaCall/CreateCall.stories.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import * as ActionSheetModule from '../ActionSheet';
+import { mediaSessionInstance } from '../../lib/services/voip/MediaSessionInstance';
+import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
+import { CreateCall } from './CreateCall';
+
+const mediaSession = mediaSessionInstance as unknown as { startCall: (...args: unknown[]) => void };
+mediaSession.startCall = () => {};
+
+try {
+	Object.defineProperty(ActionSheetModule, 'hideActionSheetRef', {
+		value: () => {},
+		writable: true
+	});
+} catch {
+	// noop: in environments where export is not re-definable,
+	// the original hideActionSheetRef is already safe with optional chaining.
+}
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		padding: 16,
+		gap: 12
+	},
+	label: {
+		fontSize: 13,
+		opacity: 0.6
+	}
+});
+
+const setStoreState = (selectedPeer: ReturnType<typeof usePeerAutocompleteStore.getState>['selectedPeer']) => {
+	usePeerAutocompleteStore.setState({ selectedPeer });
+};
+
+const userPeer = {
+	userId: 'user-1',
+	displayName: 'Alice Johnson',
+	username: 'alice.johnson'
+};
+
+export default {
+	title: 'NewMediaCall/CreateCall',
+	component: CreateCall
+};
+
+export const Disabled = () => {
+	setStoreState(null);
+	return <CreateCall />;
+};
+
+export const Enabled = () => {
+	setStoreState(userPeer);
+	return <CreateCall />;
+};
diff --git a/app/containers/NewMediaCall/NewMediaCall.stories.tsx b/app/containers/NewMediaCall/NewMediaCall.stories.tsx
new file mode 100644
index 00000000000..b6208da0e37
--- /dev/null
+++ b/app/containers/NewMediaCall/NewMediaCall.stories.tsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import BottomSheet from '@discord/bottom-sheet';
+
+import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
+import { NewMediaCall } from './NewMediaCall';
+
+const styles = StyleSheet.create({
+	root: {
+		flex: 1,
+		backgroundColor: '#ccc'
+	},
+	container: {
+		flex: 1,
+		padding: 16
+	}
+});
+
+const mockUserOptions = [
+	{
+		type: 'user' as const,
+		value: 'user-1',
+		label: 'Alice Johnson',
+		username: 'alice.johnson'
+	},
+	{
+		type: 'user' as const,
+		value: 'user-2',
+		label: 'Bob Smith',
+		username: 'bob.smith'
+	}
+];
+
+const setStoreByVariant = (variant: 'empty' | 'searching' | 'userSelected' | 'sipSelected') => {
+	if (variant === 'empty') {
+		usePeerAutocompleteStore.setState({
+			filter: '',
+			options: [],
+			selectedPeer: null
+		});
+		return;
+	}
+
+	if (variant === 'searching') {
+		usePeerAutocompleteStore.setState({
+			filter: 'al',
+			options: mockUserOptions,
+			selectedPeer: null
+		});
+		return;
+	}
+
+	if (variant === 'userSelected') {
+		usePeerAutocompleteStore.setState({
+			filter: '',
+			options: [],
+			selectedPeer: {
+				userId: 'user-1',
+				displayName: 'Alice Johnson',
+				username: 'alice.johnson'
+			}
+		});
+		return;
+	}
+
+	usePeerAutocompleteStore.setState({
+		filter: '',
+		options: [],
+		selectedPeer: { number: '+55 11 99999-9999' }
+	});
+};
+
+const BottomSheetWrapper = ({ children }: { children: React.ReactNode }) => (
+	<View style={styles.root}>
+		<BottomSheet
+			index={0}
+			snapPoints={['50%']}
+			handleComponent={null}
+			enablePanDownToClose={false}
+			backgroundStyle={{ backgroundColor: 'transparent' }}>
+			<View style={styles.root}>{children}</View>
+		</BottomSheet>
+	</View>
+);
+
+export default {
+	title: 'NewMediaCall/NewMediaCall',
+	component: NewMediaCall,
+	decorators: [
+		(Story: React.ComponentType) => (
+			<BottomSheetWrapper>
+				<Story />
+			</BottomSheetWrapper>
+		)
+	]
+};
+
+export const Empty = () => {
+	setStoreByVariant('empty');
+	return (
+		<View style={styles.container}>
+			<NewMediaCall />
+		</View>
+	);
+};
+
+export const Searching = () => {
+	setStoreByVariant('searching');
+	return (
+		<View style={styles.container}>
+			<NewMediaCall />
+		</View>
+	);
+};
+
+export const UserSelected = () => {
+	setStoreByVariant('userSelected');
+	return (
+		<View style={styles.container}>
+			<NewMediaCall />
+		</View>
+	);
+};
+
+export const SipSelected = () => {
+	setStoreByVariant('sipSelected');
+	return (
+		<View style={styles.container}>
+			<NewMediaCall />
+		</View>
+	);
+};
diff --git a/app/containers/NewMediaCall/NewMediaCall.tsx b/app/containers/NewMediaCall/NewMediaCall.tsx
new file mode 100644
index 00000000000..50bd2b6a44b
--- /dev/null
+++ b/app/containers/NewMediaCall/NewMediaCall.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { PeerList } from './PeerList';
+import { SelectedPeer } from './SelectedPeer';
+import { Container } from './Container';
+import { CreateCall } from './CreateCall';
+
+export const NewMediaCall = (): React.ReactElement => (
+	<Container>
+		<SelectedPeer />
+		<PeerList />
+		<CreateCall />
+	</Container>
+);
diff --git a/app/containers/NewMediaCall/PeerItem.stories.tsx b/app/containers/NewMediaCall/PeerItem.stories.tsx
new file mode 100644
index 00000000000..7193a1aa78f
--- /dev/null
+++ b/app/containers/NewMediaCall/PeerItem.stories.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import type { TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
+import { PeerItem } from './PeerItem';
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		padding: 16,
+		gap: 8
+	},
+	label: {
+		fontSize: 13,
+		opacity: 0.6
+	}
+});
+
+const onSelectOption = () => {};
+
+const userItem: TPeerItem = {
+	type: 'user',
+	value: 'user-1',
+	label: 'Alice Johnson',
+	username: 'alice.johnson'
+};
+
+const sipItem: TPeerItem = {
+	type: 'sip',
+	value: '+5511999999999',
+	label: '+55 11 99999-9999'
+};
+
+const longLabelItem: TPeerItem = {
+	type: 'user',
+	value: 'user-2',
+	label: 'Long display name to validate text truncation behavior for PeerItem in narrow widths',
+	username: 'very.long.username'
+};
+
+export default {
+	title: 'NewMediaCall/PeerItem',
+	component: PeerItem
+};
+
+export const All = () => (
+	<View style={styles.container}>
+		<Text style={styles.label}>User</Text>
+		<PeerItem item={userItem} onSelectOption={onSelectOption} />
+
+		<Text style={styles.label}>SIP</Text>
+		<PeerItem item={sipItem} onSelectOption={onSelectOption} />
+
+		<Text style={styles.label}>Long label</Text>
+		<PeerItem item={longLabelItem} onSelectOption={onSelectOption} />
+	</View>
+);
diff --git a/app/containers/NewMediaCall/PeerItem.tsx b/app/containers/NewMediaCall/PeerItem.tsx
index 7915e988cc8..288d70b947d 100644
--- a/app/containers/NewMediaCall/PeerItem.tsx
+++ b/app/containers/NewMediaCall/PeerItem.tsx
@@ -1,50 +1,20 @@
-import { Pressable, View, Text, StyleSheet } from 'react-native';
+import { Pressable, StyleSheet } from 'react-native';
 
-import { useTheme } from '../../theme';
 import type { TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
-import { CustomIcon } from '../CustomIcon';
-import Avatar from '../Avatar';
-import Status from '../Status';
-import sharedStyles from '../../views/Styles';
+import { PeerItemInner } from './PeerItemInner';
 
-export const PeerItem = ({ item, onSelectOption }: { item: TPeerItem; onSelectOption: (item: TPeerItem) => void }) => {
-	const { colors } = useTheme();
-
-	const isSip = item.type === 'sip';
-
-	return (
-		<Pressable style={styles.row} onPress={() => onSelectOption(item)} testID={`new-media-call-option-${item.value}`}>
-			{isSip ? (
-				<CustomIcon name='phone-in' size={20} color={colors.fontSecondaryInfo} style={{ marginHorizontal: 10 }} />
-			) : (
-				<Avatar text={item.username || item.label} size={28} style={{ marginHorizontal: 10, borderRadius: 4 }} />
-			)}
-			{!isSip ? (
-				<View style={styles.statusWrap}>
-					<Status id={item.value} size={20} />
-				</View>
-			) : null}
-			<Text style={[styles.rowName, { color: colors.fontDefault }]} numberOfLines={1}>
-				{item.label}
-			</Text>
-		</Pressable>
-	);
-};
+export const PeerItem = ({ item, onSelectOption }: { item: TPeerItem; onSelectOption: (item: TPeerItem) => void }) => (
+	<Pressable style={styles.container} onPress={() => onSelectOption(item)} testID={`new-media-call-option-${item.value}`}>
+		<PeerItemInner item={item} />
+	</Pressable>
+);
 
 const styles = StyleSheet.create({
-	row: {
-		minHeight: 54,
+	container: {
+		paddingVertical: 10,
+		paddingHorizontal: 12,
 		flexDirection: 'row',
 		alignItems: 'center',
-		paddingHorizontal: 6
-	},
-	rowName: {
-		flex: 1,
-		fontSize: 18,
-		lineHeight: 26,
-		...sharedStyles.textMedium
-	},
-	statusWrap: {
-		marginRight: 10
+		gap: 4
 	}
 });
diff --git a/app/containers/NewMediaCall/PeerItemInner.tsx b/app/containers/NewMediaCall/PeerItemInner.tsx
new file mode 100644
index 00000000000..2080c9c6946
--- /dev/null
+++ b/app/containers/NewMediaCall/PeerItemInner.tsx
@@ -0,0 +1,51 @@
+import { View, Text, StyleSheet } from 'react-native';
+
+import { useTheme } from '../../theme';
+import type { TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
+import { CustomIcon } from '../CustomIcon';
+import Avatar from '../Avatar';
+import Status from '../Status';
+import sharedStyles from '../../views/Styles';
+
+export const PeerItemInner = ({ item }: { item: TPeerItem }) => {
+	const { colors } = useTheme();
+
+	const isSip = item.type === 'sip';
+
+	return (
+		<>
+			<View style={styles.icon}>
+				{isSip ? (
+					<CustomIcon name='phone-in' size={20} color={colors.fontSecondaryInfo} />
+				) : (
+					<Avatar text={item.username || item.label} size={28} />
+				)}
+			</View>
+			<View style={styles.nameContainer}>
+				{!isSip ? <Status id={item.value} size={20} /> : null}
+				<Text style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
+					{item.label}
+				</Text>
+			</View>
+		</>
+	);
+};
+
+const styles = StyleSheet.create({
+	icon: {
+		width: 28,
+		alignItems: 'center'
+	},
+	nameContainer: {
+		flex: 1,
+		flexDirection: 'row',
+		alignItems: 'center',
+		gap: 4
+	},
+	name: {
+		flexShrink: 1,
+		fontSize: 18,
+		lineHeight: 26,
+		...sharedStyles.textMedium
+	}
+});
diff --git a/app/containers/NewMediaCall/PeerList.stories.tsx b/app/containers/NewMediaCall/PeerList.stories.tsx
new file mode 100644
index 00000000000..16e253e21e4
--- /dev/null
+++ b/app/containers/NewMediaCall/PeerList.stories.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import type { TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
+import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
+import { PeerList } from './PeerList';
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		padding: 16
+	}
+});
+
+const mixedOptions: TPeerItem[] = [
+	{
+		type: 'sip',
+		value: '+5511988887777',
+		label: '+55 11 98888-7777'
+	},
+	{
+		type: 'user',
+		value: 'user-1',
+		label: 'Alice Johnson',
+		username: 'alice.johnson'
+	},
+	{
+		type: 'user',
+		value: 'user-2',
+		label: 'Long display name to validate text truncation behavior for PeerItem in narrow widths',
+		username: 'very.long.username'
+	},
+	{
+		type: 'user',
+		value: 'user-3',
+		label: 'Bob Smith',
+		username: 'bob.smith'
+	}
+];
+
+const setStoreState = (options: TPeerItem[]) => {
+	usePeerAutocompleteStore.setState({
+		options,
+		selectedPeer: null
+	});
+};
+
+export default {
+	title: 'NewMediaCall/PeerList',
+	component: PeerList
+};
+
+export const All = () => {
+	setStoreState(mixedOptions);
+	return (
+		<View style={styles.container}>
+			<PeerList />
+		</View>
+	);
+};
diff --git a/app/containers/NewMediaCall/SelectedPeer.stories.tsx b/app/containers/NewMediaCall/SelectedPeer.stories.tsx
new file mode 100644
index 00000000000..b093c0f80e9
--- /dev/null
+++ b/app/containers/NewMediaCall/SelectedPeer.stories.tsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
+import { SelectedPeer } from './SelectedPeer';
+import type { TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		padding: 16,
+		gap: 12
+	},
+	sectionLabel: {
+		fontSize: 13,
+		opacity: 0.6
+	}
+});
+
+const setStoreState = (selectedPeer: ReturnType<typeof usePeerAutocompleteStore.getState>['selectedPeer']) => {
+	usePeerAutocompleteStore.setState({
+		selectedPeer
+	});
+};
+
+const userPeer: TPeerItem = {
+	type: 'user',
+	value: 'user-1',
+	label: 'Alice Johnson',
+	username: 'alice.johnson'
+};
+
+const sipPeer: TPeerItem = {
+	type: 'sip',
+	value: '+5511999999999',
+	label: '+55 11 99999-9999'
+};
+
+const longUsernamePeer: TPeerItem = {
+	type: 'user',
+	value: 'user-2',
+	label: 'Long display name to validate text truncation behavior for SelectedPeer in narrow widths',
+	username: 'this.is.a.very.long.username.for.storybook.preview'
+};
+
+export default {
+	title: 'NewMediaCall/SelectedPeer',
+	component: SelectedPeer
+};
+
+export const User = () => {
+	setStoreState(userPeer);
+	return (
+		<View style={styles.container}>
+			<Text style={styles.sectionLabel}>User variant</Text>
+			<SelectedPeer />
+		</View>
+	);
+};
+
+export const Sip = () => {
+	setStoreState(sipPeer);
+	return (
+		<View style={styles.container}>
+			<Text style={styles.sectionLabel}>SIP variant</Text>
+			<SelectedPeer />
+		</View>
+	);
+};
+
+export const LongUsername = () => {
+	setStoreState(longUsernamePeer);
+	return (
+		<View style={styles.container}>
+			<Text style={styles.sectionLabel}>Long username variant</Text>
+			<SelectedPeer />
+		</View>
+	);
+};
diff --git a/app/containers/NewMediaCall/SelectedPeer.tsx b/app/containers/NewMediaCall/SelectedPeer.tsx
index 3654b7cde72..2fdb9f0f75f 100644
--- a/app/containers/NewMediaCall/SelectedPeer.tsx
+++ b/app/containers/NewMediaCall/SelectedPeer.tsx
@@ -1,43 +1,22 @@
-import { useMemo } from 'react';
-import { View, Pressable, Text, StyleSheet } from 'react-native';
+import { View, Pressable, StyleSheet } from 'react-native';
 
 import { useTheme } from '../../theme';
 import { CustomIcon } from '../CustomIcon';
-import Avatar from '../Avatar';
-import Status from '../Status';
-import sharedStyles from '../../views/Styles';
 import I18n from '../../i18n';
 import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
+import { PeerItemInner } from './PeerItemInner';
 
 export const SelectedPeer = () => {
 	const { colors } = useTheme();
 	const selectedPeer = usePeerAutocompleteStore(state => state.selectedPeer);
 	const clearSelection = usePeerAutocompleteStore(state => state.clearSelection);
 
-	const selectedLabel = useMemo(() => {
-		if (!selectedPeer) {
-			return '';
-		}
-
-		return 'number' in selectedPeer ? selectedPeer.number : selectedPeer.displayName;
-	}, [selectedPeer]);
-
 	if (!selectedPeer) return null;
 
 	return (
 		<View style={styles.selectedTagContainer}>
 			<View style={[styles.selectedTag, { backgroundColor: colors.buttonBackgroundSecondaryDefault }]}>
-				{'number' in selectedPeer ? (
-					<CustomIcon name='phone-in' size={20} color={colors.fontSecondaryInfo} />
-				) : (
-					<>
-						<Avatar text={selectedPeer.username || selectedPeer.displayName} size={28} />
-						<View style={styles.statusWrap}>
-							<Status id={selectedPeer.userId} size={20} />
-						</View>
-					</>
-				)}
-				<Text style={[styles.selectedTagName, { color: colors.buttonFontSecondary }]}>{selectedLabel}</Text>
+				<PeerItemInner item={selectedPeer} />
 				<Pressable
 					onPress={clearSelection}
 					style={styles.removeButton}
@@ -52,9 +31,6 @@ export const SelectedPeer = () => {
 };
 
 const styles = StyleSheet.create({
-	statusWrap: {
-		marginRight: 10
-	},
 	selectedTagContainer: {
 		marginBottom: 16
 	},
@@ -66,11 +42,6 @@ const styles = StyleSheet.create({
 		flexDirection: 'row',
 		alignItems: 'center'
 	},
-	selectedTagName: {
-		fontSize: 16,
-		lineHeight: 24,
-		...sharedStyles.textMedium
-	},
 	removeButton: {
 		marginLeft: 10,
 		padding: 2
diff --git a/app/containers/NewMediaCall/index.tsx b/app/containers/NewMediaCall/index.tsx
index 12d8e1c1837..1c1029bbf48 100644
--- a/app/containers/NewMediaCall/index.tsx
+++ b/app/containers/NewMediaCall/index.tsx
@@ -1,16 +1 @@
-import React from 'react';
-
-import { PeerList } from './PeerList';
-import { SelectedPeer } from './SelectedPeer';
-import { Container } from './Container';
-import { CreateCall } from './CreateCall';
-
-export const NewMediaCall = (): React.ReactElement => (
-	<Container>
-		<SelectedPeer />
-		<PeerList />
-		<CreateCall />
-	</Container>
-);
-
-export default NewMediaCall;
+export * from './NewMediaCall';
diff --git a/app/containers/Status/Status.tsx b/app/containers/Status/Status.tsx
index cb85da5e68f..bd479e6e84c 100644
--- a/app/containers/Status/Status.tsx
+++ b/app/containers/Status/Status.tsx
@@ -20,7 +20,8 @@ const Status = React.memo(({ style, status = 'offline', size = 32, ...props }: I
 		{
 			width: size * fontScale,
 			height: size * fontScale,
-			textAlignVertical: 'center'
+			textAlignVertical: 'center',
+			textAlign: 'center'
 		},
 		style
 	];
diff --git a/app/lib/services/voip/usePeerAutocompleteStore.ts b/app/lib/services/voip/usePeerAutocompleteStore.ts
index cec2a065242..be046df5461 100644
--- a/app/lib/services/voip/usePeerAutocompleteStore.ts
+++ b/app/lib/services/voip/usePeerAutocompleteStore.ts
@@ -4,13 +4,13 @@ import { getPeerAutocompleteOptions, type TPeerInfo, type TPeerItem } from './ge
 
 type TPeerAutocompleteState = {
 	options: TPeerItem[];
-	selectedPeer: TPeerInfo | null;
+	selectedPeer: TPeerItem | null;
 	filter: string;
 };
 
 type TPeerAutocompleteActions = {
 	fetchOptions: (filter: string) => Promise<void>;
-	setSelectedPeer: (peer: TPeerInfo | null) => void;
+	setSelectedPeer: (peer: TPeerItem | null) => void;
 	setFilter: (filter: string) => void;
 	clearSelection: () => void;
 };
diff --git a/app/views/RoomView/components/HeaderCallButton.tsx b/app/views/RoomView/components/HeaderCallButton.tsx
index 74a6a2fa5f5..ba3a7d9af36 100644
--- a/app/views/RoomView/components/HeaderCallButton.tsx
+++ b/app/views/RoomView/components/HeaderCallButton.tsx
@@ -4,7 +4,7 @@ import * as HeaderButton from '../../../containers/Header/components/HeaderButto
 import { useVideoConf } from '../../../lib/hooks/useVideoConf';
 import type { TSubscriptionModel } from '../../../definitions';
 import { useMediaCallPermission } from '../../../lib/hooks/useMediaCallPermission';
-import NewMediaCall from '../../../containers/NewMediaCall';
+import { NewMediaCall } from '../../../containers/NewMediaCall';
 import { showActionSheetRef } from '../../../containers/ActionSheet';
 import { getUidDirectMessage } from '../../../lib/methods/helpers/helpers';
 import { usePeerAutocompleteStore } from '../../../lib/services/voip/usePeerAutocompleteStore';

From 38c182fe152f716de6acabc7cf69a04415d7601c Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Thu, 5 Mar 2026 15:16:37 -0300
Subject: [PATCH 06/20] Update tests

---
 .../Avatar/__snapshots__/Avatar.test.tsx.snap |  1 +
 .../__snapshots__/HeaderButtons.test.tsx.snap |  8 +++---
 .../List/__snapshots__/List.test.tsx.snap     | 24 ++++++++--------
 .../MediaCallHeader.test.tsx.snap             | 16 +++++++----
 .../NewMediaCall/CreateCall.stories.tsx       | 21 ++++----------
 app/containers/NewMediaCall/CreateCall.tsx    |  4 +--
 .../NewMediaCall/NewMediaCall.stories.tsx     |  7 +++--
 app/containers/NewMediaCall/PeerList.tsx      | 13 +++++----
 .../__snapshots__/RoomHeader.test.tsx.snap    |  2 +-
 .../__snapshots__/RoomItem.test.tsx.snap      |  3 ++
 .../__snapshots__/RoomTypeIcon.test.tsx.snap  |  2 ++
 .../Status/__snapshots__/Status.test.tsx.snap |  8 ++++++
 .../useMediaCallPermission.ts                 |  4 +--
 .../voip/getPeerAutocompleteOptions.ts        | 22 ++++-----------
 .../services/voip/usePeerAutocompleteStore.ts |  4 +--
 .../__snapshots__/Item.test.tsx.snap          |  2 +-
 .../__snapshots__/RoomInfoABAC.test.tsx.snap  | 10 +++----
 .../__snapshots__/LoadMore.test.tsx.snap      | 28 +++++++++----------
 .../RoomView/components/HeaderCallButton.tsx  |  2 +-
 .../__snapshots__/Item.test.tsx.snap          |  8 +++---
 20 files changed, 94 insertions(+), 95 deletions(-)

diff --git a/app/containers/Avatar/__snapshots__/Avatar.test.tsx.snap b/app/containers/Avatar/__snapshots__/Avatar.test.tsx.snap
index 97d9de5ea35..44cdc296b6f 100644
--- a/app/containers/Avatar/__snapshots__/Avatar.test.tsx.snap
+++ b/app/containers/Avatar/__snapshots__/Avatar.test.tsx.snap
@@ -398,6 +398,7 @@ exports[`Story Snapshots: Children should match snapshot 1`] = `
           [
             {
               "height": 24,
+              "textAlign": "center",
               "textAlignVertical": "center",
               "width": 24,
             },
diff --git a/app/containers/Header/components/HeaderButton/__snapshots__/HeaderButtons.test.tsx.snap b/app/containers/Header/components/HeaderButton/__snapshots__/HeaderButtons.test.tsx.snap
index 938b20fc972..1c917ed5c7d 100644
--- a/app/containers/Header/components/HeaderButton/__snapshots__/HeaderButtons.test.tsx.snap
+++ b/app/containers/Header/components/HeaderButton/__snapshots__/HeaderButtons.test.tsx.snap
@@ -3923,7 +3923,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                     style={
                       [
                         {
-                          "color": "#E4E7EA",
+                          "color": "#C1C7D0",
                           "fontSize": 24,
                         },
                         [
@@ -4012,7 +4012,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   style={
                     [
                       {
-                        "color": "#E4E7EA",
+                        "color": "#C1C7D0",
                         "fontSize": 24,
                       },
                       [
@@ -4164,7 +4164,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                         "textAlign": "left",
                       },
                       {
-                        "color": "#E4E7EA",
+                        "color": "#C1C7D0",
                       },
                     ]
                   }
@@ -4219,7 +4219,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   style={
                     [
                       {
-                        "color": "#E4E7EA",
+                        "color": "#C1C7D0",
                         "fontSize": 24,
                       },
                       [
diff --git a/app/containers/List/__snapshots__/List.test.tsx.snap b/app/containers/List/__snapshots__/List.test.tsx.snap
index 6414017d4fd..5fdf697d887 100644
--- a/app/containers/List/__snapshots__/List.test.tsx.snap
+++ b/app/containers/List/__snapshots__/List.test.tsx.snap
@@ -6150,7 +6150,7 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
                     style={
                       [
                         {
-                          "color": "#E4E7EA",
+                          "color": "#C1C7D0",
                           "fontSize": 24,
                         },
                         [
@@ -6202,7 +6202,7 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
                         },
                         undefined,
                         {
-                          "color": "#E4E7EA",
+                          "color": "#C1C7D0",
                         },
                       ]
                     }
@@ -6257,7 +6257,7 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
                     style={
                       [
                         {
-                          "color": "#E4E7EA",
+                          "color": "#C1C7D0",
                           "fontSize": 24,
                         },
                         [
@@ -6398,7 +6398,7 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
                     style={
                       [
                         {
-                          "color": "#E4E7EA",
+                          "color": "#C1C7D0",
                           "fontSize": 24,
                         },
                         [
@@ -6450,7 +6450,7 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
                         },
                         undefined,
                         {
-                          "color": "#E4E7EA",
+                          "color": "#C1C7D0",
                         },
                       ]
                     }
@@ -6505,7 +6505,7 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
                     style={
                       [
                         {
-                          "color": "#E4E7EA",
+                          "color": "#C1C7D0",
                           "fontSize": 24,
                         },
                         [
@@ -6721,7 +6721,7 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
                     style={
                       [
                         {
-                          "color": "#E4E7EA",
+                          "color": "#C1C7D0",
                           "fontSize": 24,
                         },
                         [
@@ -6773,7 +6773,7 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
                         },
                         undefined,
                         {
-                          "color": "#E4E7EA",
+                          "color": "#C1C7D0",
                         },
                       ]
                     }
@@ -6828,7 +6828,7 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
                     style={
                       [
                         {
-                          "color": "#E4E7EA",
+                          "color": "#C1C7D0",
                           "fontSize": 24,
                         },
                         [
@@ -6969,7 +6969,7 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
                     style={
                       [
                         {
-                          "color": "#E4E7EA",
+                          "color": "#C1C7D0",
                           "fontSize": 24,
                         },
                         [
@@ -7021,7 +7021,7 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
                         },
                         undefined,
                         {
-                          "color": "#E4E7EA",
+                          "color": "#C1C7D0",
                         },
                       ]
                     }
@@ -7076,7 +7076,7 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
                     style={
                       [
                         {
-                          "color": "#E4E7EA",
+                          "color": "#C1C7D0",
                           "fontSize": 24,
                         },
                         [
diff --git a/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap b/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap
index 77beb9effca..f59afe0f849 100644
--- a/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap
+++ b/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap
@@ -190,6 +190,7 @@ exports[`Story Snapshots: ActiveCall should match snapshot 1`] = `
                   [
                     {
                       "height": 16,
+                      "textAlign": "center",
                       "textAlignVertical": "center",
                       "width": 16,
                     },
@@ -228,7 +229,7 @@ exports[`Story Snapshots: ActiveCall should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16448:41:15
+              16498:00:44
             </Text>
           </Text>
         </View>
@@ -536,6 +537,7 @@ exports[`Story Snapshots: Collapsed should match snapshot 1`] = `
                   [
                     {
                       "height": 16,
+                      "textAlign": "center",
                       "textAlignVertical": "center",
                       "width": 16,
                     },
@@ -574,7 +576,7 @@ exports[`Story Snapshots: Collapsed should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16448:41:15
+              16498:00:44
             </Text>
           </Text>
         </View>
@@ -882,6 +884,7 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
                   [
                     {
                       "height": 16,
+                      "textAlign": "center",
                       "textAlignVertical": "center",
                       "width": 16,
                     },
@@ -1224,6 +1227,7 @@ exports[`Story Snapshots: Focused should match snapshot 1`] = `
                   [
                     {
                       "height": 16,
+                      "textAlign": "center",
                       "textAlignVertical": "center",
                       "width": 16,
                     },
@@ -1262,7 +1266,7 @@ exports[`Story Snapshots: Focused should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16448:41:15
+              16498:00:44
             </Text>
           </Text>
         </View>
@@ -1590,6 +1594,7 @@ exports[`Story Snapshots: WithRemoteHeld should match snapshot 1`] = `
                   [
                     {
                       "height": 16,
+                      "textAlign": "center",
                       "textAlignVertical": "center",
                       "width": 16,
                     },
@@ -1628,7 +1633,7 @@ exports[`Story Snapshots: WithRemoteHeld should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16448:41:15
+              16498:00:44
             </Text>
           </Text>
         </View>
@@ -1936,6 +1941,7 @@ exports[`Story Snapshots: WithRemoteMuted should match snapshot 1`] = `
                   [
                     {
                       "height": 16,
+                      "textAlign": "center",
                       "textAlignVertical": "center",
                       "width": 16,
                     },
@@ -1974,7 +1980,7 @@ exports[`Story Snapshots: WithRemoteMuted should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16448:41:15
+              16498:00:44
             </Text>
           </Text>
         </View>
diff --git a/app/containers/NewMediaCall/CreateCall.stories.tsx b/app/containers/NewMediaCall/CreateCall.stories.tsx
index a3e5283d3a1..690d3eeb825 100644
--- a/app/containers/NewMediaCall/CreateCall.stories.tsx
+++ b/app/containers/NewMediaCall/CreateCall.stories.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
 
 import * as ActionSheetModule from '../ActionSheet';
 import { mediaSessionInstance } from '../../lib/services/voip/MediaSessionInstance';
 import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
 import { CreateCall } from './CreateCall';
+import type { TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
 
 const mediaSession = mediaSessionInstance as unknown as { startCall: (...args: unknown[]) => void };
 mediaSession.startCall = () => {};
@@ -19,25 +19,14 @@ try {
 	// the original hideActionSheetRef is already safe with optional chaining.
 }
 
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		padding: 16,
-		gap: 12
-	},
-	label: {
-		fontSize: 13,
-		opacity: 0.6
-	}
-});
-
 const setStoreState = (selectedPeer: ReturnType<typeof usePeerAutocompleteStore.getState>['selectedPeer']) => {
 	usePeerAutocompleteStore.setState({ selectedPeer });
 };
 
-const userPeer = {
-	userId: 'user-1',
-	displayName: 'Alice Johnson',
+const userPeer: TPeerItem = {
+	type: 'user',
+	value: 'user-1',
+	label: 'Alice Johnson',
 	username: 'alice.johnson'
 };
 
diff --git a/app/containers/NewMediaCall/CreateCall.tsx b/app/containers/NewMediaCall/CreateCall.tsx
index 04735da317e..bbcfe619a8b 100644
--- a/app/containers/NewMediaCall/CreateCall.tsx
+++ b/app/containers/NewMediaCall/CreateCall.tsx
@@ -20,9 +20,9 @@ export const CreateCall = () => {
 		}
 
 		if ('number' in selectedPeer) {
-			mediaSessionInstance.startCall(selectedPeer.number, 'sip');
+			mediaSessionInstance.startCall(selectedPeer.value, 'sip');
 		} else {
-			mediaSessionInstance.startCall(selectedPeer.userId, 'user');
+			mediaSessionInstance.startCall(selectedPeer.value, 'user');
 		}
 
 		hideActionSheetRef();
diff --git a/app/containers/NewMediaCall/NewMediaCall.stories.tsx b/app/containers/NewMediaCall/NewMediaCall.stories.tsx
index b6208da0e37..89daf4e4d39 100644
--- a/app/containers/NewMediaCall/NewMediaCall.stories.tsx
+++ b/app/containers/NewMediaCall/NewMediaCall.stories.tsx
@@ -55,8 +55,9 @@ const setStoreByVariant = (variant: 'empty' | 'searching' | 'userSelected' | 'si
 			filter: '',
 			options: [],
 			selectedPeer: {
-				userId: 'user-1',
-				displayName: 'Alice Johnson',
+				type: 'user',
+				value: 'alice.johnson',
+				label: 'Alice Johnson',
 				username: 'alice.johnson'
 			}
 		});
@@ -66,7 +67,7 @@ const setStoreByVariant = (variant: 'empty' | 'searching' | 'userSelected' | 'si
 	usePeerAutocompleteStore.setState({
 		filter: '',
 		options: [],
-		selectedPeer: { number: '+55 11 99999-9999' }
+		selectedPeer: { type: 'sip', value: '+5511999999999', label: '+55 11 99999-9999' }
 	});
 };
 
diff --git a/app/containers/NewMediaCall/PeerList.tsx b/app/containers/NewMediaCall/PeerList.tsx
index 315345d6341..91284cb22ef 100644
--- a/app/containers/NewMediaCall/PeerList.tsx
+++ b/app/containers/NewMediaCall/PeerList.tsx
@@ -1,6 +1,6 @@
 import { FlatList } from 'react-native';
 
-import type { TPeerInfo, TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
+import type { TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
 import { PeerItem } from './PeerItem';
 import * as List from '../List';
 import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
@@ -15,18 +15,19 @@ export const PeerList = () => {
 	if (selectedPeer) return null;
 
 	const handleSelectOption = (option: TPeerItem) => {
-		const peerInfo: TPeerInfo =
+		const peerItem: TPeerItem =
 			option.type === 'sip'
-				? { number: option.label }
+				? { type: 'sip', value: option.value, label: option.label }
 				: {
-						userId: option.value,
-						displayName: option.label,
+						type: 'user',
+						value: option.value,
+						label: option.label,
 						username: option.username,
 						callerId: option.callerId,
 						status: option.status
 				  };
 
-		setSelectedPeer(peerInfo);
+		setSelectedPeer(peerItem);
 		setFilter('');
 		fetchOptions('');
 	};
diff --git a/app/containers/RoomHeader/__snapshots__/RoomHeader.test.tsx.snap b/app/containers/RoomHeader/__snapshots__/RoomHeader.test.tsx.snap
index 089fa4625c8..efcdbeefd5d 100644
--- a/app/containers/RoomHeader/__snapshots__/RoomHeader.test.tsx.snap
+++ b/app/containers/RoomHeader/__snapshots__/RoomHeader.test.tsx.snap
@@ -2142,7 +2142,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   "textAlign": "left",
                 },
                 {
-                  "color": "#E4E7EA",
+                  "color": "#C1C7D0",
                   "lineHeight": undefined,
                 },
                 {
diff --git a/app/containers/RoomItem/__snapshots__/RoomItem.test.tsx.snap b/app/containers/RoomItem/__snapshots__/RoomItem.test.tsx.snap
index 971e7b8dc59..3cc914b4690 100644
--- a/app/containers/RoomItem/__snapshots__/RoomItem.test.tsx.snap
+++ b/app/containers/RoomItem/__snapshots__/RoomItem.test.tsx.snap
@@ -30023,6 +30023,7 @@ exports[`Story Snapshots: Type should match snapshot 1`] = `
                         [
                           {
                             "height": 22,
+                            "textAlign": "center",
                             "textAlignVertical": "center",
                             "width": 22,
                           },
@@ -35642,6 +35643,7 @@ exports[`Story Snapshots: User should match snapshot 1`] = `
                         [
                           {
                             "height": 22,
+                            "textAlign": "center",
                             "textAlignVertical": "center",
                             "width": 22,
                           },
@@ -36272,6 +36274,7 @@ exports[`Story Snapshots: User should match snapshot 1`] = `
                         [
                           {
                             "height": 22,
+                            "textAlign": "center",
                             "textAlignVertical": "center",
                             "width": 22,
                           },
diff --git a/app/containers/RoomTypeIcon/__snapshots__/RoomTypeIcon.test.tsx.snap b/app/containers/RoomTypeIcon/__snapshots__/RoomTypeIcon.test.tsx.snap
index d3f054edc7a..2852f4ea73c 100644
--- a/app/containers/RoomTypeIcon/__snapshots__/RoomTypeIcon.test.tsx.snap
+++ b/app/containers/RoomTypeIcon/__snapshots__/RoomTypeIcon.test.tsx.snap
@@ -18,6 +18,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
           [
             {
               "height": 30,
+              "textAlign": "center",
               "textAlignVertical": "center",
               "width": 30,
             },
@@ -56,6 +57,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
           [
             {
               "height": 30,
+              "textAlign": "center",
               "textAlignVertical": "center",
               "width": 30,
             },
diff --git a/app/containers/Status/__snapshots__/Status.test.tsx.snap b/app/containers/Status/__snapshots__/Status.test.tsx.snap
index e49ab566e73..85198cb740f 100644
--- a/app/containers/Status/__snapshots__/Status.test.tsx.snap
+++ b/app/containers/Status/__snapshots__/Status.test.tsx.snap
@@ -18,6 +18,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
           [
             {
               "height": 32,
+              "textAlign": "center",
               "textAlignVertical": "center",
               "width": 32,
             },
@@ -51,6 +52,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
           [
             {
               "height": 32,
+              "textAlign": "center",
               "textAlignVertical": "center",
               "width": 32,
             },
@@ -84,6 +86,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
           [
             {
               "height": 32,
+              "textAlign": "center",
               "textAlignVertical": "center",
               "width": 32,
             },
@@ -117,6 +120,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
           [
             {
               "height": 32,
+              "textAlign": "center",
               "textAlignVertical": "center",
               "width": 32,
             },
@@ -150,6 +154,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
           [
             {
               "height": 32,
+              "textAlign": "center",
               "textAlignVertical": "center",
               "width": 32,
             },
@@ -183,6 +188,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
           [
             {
               "height": 32,
+              "textAlign": "center",
               "textAlignVertical": "center",
               "width": 32,
             },
@@ -216,6 +222,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
           [
             {
               "height": 32,
+              "textAlign": "center",
               "textAlignVertical": "center",
               "width": 32,
             },
@@ -249,6 +256,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
           [
             {
               "height": 60,
+              "textAlign": "center",
               "textAlignVertical": "center",
               "width": 60,
             },
diff --git a/app/lib/hooks/useMediaCallPermission/useMediaCallPermission.ts b/app/lib/hooks/useMediaCallPermission/useMediaCallPermission.ts
index e0f9afd4f5a..15e039bcf9f 100644
--- a/app/lib/hooks/useMediaCallPermission/useMediaCallPermission.ts
+++ b/app/lib/hooks/useMediaCallPermission/useMediaCallPermission.ts
@@ -2,8 +2,8 @@ import { useAppSelector } from '../useAppSelector';
 import { usePermissions } from '../usePermissions';
 
 export const useMediaCallPermission = () => {
-	// const enterpriseModules = useAppSelector(state => state.enterpriseModules);
-	const isVoipModuleAvailable = true; // enterpriseModules.includes('teams-voip');
+	const enterpriseModules = useAppSelector(state => state.enterpriseModules);
+	const isVoipModuleAvailable = enterpriseModules.includes('teams-voip');
 	const [allowInternalVoiceCall, allowExternalVoiceCall] = usePermissions([
 		'allow-internal-voice-calls',
 		'allow-external-voice-calls'
diff --git a/app/lib/services/voip/getPeerAutocompleteOptions.ts b/app/lib/services/voip/getPeerAutocompleteOptions.ts
index dc7f58f5264..38b5411c7f3 100644
--- a/app/lib/services/voip/getPeerAutocompleteOptions.ts
+++ b/app/lib/services/voip/getPeerAutocompleteOptions.ts
@@ -6,10 +6,6 @@ export type TPeerItem =
 	| { type: 'user'; value: string; label: string; username?: string; callerId?: string; status?: TUserStatus }
 	| { type: 'sip'; value: string; label: string };
 
-export type TPeerInfo =
-	| { userId: string; displayName: string; username?: string; callerId?: string; status?: TUserStatus }
-	| { number: string };
-
 type TUserAutocompleteResponse = {
 	success?: boolean;
 	items?: Array<{
@@ -21,23 +17,15 @@ type TUserAutocompleteResponse = {
 	}>;
 };
 
-const getExtensionFromPeerInfo = (peerInfo?: TPeerInfo | null): string | undefined => {
-	if (!peerInfo) {
+const getExtensionFromPeerInfo = (peerInfo?: TPeerItem | null): string | undefined => {
+	if (!peerInfo || !('callerId' in peerInfo)) {
 		return undefined;
 	}
 
-	if ('callerId' in peerInfo) {
-		return peerInfo.callerId;
-	}
-
-	if ('number' in peerInfo) {
-		return peerInfo.number;
-	}
-
-	return undefined;
+	return peerInfo.callerId;
 };
 
-const getPeerUsername = (peerInfo?: TPeerInfo | null): string | undefined => {
+const getPeerUsername = (peerInfo?: TPeerItem | null): string | undefined => {
 	if (!peerInfo || !('username' in peerInfo)) {
 		return undefined;
 	}
@@ -51,7 +39,7 @@ export const getPeerAutocompleteOptions = async ({
 	peerInfo
 }: {
 	filter: string;
-	peerInfo?: TPeerInfo | null;
+	peerInfo?: TPeerItem | null;
 }): Promise<TPeerItem[]> => {
 	const term = filter.trim();
 	if (!term) {
diff --git a/app/lib/services/voip/usePeerAutocompleteStore.ts b/app/lib/services/voip/usePeerAutocompleteStore.ts
index be046df5461..5d522e8c12f 100644
--- a/app/lib/services/voip/usePeerAutocompleteStore.ts
+++ b/app/lib/services/voip/usePeerAutocompleteStore.ts
@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 
-import { getPeerAutocompleteOptions, type TPeerInfo, type TPeerItem } from './getPeerAutocompleteOptions';
+import { getPeerAutocompleteOptions, type TPeerItem } from './getPeerAutocompleteOptions';
 
 type TPeerAutocompleteState = {
 	options: TPeerItem[];
@@ -42,7 +42,7 @@ export const usePeerAutocompleteStore = create<TPeerAutocompleteStore>((set, get
 		}
 	},
 
-	setSelectedPeer: (peer: TPeerInfo | null) => {
+	setSelectedPeer: (peer: TPeerItem | null) => {
 		set({ selectedPeer: peer });
 	},
 
diff --git a/app/views/DiscussionsView/__snapshots__/Item.test.tsx.snap b/app/views/DiscussionsView/__snapshots__/Item.test.tsx.snap
index dcca4852073..8bf4dd5d733 100644
--- a/app/views/DiscussionsView/__snapshots__/Item.test.tsx.snap
+++ b/app/views/DiscussionsView/__snapshots__/Item.test.tsx.snap
@@ -2237,7 +2237,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                     "textAlign": "left",
                   },
                   {
-                    "color": "#E4E7EA",
+                    "color": "#C1C7D0",
                     "lineHeight": undefined,
                   },
                   {
diff --git a/app/views/RoomInfoView/components/__snapshots__/RoomInfoABAC.test.tsx.snap b/app/views/RoomInfoView/components/__snapshots__/RoomInfoABAC.test.tsx.snap
index 50b4c7d7237..d6ddfd9eef4 100644
--- a/app/views/RoomInfoView/components/__snapshots__/RoomInfoABAC.test.tsx.snap
+++ b/app/views/RoomInfoView/components/__snapshots__/RoomInfoABAC.test.tsx.snap
@@ -991,7 +991,7 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                 style={
                   [
                     {
-                      "color": "#E4E7EA",
+                      "color": "#C1C7D0",
                       "fontSize": 16,
                     },
                     [
@@ -1089,7 +1089,7 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                     "textAlign": "left",
                   },
                   {
-                    "color": "#E4E7EA",
+                    "color": "#C1C7D0",
                   },
                 ]
               }
@@ -1244,7 +1244,7 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                 style={
                   [
                     {
-                      "color": "#E4E7EA",
+                      "color": "#C1C7D0",
                       "fontSize": 16,
                     },
                     [
@@ -1342,7 +1342,7 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                     "textAlign": "left",
                   },
                   {
-                    "color": "#E4E7EA",
+                    "color": "#C1C7D0",
                   },
                 ]
               }
@@ -1739,7 +1739,7 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                     "textAlign": "left",
                   },
                   {
-                    "color": "#E4E7EA",
+                    "color": "#C1C7D0",
                   },
                 ]
               }
diff --git a/app/views/RoomView/LoadMore/__snapshots__/LoadMore.test.tsx.snap b/app/views/RoomView/LoadMore/__snapshots__/LoadMore.test.tsx.snap
index 642a5d044af..d2bdb8a706a 100644
--- a/app/views/RoomView/LoadMore/__snapshots__/LoadMore.test.tsx.snap
+++ b/app/views/RoomView/LoadMore/__snapshots__/LoadMore.test.tsx.snap
@@ -2794,7 +2794,7 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
                                   "textAlign": "left",
                                 },
                                 {
-                                  "color": "#E4E7EA",
+                                  "color": "#C1C7D0",
                                 },
                               ]
                             }
@@ -2820,7 +2820,7 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
                                       "lineHeight": 22,
                                     },
                                     {
-                                      "color": "#E4E7EA",
+                                      "color": "#C1C7D0",
                                     },
                                   ]
                                 }
@@ -2966,7 +2966,7 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
                                   "textAlign": "left",
                                 },
                                 {
-                                  "color": "#E4E7EA",
+                                  "color": "#C1C7D0",
                                 },
                               ]
                             }
@@ -2992,7 +2992,7 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
                                       "lineHeight": 22,
                                     },
                                     {
-                                      "color": "#E4E7EA",
+                                      "color": "#C1C7D0",
                                     },
                                   ]
                                 }
@@ -3145,7 +3145,7 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
                                   "textAlign": "left",
                                 },
                                 {
-                                  "color": "#E4E7EA",
+                                  "color": "#C1C7D0",
                                 },
                               ]
                             }
@@ -3171,7 +3171,7 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
                                       "lineHeight": 22,
                                     },
                                     {
-                                      "color": "#E4E7EA",
+                                      "color": "#C1C7D0",
                                     },
                                   ]
                                 }
@@ -3680,7 +3680,7 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
                                   "textAlign": "left",
                                 },
                                 {
-                                  "color": "#E4E7EA",
+                                  "color": "#C1C7D0",
                                 },
                               ]
                             }
@@ -3706,7 +3706,7 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
                                       "lineHeight": 22,
                                     },
                                     {
-                                      "color": "#E4E7EA",
+                                      "color": "#C1C7D0",
                                     },
                                   ]
                                 }
@@ -3852,7 +3852,7 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
                                   "textAlign": "left",
                                 },
                                 {
-                                  "color": "#E4E7EA",
+                                  "color": "#C1C7D0",
                                 },
                               ]
                             }
@@ -3878,7 +3878,7 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
                                       "lineHeight": 22,
                                     },
                                     {
-                                      "color": "#E4E7EA",
+                                      "color": "#C1C7D0",
                                     },
                                   ]
                                 }
@@ -4031,7 +4031,7 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
                                   "textAlign": "left",
                                 },
                                 {
-                                  "color": "#E4E7EA",
+                                  "color": "#C1C7D0",
                                 },
                               ]
                             }
@@ -4057,7 +4057,7 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
                                       "lineHeight": 22,
                                     },
                                     {
-                                      "color": "#E4E7EA",
+                                      "color": "#C1C7D0",
                                     },
                                   ]
                                 }
@@ -4400,7 +4400,7 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
                                   "textAlign": "left",
                                 },
                                 {
-                                  "color": "#E4E7EA",
+                                  "color": "#C1C7D0",
                                 },
                               ]
                             }
@@ -4426,7 +4426,7 @@ exports[`Story Snapshots: DarkTheme should match snapshot 1`] = `
                                       "lineHeight": 22,
                                     },
                                     {
-                                      "color": "#E4E7EA",
+                                      "color": "#C1C7D0",
                                     },
                                   ]
                                 }
diff --git a/app/views/RoomView/components/HeaderCallButton.tsx b/app/views/RoomView/components/HeaderCallButton.tsx
index ba3a7d9af36..c42094d5d64 100644
--- a/app/views/RoomView/components/HeaderCallButton.tsx
+++ b/app/views/RoomView/components/HeaderCallButton.tsx
@@ -30,7 +30,7 @@ export const HeaderCallButton = ({
 			if (!room) return;
 			const otherUserId = getUidDirectMessage(room);
 			if (!otherUserId) return;
-			usePeerAutocompleteStore.getState().setSelectedPeer({ userId: otherUserId, displayName: room.name });
+			usePeerAutocompleteStore.getState().setSelectedPeer({ type: 'user', value: otherUserId, label: room.name });
 			showActionSheetRef({
 				children: <NewMediaCall />
 			});
diff --git a/app/views/ThreadMessagesView/__snapshots__/Item.test.tsx.snap b/app/views/ThreadMessagesView/__snapshots__/Item.test.tsx.snap
index abad0d4166c..608ca055fdf 100644
--- a/app/views/ThreadMessagesView/__snapshots__/Item.test.tsx.snap
+++ b/app/views/ThreadMessagesView/__snapshots__/Item.test.tsx.snap
@@ -4438,7 +4438,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                     "textAlign": "left",
                   },
                   {
-                    "color": "#E4E7EA",
+                    "color": "#C1C7D0",
                     "lineHeight": undefined,
                   },
                   {
@@ -4504,7 +4504,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   style={
                     [
                       {
-                        "color": "#E4E7EA",
+                        "color": "#C1C7D0",
                         "fontSize": 24,
                       },
                       [
@@ -4561,7 +4561,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   style={
                     [
                       {
-                        "color": "#E4E7EA",
+                        "color": "#C1C7D0",
                         "fontSize": 24,
                       },
                       [
@@ -4652,7 +4652,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   style={
                     [
                       {
-                        "color": "#E4E7EA",
+                        "color": "#C1C7D0",
                         "fontSize": 24,
                       },
                       [

From 50c1149e042b62356af9ee627dbb7c92a0331ba6 Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Thu, 5 Mar 2026 17:39:12 -0300
Subject: [PATCH 07/20] Add unit tests

---
 .../NewMediaCall/CreateCall.test.tsx          | 131 +++
 app/containers/NewMediaCall/PeerItem.test.tsx |  80 ++
 app/containers/NewMediaCall/PeerItem.tsx      |  22 +-
 app/containers/NewMediaCall/PeerList.test.tsx | 130 +++
 .../NewMediaCall/SelectedPeer.test.tsx        |  87 ++
 app/containers/NewMediaCall/SelectedPeer.tsx  |   3 +-
 .../__snapshots__/CreateCall.test.tsx.snap    | 199 +++++
 .../__snapshots__/PeerItem.test.tsx.snap      | 510 ++++++++++++
 .../__snapshots__/PeerList.test.tsx.snap      | 778 ++++++++++++++++++
 .../__snapshots__/SelectedPeer.test.tsx.snap  | 674 +++++++++++++++
 .../voip/usePeerAutocompleteStore.test.ts     | 153 ++++
 11 files changed, 2761 insertions(+), 6 deletions(-)
 create mode 100644 app/containers/NewMediaCall/CreateCall.test.tsx
 create mode 100644 app/containers/NewMediaCall/PeerItem.test.tsx
 create mode 100644 app/containers/NewMediaCall/PeerList.test.tsx
 create mode 100644 app/containers/NewMediaCall/SelectedPeer.test.tsx
 create mode 100644 app/containers/NewMediaCall/__snapshots__/CreateCall.test.tsx.snap
 create mode 100644 app/containers/NewMediaCall/__snapshots__/PeerItem.test.tsx.snap
 create mode 100644 app/containers/NewMediaCall/__snapshots__/PeerList.test.tsx.snap
 create mode 100644 app/containers/NewMediaCall/__snapshots__/SelectedPeer.test.tsx.snap
 create mode 100644 app/lib/services/voip/usePeerAutocompleteStore.test.ts

diff --git a/app/containers/NewMediaCall/CreateCall.test.tsx b/app/containers/NewMediaCall/CreateCall.test.tsx
new file mode 100644
index 00000000000..42021cfe375
--- /dev/null
+++ b/app/containers/NewMediaCall/CreateCall.test.tsx
@@ -0,0 +1,131 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import { Provider } from 'react-redux';
+
+import { CreateCall } from './CreateCall';
+import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
+import { mockedStore } from '../../reducers/mockedStore';
+import type { TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
+import * as stories from './CreateCall.stories';
+import { generateSnapshots } from '../../../.rnstorybook/generateSnapshots';
+
+const mockStartCall = jest.fn();
+const mockHideActionSheet = jest.fn();
+
+jest.mock('../../lib/services/voip/MediaSessionInstance', () => {
+	const instance = {};
+	Object.defineProperty(instance, 'startCall', {
+		value: (...args: unknown[]) => mockStartCall(...args),
+		writable: false,
+		configurable: false
+	});
+	return { mediaSessionInstance: instance };
+});
+
+jest.mock('../ActionSheet', () => ({
+	...jest.requireActual('../ActionSheet'),
+	hideActionSheetRef: () => mockHideActionSheet()
+}));
+
+const setStoreState = (selectedPeer: TPeerItem | null) => {
+	usePeerAutocompleteStore.setState({ selectedPeer });
+};
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => <Provider store={mockedStore}>{children}</Provider>;
+
+const userPeer: TPeerItem = {
+	type: 'user',
+	value: 'user-1',
+	label: 'Alice Johnson',
+	username: 'alice.johnson'
+};
+
+const sipPeer: TPeerItem = {
+	type: 'sip',
+	value: '+5511999999999',
+	label: '+55 11 99999-9999'
+};
+
+describe('CreateCall', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		usePeerAutocompleteStore.setState({ selectedPeer: null });
+	});
+
+	it('should render the call button', () => {
+		const { getByTestId } = render(
+			<Wrapper>
+				<CreateCall />
+			</Wrapper>
+		);
+
+		expect(getByTestId('new-media-call-button')).toBeTruthy();
+	});
+
+	it('should be disabled when no peer is selected', () => {
+		setStoreState(null);
+		const { getByTestId } = render(
+			<Wrapper>
+				<CreateCall />
+			</Wrapper>
+		);
+
+		const button = getByTestId('new-media-call-button');
+		expect(button.props.accessibilityState?.disabled).toBe(true);
+	});
+
+	it('should not call startCall or hideActionSheet when disabled and pressed', () => {
+		setStoreState(null);
+		const { getByTestId } = render(
+			<Wrapper>
+				<CreateCall />
+			</Wrapper>
+		);
+
+		fireEvent.press(getByTestId('new-media-call-button'));
+		expect(mockStartCall).not.toHaveBeenCalled();
+		expect(mockHideActionSheet).not.toHaveBeenCalled();
+	});
+
+	it('should be enabled when user peer is selected', () => {
+		setStoreState(userPeer);
+		const { getByTestId } = render(
+			<Wrapper>
+				<CreateCall />
+			</Wrapper>
+		);
+
+		const button = getByTestId('new-media-call-button');
+		expect(button.props.accessibilityState?.disabled).toBe(false);
+	});
+
+	it('should call startCall with user type when user peer is selected and pressed', () => {
+		setStoreState(userPeer);
+		const { getByTestId } = render(
+			<Wrapper>
+				<CreateCall />
+			</Wrapper>
+		);
+
+		fireEvent.press(getByTestId('new-media-call-button'));
+		expect(mockStartCall).toHaveBeenCalledTimes(1);
+		expect(mockStartCall).toHaveBeenCalledWith('user-1', 'user');
+		expect(mockHideActionSheet).toHaveBeenCalledTimes(1);
+	});
+
+	it('should call startCall when SIP peer is selected and pressed', () => {
+		setStoreState(sipPeer);
+		const { getByTestId } = render(
+			<Wrapper>
+				<CreateCall />
+			</Wrapper>
+		);
+
+		fireEvent.press(getByTestId('new-media-call-button'));
+		expect(mockStartCall).toHaveBeenCalledTimes(1);
+		expect(mockStartCall).toHaveBeenCalledWith('+5511999999999', 'user');
+		expect(mockHideActionSheet).toHaveBeenCalledTimes(1);
+	});
+});
+
+generateSnapshots(stories);
diff --git a/app/containers/NewMediaCall/PeerItem.test.tsx b/app/containers/NewMediaCall/PeerItem.test.tsx
new file mode 100644
index 00000000000..560fb8e1d6f
--- /dev/null
+++ b/app/containers/NewMediaCall/PeerItem.test.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import { Provider } from 'react-redux';
+
+import { PeerItem } from './PeerItem';
+import { mockedStore } from '../../reducers/mockedStore';
+import type { TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
+import * as stories from './PeerItem.stories';
+import { generateSnapshots } from '../../../.rnstorybook/generateSnapshots';
+
+const onSelectOptionMock = jest.fn();
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => <Provider store={mockedStore}>{children}</Provider>;
+
+const userItem: TPeerItem = {
+	type: 'user',
+	value: 'user-1',
+	label: 'Alice Johnson',
+	username: 'alice.johnson'
+};
+
+const sipItem: TPeerItem = {
+	type: 'sip',
+	value: '+5511999999999',
+	label: '+55 11 99999-9999'
+};
+
+describe('PeerItem', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should render user option with correct testID', () => {
+		const { getByTestId, getByText } = render(
+			<Wrapper>
+				<PeerItem item={userItem} onSelectOption={onSelectOptionMock} />
+			</Wrapper>
+		);
+
+		expect(getByTestId('new-media-call-option-user-1')).toBeTruthy();
+		expect(getByText('Alice Johnson')).toBeTruthy();
+	});
+
+	it('should render SIP option with correct testID', () => {
+		const { getByTestId, getByText } = render(
+			<Wrapper>
+				<PeerItem item={sipItem} onSelectOption={onSelectOptionMock} />
+			</Wrapper>
+		);
+
+		expect(getByTestId('new-media-call-option-+5511999999999')).toBeTruthy();
+		expect(getByText('+55 11 99999-9999')).toBeTruthy();
+	});
+
+	it('should call onSelectOption with item when pressed', () => {
+		const { getByTestId } = render(
+			<Wrapper>
+				<PeerItem item={userItem} onSelectOption={onSelectOptionMock} />
+			</Wrapper>
+		);
+
+		fireEvent.press(getByTestId('new-media-call-option-user-1'));
+		expect(onSelectOptionMock).toHaveBeenCalledTimes(1);
+		expect(onSelectOptionMock).toHaveBeenCalledWith(userItem);
+	});
+
+	it('should call onSelectOption with SIP item when pressed', () => {
+		const { getByTestId } = render(
+			<Wrapper>
+				<PeerItem item={sipItem} onSelectOption={onSelectOptionMock} />
+			</Wrapper>
+		);
+
+		fireEvent.press(getByTestId('new-media-call-option-+5511999999999'));
+		expect(onSelectOptionMock).toHaveBeenCalledTimes(1);
+		expect(onSelectOptionMock).toHaveBeenCalledWith(sipItem);
+	});
+});
+
+generateSnapshots(stories);
diff --git a/app/containers/NewMediaCall/PeerItem.tsx b/app/containers/NewMediaCall/PeerItem.tsx
index 288d70b947d..6a79c8fedd6 100644
--- a/app/containers/NewMediaCall/PeerItem.tsx
+++ b/app/containers/NewMediaCall/PeerItem.tsx
@@ -2,12 +2,24 @@ import { Pressable, StyleSheet } from 'react-native';
 
 import type { TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
 import { PeerItemInner } from './PeerItemInner';
+import { useTheme } from '../../theme';
+import { isIOS } from '../../lib/methods/helpers';
 
-export const PeerItem = ({ item, onSelectOption }: { item: TPeerItem; onSelectOption: (item: TPeerItem) => void }) => (
-	<Pressable style={styles.container} onPress={() => onSelectOption(item)} testID={`new-media-call-option-${item.value}`}>
-		<PeerItemInner item={item} />
-	</Pressable>
-);
+export const PeerItem = ({ item, onSelectOption }: { item: TPeerItem; onSelectOption: (item: TPeerItem) => void }) => {
+	const { colors } = useTheme();
+	return (
+		<Pressable
+			style={({ pressed }) => [
+				styles.container,
+				{ backgroundColor: pressed && isIOS ? colors.surfaceSelected : colors.surfaceLight }
+			]}
+			onPress={() => onSelectOption(item)}
+			testID={`new-media-call-option-${item.value}`}
+			android_ripple={{ color: colors.surfaceSelected }}>
+			<PeerItemInner item={item} />
+		</Pressable>
+	);
+};
 
 const styles = StyleSheet.create({
 	container: {
diff --git a/app/containers/NewMediaCall/PeerList.test.tsx b/app/containers/NewMediaCall/PeerList.test.tsx
new file mode 100644
index 00000000000..b713cdc9e51
--- /dev/null
+++ b/app/containers/NewMediaCall/PeerList.test.tsx
@@ -0,0 +1,130 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import { Provider } from 'react-redux';
+
+import { PeerList } from './PeerList';
+import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
+import { mockedStore } from '../../reducers/mockedStore';
+import type { TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
+import * as stories from './PeerList.stories';
+import { generateSnapshots } from '../../../.rnstorybook/generateSnapshots';
+
+const setStoreState = (options: TPeerItem[], selectedPeer: TPeerItem | null = null) => {
+	usePeerAutocompleteStore.setState({ options, selectedPeer });
+};
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => <Provider store={mockedStore}>{children}</Provider>;
+
+const mockOptions: TPeerItem[] = [
+	{
+		type: 'sip',
+		value: '+5511988887777',
+		label: '+55 11 98888-7777'
+	},
+	{
+		type: 'user',
+		value: 'user-1',
+		label: 'Alice Johnson',
+		username: 'alice.johnson'
+	},
+	{
+		type: 'user',
+		value: 'user-2',
+		label: 'Bob Smith',
+		username: 'bob.smith'
+	}
+];
+
+describe('PeerList', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		usePeerAutocompleteStore.setState({ options: [], selectedPeer: null });
+	});
+
+	it('should render options when no peer selected', () => {
+		setStoreState(mockOptions);
+		const { getByTestId, getByText } = render(
+			<Wrapper>
+				<PeerList />
+			</Wrapper>
+		);
+
+		expect(getByTestId('new-media-call-option-+5511988887777')).toBeTruthy();
+		expect(getByTestId('new-media-call-option-user-1')).toBeTruthy();
+		expect(getByTestId('new-media-call-option-user-2')).toBeTruthy();
+		expect(getByText('Alice Johnson')).toBeTruthy();
+		expect(getByText('Bob Smith')).toBeTruthy();
+	});
+
+	it('should return null when peer is selected', () => {
+		setStoreState(mockOptions, mockOptions[1]);
+		const { queryByTestId } = render(
+			<Wrapper>
+				<PeerList />
+			</Wrapper>
+		);
+
+		expect(queryByTestId('new-media-call-option-user-1')).toBeNull();
+	});
+
+	it('should set selected peer, clear filter and fetch options when option is pressed', () => {
+		const setSelectedPeer = jest.fn();
+		const setFilter = jest.fn();
+		const fetchOptions = jest.fn();
+		usePeerAutocompleteStore.setState({
+			options: mockOptions,
+			selectedPeer: null,
+			setSelectedPeer,
+			setFilter,
+			fetchOptions
+		});
+
+		const { getByTestId } = render(
+			<Wrapper>
+				<PeerList />
+			</Wrapper>
+		);
+
+		fireEvent.press(getByTestId('new-media-call-option-user-1'));
+
+		expect(setSelectedPeer).toHaveBeenCalledWith(
+			expect.objectContaining({
+				type: 'user',
+				value: 'user-1',
+				label: 'Alice Johnson',
+				username: 'alice.johnson'
+			})
+		);
+		expect(setFilter).toHaveBeenCalledWith('');
+		expect(fetchOptions).toHaveBeenCalledWith('');
+	});
+
+	it('should pass sip item correctly when SIP option is pressed', () => {
+		const setSelectedPeer = jest.fn();
+		usePeerAutocompleteStore.setState({
+			options: mockOptions,
+			selectedPeer: null,
+			setSelectedPeer,
+			setFilter: jest.fn(),
+			fetchOptions: jest.fn()
+		});
+
+		const { getByTestId } = render(
+			<Wrapper>
+				<PeerList />
+			</Wrapper>
+		);
+
+		fireEvent.press(getByTestId('new-media-call-option-+5511988887777'));
+
+		expect(setSelectedPeer).toHaveBeenCalledWith(
+			expect.objectContaining({
+				type: 'sip',
+				value: '+5511988887777',
+				label: '+55 11 98888-7777'
+			})
+		);
+	});
+});
+
+generateSnapshots(stories);
diff --git a/app/containers/NewMediaCall/SelectedPeer.test.tsx b/app/containers/NewMediaCall/SelectedPeer.test.tsx
new file mode 100644
index 00000000000..2b58fffae8c
--- /dev/null
+++ b/app/containers/NewMediaCall/SelectedPeer.test.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+import { Provider } from 'react-redux';
+
+import { SelectedPeer } from './SelectedPeer';
+import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
+import { mockedStore } from '../../reducers/mockedStore';
+import type { TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
+import * as stories from './SelectedPeer.stories';
+import { generateSnapshots } from '../../../.rnstorybook/generateSnapshots';
+
+const setStoreState = (selectedPeer: TPeerItem | null) => {
+	usePeerAutocompleteStore.setState({ selectedPeer });
+};
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => <Provider store={mockedStore}>{children}</Provider>;
+
+const userPeer: TPeerItem = {
+	type: 'user',
+	value: 'user-1',
+	label: 'Alice Johnson',
+	username: 'alice.johnson'
+};
+
+const sipPeer: TPeerItem = {
+	type: 'sip',
+	value: '+5511999999999',
+	label: '+55 11 99999-9999'
+};
+
+describe('SelectedPeer', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		usePeerAutocompleteStore.setState({ selectedPeer: null });
+	});
+
+	it('should return null when no peer is selected', () => {
+		setStoreState(null);
+		const { queryByTestId } = render(
+			<Wrapper>
+				<SelectedPeer />
+			</Wrapper>
+		);
+
+		expect(queryByTestId('new-media-call-clear-selected-peer')).toBeNull();
+	});
+
+	it('should render selected user peer with label', () => {
+		setStoreState(userPeer);
+		const { getByTestId, getByText } = render(
+			<Wrapper>
+				<SelectedPeer />
+			</Wrapper>
+		);
+
+		expect(getByTestId('new-media-call-clear-selected-peer')).toBeTruthy();
+		expect(getByText('Alice Johnson')).toBeTruthy();
+	});
+
+	it('should render selected SIP peer with label', () => {
+		setStoreState(sipPeer);
+		const { getByTestId, getByText } = render(
+			<Wrapper>
+				<SelectedPeer />
+			</Wrapper>
+		);
+
+		expect(getByTestId('new-media-call-clear-selected-peer')).toBeTruthy();
+		expect(getByText('+55 11 99999-9999')).toBeTruthy();
+	});
+
+	it('should call clearSelection when clear button is pressed', () => {
+		const clearSelection = jest.fn();
+		usePeerAutocompleteStore.setState({ selectedPeer: userPeer, clearSelection });
+
+		const { getByTestId } = render(
+			<Wrapper>
+				<SelectedPeer />
+			</Wrapper>
+		);
+
+		fireEvent.press(getByTestId('new-media-call-clear-selected-peer'));
+		expect(clearSelection).toHaveBeenCalledTimes(1);
+	});
+});
+
+generateSnapshots(stories);
diff --git a/app/containers/NewMediaCall/SelectedPeer.tsx b/app/containers/NewMediaCall/SelectedPeer.tsx
index 2fdb9f0f75f..dedec50a305 100644
--- a/app/containers/NewMediaCall/SelectedPeer.tsx
+++ b/app/containers/NewMediaCall/SelectedPeer.tsx
@@ -22,7 +22,8 @@ export const SelectedPeer = () => {
 					style={styles.removeButton}
 					accessibilityRole='button'
 					accessibilityLabel={I18n.t('Remove')}
-					testID='new-media-call-clear-selected-peer'>
+					testID='new-media-call-clear-selected-peer'
+					android_ripple={{ color: colors.surfaceSelected }}>
 					<CustomIcon name='close' size={16} color={colors.buttonFontSecondary} />
 				</Pressable>
 			</View>
diff --git a/app/containers/NewMediaCall/__snapshots__/CreateCall.test.tsx.snap b/app/containers/NewMediaCall/__snapshots__/CreateCall.test.tsx.snap
new file mode 100644
index 00000000000..75b24385227
--- /dev/null
+++ b/app/containers/NewMediaCall/__snapshots__/CreateCall.test.tsx.snap
@@ -0,0 +1,199 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Story Snapshots: Disabled should match snapshot 1`] = `
+<View
+  accessibilityLabel="Call"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "alignItems": "center",
+        "borderRadius": 4,
+        "flexDirection": "row",
+        "gap": 4,
+        "height": 52,
+        "justifyContent": "center",
+        "marginTop": 32,
+      },
+      {
+        "backgroundColor": "#C0F6E4",
+      },
+    ]
+  }
+  testID="new-media-call-button"
+>
+  <Text
+    allowFontScaling={false}
+    selectable={false}
+    style={
+      [
+        {
+          "color": "#FFFFFF",
+          "fontSize": 24,
+        },
+        [
+          {
+            "lineHeight": 24,
+          },
+          undefined,
+        ],
+        {
+          "fontFamily": "custom",
+          "fontStyle": "normal",
+          "fontWeight": "normal",
+        },
+        {},
+      ]
+    }
+  >
+    
+  </Text>
+  <Text
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "fontFamily": "Inter",
+          "fontSize": 16,
+          "fontWeight": "500",
+          "lineHeight": 24,
+          "textAlign": "left",
+        },
+        {
+          "color": "#FFFFFF",
+        },
+      ]
+    }
+  >
+    Call
+  </Text>
+</View>
+`;
+
+exports[`Story Snapshots: Enabled should match snapshot 1`] = `
+<View
+  accessibilityLabel="Call"
+  accessibilityRole="button"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": false,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    [
+      {
+        "alignItems": "center",
+        "borderRadius": 4,
+        "flexDirection": "row",
+        "gap": 4,
+        "height": 52,
+        "justifyContent": "center",
+        "marginTop": 32,
+      },
+      {
+        "backgroundColor": "#158D65",
+      },
+    ]
+  }
+  testID="new-media-call-button"
+>
+  <Text
+    allowFontScaling={false}
+    selectable={false}
+    style={
+      [
+        {
+          "color": "#FFFFFF",
+          "fontSize": 24,
+        },
+        [
+          {
+            "lineHeight": 24,
+          },
+          undefined,
+        ],
+        {
+          "fontFamily": "custom",
+          "fontStyle": "normal",
+          "fontWeight": "normal",
+        },
+        {},
+      ]
+    }
+  >
+    
+  </Text>
+  <Text
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "fontFamily": "Inter",
+          "fontSize": 16,
+          "fontWeight": "500",
+          "lineHeight": 24,
+          "textAlign": "left",
+        },
+        {
+          "color": "#FFFFFF",
+        },
+      ]
+    }
+  >
+    Call
+  </Text>
+</View>
+`;
diff --git a/app/containers/NewMediaCall/__snapshots__/PeerItem.test.tsx.snap b/app/containers/NewMediaCall/__snapshots__/PeerItem.test.tsx.snap
new file mode 100644
index 00000000000..8f6eb318c00
--- /dev/null
+++ b/app/containers/NewMediaCall/__snapshots__/PeerItem.test.tsx.snap
@@ -0,0 +1,510 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Story Snapshots: All should match snapshot 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+      "gap": 8,
+      "padding": 16,
+    }
+  }
+>
+  <Text
+    style={
+      {
+        "fontSize": 13,
+        "opacity": 0.6,
+      }
+    }
+  >
+    User
+  </Text>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "gap": 4,
+          "paddingHorizontal": 12,
+          "paddingVertical": 10,
+        },
+        {
+          "backgroundColor": "#FFFFFF",
+        },
+      ]
+    }
+    testID="new-media-call-option-user-1"
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "width": 28,
+        }
+      }
+    >
+      <View
+        accessibilityLabel="alice.johnson's avatar"
+        accessible={true}
+        style={
+          [
+            {
+              "borderRadius": 4,
+              "height": 28,
+              "width": 28,
+            },
+            undefined,
+          ]
+        }
+        testID="avatar"
+      >
+        <ViewManagerAdapter_ExpoImage
+          borderRadius={4}
+          containerViewRef={"[React.ref]"}
+          contentFit="cover"
+          contentPosition={
+            {
+              "left": "50%",
+              "top": "50%",
+            }
+          }
+          height={28}
+          nativeViewRef={"[React.ref]"}
+          onError={[Function]}
+          onLoad={[Function]}
+          onLoadStart={[Function]}
+          onProgress={[Function]}
+          placeholder={[]}
+          priority="high"
+          source={
+            [
+              {
+                "headers": {
+                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                },
+                "uri": "https://open.rocket.chat/avatar/alice.johnson?format=png&size=56",
+              },
+            ]
+          }
+          style={
+            {
+              "borderRadius": 4,
+              "height": 28,
+              "width": 28,
+            }
+          }
+          transition={null}
+          width={28}
+        />
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "gap": 4,
+        }
+      }
+    >
+      <Text
+        allowFontScaling={false}
+        selectable={false}
+        style={
+          [
+            {
+              "color": "#6C727A",
+              "fontSize": 20,
+            },
+            [
+              {
+                "lineHeight": 20,
+              },
+              [
+                {
+                  "height": 20,
+                  "textAlign": "center",
+                  "textAlignVertical": "center",
+                  "width": 20,
+                },
+                undefined,
+              ],
+            ],
+            {
+              "fontFamily": "custom",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            {},
+          ]
+        }
+      >
+        
+      </Text>
+      <Text
+        numberOfLines={1}
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "flexShrink": 1,
+              "fontFamily": "Inter",
+              "fontSize": 18,
+              "fontWeight": "500",
+              "lineHeight": 26,
+              "textAlign": "left",
+            },
+            {
+              "color": "#2F343D",
+            },
+          ]
+        }
+      >
+        Alice Johnson
+      </Text>
+    </View>
+  </View>
+  <Text
+    style={
+      {
+        "fontSize": 13,
+        "opacity": 0.6,
+      }
+    }
+  >
+    SIP
+  </Text>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "gap": 4,
+          "paddingHorizontal": 12,
+          "paddingVertical": 10,
+        },
+        {
+          "backgroundColor": "#FFFFFF",
+        },
+      ]
+    }
+    testID="new-media-call-option-+5511999999999"
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "width": 28,
+        }
+      }
+    >
+      <Text
+        allowFontScaling={false}
+        selectable={false}
+        style={
+          [
+            {
+              "color": "#6C727A",
+              "fontSize": 20,
+            },
+            [
+              {
+                "lineHeight": 20,
+              },
+              undefined,
+            ],
+            {
+              "fontFamily": "custom",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            {},
+          ]
+        }
+      >
+        
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "gap": 4,
+        }
+      }
+    >
+      <Text
+        numberOfLines={1}
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "flexShrink": 1,
+              "fontFamily": "Inter",
+              "fontSize": 18,
+              "fontWeight": "500",
+              "lineHeight": 26,
+              "textAlign": "left",
+            },
+            {
+              "color": "#2F343D",
+            },
+          ]
+        }
+      >
+        +55 11 99999-9999
+      </Text>
+    </View>
+  </View>
+  <Text
+    style={
+      {
+        "fontSize": 13,
+        "opacity": 0.6,
+      }
+    }
+  >
+    Long label
+  </Text>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "flexDirection": "row",
+          "gap": 4,
+          "paddingHorizontal": 12,
+          "paddingVertical": 10,
+        },
+        {
+          "backgroundColor": "#FFFFFF",
+        },
+      ]
+    }
+    testID="new-media-call-option-user-2"
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "width": 28,
+        }
+      }
+    >
+      <View
+        accessibilityLabel="very.long.username's avatar"
+        accessible={true}
+        style={
+          [
+            {
+              "borderRadius": 4,
+              "height": 28,
+              "width": 28,
+            },
+            undefined,
+          ]
+        }
+        testID="avatar"
+      >
+        <ViewManagerAdapter_ExpoImage
+          borderRadius={4}
+          containerViewRef={"[React.ref]"}
+          contentFit="cover"
+          contentPosition={
+            {
+              "left": "50%",
+              "top": "50%",
+            }
+          }
+          height={28}
+          nativeViewRef={"[React.ref]"}
+          onError={[Function]}
+          onLoad={[Function]}
+          onLoadStart={[Function]}
+          onProgress={[Function]}
+          placeholder={[]}
+          priority="high"
+          source={
+            [
+              {
+                "headers": {
+                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                },
+                "uri": "https://open.rocket.chat/avatar/very.long.username?format=png&size=56",
+              },
+            ]
+          }
+          style={
+            {
+              "borderRadius": 4,
+              "height": 28,
+              "width": 28,
+            }
+          }
+          transition={null}
+          width={28}
+        />
+      </View>
+    </View>
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "flex": 1,
+          "flexDirection": "row",
+          "gap": 4,
+        }
+      }
+    >
+      <Text
+        allowFontScaling={false}
+        selectable={false}
+        style={
+          [
+            {
+              "color": "#6C727A",
+              "fontSize": 20,
+            },
+            [
+              {
+                "lineHeight": 20,
+              },
+              [
+                {
+                  "height": 20,
+                  "textAlign": "center",
+                  "textAlignVertical": "center",
+                  "width": 20,
+                },
+                undefined,
+              ],
+            ],
+            {
+              "fontFamily": "custom",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
+            },
+            {},
+          ]
+        }
+      >
+        
+      </Text>
+      <Text
+        numberOfLines={1}
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "flexShrink": 1,
+              "fontFamily": "Inter",
+              "fontSize": 18,
+              "fontWeight": "500",
+              "lineHeight": 26,
+              "textAlign": "left",
+            },
+            {
+              "color": "#2F343D",
+            },
+          ]
+        }
+      >
+        Long display name to validate text truncation behavior for PeerItem in narrow widths
+      </Text>
+    </View>
+  </View>
+</View>
+`;
diff --git a/app/containers/NewMediaCall/__snapshots__/PeerList.test.tsx.snap b/app/containers/NewMediaCall/__snapshots__/PeerList.test.tsx.snap
new file mode 100644
index 00000000000..d005dfa9b16
--- /dev/null
+++ b/app/containers/NewMediaCall/__snapshots__/PeerList.test.tsx.snap
@@ -0,0 +1,778 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Story Snapshots: All should match snapshot 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+      "padding": 16,
+    }
+  }
+>
+  <RCTScrollView
+    ItemSeparatorComponent={
+      {
+        "$$typeof": Symbol(react.memo),
+        "compare": null,
+        "type": [Function],
+      }
+    }
+    contentContainerStyle={
+      {
+        "flexShrink": 1,
+      }
+    }
+    data={
+      [
+        {
+          "label": "+55 11 98888-7777",
+          "type": "sip",
+          "value": "+5511988887777",
+        },
+        {
+          "label": "Alice Johnson",
+          "type": "user",
+          "username": "alice.johnson",
+          "value": "user-1",
+        },
+        {
+          "label": "Long display name to validate text truncation behavior for PeerItem in narrow widths",
+          "type": "user",
+          "username": "very.long.username",
+          "value": "user-2",
+        },
+        {
+          "label": "Bob Smith",
+          "type": "user",
+          "username": "bob.smith",
+          "value": "user-3",
+        },
+      ]
+    }
+    getItem={[Function]}
+    getItemCount={[Function]}
+    keyExtractor={[Function]}
+    keyboardShouldPersistTaps="always"
+    onContentSizeChange={[Function]}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    removeClippedSubviews={false}
+    renderItem={[Function]}
+    scrollEventThrottle={0.0001}
+    stickyHeaderIndices={[]}
+    viewabilityConfigCallbackPairs={[]}
+  >
+    <View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "gap": 4,
+                "paddingHorizontal": 12,
+                "paddingVertical": 10,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+              },
+            ]
+          }
+          testID="new-media-call-option-+5511988887777"
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "width": 28,
+              }
+            }
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "#6C727A",
+                    "fontSize": 20,
+                  },
+                  [
+                    {
+                      "lineHeight": 20,
+                    },
+                    undefined,
+                  ],
+                  {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "gap": 4,
+              }
+            }
+          >
+            <Text
+              numberOfLines={1}
+              style={
+                [
+                  {
+                    "backgroundColor": "transparent",
+                    "flexShrink": 1,
+                    "fontFamily": "Inter",
+                    "fontSize": 18,
+                    "fontWeight": "500",
+                    "lineHeight": 26,
+                    "textAlign": "left",
+                  },
+                  {
+                    "color": "#2F343D",
+                  },
+                ]
+              }
+            >
+              +55 11 98888-7777
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            [
+              {
+                "height": 0.5,
+              },
+              undefined,
+              {
+                "backgroundColor": "#CBCED1",
+              },
+            ]
+          }
+        />
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "gap": 4,
+                "paddingHorizontal": 12,
+                "paddingVertical": 10,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+              },
+            ]
+          }
+          testID="new-media-call-option-user-1"
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "width": 28,
+              }
+            }
+          >
+            <View
+              accessibilityLabel="alice.johnson's avatar"
+              accessible={true}
+              style={
+                [
+                  {
+                    "borderRadius": 4,
+                    "height": 28,
+                    "width": 28,
+                  },
+                  undefined,
+                ]
+              }
+              testID="avatar"
+            >
+              <ViewManagerAdapter_ExpoImage
+                borderRadius={4}
+                containerViewRef={"[React.ref]"}
+                contentFit="cover"
+                contentPosition={
+                  {
+                    "left": "50%",
+                    "top": "50%",
+                  }
+                }
+                height={28}
+                nativeViewRef={"[React.ref]"}
+                onError={[Function]}
+                onLoad={[Function]}
+                onLoadStart={[Function]}
+                onProgress={[Function]}
+                placeholder={[]}
+                priority="high"
+                source={
+                  [
+                    {
+                      "headers": {
+                        "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                      },
+                      "uri": "https://open.rocket.chat/avatar/alice.johnson?format=png&size=56",
+                    },
+                  ]
+                }
+                style={
+                  {
+                    "borderRadius": 4,
+                    "height": 28,
+                    "width": 28,
+                  }
+                }
+                transition={null}
+                width={28}
+              />
+            </View>
+          </View>
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "gap": 4,
+              }
+            }
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "#6C727A",
+                    "fontSize": 20,
+                  },
+                  [
+                    {
+                      "lineHeight": 20,
+                    },
+                    [
+                      {
+                        "height": 20,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                        "width": 20,
+                      },
+                      undefined,
+                    ],
+                  ],
+                  {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  {},
+                ]
+              }
+            >
+              
+            </Text>
+            <Text
+              numberOfLines={1}
+              style={
+                [
+                  {
+                    "backgroundColor": "transparent",
+                    "flexShrink": 1,
+                    "fontFamily": "Inter",
+                    "fontSize": 18,
+                    "fontWeight": "500",
+                    "lineHeight": 26,
+                    "textAlign": "left",
+                  },
+                  {
+                    "color": "#2F343D",
+                  },
+                ]
+              }
+            >
+              Alice Johnson
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            [
+              {
+                "height": 0.5,
+              },
+              undefined,
+              {
+                "backgroundColor": "#CBCED1",
+              },
+            ]
+          }
+        />
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "gap": 4,
+                "paddingHorizontal": 12,
+                "paddingVertical": 10,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+              },
+            ]
+          }
+          testID="new-media-call-option-user-2"
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "width": 28,
+              }
+            }
+          >
+            <View
+              accessibilityLabel="very.long.username's avatar"
+              accessible={true}
+              style={
+                [
+                  {
+                    "borderRadius": 4,
+                    "height": 28,
+                    "width": 28,
+                  },
+                  undefined,
+                ]
+              }
+              testID="avatar"
+            >
+              <ViewManagerAdapter_ExpoImage
+                borderRadius={4}
+                containerViewRef={"[React.ref]"}
+                contentFit="cover"
+                contentPosition={
+                  {
+                    "left": "50%",
+                    "top": "50%",
+                  }
+                }
+                height={28}
+                nativeViewRef={"[React.ref]"}
+                onError={[Function]}
+                onLoad={[Function]}
+                onLoadStart={[Function]}
+                onProgress={[Function]}
+                placeholder={[]}
+                priority="high"
+                source={
+                  [
+                    {
+                      "headers": {
+                        "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                      },
+                      "uri": "https://open.rocket.chat/avatar/very.long.username?format=png&size=56",
+                    },
+                  ]
+                }
+                style={
+                  {
+                    "borderRadius": 4,
+                    "height": 28,
+                    "width": 28,
+                  }
+                }
+                transition={null}
+                width={28}
+              />
+            </View>
+          </View>
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "gap": 4,
+              }
+            }
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "#6C727A",
+                    "fontSize": 20,
+                  },
+                  [
+                    {
+                      "lineHeight": 20,
+                    },
+                    [
+                      {
+                        "height": 20,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                        "width": 20,
+                      },
+                      undefined,
+                    ],
+                  ],
+                  {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  {},
+                ]
+              }
+            >
+              
+            </Text>
+            <Text
+              numberOfLines={1}
+              style={
+                [
+                  {
+                    "backgroundColor": "transparent",
+                    "flexShrink": 1,
+                    "fontFamily": "Inter",
+                    "fontSize": 18,
+                    "fontWeight": "500",
+                    "lineHeight": 26,
+                    "textAlign": "left",
+                  },
+                  {
+                    "color": "#2F343D",
+                  },
+                ]
+              }
+            >
+              Long display name to validate text truncation behavior for PeerItem in narrow widths
+            </Text>
+          </View>
+        </View>
+        <View
+          style={
+            [
+              {
+                "height": 0.5,
+              },
+              undefined,
+              {
+                "backgroundColor": "#CBCED1",
+              },
+            ]
+          }
+        />
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          collapsable={false}
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "gap": 4,
+                "paddingHorizontal": 12,
+                "paddingVertical": 10,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+              },
+            ]
+          }
+          testID="new-media-call-option-user-3"
+        >
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "width": 28,
+              }
+            }
+          >
+            <View
+              accessibilityLabel="bob.smith's avatar"
+              accessible={true}
+              style={
+                [
+                  {
+                    "borderRadius": 4,
+                    "height": 28,
+                    "width": 28,
+                  },
+                  undefined,
+                ]
+              }
+              testID="avatar"
+            >
+              <ViewManagerAdapter_ExpoImage
+                borderRadius={4}
+                containerViewRef={"[React.ref]"}
+                contentFit="cover"
+                contentPosition={
+                  {
+                    "left": "50%",
+                    "top": "50%",
+                  }
+                }
+                height={28}
+                nativeViewRef={"[React.ref]"}
+                onError={[Function]}
+                onLoad={[Function]}
+                onLoadStart={[Function]}
+                onProgress={[Function]}
+                placeholder={[]}
+                priority="high"
+                source={
+                  [
+                    {
+                      "headers": {
+                        "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                      },
+                      "uri": "https://open.rocket.chat/avatar/bob.smith?format=png&size=56",
+                    },
+                  ]
+                }
+                style={
+                  {
+                    "borderRadius": 4,
+                    "height": 28,
+                    "width": 28,
+                  }
+                }
+                transition={null}
+                width={28}
+              />
+            </View>
+          </View>
+          <View
+            style={
+              {
+                "alignItems": "center",
+                "flex": 1,
+                "flexDirection": "row",
+                "gap": 4,
+              }
+            }
+          >
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "#6C727A",
+                    "fontSize": 20,
+                  },
+                  [
+                    {
+                      "lineHeight": 20,
+                    },
+                    [
+                      {
+                        "height": 20,
+                        "textAlign": "center",
+                        "textAlignVertical": "center",
+                        "width": 20,
+                      },
+                      undefined,
+                    ],
+                  ],
+                  {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  {},
+                ]
+              }
+            >
+              
+            </Text>
+            <Text
+              numberOfLines={1}
+              style={
+                [
+                  {
+                    "backgroundColor": "transparent",
+                    "flexShrink": 1,
+                    "fontFamily": "Inter",
+                    "fontSize": 18,
+                    "fontWeight": "500",
+                    "lineHeight": 26,
+                    "textAlign": "left",
+                  },
+                  {
+                    "color": "#2F343D",
+                  },
+                ]
+              }
+            >
+              Bob Smith
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </RCTScrollView>
+</View>
+`;
diff --git a/app/containers/NewMediaCall/__snapshots__/SelectedPeer.test.tsx.snap b/app/containers/NewMediaCall/__snapshots__/SelectedPeer.test.tsx.snap
new file mode 100644
index 00000000000..dfd483664c5
--- /dev/null
+++ b/app/containers/NewMediaCall/__snapshots__/SelectedPeer.test.tsx.snap
@@ -0,0 +1,674 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Story Snapshots: LongUsername should match snapshot 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+      "gap": 12,
+      "padding": 16,
+    }
+  }
+>
+  <Text
+    style={
+      {
+        "fontSize": 13,
+        "opacity": 0.6,
+      }
+    }
+  >
+    Long username variant
+  </Text>
+  <View
+    style={
+      {
+        "marginBottom": 16,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "alignSelf": "flex-start",
+            "borderRadius": 4,
+            "flexDirection": "row",
+            "minHeight": 48,
+            "paddingHorizontal": 10,
+          },
+          {
+            "backgroundColor": "#E4E7EA",
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "width": 28,
+          }
+        }
+      >
+        <View
+          accessibilityLabel="this.is.a.very.long.username.for.storybook.preview's avatar"
+          accessible={true}
+          style={
+            [
+              {
+                "borderRadius": 4,
+                "height": 28,
+                "width": 28,
+              },
+              undefined,
+            ]
+          }
+          testID="avatar"
+        >
+          <ViewManagerAdapter_ExpoImage
+            borderRadius={4}
+            containerViewRef={"[React.ref]"}
+            contentFit="cover"
+            contentPosition={
+              {
+                "left": "50%",
+                "top": "50%",
+              }
+            }
+            height={28}
+            nativeViewRef={"[React.ref]"}
+            onError={[Function]}
+            onLoad={[Function]}
+            onLoadStart={[Function]}
+            onProgress={[Function]}
+            placeholder={[]}
+            priority="high"
+            source={
+              [
+                {
+                  "headers": {
+                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                  },
+                  "uri": "https://open.rocket.chat/avatar/this.is.a.very.long.username.for.storybook.preview?format=png&size=56",
+                },
+              ]
+            }
+            style={
+              {
+                "borderRadius": 4,
+                "height": 28,
+                "width": 28,
+              }
+            }
+            transition={null}
+            width={28}
+          />
+        </View>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flex": 1,
+            "flexDirection": "row",
+            "gap": 4,
+          }
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
+            [
+              {
+                "color": "#6C727A",
+                "fontSize": 20,
+              },
+              [
+                {
+                  "lineHeight": 20,
+                },
+                [
+                  {
+                    "height": 20,
+                    "textAlign": "center",
+                    "textAlignVertical": "center",
+                    "width": 20,
+                  },
+                  undefined,
+                ],
+              ],
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+        <Text
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontSize": 18,
+                "fontWeight": "500",
+                "lineHeight": 26,
+                "textAlign": "left",
+              },
+              {
+                "color": "#2F343D",
+              },
+            ]
+          }
+        >
+          Long display name to validate text truncation behavior for SelectedPeer in narrow widths
+        </Text>
+      </View>
+      <View
+        accessibilityLabel="Remove"
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          {
+            "marginLeft": 10,
+            "padding": 2,
+          }
+        }
+        testID="new-media-call-clear-selected-peer"
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
+            [
+              {
+                "color": "#1F2329",
+                "fontSize": 16,
+              },
+              [
+                {
+                  "lineHeight": 16,
+                },
+                undefined,
+              ],
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Story Snapshots: Sip should match snapshot 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+      "gap": 12,
+      "padding": 16,
+    }
+  }
+>
+  <Text
+    style={
+      {
+        "fontSize": 13,
+        "opacity": 0.6,
+      }
+    }
+  >
+    SIP variant
+  </Text>
+  <View
+    style={
+      {
+        "marginBottom": 16,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "alignSelf": "flex-start",
+            "borderRadius": 4,
+            "flexDirection": "row",
+            "minHeight": 48,
+            "paddingHorizontal": 10,
+          },
+          {
+            "backgroundColor": "#E4E7EA",
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "width": 28,
+          }
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
+            [
+              {
+                "color": "#6C727A",
+                "fontSize": 20,
+              },
+              [
+                {
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flex": 1,
+            "flexDirection": "row",
+            "gap": 4,
+          }
+        }
+      >
+        <Text
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontSize": 18,
+                "fontWeight": "500",
+                "lineHeight": 26,
+                "textAlign": "left",
+              },
+              {
+                "color": "#2F343D",
+              },
+            ]
+          }
+        >
+          +55 11 99999-9999
+        </Text>
+      </View>
+      <View
+        accessibilityLabel="Remove"
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          {
+            "marginLeft": 10,
+            "padding": 2,
+          }
+        }
+        testID="new-media-call-clear-selected-peer"
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
+            [
+              {
+                "color": "#1F2329",
+                "fontSize": 16,
+              },
+              [
+                {
+                  "lineHeight": 16,
+                },
+                undefined,
+              ],
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Story Snapshots: User should match snapshot 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+      "gap": 12,
+      "padding": 16,
+    }
+  }
+>
+  <Text
+    style={
+      {
+        "fontSize": 13,
+        "opacity": 0.6,
+      }
+    }
+  >
+    User variant
+  </Text>
+  <View
+    style={
+      {
+        "marginBottom": 16,
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "alignSelf": "flex-start",
+            "borderRadius": 4,
+            "flexDirection": "row",
+            "minHeight": 48,
+            "paddingHorizontal": 10,
+          },
+          {
+            "backgroundColor": "#E4E7EA",
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "width": 28,
+          }
+        }
+      >
+        <View
+          accessibilityLabel="alice.johnson's avatar"
+          accessible={true}
+          style={
+            [
+              {
+                "borderRadius": 4,
+                "height": 28,
+                "width": 28,
+              },
+              undefined,
+            ]
+          }
+          testID="avatar"
+        >
+          <ViewManagerAdapter_ExpoImage
+            borderRadius={4}
+            containerViewRef={"[React.ref]"}
+            contentFit="cover"
+            contentPosition={
+              {
+                "left": "50%",
+                "top": "50%",
+              }
+            }
+            height={28}
+            nativeViewRef={"[React.ref]"}
+            onError={[Function]}
+            onLoad={[Function]}
+            onLoadStart={[Function]}
+            onProgress={[Function]}
+            placeholder={[]}
+            priority="high"
+            source={
+              [
+                {
+                  "headers": {
+                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                  },
+                  "uri": "https://open.rocket.chat/avatar/alice.johnson?format=png&size=56",
+                },
+              ]
+            }
+            style={
+              {
+                "borderRadius": 4,
+                "height": 28,
+                "width": 28,
+              }
+            }
+            transition={null}
+            width={28}
+          />
+        </View>
+      </View>
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flex": 1,
+            "flexDirection": "row",
+            "gap": 4,
+          }
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
+            [
+              {
+                "color": "#6C727A",
+                "fontSize": 20,
+              },
+              [
+                {
+                  "lineHeight": 20,
+                },
+                [
+                  {
+                    "height": 20,
+                    "textAlign": "center",
+                    "textAlignVertical": "center",
+                    "width": 20,
+                  },
+                  undefined,
+                ],
+              ],
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+        <Text
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontSize": 18,
+                "fontWeight": "500",
+                "lineHeight": 26,
+                "textAlign": "left",
+              },
+              {
+                "color": "#2F343D",
+              },
+            ]
+          }
+        >
+          Alice Johnson
+        </Text>
+      </View>
+      <View
+        accessibilityLabel="Remove"
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          {
+            "marginLeft": 10,
+            "padding": 2,
+          }
+        }
+        testID="new-media-call-clear-selected-peer"
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
+            [
+              {
+                "color": "#1F2329",
+                "fontSize": 16,
+              },
+              [
+                {
+                  "lineHeight": 16,
+                },
+                undefined,
+              ],
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
diff --git a/app/lib/services/voip/usePeerAutocompleteStore.test.ts b/app/lib/services/voip/usePeerAutocompleteStore.test.ts
new file mode 100644
index 00000000000..312a2a0a100
--- /dev/null
+++ b/app/lib/services/voip/usePeerAutocompleteStore.test.ts
@@ -0,0 +1,153 @@
+import { renderHook, act } from '@testing-library/react-native';
+
+import { usePeerAutocompleteStore } from './usePeerAutocompleteStore';
+import type { TPeerItem } from './getPeerAutocompleteOptions';
+
+const mockGetPeerAutocompleteOptions = jest.fn();
+
+jest.mock('./getPeerAutocompleteOptions', () => ({
+	getPeerAutocompleteOptions: (args: unknown) => mockGetPeerAutocompleteOptions(args)
+}));
+
+const userPeer: TPeerItem = {
+	type: 'user',
+	value: 'user-1',
+	label: 'Alice Johnson',
+	username: 'alice.johnson'
+};
+
+const mockOptions: TPeerItem[] = [
+	userPeer,
+	{
+		type: 'sip',
+		value: '+5511999999999',
+		label: '+55 11 99999-9999'
+	}
+];
+
+describe('usePeerAutocompleteStore', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		usePeerAutocompleteStore.setState({
+			options: [],
+			selectedPeer: null,
+			filter: ''
+		});
+		mockGetPeerAutocompleteOptions.mockResolvedValue(mockOptions);
+	});
+
+	describe('setSelectedPeer', () => {
+		it('should set selected peer', () => {
+			const { result } = renderHook(() => usePeerAutocompleteStore());
+
+			act(() => {
+				result.current.setSelectedPeer(userPeer);
+			});
+
+			expect(usePeerAutocompleteStore.getState().selectedPeer).toEqual(userPeer);
+		});
+
+		it('should clear selected peer when null is passed', () => {
+			usePeerAutocompleteStore.setState({ selectedPeer: userPeer });
+			const { result } = renderHook(() => usePeerAutocompleteStore());
+
+			act(() => {
+				result.current.setSelectedPeer(null);
+			});
+
+			expect(usePeerAutocompleteStore.getState().selectedPeer).toBeNull();
+		});
+	});
+
+	describe('setFilter', () => {
+		it('should set filter value', () => {
+			const { result } = renderHook(() => usePeerAutocompleteStore());
+
+			act(() => {
+				result.current.setFilter('alice');
+			});
+
+			expect(usePeerAutocompleteStore.getState().filter).toBe('alice');
+		});
+	});
+
+	describe('clearSelection', () => {
+		it('should clear selected peer', () => {
+			usePeerAutocompleteStore.setState({ selectedPeer: userPeer });
+			const { result } = renderHook(() => usePeerAutocompleteStore());
+
+			act(() => {
+				result.current.clearSelection();
+			});
+
+			expect(usePeerAutocompleteStore.getState().selectedPeer).toBeNull();
+		});
+	});
+
+	describe('fetchOptions', () => {
+		it('should set empty options when filter is empty', async () => {
+			const { result } = renderHook(() => usePeerAutocompleteStore());
+
+			await act(async () => {
+				await result.current.fetchOptions('');
+			});
+
+			expect(usePeerAutocompleteStore.getState().options).toEqual([]);
+			expect(mockGetPeerAutocompleteOptions).not.toHaveBeenCalled();
+		});
+
+		it('should set empty options when filter is only whitespace', async () => {
+			const { result } = renderHook(() => usePeerAutocompleteStore());
+
+			await act(async () => {
+				await result.current.fetchOptions('   ');
+			});
+
+			expect(usePeerAutocompleteStore.getState().options).toEqual([]);
+			expect(mockGetPeerAutocompleteOptions).not.toHaveBeenCalled();
+		});
+
+		it('should fetch and set options when filter has value', async () => {
+			const { result } = renderHook(() => usePeerAutocompleteStore());
+
+			await act(async () => {
+				await result.current.fetchOptions('alice');
+			});
+
+			expect(mockGetPeerAutocompleteOptions).toHaveBeenCalledWith({
+				filter: 'alice',
+				peerInfo: null
+			});
+			expect(usePeerAutocompleteStore.getState().options).toEqual(mockOptions);
+		});
+
+		it('should pass selected peer to getPeerAutocompleteOptions', async () => {
+			usePeerAutocompleteStore.setState({ selectedPeer: userPeer });
+			const { result } = renderHook(() => usePeerAutocompleteStore());
+
+			await act(async () => {
+				await result.current.fetchOptions('bob');
+			});
+
+			expect(mockGetPeerAutocompleteOptions).toHaveBeenCalledWith({
+				filter: 'bob',
+				peerInfo: userPeer
+			});
+		});
+
+		it('should set empty options on fetch error', async () => {
+			mockGetPeerAutocompleteOptions.mockRejectedValue(new Error('API error'));
+			const consoleSpy = jest.spyOn(console, 'log').mockImplementation();
+
+			const { result } = renderHook(() => usePeerAutocompleteStore());
+
+			await act(async () => {
+				await result.current.fetchOptions('alice');
+			});
+
+			expect(usePeerAutocompleteStore.getState().options).toEqual([]);
+			expect(consoleSpy).toHaveBeenCalledWith('Failed to fetch options');
+			consoleSpy.mockRestore();
+		});
+	});
+});

From 6c316d46e3352d0d611d86cb8709ee72cc177bbf Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Fri, 6 Mar 2026 11:35:05 -0300
Subject: [PATCH 08/20] Fixed chip and improve stories

---
 app/containers/NewMediaCall/PeerItem.tsx      |  5 +-
 app/containers/NewMediaCall/PeerItemInner.tsx | 12 +++--
 .../NewMediaCall/SelectedPeer.stories.tsx     | 21 ++++++--
 app/containers/NewMediaCall/SelectedPeer.tsx  | 50 ++++++++++++-------
 4 files changed, 59 insertions(+), 29 deletions(-)

diff --git a/app/containers/NewMediaCall/PeerItem.tsx b/app/containers/NewMediaCall/PeerItem.tsx
index 6a79c8fedd6..d316c86a3c4 100644
--- a/app/containers/NewMediaCall/PeerItem.tsx
+++ b/app/containers/NewMediaCall/PeerItem.tsx
@@ -24,9 +24,6 @@ export const PeerItem = ({ item, onSelectOption }: { item: TPeerItem; onSelectOp
 const styles = StyleSheet.create({
 	container: {
 		paddingVertical: 10,
-		paddingHorizontal: 12,
-		flexDirection: 'row',
-		alignItems: 'center',
-		gap: 4
+		paddingHorizontal: 12
 	}
 });
diff --git a/app/containers/NewMediaCall/PeerItemInner.tsx b/app/containers/NewMediaCall/PeerItemInner.tsx
index 2080c9c6946..ac5c86e48e7 100644
--- a/app/containers/NewMediaCall/PeerItemInner.tsx
+++ b/app/containers/NewMediaCall/PeerItemInner.tsx
@@ -13,7 +13,7 @@ export const PeerItemInner = ({ item }: { item: TPeerItem }) => {
 	const isSip = item.type === 'sip';
 
 	return (
-		<>
+		<View style={styles.container}>
 			<View style={styles.icon}>
 				{isSip ? (
 					<CustomIcon name='phone-in' size={20} color={colors.fontSecondaryInfo} />
@@ -27,17 +27,23 @@ export const PeerItemInner = ({ item }: { item: TPeerItem }) => {
 					{item.label}
 				</Text>
 			</View>
-		</>
+		</View>
 	);
 };
 
 const styles = StyleSheet.create({
+	container: {
+		flexShrink: 1,
+		flexDirection: 'row',
+		alignItems: 'center',
+		gap: 4
+	},
 	icon: {
 		width: 28,
 		alignItems: 'center'
 	},
 	nameContainer: {
-		flex: 1,
+		flexShrink: 1,
 		flexDirection: 'row',
 		alignItems: 'center',
 		gap: 4
diff --git a/app/containers/NewMediaCall/SelectedPeer.stories.tsx b/app/containers/NewMediaCall/SelectedPeer.stories.tsx
index b093c0f80e9..db095b3cc15 100644
--- a/app/containers/NewMediaCall/SelectedPeer.stories.tsx
+++ b/app/containers/NewMediaCall/SelectedPeer.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
-import { SelectedPeer } from './SelectedPeer';
+import { SelectedPeerInner } from './SelectedPeer';
 import type { TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
 
 const styles = StyleSheet.create({
@@ -45,15 +45,26 @@ const longUsernamePeer: TPeerItem = {
 
 export default {
 	title: 'NewMediaCall/SelectedPeer',
-	component: SelectedPeer
+	component: SelectedPeerInner
 };
 
+export const All = () => (
+	<View style={styles.container}>
+		<Text style={styles.sectionLabel}>User variant</Text>
+		<SelectedPeerInner selectedPeer={userPeer} />
+		<Text style={styles.sectionLabel}>SIP variant</Text>
+		<SelectedPeerInner selectedPeer={sipPeer} />
+		<Text style={styles.sectionLabel}>Long username variant</Text>
+		<SelectedPeerInner selectedPeer={longUsernamePeer} />
+	</View>
+);
+
 export const User = () => {
 	setStoreState(userPeer);
 	return (
 		<View style={styles.container}>
 			<Text style={styles.sectionLabel}>User variant</Text>
-			<SelectedPeer />
+			<SelectedPeerInner selectedPeer={userPeer} />
 		</View>
 	);
 };
@@ -63,7 +74,7 @@ export const Sip = () => {
 	return (
 		<View style={styles.container}>
 			<Text style={styles.sectionLabel}>SIP variant</Text>
-			<SelectedPeer />
+			<SelectedPeerInner selectedPeer={sipPeer} />
 		</View>
 	);
 };
@@ -73,7 +84,7 @@ export const LongUsername = () => {
 	return (
 		<View style={styles.container}>
 			<Text style={styles.sectionLabel}>Long username variant</Text>
-			<SelectedPeer />
+			<SelectedPeerInner selectedPeer={longUsernamePeer} />
 		</View>
 	);
 };
diff --git a/app/containers/NewMediaCall/SelectedPeer.tsx b/app/containers/NewMediaCall/SelectedPeer.tsx
index dedec50a305..b83df64b1f9 100644
--- a/app/containers/NewMediaCall/SelectedPeer.tsx
+++ b/app/containers/NewMediaCall/SelectedPeer.tsx
@@ -1,50 +1,66 @@
-import { View, Pressable, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
+import { BorderlessButton } from 'react-native-gesture-handler';
 
 import { useTheme } from '../../theme';
 import { CustomIcon } from '../CustomIcon';
 import I18n from '../../i18n';
 import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
 import { PeerItemInner } from './PeerItemInner';
+import type { TPeerItem } from '../../lib/services/voip/getPeerAutocompleteOptions';
 
 export const SelectedPeer = () => {
-	const { colors } = useTheme();
 	const selectedPeer = usePeerAutocompleteStore(state => state.selectedPeer);
+	return <SelectedPeerInner selectedPeer={selectedPeer} />;
+};
+
+export const SelectedPeerInner = ({ selectedPeer }: { selectedPeer: TPeerItem | null }) => {
+	const { colors } = useTheme();
 	const clearSelection = usePeerAutocompleteStore(state => state.clearSelection);
 
 	if (!selectedPeer) return null;
 
 	return (
-		<View style={styles.selectedTagContainer}>
+		<View style={styles.container}>
 			<View style={[styles.selectedTag, { backgroundColor: colors.buttonBackgroundSecondaryDefault }]}>
 				<PeerItemInner item={selectedPeer} />
-				<Pressable
-					onPress={clearSelection}
-					style={styles.removeButton}
-					accessibilityRole='button'
-					accessibilityLabel={I18n.t('Remove')}
-					testID='new-media-call-clear-selected-peer'
-					android_ripple={{ color: colors.surfaceSelected }}>
-					<CustomIcon name='close' size={16} color={colors.buttonFontSecondary} />
-				</Pressable>
+				<View style={styles.removeButtonContainer}>
+					<BorderlessButton
+						onPress={clearSelection}
+						testID='new-media-call-clear-selected-peer'
+						rippleColor={colors.buttonBackgroundSecondaryPress}
+						foreground
+						style={styles.removeButton}
+						accessibilityLabel={I18n.t('Remove')}
+						accessibilityRole='button'
+						hitSlop={10}>
+						<CustomIcon name={'close'} size={16} color={colors.buttonFontSecondary} />
+					</BorderlessButton>
+				</View>
 			</View>
 		</View>
 	);
 };
 
 const styles = StyleSheet.create({
-	selectedTagContainer: {
-		marginBottom: 16
+	container: {
+		flexDirection: 'row',
+		alignItems: 'center'
 	},
 	selectedTag: {
-		alignSelf: 'flex-start',
+		flexShrink: 1,
 		minHeight: 48,
 		borderRadius: 4,
 		paddingHorizontal: 10,
 		flexDirection: 'row',
-		alignItems: 'center'
+		alignItems: 'center',
+		gap: 10
+	},
+	removeButtonContainer: {
+		// flexGrow: 1
+		// flex: 1
+		// flexShrink: 0
 	},
 	removeButton: {
-		marginLeft: 10,
 		padding: 2
 	}
 });

From 9341fa8f057964d200c8e33161990ea4696458b9 Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Fri, 6 Mar 2026 15:00:10 -0300
Subject: [PATCH 09/20] Reset store when action sheet is closed

---
 app/containers/NewMediaCall/NewMediaCall.tsx  | 23 ++++++++++++-------
 app/lib/hooks/useSubscription.ts              | 21 +++++++++++++++++
 .../services/voip/usePeerAutocompleteStore.ts |  5 ++++
 app/views/RoomView/RightButtons.tsx           |  1 -
 .../RoomView/components/HeaderCallButton.tsx  |  7 +++---
 5 files changed, 44 insertions(+), 13 deletions(-)
 create mode 100644 app/lib/hooks/useSubscription.ts

diff --git a/app/containers/NewMediaCall/NewMediaCall.tsx b/app/containers/NewMediaCall/NewMediaCall.tsx
index 50bd2b6a44b..28a9fd9976c 100644
--- a/app/containers/NewMediaCall/NewMediaCall.tsx
+++ b/app/containers/NewMediaCall/NewMediaCall.tsx
@@ -1,14 +1,21 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { PeerList } from './PeerList';
 import { SelectedPeer } from './SelectedPeer';
 import { Container } from './Container';
 import { CreateCall } from './CreateCall';
+import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
 
-export const NewMediaCall = (): React.ReactElement => (
-	<Container>
-		<SelectedPeer />
-		<PeerList />
-		<CreateCall />
-	</Container>
-);
+export const NewMediaCall = (): React.ReactElement => {
+	// reset the store when the action sheet is closed
+	const reset = usePeerAutocompleteStore(state => state.reset);
+	useEffect(() => () => reset(), [reset]);
+
+	return (
+		<Container>
+			<SelectedPeer />
+			<PeerList />
+			<CreateCall />
+		</Container>
+	);
+};
diff --git a/app/lib/hooks/useSubscription.ts b/app/lib/hooks/useSubscription.ts
new file mode 100644
index 00000000000..4d45bc713d5
--- /dev/null
+++ b/app/lib/hooks/useSubscription.ts
@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+import { type TSubscriptionModel } from '../../definitions';
+import { getSubscriptionByRoomId } from '../database/services/Subscription';
+
+export const useSubscription = (rid: string): TSubscriptionModel | undefined => {
+	'use memo';
+
+	const [subscription, setSubscription] = useState<TSubscriptionModel>();
+	useEffect(() => {
+		const load = async () => {
+			const result = await getSubscriptionByRoomId(rid);
+			if (result) {
+				setSubscription(result);
+			}
+		};
+		load();
+	}, [rid]);
+
+	return subscription;
+};
diff --git a/app/lib/services/voip/usePeerAutocompleteStore.ts b/app/lib/services/voip/usePeerAutocompleteStore.ts
index 5d522e8c12f..df1381f5f03 100644
--- a/app/lib/services/voip/usePeerAutocompleteStore.ts
+++ b/app/lib/services/voip/usePeerAutocompleteStore.ts
@@ -13,6 +13,7 @@ type TPeerAutocompleteActions = {
 	setSelectedPeer: (peer: TPeerItem | null) => void;
 	setFilter: (filter: string) => void;
 	clearSelection: () => void;
+	reset: () => void;
 };
 
 export type TPeerAutocompleteStore = TPeerAutocompleteState & TPeerAutocompleteActions;
@@ -52,5 +53,9 @@ export const usePeerAutocompleteStore = create<TPeerAutocompleteStore>((set, get
 
 	clearSelection: () => {
 		set({ selectedPeer: null });
+	},
+
+	reset: () => {
+		set({ options: [], selectedPeer: null, filter: '' });
 	}
 }));
diff --git a/app/views/RoomView/RightButtons.tsx b/app/views/RoomView/RightButtons.tsx
index a389453ff6b..2ad9a83367e 100644
--- a/app/views/RoomView/RightButtons.tsx
+++ b/app/views/RoomView/RightButtons.tsx
@@ -528,7 +528,6 @@ class RightButtonsContainer extends Component<IRightButtonsProps, IRigthButtonsS
 					accessibilityLabel={i18n.t('Call_room_name', { roomName: accessibilityRoomName })}
 					rid={rid}
 					disabled={hasE2EEWarning}
-					room={this.room}
 				/>
 				{threadsEnabled ? (
 					<HeaderButton.Item
diff --git a/app/views/RoomView/components/HeaderCallButton.tsx b/app/views/RoomView/components/HeaderCallButton.tsx
index c42094d5d64..1b06fbada18 100644
--- a/app/views/RoomView/components/HeaderCallButton.tsx
+++ b/app/views/RoomView/components/HeaderCallButton.tsx
@@ -2,26 +2,25 @@ import React from 'react';
 
 import * as HeaderButton from '../../../containers/Header/components/HeaderButton';
 import { useVideoConf } from '../../../lib/hooks/useVideoConf';
-import type { TSubscriptionModel } from '../../../definitions';
 import { useMediaCallPermission } from '../../../lib/hooks/useMediaCallPermission';
 import { NewMediaCall } from '../../../containers/NewMediaCall';
 import { showActionSheetRef } from '../../../containers/ActionSheet';
 import { getUidDirectMessage } from '../../../lib/methods/helpers/helpers';
 import { usePeerAutocompleteStore } from '../../../lib/services/voip/usePeerAutocompleteStore';
+import { useSubscription } from '../../../lib/hooks/useSubscription';
 
 export const HeaderCallButton = ({
 	rid,
 	disabled,
-	accessibilityLabel,
-	room
+	accessibilityLabel
 }: {
 	rid: string;
 	disabled: boolean;
 	accessibilityLabel: string;
-	room?: TSubscriptionModel;
 }): React.ReactElement | null => {
 	'use memo';
 
+	const room = useSubscription(rid);
 	const { showInitCallActionSheet, callEnabled, disabledTooltip } = useVideoConf(rid);
 	const hasMediaCallPermission = useMediaCallPermission();
 

From 42bffbe1184435b0f500e20603f144ffc4f33ce1 Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Fri, 6 Mar 2026 15:16:00 -0300
Subject: [PATCH 10/20] create separate BaseButton component on RoomInfo

---
 .../RoomInfoView/components/BaseButton.tsx    | 37 +++++++++++++++++++
 .../components/RoomInfoButtons.tsx            | 37 ++-----------------
 2 files changed, 40 insertions(+), 34 deletions(-)
 create mode 100644 app/views/RoomInfoView/components/BaseButton.tsx

diff --git a/app/views/RoomInfoView/components/BaseButton.tsx b/app/views/RoomInfoView/components/BaseButton.tsx
new file mode 100644
index 00000000000..7174012a8ab
--- /dev/null
+++ b/app/views/RoomInfoView/components/BaseButton.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { BorderlessButton } from 'react-native-gesture-handler';
+
+import { CustomIcon, type TIconsName } from '../../../containers/CustomIcon';
+import { useTheme } from '../../../theme';
+import styles from '../styles';
+
+export function BaseButton({
+	danger,
+	iconName,
+	onPress,
+	label,
+	showIcon = true,
+	enabled = true
+}: {
+	danger?: boolean;
+	iconName: TIconsName;
+	onPress?: (prop: any) => void;
+	label: string;
+	showIcon?: boolean;
+	enabled?: boolean;
+}): React.ReactElement | null {
+	const { colors } = useTheme();
+	const color = danger ? colors.buttonBackgroundDangerDefault : colors.fontHint;
+
+	if (showIcon)
+		return (
+			<BorderlessButton enabled={enabled} testID={`room-info-view-${iconName}`} onPress={onPress} style={styles.roomButton}>
+				<CustomIcon name={iconName} size={30} color={color} />
+				<Text numberOfLines={1} style={[styles.roomButtonText, { color }]}>
+					{label}
+				</Text>
+			</BorderlessButton>
+		);
+	return null;
+}
diff --git a/app/views/RoomInfoView/components/RoomInfoButtons.tsx b/app/views/RoomInfoView/components/RoomInfoButtons.tsx
index d04b966b9aa..ed8cb79643b 100644
--- a/app/views/RoomInfoView/components/RoomInfoButtons.tsx
+++ b/app/views/RoomInfoView/components/RoomInfoButtons.tsx
@@ -1,12 +1,10 @@
 import React from 'react';
-import { Text, View } from 'react-native';
-import { BorderlessButton } from 'react-native-gesture-handler';
+import { View } from 'react-native';
 
-import { CustomIcon, type TIconsName } from '../../../containers/CustomIcon';
+import { type TIconsName } from '../../../containers/CustomIcon';
 import { type ISubscription, SubscriptionType } from '../../../definitions';
 import i18n from '../../../i18n';
 import { useVideoConf } from '../../../lib/hooks/useVideoConf';
-import { useTheme } from '../../../theme';
 import styles from '../styles';
 import { compareServerVersion } from '../../../lib/methods/helpers';
 import { useE2EEWarning } from '../hooks';
@@ -14,6 +12,7 @@ import { useActionSheet } from '../../../containers/ActionSheet';
 import type { TActionSheetOptionsItem } from '../../../containers/ActionSheet';
 import { mediaSessionInstance } from '../../../lib/services/voip/MediaSessionInstance';
 import { useMediaCallPermission } from '../../../lib/hooks/useMediaCallPermission';
+import { BaseButton } from './BaseButton';
 
 type ButtonConfig = {
 	label: string;
@@ -24,36 +23,6 @@ type ButtonConfig = {
 	show: boolean;
 };
 
-function BaseButton({
-	danger,
-	iconName,
-	onPress,
-	label,
-	showIcon = true,
-	enabled = true
-}: {
-	danger?: boolean;
-	iconName: TIconsName;
-	onPress?: (prop: any) => void;
-	label: string;
-	showIcon?: boolean;
-	enabled?: boolean;
-}): React.ReactElement | null {
-	const { colors } = useTheme();
-	const color = danger ? colors.buttonBackgroundDangerDefault : colors.fontHint;
-
-	if (showIcon)
-		return (
-			<BorderlessButton enabled={enabled} testID={`room-info-view-${iconName}`} onPress={onPress} style={styles.roomButton}>
-				<CustomIcon name={iconName} size={30} color={color} />
-				<Text numberOfLines={1} style={[styles.roomButtonText, { color }]}>
-					{label}
-				</Text>
-			</BorderlessButton>
-		);
-	return null;
-}
-
 interface IRoomInfoButtons {
 	rid: string;
 	room: ISubscription | undefined;

From 35142f413c0115606982f6c622d7e8dbe7df7d85 Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Fri, 6 Mar 2026 15:21:55 -0300
Subject: [PATCH 11/20] refactor: replace useMediaCallPermission with
 useNewMediaCall for improved call handling

---
 .../useMediaCallPermission.ts                 |  6 +--
 app/lib/hooks/useNewMediaCall/index.ts        |  1 +
 .../hooks/useNewMediaCall/useNewMediaCall.tsx | 37 +++++++++++++++++++
 .../components/CallSection.tsx                | 11 ++----
 .../components/RoomInfoButtons.tsx            | 12 ++----
 .../RoomView/components/HeaderCallButton.tsx  | 22 ++---------
 app/views/SidebarView/components/Stacks.tsx   | 27 +++++++-------
 7 files changed, 63 insertions(+), 53 deletions(-)
 create mode 100644 app/lib/hooks/useNewMediaCall/index.ts
 create mode 100644 app/lib/hooks/useNewMediaCall/useNewMediaCall.tsx

diff --git a/app/lib/hooks/useMediaCallPermission/useMediaCallPermission.ts b/app/lib/hooks/useMediaCallPermission/useMediaCallPermission.ts
index 15e039bcf9f..22547836172 100644
--- a/app/lib/hooks/useMediaCallPermission/useMediaCallPermission.ts
+++ b/app/lib/hooks/useMediaCallPermission/useMediaCallPermission.ts
@@ -1,9 +1,9 @@
-import { useAppSelector } from '../useAppSelector';
+// import { useAppSelector } from '../useAppSelector';
 import { usePermissions } from '../usePermissions';
 
 export const useMediaCallPermission = () => {
-	const enterpriseModules = useAppSelector(state => state.enterpriseModules);
-	const isVoipModuleAvailable = enterpriseModules.includes('teams-voip');
+	// const enterpriseModules = useAppSelector(state => state.enterpriseModules);
+	const isVoipModuleAvailable = true; // enterpriseModules.includes('teams-voip');
 	const [allowInternalVoiceCall, allowExternalVoiceCall] = usePermissions([
 		'allow-internal-voice-calls',
 		'allow-external-voice-calls'
diff --git a/app/lib/hooks/useNewMediaCall/index.ts b/app/lib/hooks/useNewMediaCall/index.ts
new file mode 100644
index 00000000000..c34af4de557
--- /dev/null
+++ b/app/lib/hooks/useNewMediaCall/index.ts
@@ -0,0 +1 @@
+export * from './useNewMediaCall';
diff --git a/app/lib/hooks/useNewMediaCall/useNewMediaCall.tsx b/app/lib/hooks/useNewMediaCall/useNewMediaCall.tsx
new file mode 100644
index 00000000000..774a4612f30
--- /dev/null
+++ b/app/lib/hooks/useNewMediaCall/useNewMediaCall.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { NewMediaCall } from '../../../containers/NewMediaCall';
+import { showActionSheetRef } from '../../../containers/ActionSheet';
+import { getUidDirectMessage } from '../../methods/helpers/helpers';
+import { usePeerAutocompleteStore } from '../../services/voip/usePeerAutocompleteStore';
+import { useSubscription } from '../useSubscription';
+import { useMediaCallPermission } from '../useMediaCallPermission';
+
+export const useNewMediaCall = (rid: string) => {
+	const room = useSubscription(rid);
+	const hasMediaCallPermission = useMediaCallPermission();
+
+	const openNewMediaCall = () => {
+		if (!room) return;
+		const otherUserId = getUidDirectMessage(room);
+		if (!otherUserId) return;
+		usePeerAutocompleteStore.getState().setSelectedPeer({ type: 'user', value: otherUserId, label: room.name });
+		showActionSheetRef({
+			children: <NewMediaCall />
+		});
+	};
+
+	return { openNewMediaCall, hasMediaCallPermission };
+};
+
+export const useNewMediaCallWithoutRoom = () => {
+	const hasMediaCallPermission = useMediaCallPermission();
+
+	const openNewMediaCall = () => {
+		showActionSheetRef({
+			children: <NewMediaCall />
+		});
+	};
+
+	return { openNewMediaCall, hasMediaCallPermission };
+};
diff --git a/app/views/RoomActionsView/components/CallSection.tsx b/app/views/RoomActionsView/components/CallSection.tsx
index 4d0707a52d5..bdfc0465e41 100644
--- a/app/views/RoomActionsView/components/CallSection.tsx
+++ b/app/views/RoomActionsView/components/CallSection.tsx
@@ -4,7 +4,7 @@ import * as List from '../../../containers/List';
 import { useVideoConf } from '../../../lib/hooks/useVideoConf';
 import { mediaSessionInstance } from '../../../lib/services/voip/MediaSessionInstance';
 import type { TSubscriptionModel } from '../../../definitions';
-import { useMediaCallPermission } from '../../../lib/hooks/useMediaCallPermission';
+import { useNewMediaCall } from '../../../lib/hooks/useNewMediaCall';
 
 export default function CallSection({
 	room,
@@ -14,12 +14,7 @@ export default function CallSection({
 	disabled: boolean;
 }): React.ReactElement | null {
 	const { callEnabled, showInitCallActionSheet, disabledTooltip } = useVideoConf(room.rid);
-	const hasMediaCallPermission = useMediaCallPermission();
-
-	const handleVoiceCallPress = () => {
-		if (!room) return;
-		mediaSessionInstance.startCallByRoom(room);
-	};
+	const { openNewMediaCall, hasMediaCallPermission } = useNewMediaCall(room.rid);
 
 	if (!hasMediaCallPermission && !callEnabled) {
 		return null;
@@ -32,7 +27,7 @@ export default function CallSection({
 				<>
 					<List.Item
 						title={'Voice_call'}
-						onPress={handleVoiceCallPress}
+						onPress={openNewMediaCall}
 						testID='room-actions-voice-call'
 						left={() => <List.Icon name='phone' />}
 						showActionIndicator
diff --git a/app/views/RoomInfoView/components/RoomInfoButtons.tsx b/app/views/RoomInfoView/components/RoomInfoButtons.tsx
index ed8cb79643b..33396816579 100644
--- a/app/views/RoomInfoView/components/RoomInfoButtons.tsx
+++ b/app/views/RoomInfoView/components/RoomInfoButtons.tsx
@@ -10,9 +10,8 @@ import { compareServerVersion } from '../../../lib/methods/helpers';
 import { useE2EEWarning } from '../hooks';
 import { useActionSheet } from '../../../containers/ActionSheet';
 import type { TActionSheetOptionsItem } from '../../../containers/ActionSheet';
-import { mediaSessionInstance } from '../../../lib/services/voip/MediaSessionInstance';
-import { useMediaCallPermission } from '../../../lib/hooks/useMediaCallPermission';
 import { BaseButton } from './BaseButton';
+import { useNewMediaCall } from '../../../lib/hooks/useNewMediaCall';
 
 type ButtonConfig = {
 	label: string;
@@ -57,7 +56,7 @@ export const RoomInfoButtons = ({
 	const room = roomFromRid || roomFromProps;
 	const { showActionSheet } = useActionSheet();
 	const { callEnabled, disabledTooltip, showInitCallActionSheet } = useVideoConf(rid);
-	const hasMediaCallPermission = useMediaCallPermission();
+	const { openNewMediaCall, hasMediaCallPermission } = useNewMediaCall(rid);
 
 	// Following the web behavior, when is a DM with myself, shouldn't appear block or ignore option
 	const isDmWithMyself = room?.uids?.filter((uid: string) => uid !== roomUserId).length === 0;
@@ -73,11 +72,6 @@ export const RoomInfoButtons = ({
 		!itsMe && isDirectFromSaved && !isDmWithMyself && compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '6.4.0');
 	const renderVideoCall = !hasE2EEWarning && callEnabled && !roomFromRid;
 
-	const handleVoiceCall = () => {
-		if (!room) return;
-		mediaSessionInstance.startCallByRoom(room);
-	};
-
 	const allItems: ButtonConfig[] = [
 		{
 			label: i18n.t('Message'),
@@ -89,7 +83,7 @@ export const RoomInfoButtons = ({
 		{
 			label: i18n.t('Voice_call'),
 			iconName: 'phone',
-			onPress: handleVoiceCall,
+			onPress: openNewMediaCall,
 			enabled: true,
 			show: hasMediaCallPermission
 		},
diff --git a/app/views/RoomView/components/HeaderCallButton.tsx b/app/views/RoomView/components/HeaderCallButton.tsx
index 1b06fbada18..8aba69242c9 100644
--- a/app/views/RoomView/components/HeaderCallButton.tsx
+++ b/app/views/RoomView/components/HeaderCallButton.tsx
@@ -2,12 +2,7 @@ import React from 'react';
 
 import * as HeaderButton from '../../../containers/Header/components/HeaderButton';
 import { useVideoConf } from '../../../lib/hooks/useVideoConf';
-import { useMediaCallPermission } from '../../../lib/hooks/useMediaCallPermission';
-import { NewMediaCall } from '../../../containers/NewMediaCall';
-import { showActionSheetRef } from '../../../containers/ActionSheet';
-import { getUidDirectMessage } from '../../../lib/methods/helpers/helpers';
-import { usePeerAutocompleteStore } from '../../../lib/services/voip/usePeerAutocompleteStore';
-import { useSubscription } from '../../../lib/hooks/useSubscription';
+import { useNewMediaCall } from '../../../lib/hooks/useNewMediaCall';
 
 export const HeaderCallButton = ({
 	rid,
@@ -20,27 +15,16 @@ export const HeaderCallButton = ({
 }): React.ReactElement | null => {
 	'use memo';
 
-	const room = useSubscription(rid);
 	const { showInitCallActionSheet, callEnabled, disabledTooltip } = useVideoConf(rid);
-	const hasMediaCallPermission = useMediaCallPermission();
+	const { openNewMediaCall, hasMediaCallPermission } = useNewMediaCall(rid);
 
 	if (hasMediaCallPermission) {
-		const handlePress = () => {
-			if (!room) return;
-			const otherUserId = getUidDirectMessage(room);
-			if (!otherUserId) return;
-			usePeerAutocompleteStore.getState().setSelectedPeer({ type: 'user', value: otherUserId, label: room.name });
-			showActionSheetRef({
-				children: <NewMediaCall />
-			});
-		};
-
 		return (
 			<HeaderButton.Item
 				accessibilityLabel={accessibilityLabel}
 				disabled={disabled}
 				iconName='phone'
-				onPress={handlePress}
+				onPress={openNewMediaCall}
 				testID='room-view-header-call'
 			/>
 		);
diff --git a/app/views/SidebarView/components/Stacks.tsx b/app/views/SidebarView/components/Stacks.tsx
index 556c74d6921..27959cebdbe 100644
--- a/app/views/SidebarView/components/Stacks.tsx
+++ b/app/views/SidebarView/components/Stacks.tsx
@@ -2,15 +2,14 @@ import { useTheme } from '../../../theme';
 import * as List from '../../../containers/List';
 import { sidebarNavigate } from '../methods/sidebarNavigate';
 import { useAppSelector } from '../../../lib/hooks/useAppSelector';
-import { simulateCall } from '../../../lib/services/voip/simulateCall';
-import { useCallStore } from '../../../lib/services/voip/useCallStore';
+import { useNewMediaCallWithoutRoom } from '../../../lib/hooks/useNewMediaCall';
 
 const Stacks = ({ currentScreen }: { currentScreen: string | null }) => {
 	'use memo';
 
 	const { colors } = useTheme();
 	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
-	const toggleFocus = useCallStore(state => state.toggleFocus);
+	const { openNewMediaCall, hasMediaCallPermission } = useNewMediaCallWithoutRoom();
 
 	if (isMasterDetail) {
 		return null;
@@ -26,17 +25,17 @@ const Stacks = ({ currentScreen }: { currentScreen: string | null }) => {
 				testID='sidebar-chats'
 			/>
 			<List.Separator />
-			<List.Item
-				title={'Voice_call'}
-				left={() => <List.Icon name='phone' />}
-				onPress={() => {
-					simulateCall();
-					toggleFocus();
-				}}
-				// backgroundColor={currentScreen === 'ChatsStackNavigator' ? colors.strokeLight : undefined}
-				testID='sidebar-voice-call'
-			/>
-			<List.Separator />
+			{hasMediaCallPermission ? (
+				<>
+					<List.Item
+						title={'Voice_call'}
+						left={() => <List.Icon name='phone' />}
+						onPress={openNewMediaCall}
+						testID='sidebar-media-call'
+					/>
+					<List.Separator />
+				</>
+			) : null}
 			<List.Item
 				title={'Profile'}
 				left={() => <List.Icon name='user' />}

From 0f9b6a53ae249753628a1e3613ee14e9f3d92ee2 Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Fri, 6 Mar 2026 15:32:48 -0300
Subject: [PATCH 12/20] Refactor

---
 .../hooks/useNewMediaCall/useNewMediaCall.tsx | 24 ++-----
 app/lib/hooks/useSubscription.ts              |  3 +-
 app/views/NewMessageView/Item.tsx             | 65 ++++++++++---------
 .../components/CallSection.tsx                |  1 -
 app/views/SidebarView/components/Stacks.tsx   |  4 +-
 5 files changed, 46 insertions(+), 51 deletions(-)

diff --git a/app/lib/hooks/useNewMediaCall/useNewMediaCall.tsx b/app/lib/hooks/useNewMediaCall/useNewMediaCall.tsx
index 774a4612f30..abc96721cb8 100644
--- a/app/lib/hooks/useNewMediaCall/useNewMediaCall.tsx
+++ b/app/lib/hooks/useNewMediaCall/useNewMediaCall.tsx
@@ -7,27 +7,17 @@ import { usePeerAutocompleteStore } from '../../services/voip/usePeerAutocomplet
 import { useSubscription } from '../useSubscription';
 import { useMediaCallPermission } from '../useMediaCallPermission';
 
-export const useNewMediaCall = (rid: string) => {
+export const useNewMediaCall = (rid?: string) => {
 	const room = useSubscription(rid);
 	const hasMediaCallPermission = useMediaCallPermission();
 
 	const openNewMediaCall = () => {
-		if (!room) return;
-		const otherUserId = getUidDirectMessage(room);
-		if (!otherUserId) return;
-		usePeerAutocompleteStore.getState().setSelectedPeer({ type: 'user', value: otherUserId, label: room.name });
-		showActionSheetRef({
-			children: <NewMediaCall />
-		});
-	};
-
-	return { openNewMediaCall, hasMediaCallPermission };
-};
-
-export const useNewMediaCallWithoutRoom = () => {
-	const hasMediaCallPermission = useMediaCallPermission();
-
-	const openNewMediaCall = () => {
+		if (room) {
+			const otherUserId = getUidDirectMessage(room);
+			if (otherUserId) {
+				usePeerAutocompleteStore.getState().setSelectedPeer({ type: 'user', value: otherUserId, label: room.name });
+			}
+		}
 		showActionSheetRef({
 			children: <NewMediaCall />
 		});
diff --git a/app/lib/hooks/useSubscription.ts b/app/lib/hooks/useSubscription.ts
index 4d45bc713d5..ef44e22882e 100644
--- a/app/lib/hooks/useSubscription.ts
+++ b/app/lib/hooks/useSubscription.ts
@@ -3,12 +3,13 @@ import { useEffect, useState } from 'react';
 import { type TSubscriptionModel } from '../../definitions';
 import { getSubscriptionByRoomId } from '../database/services/Subscription';
 
-export const useSubscription = (rid: string): TSubscriptionModel | undefined => {
+export const useSubscription = (rid?: string): TSubscriptionModel | undefined => {
 	'use memo';
 
 	const [subscription, setSubscription] = useState<TSubscriptionModel>();
 	useEffect(() => {
 		const load = async () => {
+			if (!rid) return;
 			const result = await getSubscriptionByRoomId(rid);
 			if (result) {
 				setSubscription(result);
diff --git a/app/views/NewMessageView/Item.tsx b/app/views/NewMessageView/Item.tsx
index 0228b22b7d0..bccbe860fdc 100644
--- a/app/views/NewMessageView/Item.tsx
+++ b/app/views/NewMessageView/Item.tsx
@@ -6,37 +6,11 @@ import Avatar from '../../containers/Avatar';
 import { CustomIcon } from '../../containers/CustomIcon';
 import sharedStyles from '../Styles';
 import { useTheme } from '../../theme';
-import { mediaSessionInstance } from '../../lib/services/voip/MediaSessionInstance';
 import I18n from '../../i18n';
 import { useMediaCallPermission } from '../../lib/hooks/useMediaCallPermission';
-
-const styles = StyleSheet.create({
-	button: {
-		height: 54
-	},
-	container: {
-		flexDirection: 'row'
-	},
-	avatar: {
-		marginHorizontal: 12,
-		marginVertical: 12
-	},
-	textContainer: {
-		flex: 1,
-		flexDirection: 'column',
-		justifyContent: 'center',
-		marginRight: 12
-	},
-	name: {
-		fontSize: 18,
-		lineHeight: 26,
-		...sharedStyles.textMedium
-	},
-	iconContainer: {
-		paddingHorizontal: 15,
-		alignSelf: 'center'
-	}
-});
+import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
+import { showActionSheetRef } from '../../containers/ActionSheet';
+import { NewMediaCall } from '../../containers/NewMediaCall';
 
 interface IItem {
 	userId: string;
@@ -53,7 +27,10 @@ const Item = ({ userId, name, username, onPress, testID, onLongPress }: IItem) =
 
 	const handleCallPress = () => {
 		if (!userId) return;
-		mediaSessionInstance.startCall(userId, 'user');
+		usePeerAutocompleteStore.getState().setSelectedPeer({ type: 'user', value: userId, label: name });
+		showActionSheetRef({
+			children: <NewMediaCall />
+		});
 	};
 
 	return (
@@ -90,3 +67,31 @@ const Item = ({ userId, name, username, onPress, testID, onLongPress }: IItem) =
 };
 
 export default Item;
+
+const styles = StyleSheet.create({
+	button: {
+		height: 54
+	},
+	container: {
+		flexDirection: 'row'
+	},
+	avatar: {
+		marginHorizontal: 12,
+		marginVertical: 12
+	},
+	textContainer: {
+		flex: 1,
+		flexDirection: 'column',
+		justifyContent: 'center',
+		marginRight: 12
+	},
+	name: {
+		fontSize: 18,
+		lineHeight: 26,
+		...sharedStyles.textMedium
+	},
+	iconContainer: {
+		paddingHorizontal: 15,
+		alignSelf: 'center'
+	}
+});
diff --git a/app/views/RoomActionsView/components/CallSection.tsx b/app/views/RoomActionsView/components/CallSection.tsx
index bdfc0465e41..2d385e44b8a 100644
--- a/app/views/RoomActionsView/components/CallSection.tsx
+++ b/app/views/RoomActionsView/components/CallSection.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 
 import * as List from '../../../containers/List';
 import { useVideoConf } from '../../../lib/hooks/useVideoConf';
-import { mediaSessionInstance } from '../../../lib/services/voip/MediaSessionInstance';
 import type { TSubscriptionModel } from '../../../definitions';
 import { useNewMediaCall } from '../../../lib/hooks/useNewMediaCall';
 
diff --git a/app/views/SidebarView/components/Stacks.tsx b/app/views/SidebarView/components/Stacks.tsx
index 27959cebdbe..78bab8fe79d 100644
--- a/app/views/SidebarView/components/Stacks.tsx
+++ b/app/views/SidebarView/components/Stacks.tsx
@@ -2,14 +2,14 @@ import { useTheme } from '../../../theme';
 import * as List from '../../../containers/List';
 import { sidebarNavigate } from '../methods/sidebarNavigate';
 import { useAppSelector } from '../../../lib/hooks/useAppSelector';
-import { useNewMediaCallWithoutRoom } from '../../../lib/hooks/useNewMediaCall';
+import { useNewMediaCall } from '../../../lib/hooks/useNewMediaCall';
 
 const Stacks = ({ currentScreen }: { currentScreen: string | null }) => {
 	'use memo';
 
 	const { colors } = useTheme();
 	const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
-	const { openNewMediaCall, hasMediaCallPermission } = useNewMediaCallWithoutRoom();
+	const { openNewMediaCall, hasMediaCallPermission } = useNewMediaCall();
 
 	if (isMasterDetail) {
 		return null;

From 5de5f5009abea560ad598703957bed4bcc67dc24 Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Fri, 6 Mar 2026 16:15:16 -0300
Subject: [PATCH 13/20] Update unit tests

---
 .../MediaCallHeader.test.tsx.snap             |   10 +-
 app/containers/NewMediaCall/SelectedPeer.tsx  |   29 +-
 .../__snapshots__/PeerItem.test.tsx.snap      |  554 ++++---
 .../__snapshots__/PeerList.test.tsx.snap      |  772 ++++-----
 .../__snapshots__/SelectedPeer.test.tsx.snap  | 1421 +++++++++++++----
 .../useMediaCallPermission.ts                 |    6 +-
 .../useNewMediaCall/useNewMediaCall.test.tsx  |  106 ++
 app/views/NewMessageView/Item.test.tsx        |   39 +-
 .../components/RoomInfoButtons.test.tsx       |   39 +-
 9 files changed, 1946 insertions(+), 1030 deletions(-)
 create mode 100644 app/lib/hooks/useNewMediaCall/useNewMediaCall.test.tsx

diff --git a/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap b/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap
index f59afe0f849..4b3a0116b8b 100644
--- a/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap
+++ b/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap
@@ -229,7 +229,7 @@ exports[`Story Snapshots: ActiveCall should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16498:00:44
+              16523:14:23
             </Text>
           </Text>
         </View>
@@ -576,7 +576,7 @@ exports[`Story Snapshots: Collapsed should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16498:00:44
+              16523:14:23
             </Text>
           </Text>
         </View>
@@ -1266,7 +1266,7 @@ exports[`Story Snapshots: Focused should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16498:00:44
+              16523:14:23
             </Text>
           </Text>
         </View>
@@ -1633,7 +1633,7 @@ exports[`Story Snapshots: WithRemoteHeld should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16498:00:44
+              16523:14:23
             </Text>
           </Text>
         </View>
@@ -1980,7 +1980,7 @@ exports[`Story Snapshots: WithRemoteMuted should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16498:00:44
+              16523:14:23
             </Text>
           </Text>
         </View>
diff --git a/app/containers/NewMediaCall/SelectedPeer.tsx b/app/containers/NewMediaCall/SelectedPeer.tsx
index b83df64b1f9..e3faee6caa9 100644
--- a/app/containers/NewMediaCall/SelectedPeer.tsx
+++ b/app/containers/NewMediaCall/SelectedPeer.tsx
@@ -23,19 +23,17 @@ export const SelectedPeerInner = ({ selectedPeer }: { selectedPeer: TPeerItem |
 		<View style={styles.container}>
 			<View style={[styles.selectedTag, { backgroundColor: colors.buttonBackgroundSecondaryDefault }]}>
 				<PeerItemInner item={selectedPeer} />
-				<View style={styles.removeButtonContainer}>
-					<BorderlessButton
-						onPress={clearSelection}
-						testID='new-media-call-clear-selected-peer'
-						rippleColor={colors.buttonBackgroundSecondaryPress}
-						foreground
-						style={styles.removeButton}
-						accessibilityLabel={I18n.t('Remove')}
-						accessibilityRole='button'
-						hitSlop={10}>
-						<CustomIcon name={'close'} size={16} color={colors.buttonFontSecondary} />
-					</BorderlessButton>
-				</View>
+				<BorderlessButton
+					onPress={clearSelection}
+					testID='new-media-call-clear-selected-peer'
+					rippleColor={colors.buttonBackgroundSecondaryPress}
+					foreground
+					style={styles.removeButton}
+					accessibilityLabel={I18n.t('Remove')}
+					accessibilityRole='button'
+					hitSlop={10}>
+					<CustomIcon name={'close'} size={16} color={colors.buttonFontSecondary} />
+				</BorderlessButton>
 			</View>
 		</View>
 	);
@@ -55,11 +53,6 @@ const styles = StyleSheet.create({
 		alignItems: 'center',
 		gap: 10
 	},
-	removeButtonContainer: {
-		// flexGrow: 1
-		// flex: 1
-		// flexShrink: 0
-	},
 	removeButton: {
 		padding: 2
 	}
diff --git a/app/containers/NewMediaCall/__snapshots__/PeerItem.test.tsx.snap b/app/containers/NewMediaCall/__snapshots__/PeerItem.test.tsx.snap
index 8f6eb318c00..627400c6caf 100644
--- a/app/containers/NewMediaCall/__snapshots__/PeerItem.test.tsx.snap
+++ b/app/containers/NewMediaCall/__snapshots__/PeerItem.test.tsx.snap
@@ -53,9 +53,6 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
     style={
       [
         {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "gap": 4,
           "paddingHorizontal": 12,
           "paddingVertical": 10,
         },
@@ -70,130 +67,141 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
       style={
         {
           "alignItems": "center",
-          "width": 28,
+          "flexDirection": "row",
+          "flexShrink": 1,
+          "gap": 4,
         }
       }
     >
       <View
-        accessibilityLabel="alice.johnson's avatar"
-        accessible={true}
         style={
-          [
-            {
-              "borderRadius": 4,
-              "height": 28,
-              "width": 28,
-            },
-            undefined,
-          ]
+          {
+            "alignItems": "center",
+            "width": 28,
+          }
         }
-        testID="avatar"
       >
-        <ViewManagerAdapter_ExpoImage
-          borderRadius={4}
-          containerViewRef={"[React.ref]"}
-          contentFit="cover"
-          contentPosition={
-            {
-              "left": "50%",
-              "top": "50%",
-            }
-          }
-          height={28}
-          nativeViewRef={"[React.ref]"}
-          onError={[Function]}
-          onLoad={[Function]}
-          onLoadStart={[Function]}
-          onProgress={[Function]}
-          placeholder={[]}
-          priority="high"
-          source={
+        <View
+          accessibilityLabel="alice.johnson's avatar"
+          accessible={true}
+          style={
             [
               {
-                "headers": {
-                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                },
-                "uri": "https://open.rocket.chat/avatar/alice.johnson?format=png&size=56",
+                "borderRadius": 4,
+                "height": 28,
+                "width": 28,
               },
+              undefined,
             ]
           }
-          style={
-            {
-              "borderRadius": 4,
-              "height": 28,
-              "width": 28,
+          testID="avatar"
+        >
+          <ViewManagerAdapter_ExpoImage
+            borderRadius={4}
+            containerViewRef={"[React.ref]"}
+            contentFit="cover"
+            contentPosition={
+              {
+                "left": "50%",
+                "top": "50%",
+              }
             }
-          }
-          transition={null}
-          width={28}
-        />
+            height={28}
+            nativeViewRef={"[React.ref]"}
+            onError={[Function]}
+            onLoad={[Function]}
+            onLoadStart={[Function]}
+            onProgress={[Function]}
+            placeholder={[]}
+            priority="high"
+            source={
+              [
+                {
+                  "headers": {
+                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                  },
+                  "uri": "https://open.rocket.chat/avatar/alice.johnson?format=png&size=56",
+                },
+              ]
+            }
+            style={
+              {
+                "borderRadius": 4,
+                "height": 28,
+                "width": 28,
+              }
+            }
+            transition={null}
+            width={28}
+          />
+        </View>
       </View>
-    </View>
-    <View
-      style={
-        {
-          "alignItems": "center",
-          "flex": 1,
-          "flexDirection": "row",
-          "gap": 4,
-        }
-      }
-    >
-      <Text
-        allowFontScaling={false}
-        selectable={false}
+      <View
         style={
-          [
-            {
-              "color": "#6C727A",
-              "fontSize": 20,
-            },
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "flexShrink": 1,
+            "gap": 4,
+          }
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
             [
               {
-                "lineHeight": 20,
+                "color": "#6C727A",
+                "fontSize": 20,
               },
               [
                 {
-                  "height": 20,
-                  "textAlign": "center",
-                  "textAlignVertical": "center",
-                  "width": 20,
+                  "lineHeight": 20,
                 },
-                undefined,
+                [
+                  {
+                    "height": 20,
+                    "textAlign": "center",
+                    "textAlignVertical": "center",
+                    "width": 20,
+                  },
+                  undefined,
+                ],
               ],
-            ],
-            {
-              "fontFamily": "custom",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-            {},
-          ]
-        }
-      >
-        
-      </Text>
-      <Text
-        numberOfLines={1}
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "flexShrink": 1,
-              "fontFamily": "Inter",
-              "fontSize": 18,
-              "fontWeight": "500",
-              "lineHeight": 26,
-              "textAlign": "left",
-            },
-            {
-              "color": "#2F343D",
-            },
-          ]
-        }
-      >
-        Alice Johnson
-      </Text>
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+        <Text
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontSize": 18,
+                "fontWeight": "500",
+                "lineHeight": 26,
+                "textAlign": "left",
+              },
+              {
+                "color": "#2F343D",
+              },
+            ]
+          }
+        >
+          Alice Johnson
+        </Text>
+      </View>
     </View>
   </View>
   <Text
@@ -239,9 +247,6 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
     style={
       [
         {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "gap": 4,
           "paddingHorizontal": 12,
           "paddingVertical": 10,
         },
@@ -256,68 +261,79 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
       style={
         {
           "alignItems": "center",
-          "width": 28,
+          "flexDirection": "row",
+          "flexShrink": 1,
+          "gap": 4,
         }
       }
     >
-      <Text
-        allowFontScaling={false}
-        selectable={false}
+      <View
         style={
-          [
-            {
-              "color": "#6C727A",
-              "fontSize": 20,
-            },
+          {
+            "alignItems": "center",
+            "width": 28,
+          }
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
             [
               {
-                "lineHeight": 20,
+                "color": "#6C727A",
+                "fontSize": 20,
               },
-              undefined,
-            ],
-            {
-              "fontFamily": "custom",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-            {},
-          ]
-        }
-      >
-        
-      </Text>
-    </View>
-    <View
-      style={
-        {
-          "alignItems": "center",
-          "flex": 1,
-          "flexDirection": "row",
-          "gap": 4,
-        }
-      }
-    >
-      <Text
-        numberOfLines={1}
+              [
+                {
+                  "lineHeight": 20,
+                },
+                undefined,
+              ],
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+      </View>
+      <View
         style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "flexShrink": 1,
-              "fontFamily": "Inter",
-              "fontSize": 18,
-              "fontWeight": "500",
-              "lineHeight": 26,
-              "textAlign": "left",
-            },
-            {
-              "color": "#2F343D",
-            },
-          ]
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "flexShrink": 1,
+            "gap": 4,
+          }
         }
       >
-        +55 11 99999-9999
-      </Text>
+        <Text
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontSize": 18,
+                "fontWeight": "500",
+                "lineHeight": 26,
+                "textAlign": "left",
+              },
+              {
+                "color": "#2F343D",
+              },
+            ]
+          }
+        >
+          +55 11 99999-9999
+        </Text>
+      </View>
     </View>
   </View>
   <Text
@@ -363,9 +379,6 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
     style={
       [
         {
-          "alignItems": "center",
-          "flexDirection": "row",
-          "gap": 4,
           "paddingHorizontal": 12,
           "paddingVertical": 10,
         },
@@ -380,130 +393,141 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
       style={
         {
           "alignItems": "center",
-          "width": 28,
+          "flexDirection": "row",
+          "flexShrink": 1,
+          "gap": 4,
         }
       }
     >
       <View
-        accessibilityLabel="very.long.username's avatar"
-        accessible={true}
         style={
-          [
-            {
-              "borderRadius": 4,
-              "height": 28,
-              "width": 28,
-            },
-            undefined,
-          ]
+          {
+            "alignItems": "center",
+            "width": 28,
+          }
         }
-        testID="avatar"
       >
-        <ViewManagerAdapter_ExpoImage
-          borderRadius={4}
-          containerViewRef={"[React.ref]"}
-          contentFit="cover"
-          contentPosition={
-            {
-              "left": "50%",
-              "top": "50%",
-            }
-          }
-          height={28}
-          nativeViewRef={"[React.ref]"}
-          onError={[Function]}
-          onLoad={[Function]}
-          onLoadStart={[Function]}
-          onProgress={[Function]}
-          placeholder={[]}
-          priority="high"
-          source={
+        <View
+          accessibilityLabel="very.long.username's avatar"
+          accessible={true}
+          style={
             [
               {
-                "headers": {
-                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                },
-                "uri": "https://open.rocket.chat/avatar/very.long.username?format=png&size=56",
+                "borderRadius": 4,
+                "height": 28,
+                "width": 28,
               },
+              undefined,
             ]
           }
-          style={
-            {
-              "borderRadius": 4,
-              "height": 28,
-              "width": 28,
+          testID="avatar"
+        >
+          <ViewManagerAdapter_ExpoImage
+            borderRadius={4}
+            containerViewRef={"[React.ref]"}
+            contentFit="cover"
+            contentPosition={
+              {
+                "left": "50%",
+                "top": "50%",
+              }
             }
-          }
-          transition={null}
-          width={28}
-        />
+            height={28}
+            nativeViewRef={"[React.ref]"}
+            onError={[Function]}
+            onLoad={[Function]}
+            onLoadStart={[Function]}
+            onProgress={[Function]}
+            placeholder={[]}
+            priority="high"
+            source={
+              [
+                {
+                  "headers": {
+                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                  },
+                  "uri": "https://open.rocket.chat/avatar/very.long.username?format=png&size=56",
+                },
+              ]
+            }
+            style={
+              {
+                "borderRadius": 4,
+                "height": 28,
+                "width": 28,
+              }
+            }
+            transition={null}
+            width={28}
+          />
+        </View>
       </View>
-    </View>
-    <View
-      style={
-        {
-          "alignItems": "center",
-          "flex": 1,
-          "flexDirection": "row",
-          "gap": 4,
-        }
-      }
-    >
-      <Text
-        allowFontScaling={false}
-        selectable={false}
+      <View
         style={
-          [
-            {
-              "color": "#6C727A",
-              "fontSize": 20,
-            },
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "flexShrink": 1,
+            "gap": 4,
+          }
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
             [
               {
-                "lineHeight": 20,
+                "color": "#6C727A",
+                "fontSize": 20,
               },
               [
                 {
-                  "height": 20,
-                  "textAlign": "center",
-                  "textAlignVertical": "center",
-                  "width": 20,
+                  "lineHeight": 20,
                 },
-                undefined,
+                [
+                  {
+                    "height": 20,
+                    "textAlign": "center",
+                    "textAlignVertical": "center",
+                    "width": 20,
+                  },
+                  undefined,
+                ],
               ],
-            ],
-            {
-              "fontFamily": "custom",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-            {},
-          ]
-        }
-      >
-        
-      </Text>
-      <Text
-        numberOfLines={1}
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "flexShrink": 1,
-              "fontFamily": "Inter",
-              "fontSize": 18,
-              "fontWeight": "500",
-              "lineHeight": 26,
-              "textAlign": "left",
-            },
-            {
-              "color": "#2F343D",
-            },
-          ]
-        }
-      >
-        Long display name to validate text truncation behavior for PeerItem in narrow widths
-      </Text>
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+        <Text
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontSize": 18,
+                "fontWeight": "500",
+                "lineHeight": 26,
+                "textAlign": "left",
+              },
+              {
+                "color": "#2F343D",
+              },
+            ]
+          }
+        >
+          Long display name to validate text truncation behavior for PeerItem in narrow widths
+        </Text>
+      </View>
     </View>
   </View>
 </View>
diff --git a/app/containers/NewMediaCall/__snapshots__/PeerList.test.tsx.snap b/app/containers/NewMediaCall/__snapshots__/PeerList.test.tsx.snap
index d005dfa9b16..1bb3e59ba2f 100644
--- a/app/containers/NewMediaCall/__snapshots__/PeerList.test.tsx.snap
+++ b/app/containers/NewMediaCall/__snapshots__/PeerList.test.tsx.snap
@@ -105,9 +105,6 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
           style={
             [
               {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "gap": 4,
                 "paddingHorizontal": 12,
                 "paddingVertical": 10,
               },
@@ -122,68 +119,79 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
             style={
               {
                 "alignItems": "center",
-                "width": 28,
+                "flexDirection": "row",
+                "flexShrink": 1,
+                "gap": 4,
               }
             }
           >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
+            <View
               style={
-                [
-                  {
-                    "color": "#6C727A",
-                    "fontSize": 20,
-                  },
+                {
+                  "alignItems": "center",
+                  "width": 28,
+                }
+              }
+            >
+              <Text
+                allowFontScaling={false}
+                selectable={false}
+                style={
                   [
                     {
-                      "lineHeight": 20,
+                      "color": "#6C727A",
+                      "fontSize": 20,
                     },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </View>
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "gap": 4,
-              }
-            }
-          >
-            <Text
-              numberOfLines={1}
+                    [
+                      {
+                        "lineHeight": 20,
+                      },
+                      undefined,
+                    ],
+                    {
+                      "fontFamily": "custom",
+                      "fontStyle": "normal",
+                      "fontWeight": "normal",
+                    },
+                    {},
+                  ]
+                }
+              >
+                
+              </Text>
+            </View>
+            <View
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "lineHeight": 26,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "flexShrink": 1,
+                  "gap": 4,
+                }
               }
             >
-              +55 11 98888-7777
-            </Text>
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "lineHeight": 26,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#2F343D",
+                    },
+                  ]
+                }
+              >
+                +55 11 98888-7777
+              </Text>
+            </View>
           </View>
         </View>
         <View
@@ -238,9 +246,6 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
           style={
             [
               {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "gap": 4,
                 "paddingHorizontal": 12,
                 "paddingVertical": 10,
               },
@@ -255,130 +260,141 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
             style={
               {
                 "alignItems": "center",
-                "width": 28,
+                "flexDirection": "row",
+                "flexShrink": 1,
+                "gap": 4,
               }
             }
           >
             <View
-              accessibilityLabel="alice.johnson's avatar"
-              accessible={true}
               style={
-                [
-                  {
-                    "borderRadius": 4,
-                    "height": 28,
-                    "width": 28,
-                  },
-                  undefined,
-                ]
+                {
+                  "alignItems": "center",
+                  "width": 28,
+                }
               }
-              testID="avatar"
             >
-              <ViewManagerAdapter_ExpoImage
-                borderRadius={4}
-                containerViewRef={"[React.ref]"}
-                contentFit="cover"
-                contentPosition={
-                  {
-                    "left": "50%",
-                    "top": "50%",
-                  }
-                }
-                height={28}
-                nativeViewRef={"[React.ref]"}
-                onError={[Function]}
-                onLoad={[Function]}
-                onLoadStart={[Function]}
-                onProgress={[Function]}
-                placeholder={[]}
-                priority="high"
-                source={
+              <View
+                accessibilityLabel="alice.johnson's avatar"
+                accessible={true}
+                style={
                   [
                     {
-                      "headers": {
-                        "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                      },
-                      "uri": "https://open.rocket.chat/avatar/alice.johnson?format=png&size=56",
+                      "borderRadius": 4,
+                      "height": 28,
+                      "width": 28,
                     },
+                    undefined,
                   ]
                 }
-                style={
-                  {
-                    "borderRadius": 4,
-                    "height": 28,
-                    "width": 28,
+                testID="avatar"
+              >
+                <ViewManagerAdapter_ExpoImage
+                  borderRadius={4}
+                  containerViewRef={"[React.ref]"}
+                  contentFit="cover"
+                  contentPosition={
+                    {
+                      "left": "50%",
+                      "top": "50%",
+                    }
                   }
-                }
-                transition={null}
-                width={28}
-              />
+                  height={28}
+                  nativeViewRef={"[React.ref]"}
+                  onError={[Function]}
+                  onLoad={[Function]}
+                  onLoadStart={[Function]}
+                  onProgress={[Function]}
+                  placeholder={[]}
+                  priority="high"
+                  source={
+                    [
+                      {
+                        "headers": {
+                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                        },
+                        "uri": "https://open.rocket.chat/avatar/alice.johnson?format=png&size=56",
+                      },
+                    ]
+                  }
+                  style={
+                    {
+                      "borderRadius": 4,
+                      "height": 28,
+                      "width": 28,
+                    }
+                  }
+                  transition={null}
+                  width={28}
+                />
+              </View>
             </View>
-          </View>
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "gap": 4,
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
+            <View
               style={
-                [
-                  {
-                    "color": "#6C727A",
-                    "fontSize": 20,
-                  },
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "flexShrink": 1,
+                  "gap": 4,
+                }
+              }
+            >
+              <Text
+                allowFontScaling={false}
+                selectable={false}
+                style={
                   [
                     {
-                      "lineHeight": 20,
+                      "color": "#6C727A",
+                      "fontSize": 20,
                     },
                     [
                       {
-                        "height": 20,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                        "width": 20,
+                        "lineHeight": 20,
                       },
-                      undefined,
+                      [
+                        {
+                          "height": 20,
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                          "width": 20,
+                        },
+                        undefined,
+                      ],
                     ],
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "lineHeight": 26,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Alice Johnson
-            </Text>
+                    {
+                      "fontFamily": "custom",
+                      "fontStyle": "normal",
+                      "fontWeight": "normal",
+                    },
+                    {},
+                  ]
+                }
+              >
+                
+              </Text>
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "lineHeight": 26,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#2F343D",
+                    },
+                  ]
+                }
+              >
+                Alice Johnson
+              </Text>
+            </View>
           </View>
         </View>
         <View
@@ -433,9 +449,6 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
           style={
             [
               {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "gap": 4,
                 "paddingHorizontal": 12,
                 "paddingVertical": 10,
               },
@@ -450,130 +463,141 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
             style={
               {
                 "alignItems": "center",
-                "width": 28,
+                "flexDirection": "row",
+                "flexShrink": 1,
+                "gap": 4,
               }
             }
           >
             <View
-              accessibilityLabel="very.long.username's avatar"
-              accessible={true}
               style={
-                [
-                  {
-                    "borderRadius": 4,
-                    "height": 28,
-                    "width": 28,
-                  },
-                  undefined,
-                ]
+                {
+                  "alignItems": "center",
+                  "width": 28,
+                }
               }
-              testID="avatar"
             >
-              <ViewManagerAdapter_ExpoImage
-                borderRadius={4}
-                containerViewRef={"[React.ref]"}
-                contentFit="cover"
-                contentPosition={
-                  {
-                    "left": "50%",
-                    "top": "50%",
-                  }
-                }
-                height={28}
-                nativeViewRef={"[React.ref]"}
-                onError={[Function]}
-                onLoad={[Function]}
-                onLoadStart={[Function]}
-                onProgress={[Function]}
-                placeholder={[]}
-                priority="high"
-                source={
+              <View
+                accessibilityLabel="very.long.username's avatar"
+                accessible={true}
+                style={
                   [
                     {
-                      "headers": {
-                        "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                      },
-                      "uri": "https://open.rocket.chat/avatar/very.long.username?format=png&size=56",
+                      "borderRadius": 4,
+                      "height": 28,
+                      "width": 28,
                     },
+                    undefined,
                   ]
                 }
-                style={
-                  {
-                    "borderRadius": 4,
-                    "height": 28,
-                    "width": 28,
+                testID="avatar"
+              >
+                <ViewManagerAdapter_ExpoImage
+                  borderRadius={4}
+                  containerViewRef={"[React.ref]"}
+                  contentFit="cover"
+                  contentPosition={
+                    {
+                      "left": "50%",
+                      "top": "50%",
+                    }
                   }
-                }
-                transition={null}
-                width={28}
-              />
+                  height={28}
+                  nativeViewRef={"[React.ref]"}
+                  onError={[Function]}
+                  onLoad={[Function]}
+                  onLoadStart={[Function]}
+                  onProgress={[Function]}
+                  placeholder={[]}
+                  priority="high"
+                  source={
+                    [
+                      {
+                        "headers": {
+                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                        },
+                        "uri": "https://open.rocket.chat/avatar/very.long.username?format=png&size=56",
+                      },
+                    ]
+                  }
+                  style={
+                    {
+                      "borderRadius": 4,
+                      "height": 28,
+                      "width": 28,
+                    }
+                  }
+                  transition={null}
+                  width={28}
+                />
+              </View>
             </View>
-          </View>
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "gap": 4,
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
+            <View
               style={
-                [
-                  {
-                    "color": "#6C727A",
-                    "fontSize": 20,
-                  },
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "flexShrink": 1,
+                  "gap": 4,
+                }
+              }
+            >
+              <Text
+                allowFontScaling={false}
+                selectable={false}
+                style={
                   [
                     {
-                      "lineHeight": 20,
+                      "color": "#6C727A",
+                      "fontSize": 20,
                     },
                     [
                       {
-                        "height": 20,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                        "width": 20,
+                        "lineHeight": 20,
                       },
-                      undefined,
+                      [
+                        {
+                          "height": 20,
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                          "width": 20,
+                        },
+                        undefined,
+                      ],
                     ],
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "lineHeight": 26,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Long display name to validate text truncation behavior for PeerItem in narrow widths
-            </Text>
+                    {
+                      "fontFamily": "custom",
+                      "fontStyle": "normal",
+                      "fontWeight": "normal",
+                    },
+                    {},
+                  ]
+                }
+              >
+                
+              </Text>
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "lineHeight": 26,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#2F343D",
+                    },
+                  ]
+                }
+              >
+                Long display name to validate text truncation behavior for PeerItem in narrow widths
+              </Text>
+            </View>
           </View>
         </View>
         <View
@@ -628,9 +652,6 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
           style={
             [
               {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "gap": 4,
                 "paddingHorizontal": 12,
                 "paddingVertical": 10,
               },
@@ -645,130 +666,141 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
             style={
               {
                 "alignItems": "center",
-                "width": 28,
+                "flexDirection": "row",
+                "flexShrink": 1,
+                "gap": 4,
               }
             }
           >
             <View
-              accessibilityLabel="bob.smith's avatar"
-              accessible={true}
               style={
-                [
-                  {
-                    "borderRadius": 4,
-                    "height": 28,
-                    "width": 28,
-                  },
-                  undefined,
-                ]
+                {
+                  "alignItems": "center",
+                  "width": 28,
+                }
               }
-              testID="avatar"
             >
-              <ViewManagerAdapter_ExpoImage
-                borderRadius={4}
-                containerViewRef={"[React.ref]"}
-                contentFit="cover"
-                contentPosition={
-                  {
-                    "left": "50%",
-                    "top": "50%",
-                  }
-                }
-                height={28}
-                nativeViewRef={"[React.ref]"}
-                onError={[Function]}
-                onLoad={[Function]}
-                onLoadStart={[Function]}
-                onProgress={[Function]}
-                placeholder={[]}
-                priority="high"
-                source={
+              <View
+                accessibilityLabel="bob.smith's avatar"
+                accessible={true}
+                style={
                   [
                     {
-                      "headers": {
-                        "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                      },
-                      "uri": "https://open.rocket.chat/avatar/bob.smith?format=png&size=56",
+                      "borderRadius": 4,
+                      "height": 28,
+                      "width": 28,
                     },
+                    undefined,
                   ]
                 }
-                style={
-                  {
-                    "borderRadius": 4,
-                    "height": 28,
-                    "width": 28,
+                testID="avatar"
+              >
+                <ViewManagerAdapter_ExpoImage
+                  borderRadius={4}
+                  containerViewRef={"[React.ref]"}
+                  contentFit="cover"
+                  contentPosition={
+                    {
+                      "left": "50%",
+                      "top": "50%",
+                    }
                   }
-                }
-                transition={null}
-                width={28}
-              />
+                  height={28}
+                  nativeViewRef={"[React.ref]"}
+                  onError={[Function]}
+                  onLoad={[Function]}
+                  onLoadStart={[Function]}
+                  onProgress={[Function]}
+                  placeholder={[]}
+                  priority="high"
+                  source={
+                    [
+                      {
+                        "headers": {
+                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                        },
+                        "uri": "https://open.rocket.chat/avatar/bob.smith?format=png&size=56",
+                      },
+                    ]
+                  }
+                  style={
+                    {
+                      "borderRadius": 4,
+                      "height": 28,
+                      "width": 28,
+                    }
+                  }
+                  transition={null}
+                  width={28}
+                />
+              </View>
             </View>
-          </View>
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "gap": 4,
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
+            <View
               style={
-                [
-                  {
-                    "color": "#6C727A",
-                    "fontSize": 20,
-                  },
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "flexShrink": 1,
+                  "gap": 4,
+                }
+              }
+            >
+              <Text
+                allowFontScaling={false}
+                selectable={false}
+                style={
                   [
                     {
-                      "lineHeight": 20,
+                      "color": "#6C727A",
+                      "fontSize": 20,
                     },
                     [
                       {
-                        "height": 20,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                        "width": 20,
+                        "lineHeight": 20,
                       },
-                      undefined,
+                      [
+                        {
+                          "height": 20,
+                          "textAlign": "center",
+                          "textAlignVertical": "center",
+                          "width": 20,
+                        },
+                        undefined,
+                      ],
                     ],
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 18,
-                    "fontWeight": "500",
-                    "lineHeight": 26,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Bob Smith
-            </Text>
+                    {
+                      "fontFamily": "custom",
+                      "fontStyle": "normal",
+                      "fontWeight": "normal",
+                    },
+                    {},
+                  ]
+                }
+              >
+                
+              </Text>
+              <Text
+                numberOfLines={1}
+                style={
+                  [
+                    {
+                      "backgroundColor": "transparent",
+                      "flexShrink": 1,
+                      "fontFamily": "Inter",
+                      "fontSize": 18,
+                      "fontWeight": "500",
+                      "lineHeight": 26,
+                      "textAlign": "left",
+                    },
+                    {
+                      "color": "#2F343D",
+                    },
+                  ]
+                }
+              >
+                Bob Smith
+              </Text>
+            </View>
           </View>
         </View>
       </View>
diff --git a/app/containers/NewMediaCall/__snapshots__/SelectedPeer.test.tsx.snap b/app/containers/NewMediaCall/__snapshots__/SelectedPeer.test.tsx.snap
index dfd483664c5..bc87d2db65c 100644
--- a/app/containers/NewMediaCall/__snapshots__/SelectedPeer.test.tsx.snap
+++ b/app/containers/NewMediaCall/__snapshots__/SelectedPeer.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Story Snapshots: LongUsername should match snapshot 1`] = `
+exports[`Story Snapshots: All should match snapshot 1`] = `
 <View
   style={
     {
@@ -18,12 +18,13 @@ exports[`Story Snapshots: LongUsername should match snapshot 1`] = `
       }
     }
   >
-    Long username variant
+    User variant
   </Text>
   <View
     style={
       {
-        "marginBottom": 16,
+        "alignItems": "center",
+        "flexDirection": "row",
       }
     }
   >
@@ -32,9 +33,10 @@ exports[`Story Snapshots: LongUsername should match snapshot 1`] = `
         [
           {
             "alignItems": "center",
-            "alignSelf": "flex-start",
             "borderRadius": 4,
             "flexDirection": "row",
+            "flexShrink": 1,
+            "gap": 10,
             "minHeight": 48,
             "paddingHorizontal": 10,
           },
@@ -48,168 +50,873 @@ exports[`Story Snapshots: LongUsername should match snapshot 1`] = `
         style={
           {
             "alignItems": "center",
-            "width": 28,
+            "flexDirection": "row",
+            "flexShrink": 1,
+            "gap": 4,
           }
         }
       >
         <View
-          accessibilityLabel="this.is.a.very.long.username.for.storybook.preview's avatar"
-          accessible={true}
+          style={
+            {
+              "alignItems": "center",
+              "width": 28,
+            }
+          }
+        >
+          <View
+            accessibilityLabel="alice.johnson's avatar"
+            accessible={true}
+            style={
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 28,
+                  "width": 28,
+                },
+                undefined,
+              ]
+            }
+            testID="avatar"
+          >
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={28}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
+                [
+                  {
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/alice.johnson?format=png&size=56",
+                  },
+                ]
+              }
+              style={
+                {
+                  "borderRadius": 4,
+                  "height": 28,
+                  "width": 28,
+                }
+              }
+              transition={null}
+              width={28}
+            />
+          </View>
+        </View>
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "flexShrink": 1,
+              "gap": 4,
+            }
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "#6C727A",
+                  "fontSize": 20,
+                },
+                [
+                  {
+                    "lineHeight": 20,
+                  },
+                  [
+                    {
+                      "height": 20,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                      "width": 20,
+                    },
+                    undefined,
+                  ],
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontSize": 18,
+                  "fontWeight": "500",
+                  "lineHeight": 26,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#2F343D",
+                },
+              ]
+            }
+          >
+            Alice Johnson
+          </Text>
+        </View>
+      </View>
+      <RNGestureHandlerButton
+        accessibilityLabel="Remove"
+        accessibilityRole="button"
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        delayLongPress={600}
+        foreground={true}
+        handlerTag={4}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={10}
+        innerRef={null}
+        onActiveStateChange={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onPress={
+          [MockFunction] {
+            "calls": [
+              [],
+            ],
+            "results": [
+              {
+                "type": "return",
+                "value": undefined,
+              },
+            ],
+          }
+        }
+        rippleColor="#9EA2A8"
+        style={
+          [
+            {
+              "opacity": 1,
+              "padding": 2,
+            },
+            {
+              "cursor": undefined,
+            },
+          ]
+        }
+        testID="new-media-call-clear-selected-peer"
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
           style={
             [
               {
-                "borderRadius": 4,
-                "height": 28,
-                "width": 28,
+                "color": "#1F2329",
+                "fontSize": 16,
               },
-              undefined,
+              [
+                {
+                  "lineHeight": 16,
+                },
+                undefined,
+              ],
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
             ]
           }
-          testID="avatar"
         >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
+          
+        </Text>
+      </RNGestureHandlerButton>
+    </View>
+  </View>
+  <Text
+    style={
+      {
+        "fontSize": 13,
+        "opacity": 0.6,
+      }
+    }
+  >
+    SIP variant
+  </Text>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderRadius": 4,
+            "flexDirection": "row",
+            "flexShrink": 1,
+            "gap": 10,
+            "minHeight": 48,
+            "paddingHorizontal": 10,
+          },
+          {
+            "backgroundColor": "#E4E7EA",
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "flexShrink": 1,
+            "gap": 4,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "width": 28,
             }
-            height={28}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
               [
                 {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                  "color": "#6C727A",
+                  "fontSize": 20,
+                },
+                [
+                  {
+                    "lineHeight": 20,
                   },
-                  "uri": "https://open.rocket.chat/avatar/this.is.a.very.long.username.for.storybook.preview?format=png&size=56",
+                  undefined,
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
                 },
+                {},
               ]
             }
+          >
+            
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "flexShrink": 1,
+              "gap": 4,
+            }
+          }
+        >
+          <Text
+            numberOfLines={1}
             style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontSize": 18,
+                  "fontWeight": "500",
+                  "lineHeight": 26,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#2F343D",
+                },
+              ]
+            }
+          >
+            +55 11 99999-9999
+          </Text>
+        </View>
+      </View>
+      <RNGestureHandlerButton
+        accessibilityLabel="Remove"
+        accessibilityRole="button"
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        delayLongPress={600}
+        foreground={true}
+        handlerTag={5}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={10}
+        innerRef={null}
+        onActiveStateChange={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onPress={
+          [MockFunction] {
+            "calls": [
+              [],
+            ],
+            "results": [
+              {
+                "type": "return",
+                "value": undefined,
+              },
+            ],
+          }
+        }
+        rippleColor="#9EA2A8"
+        style={
+          [
+            {
+              "opacity": 1,
+              "padding": 2,
+            },
+            {
+              "cursor": undefined,
+            },
+          ]
+        }
+        testID="new-media-call-clear-selected-peer"
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
+            [
+              {
+                "color": "#1F2329",
+                "fontSize": 16,
+              },
+              [
+                {
+                  "lineHeight": 16,
+                },
+                undefined,
+              ],
               {
-                "borderRadius": 4,
-                "height": 28,
-                "width": 28,
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+      </RNGestureHandlerButton>
+    </View>
+  </View>
+  <Text
+    style={
+      {
+        "fontSize": 13,
+        "opacity": 0.6,
+      }
+    }
+  >
+    Long username variant
+  </Text>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderRadius": 4,
+            "flexDirection": "row",
+            "flexShrink": 1,
+            "gap": 10,
+            "minHeight": 48,
+            "paddingHorizontal": 10,
+          },
+          {
+            "backgroundColor": "#E4E7EA",
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "flexShrink": 1,
+            "gap": 4,
+          }
+        }
+      >
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "width": 28,
+            }
+          }
+        >
+          <View
+            accessibilityLabel="this.is.a.very.long.username.for.storybook.preview's avatar"
+            accessible={true}
+            style={
+              [
+                {
+                  "borderRadius": 4,
+                  "height": 28,
+                  "width": 28,
+                },
+                undefined,
+              ]
+            }
+            testID="avatar"
+          >
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={28}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
+                [
+                  {
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/this.is.a.very.long.username.for.storybook.preview?format=png&size=56",
+                  },
+                ]
+              }
+              style={
+                {
+                  "borderRadius": 4,
+                  "height": 28,
+                  "width": 28,
+                }
               }
+              transition={null}
+              width={28}
+            />
+          </View>
+        </View>
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "flexShrink": 1,
+              "gap": 4,
+            }
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "#6C727A",
+                  "fontSize": 20,
+                },
+                [
+                  {
+                    "lineHeight": 20,
+                  },
+                  [
+                    {
+                      "height": 20,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                      "width": 20,
+                    },
+                    undefined,
+                  ],
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontSize": 18,
+                  "fontWeight": "500",
+                  "lineHeight": 26,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#2F343D",
+                },
+              ]
             }
-            transition={null}
-            width={28}
-          />
+          >
+            Long display name to validate text truncation behavior for SelectedPeer in narrow widths
+          </Text>
         </View>
       </View>
+      <RNGestureHandlerButton
+        accessibilityLabel="Remove"
+        accessibilityRole="button"
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        delayLongPress={600}
+        foreground={true}
+        handlerTag={6}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={10}
+        innerRef={null}
+        onActiveStateChange={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onPress={
+          [MockFunction] {
+            "calls": [
+              [],
+            ],
+            "results": [
+              {
+                "type": "return",
+                "value": undefined,
+              },
+            ],
+          }
+        }
+        rippleColor="#9EA2A8"
+        style={
+          [
+            {
+              "opacity": 1,
+              "padding": 2,
+            },
+            {
+              "cursor": undefined,
+            },
+          ]
+        }
+        testID="new-media-call-clear-selected-peer"
+      >
+        <Text
+          allowFontScaling={false}
+          selectable={false}
+          style={
+            [
+              {
+                "color": "#1F2329",
+                "fontSize": 16,
+              },
+              [
+                {
+                  "lineHeight": 16,
+                },
+                undefined,
+              ],
+              {
+                "fontFamily": "custom",
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+              },
+              {},
+            ]
+          }
+        >
+          
+        </Text>
+      </RNGestureHandlerButton>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Story Snapshots: LongUsername should match snapshot 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+      "gap": 12,
+      "padding": 16,
+    }
+  }
+>
+  <Text
+    style={
+      {
+        "fontSize": 13,
+        "opacity": 0.6,
+      }
+    }
+  >
+    Long username variant
+  </Text>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "flexDirection": "row",
+      }
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "borderRadius": 4,
+            "flexDirection": "row",
+            "flexShrink": 1,
+            "gap": 10,
+            "minHeight": 48,
+            "paddingHorizontal": 10,
+          },
+          {
+            "backgroundColor": "#E4E7EA",
+          },
+        ]
+      }
+    >
       <View
         style={
           {
             "alignItems": "center",
-            "flex": 1,
             "flexDirection": "row",
+            "flexShrink": 1,
             "gap": 4,
           }
         }
       >
-        <Text
-          allowFontScaling={false}
-          selectable={false}
+        <View
           style={
-            [
-              {
-                "color": "#6C727A",
-                "fontSize": 20,
-              },
+            {
+              "alignItems": "center",
+              "width": 28,
+            }
+          }
+        >
+          <View
+            accessibilityLabel="this.is.a.very.long.username.for.storybook.preview's avatar"
+            accessible={true}
+            style={
               [
                 {
-                  "lineHeight": 20,
+                  "borderRadius": 4,
+                  "height": 28,
+                  "width": 28,
                 },
+                undefined,
+              ]
+            }
+            testID="avatar"
+          >
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
+              }
+              height={28}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
                 [
                   {
-                    "height": 20,
-                    "textAlign": "center",
-                    "textAlignVertical": "center",
-                    "width": 20,
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/this.is.a.very.long.username.for.storybook.preview?format=png&size=56",
                   },
-                  undefined,
-                ],
-              ],
-              {
-                "fontFamily": "custom",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              {},
-            ]
-          }
-        >
-          
-        </Text>
-        <Text
-          numberOfLines={1}
+                ]
+              }
+              style={
+                {
+                  "borderRadius": 4,
+                  "height": 28,
+                  "width": 28,
+                }
+              }
+              transition={null}
+              width={28}
+            />
+          </View>
+        </View>
+        <View
           style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontSize": 18,
-                "fontWeight": "500",
-                "lineHeight": 26,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "flexShrink": 1,
+              "gap": 4,
+            }
           }
         >
-          Long display name to validate text truncation behavior for SelectedPeer in narrow widths
-        </Text>
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "#6C727A",
+                  "fontSize": 20,
+                },
+                [
+                  {
+                    "lineHeight": 20,
+                  },
+                  [
+                    {
+                      "height": 20,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                      "width": 20,
+                    },
+                    undefined,
+                  ],
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontSize": 18,
+                  "fontWeight": "500",
+                  "lineHeight": 26,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#2F343D",
+                },
+              ]
+            }
+          >
+            Long display name to validate text truncation behavior for SelectedPeer in narrow widths
+          </Text>
+        </View>
       </View>
-      <View
+      <RNGestureHandlerButton
         accessibilityLabel="Remove"
         accessibilityRole="button"
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": undefined,
-            "expanded": undefined,
-            "selected": undefined,
-          }
-        }
-        accessibilityValue={
-          {
-            "max": undefined,
-            "min": undefined,
-            "now": undefined,
-            "text": undefined,
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        delayLongPress={600}
+        foreground={true}
+        handlerTag={7}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={10}
+        innerRef={null}
+        onActiveStateChange={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onPress={
+          [MockFunction] {
+            "calls": [
+              [],
+            ],
+            "results": [
+              {
+                "type": "return",
+                "value": undefined,
+              },
+            ],
           }
         }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
+        rippleColor="#9EA2A8"
         style={
-          {
-            "marginLeft": 10,
-            "padding": 2,
-          }
+          [
+            {
+              "opacity": 1,
+              "padding": 2,
+            },
+            {
+              "cursor": undefined,
+            },
+          ]
         }
         testID="new-media-call-clear-selected-peer"
       >
@@ -239,7 +946,7 @@ exports[`Story Snapshots: LongUsername should match snapshot 1`] = `
         >
           
         </Text>
-      </View>
+      </RNGestureHandlerButton>
     </View>
   </View>
 </View>
@@ -268,7 +975,8 @@ exports[`Story Snapshots: Sip should match snapshot 1`] = `
   <View
     style={
       {
-        "marginBottom": 16,
+        "alignItems": "center",
+        "flexDirection": "row",
       }
     }
   >
@@ -277,9 +985,10 @@ exports[`Story Snapshots: Sip should match snapshot 1`] = `
         [
           {
             "alignItems": "center",
-            "alignSelf": "flex-start",
             "borderRadius": 4,
             "flexDirection": "row",
+            "flexShrink": 1,
+            "gap": 10,
             "minHeight": 48,
             "paddingHorizontal": 10,
           },
@@ -293,106 +1002,119 @@ exports[`Story Snapshots: Sip should match snapshot 1`] = `
         style={
           {
             "alignItems": "center",
-            "width": 28,
+            "flexDirection": "row",
+            "flexShrink": 1,
+            "gap": 4,
           }
         }
       >
-        <Text
-          allowFontScaling={false}
-          selectable={false}
+        <View
           style={
-            [
-              {
-                "color": "#6C727A",
-                "fontSize": 20,
-              },
+            {
+              "alignItems": "center",
+              "width": 28,
+            }
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
               [
                 {
-                  "lineHeight": 20,
+                  "color": "#6C727A",
+                  "fontSize": 20,
                 },
-                undefined,
-              ],
-              {
-                "fontFamily": "custom",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              {},
-            ]
-          }
-        >
-          
-        </Text>
-      </View>
-      <View
-        style={
-          {
-            "alignItems": "center",
-            "flex": 1,
-            "flexDirection": "row",
-            "gap": 4,
-          }
-        }
-      >
-        <Text
-          numberOfLines={1}
+                [
+                  {
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+        </View>
+        <View
           style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontSize": 18,
-                "fontWeight": "500",
-                "lineHeight": 26,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "flexShrink": 1,
+              "gap": 4,
+            }
           }
         >
-          +55 11 99999-9999
-        </Text>
+          <Text
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontSize": 18,
+                  "fontWeight": "500",
+                  "lineHeight": 26,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#2F343D",
+                },
+              ]
+            }
+          >
+            +55 11 99999-9999
+          </Text>
+        </View>
       </View>
-      <View
+      <RNGestureHandlerButton
         accessibilityLabel="Remove"
         accessibilityRole="button"
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": undefined,
-            "expanded": undefined,
-            "selected": undefined,
-          }
-        }
-        accessibilityValue={
-          {
-            "max": undefined,
-            "min": undefined,
-            "now": undefined,
-            "text": undefined,
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        delayLongPress={600}
+        foreground={true}
+        handlerTag={8}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={10}
+        innerRef={null}
+        onActiveStateChange={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onPress={
+          [MockFunction] {
+            "calls": [
+              [],
+            ],
+            "results": [
+              {
+                "type": "return",
+                "value": undefined,
+              },
+            ],
           }
         }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
+        rippleColor="#9EA2A8"
         style={
-          {
-            "marginLeft": 10,
-            "padding": 2,
-          }
+          [
+            {
+              "opacity": 1,
+              "padding": 2,
+            },
+            {
+              "cursor": undefined,
+            },
+          ]
         }
         testID="new-media-call-clear-selected-peer"
       >
@@ -422,7 +1144,7 @@ exports[`Story Snapshots: Sip should match snapshot 1`] = `
         >
           
         </Text>
-      </View>
+      </RNGestureHandlerButton>
     </View>
   </View>
 </View>
@@ -451,7 +1173,8 @@ exports[`Story Snapshots: User should match snapshot 1`] = `
   <View
     style={
       {
-        "marginBottom": 16,
+        "alignItems": "center",
+        "flexDirection": "row",
       }
     }
   >
@@ -460,9 +1183,10 @@ exports[`Story Snapshots: User should match snapshot 1`] = `
         [
           {
             "alignItems": "center",
-            "alignSelf": "flex-start",
             "borderRadius": 4,
             "flexDirection": "row",
+            "flexShrink": 1,
+            "gap": 10,
             "minHeight": 48,
             "paddingHorizontal": 10,
           },
@@ -476,168 +1200,181 @@ exports[`Story Snapshots: User should match snapshot 1`] = `
         style={
           {
             "alignItems": "center",
-            "width": 28,
+            "flexDirection": "row",
+            "flexShrink": 1,
+            "gap": 4,
           }
         }
       >
         <View
-          accessibilityLabel="alice.johnson's avatar"
-          accessible={true}
           style={
-            [
-              {
-                "borderRadius": 4,
-                "height": 28,
-                "width": 28,
-              },
-              undefined,
-            ]
+            {
+              "alignItems": "center",
+              "width": 28,
+            }
           }
-          testID="avatar"
         >
-          <ViewManagerAdapter_ExpoImage
-            borderRadius={4}
-            containerViewRef={"[React.ref]"}
-            contentFit="cover"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={28}
-            nativeViewRef={"[React.ref]"}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            priority="high"
-            source={
+          <View
+            accessibilityLabel="alice.johnson's avatar"
+            accessible={true}
+            style={
               [
                 {
-                  "headers": {
-                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                  },
-                  "uri": "https://open.rocket.chat/avatar/alice.johnson?format=png&size=56",
+                  "borderRadius": 4,
+                  "height": 28,
+                  "width": 28,
                 },
+                undefined,
               ]
             }
-            style={
-              {
-                "borderRadius": 4,
-                "height": 28,
-                "width": 28,
+            testID="avatar"
+          >
+            <ViewManagerAdapter_ExpoImage
+              borderRadius={4}
+              containerViewRef={"[React.ref]"}
+              contentFit="cover"
+              contentPosition={
+                {
+                  "left": "50%",
+                  "top": "50%",
+                }
               }
-            }
-            transition={null}
-            width={28}
-          />
+              height={28}
+              nativeViewRef={"[React.ref]"}
+              onError={[Function]}
+              onLoad={[Function]}
+              onLoadStart={[Function]}
+              onProgress={[Function]}
+              placeholder={[]}
+              priority="high"
+              source={
+                [
+                  {
+                    "headers": {
+                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                    },
+                    "uri": "https://open.rocket.chat/avatar/alice.johnson?format=png&size=56",
+                  },
+                ]
+              }
+              style={
+                {
+                  "borderRadius": 4,
+                  "height": 28,
+                  "width": 28,
+                }
+              }
+              transition={null}
+              width={28}
+            />
+          </View>
         </View>
-      </View>
-      <View
-        style={
-          {
-            "alignItems": "center",
-            "flex": 1,
-            "flexDirection": "row",
-            "gap": 4,
-          }
-        }
-      >
-        <Text
-          allowFontScaling={false}
-          selectable={false}
+        <View
           style={
-            [
-              {
-                "color": "#6C727A",
-                "fontSize": 20,
-              },
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "flexShrink": 1,
+              "gap": 4,
+            }
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
               [
                 {
-                  "lineHeight": 20,
+                  "color": "#6C727A",
+                  "fontSize": 20,
                 },
                 [
                   {
-                    "height": 20,
-                    "textAlign": "center",
-                    "textAlignVertical": "center",
-                    "width": 20,
+                    "lineHeight": 20,
                   },
-                  undefined,
+                  [
+                    {
+                      "height": 20,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                      "width": 20,
+                    },
+                    undefined,
+                  ],
                 ],
-              ],
-              {
-                "fontFamily": "custom",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              {},
-            ]
-          }
-        >
-          
-        </Text>
-        <Text
-          numberOfLines={1}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontSize": 18,
-                "fontWeight": "500",
-                "lineHeight": 26,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          Alice Johnson
-        </Text>
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontSize": 18,
+                  "fontWeight": "500",
+                  "lineHeight": 26,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#2F343D",
+                },
+              ]
+            }
+          >
+            Alice Johnson
+          </Text>
+        </View>
       </View>
-      <View
+      <RNGestureHandlerButton
         accessibilityLabel="Remove"
         accessibilityRole="button"
-        accessibilityState={
-          {
-            "busy": undefined,
-            "checked": undefined,
-            "disabled": undefined,
-            "expanded": undefined,
-            "selected": undefined,
-          }
-        }
-        accessibilityValue={
-          {
-            "max": undefined,
-            "min": undefined,
-            "now": undefined,
-            "text": undefined,
+        activeOpacity={0.3}
+        borderless={true}
+        collapsable={false}
+        delayLongPress={600}
+        foreground={true}
+        handlerTag={9}
+        handlerType="NativeViewGestureHandler"
+        hitSlop={10}
+        innerRef={null}
+        onActiveStateChange={[Function]}
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
+        onPress={
+          [MockFunction] {
+            "calls": [
+              [],
+            ],
+            "results": [
+              {
+                "type": "return",
+                "value": undefined,
+              },
+            ],
           }
         }
-        accessible={true}
-        collapsable={false}
-        focusable={true}
-        onBlur={[Function]}
-        onClick={[Function]}
-        onFocus={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
+        rippleColor="#9EA2A8"
         style={
-          {
-            "marginLeft": 10,
-            "padding": 2,
-          }
+          [
+            {
+              "opacity": 1,
+              "padding": 2,
+            },
+            {
+              "cursor": undefined,
+            },
+          ]
         }
         testID="new-media-call-clear-selected-peer"
       >
@@ -667,7 +1404,7 @@ exports[`Story Snapshots: User should match snapshot 1`] = `
         >
           
         </Text>
-      </View>
+      </RNGestureHandlerButton>
     </View>
   </View>
 </View>
diff --git a/app/lib/hooks/useMediaCallPermission/useMediaCallPermission.ts b/app/lib/hooks/useMediaCallPermission/useMediaCallPermission.ts
index 22547836172..15e039bcf9f 100644
--- a/app/lib/hooks/useMediaCallPermission/useMediaCallPermission.ts
+++ b/app/lib/hooks/useMediaCallPermission/useMediaCallPermission.ts
@@ -1,9 +1,9 @@
-// import { useAppSelector } from '../useAppSelector';
+import { useAppSelector } from '../useAppSelector';
 import { usePermissions } from '../usePermissions';
 
 export const useMediaCallPermission = () => {
-	// const enterpriseModules = useAppSelector(state => state.enterpriseModules);
-	const isVoipModuleAvailable = true; // enterpriseModules.includes('teams-voip');
+	const enterpriseModules = useAppSelector(state => state.enterpriseModules);
+	const isVoipModuleAvailable = enterpriseModules.includes('teams-voip');
 	const [allowInternalVoiceCall, allowExternalVoiceCall] = usePermissions([
 		'allow-internal-voice-calls',
 		'allow-external-voice-calls'
diff --git a/app/lib/hooks/useNewMediaCall/useNewMediaCall.test.tsx b/app/lib/hooks/useNewMediaCall/useNewMediaCall.test.tsx
new file mode 100644
index 00000000000..aa49510bd8a
--- /dev/null
+++ b/app/lib/hooks/useNewMediaCall/useNewMediaCall.test.tsx
@@ -0,0 +1,106 @@
+import { act, renderHook } from '@testing-library/react-native';
+import React from 'react';
+
+import { NewMediaCall } from '../../../containers/NewMediaCall';
+import { useNewMediaCall } from './useNewMediaCall';
+
+const mockUseSubscription = jest.fn();
+const mockUseMediaCallPermission = jest.fn();
+const mockShowActionSheetRef = jest.fn();
+const mockGetUidDirectMessage = jest.fn();
+const mockSetSelectedPeer = jest.fn();
+const mockGetState = jest.fn(() => ({
+	setSelectedPeer: mockSetSelectedPeer
+}));
+
+jest.mock('../useSubscription', () => ({
+	useSubscription: (rid?: string) => mockUseSubscription(rid)
+}));
+
+jest.mock('../useMediaCallPermission', () => ({
+	useMediaCallPermission: () => mockUseMediaCallPermission()
+}));
+
+jest.mock('../../../containers/ActionSheet', () => ({
+	showActionSheetRef: (params: unknown) => mockShowActionSheetRef(params)
+}));
+
+jest.mock('../../methods/helpers/helpers', () => ({
+	getUidDirectMessage: (room: unknown) => mockGetUidDirectMessage(room)
+}));
+
+jest.mock('../../services/voip/usePeerAutocompleteStore', () => ({
+	usePeerAutocompleteStore: {
+		getState: () => mockGetState()
+	}
+}));
+
+jest.mock('../../../containers/NewMediaCall', () => ({
+	NewMediaCall: jest.fn(() => null)
+}));
+
+describe('useNewMediaCall', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	const expectNewMediaCallActionSheet = () => {
+		expect(mockShowActionSheetRef).toHaveBeenCalledTimes(1);
+		const [actionSheetArgs] = mockShowActionSheetRef.mock.calls[0];
+		expect(React.isValidElement(actionSheetArgs.children)).toBe(true);
+		expect(actionSheetArgs.children.type).toBe(NewMediaCall);
+	};
+
+	it('should set selected peer and open action sheet when room has a direct message peer', () => {
+		const room = { name: 'Alice' };
+		mockUseSubscription.mockReturnValue(room);
+		mockUseMediaCallPermission.mockReturnValue(true);
+		mockGetUidDirectMessage.mockReturnValue('user-id');
+
+		const { result } = renderHook(() => useNewMediaCall('room-id'));
+
+		act(() => {
+			result.current.openNewMediaCall();
+		});
+
+		expect(mockGetUidDirectMessage).toHaveBeenCalledWith(room);
+		expect(mockSetSelectedPeer).toHaveBeenCalledWith({
+			type: 'user',
+			value: 'user-id',
+			label: 'Alice'
+		});
+		expectNewMediaCallActionSheet();
+	});
+
+	it('should open action sheet without setting selected peer when room has no direct message peer', () => {
+		const room = { name: 'Alice' };
+		mockUseSubscription.mockReturnValue(room);
+		mockUseMediaCallPermission.mockReturnValue(true);
+		mockGetUidDirectMessage.mockReturnValue(undefined);
+
+		const { result } = renderHook(() => useNewMediaCall('room-id'));
+
+		act(() => {
+			result.current.openNewMediaCall();
+		});
+
+		expect(mockGetUidDirectMessage).toHaveBeenCalledWith(room);
+		expect(mockSetSelectedPeer).not.toHaveBeenCalled();
+		expectNewMediaCallActionSheet();
+	});
+
+	it('should open action sheet without resolving direct message peer when room is missing', () => {
+		mockUseSubscription.mockReturnValue(undefined);
+		mockUseMediaCallPermission.mockReturnValue(false);
+
+		const { result } = renderHook(() => useNewMediaCall('room-id'));
+
+		act(() => {
+			result.current.openNewMediaCall();
+		});
+
+		expect(mockGetUidDirectMessage).not.toHaveBeenCalled();
+		expect(mockSetSelectedPeer).not.toHaveBeenCalled();
+		expectNewMediaCallActionSheet();
+	});
+});
diff --git a/app/views/NewMessageView/Item.test.tsx b/app/views/NewMessageView/Item.test.tsx
index 80af27bf1b2..ff1c2df92c0 100644
--- a/app/views/NewMessageView/Item.test.tsx
+++ b/app/views/NewMessageView/Item.test.tsx
@@ -7,12 +7,20 @@ import { mockedStore } from '../../reducers/mockedStore';
 import { setUser } from '../../actions/login';
 import * as stories from './Item.stories';
 import { generateSnapshots } from '../../../.rnstorybook/generateSnapshots';
+import { NewMediaCall } from '../../containers/NewMediaCall';
 
-const mockStartCall = jest.fn();
+const mockShowActionSheetRef = jest.fn();
+const mockSetSelectedPeer = jest.fn();
 
-jest.mock('../../lib/services/voip/MediaSessionInstance', () => ({
-	mediaSessionInstance: {
-		startCall: (userId: string, actor: string) => mockStartCall(userId, actor)
+jest.mock('../../containers/ActionSheet', () => ({
+	showActionSheetRef: (params: unknown) => mockShowActionSheetRef(params)
+}));
+
+jest.mock('../../lib/services/voip/usePeerAutocompleteStore', () => ({
+	usePeerAutocompleteStore: {
+		getState: () => ({
+			setSelectedPeer: mockSetSelectedPeer
+		})
 	}
 }));
 
@@ -22,6 +30,10 @@ jest.mock('../../lib/hooks/useMediaCallPermission', () => ({
 	useMediaCallPermission: () => mockUseMediaCallPermission()
 }));
 
+jest.mock('../../containers/NewMediaCall', () => ({
+	NewMediaCall: jest.fn(() => null)
+}));
+
 const Wrapper = ({ children }: { children: React.ReactNode }) => <Provider store={mockedStore}>{children}</Provider>;
 
 describe('NewMessageView Item', () => {
@@ -96,7 +108,7 @@ describe('NewMessageView Item', () => {
 		expect(onLongPressMock).toHaveBeenCalledTimes(1);
 	});
 
-	it('should render call button and call startCall when hasMediaCallPermission is true', () => {
+	it('should render call button and open new media call flow when hasMediaCallPermission is true', () => {
 		mockUseMediaCallPermission.mockReturnValue(true);
 		const { getByTestId } = render(
 			<Wrapper>
@@ -110,8 +122,16 @@ describe('NewMessageView Item', () => {
 			</Wrapper>
 		);
 		fireEvent.press(getByTestId('new-message-view-item-john.doe-call'));
-		expect(mockStartCall).toHaveBeenCalledTimes(1);
-		expect(mockStartCall).toHaveBeenCalledWith('user123', 'user');
+		expect(mockSetSelectedPeer).toHaveBeenCalledTimes(1);
+		expect(mockSetSelectedPeer).toHaveBeenCalledWith({
+			type: 'user',
+			value: 'user123',
+			label: 'John Doe'
+		});
+		expect(mockShowActionSheetRef).toHaveBeenCalledTimes(1);
+		const [actionSheetArgs] = mockShowActionSheetRef.mock.calls[0];
+		expect(React.isValidElement(actionSheetArgs.children)).toBe(true);
+		expect(actionSheetArgs.children.type).toBe(NewMediaCall);
 	});
 
 	it('should not render call button when hasMediaCallPermission is false', () => {
@@ -130,7 +150,7 @@ describe('NewMessageView Item', () => {
 		expect(queryByTestId('new-message-view-item-john.doe-call')).toBeNull();
 	});
 
-	it('should not call startCall when userId is falsy and call button is pressed', () => {
+	it('should not open call flow when userId is falsy and call button is pressed', () => {
 		mockUseMediaCallPermission.mockReturnValue(true);
 		const { getByTestId } = render(
 			<Wrapper>
@@ -144,7 +164,8 @@ describe('NewMessageView Item', () => {
 			</Wrapper>
 		);
 		fireEvent.press(getByTestId('new-message-view-item-john.doe-call'));
-		expect(mockStartCall).not.toHaveBeenCalled();
+		expect(mockSetSelectedPeer).not.toHaveBeenCalled();
+		expect(mockShowActionSheetRef).not.toHaveBeenCalled();
 	});
 
 	it('should have correct accessibility label', () => {
diff --git a/app/views/RoomInfoView/components/RoomInfoButtons.test.tsx b/app/views/RoomInfoView/components/RoomInfoButtons.test.tsx
index 877f3e97eb3..00740c9171a 100644
--- a/app/views/RoomInfoView/components/RoomInfoButtons.test.tsx
+++ b/app/views/RoomInfoView/components/RoomInfoButtons.test.tsx
@@ -11,17 +11,18 @@ import { SubscriptionType } from '../../../definitions';
 
 const mockShowInitCallActionSheet = jest.fn();
 const mockShowActionSheet = jest.fn();
-const mockStartCallByRoom = jest.fn();
+const mockOpenNewMediaCall = jest.fn();
+const noopOpenNewMediaCall = () => undefined;
 
 const mockUseVideoConf = jest.fn();
-const mockUseMediaCallPermission = jest.fn();
+const mockUseNewMediaCall = jest.fn();
 
 jest.mock('../../../lib/hooks/useVideoConf', () => ({
 	useVideoConf: (...args: unknown[]) => mockUseVideoConf(...args)
 }));
 
-jest.mock('../../../lib/hooks/useMediaCallPermission', () => ({
-	useMediaCallPermission: (...args: unknown[]) => mockUseMediaCallPermission(...args)
+jest.mock('../../../lib/hooks/useNewMediaCall', () => ({
+	useNewMediaCall: (...args: unknown[]) => mockUseNewMediaCall(...args)
 }));
 
 jest.mock('../hooks', () => ({
@@ -33,12 +34,6 @@ jest.mock('../../../containers/ActionSheet', () => ({
 	useActionSheet: () => ({ showActionSheet: mockShowActionSheet })
 }));
 
-jest.mock('../../../lib/services/voip/MediaSessionInstance', () => ({
-	mediaSessionInstance: {
-		startCallByRoom: (room: ISubscription) => mockStartCallByRoom(room)
-	}
-}));
-
 const Wrapper = ({ children }: { children: React.ReactNode }) => <Provider store={mockedStore}>{children}</Provider>;
 
 const createMockRoom = (overrides: Partial<ISubscription> = {}): ISubscription =>
@@ -90,7 +85,10 @@ describe('RoomInfoButtons', () => {
 			disabledTooltip: false,
 			showInitCallActionSheet: mockShowInitCallActionSheet
 		});
-		mockUseMediaCallPermission.mockReturnValue(true);
+		mockUseNewMediaCall.mockReturnValue({
+			openNewMediaCall: noopOpenNewMediaCall,
+			hasMediaCallPermission: true
+		});
 	});
 
 	it('should render Message button', () => {
@@ -113,16 +111,18 @@ describe('RoomInfoButtons', () => {
 		expect(handleCreateDirectMessage).toHaveBeenCalledTimes(1);
 	});
 
-	it('should call mediaSessionInstance.startCallByRoom when Voice call is pressed', () => {
-		const mockRoom = createMockRoom();
+	it('should call openNewMediaCall when Voice call is pressed', () => {
+		mockUseNewMediaCall.mockReturnValue({
+			openNewMediaCall: mockOpenNewMediaCall,
+			hasMediaCallPermission: true
+		});
 		const { getByTestId } = render(
 			<Wrapper>
-				<RoomInfoButtons {...defaultProps} room={mockRoom} />
+				<RoomInfoButtons {...defaultProps} />
 			</Wrapper>
 		);
 		fireEvent.press(getByTestId('room-info-view-phone'));
-		expect(mockStartCallByRoom).toHaveBeenCalledTimes(1);
-		expect(mockStartCallByRoom).toHaveBeenCalledWith(mockRoom);
+		expect(mockOpenNewMediaCall).toHaveBeenCalledTimes(1);
 	});
 
 	it('should call showInitCallActionSheet when Video call is pressed', () => {
@@ -135,8 +135,11 @@ describe('RoomInfoButtons', () => {
 		expect(mockShowInitCallActionSheet).toHaveBeenCalledTimes(1);
 	});
 
-	it('should not render Voice call when useMediaCallPermission returns false', () => {
-		mockUseMediaCallPermission.mockReturnValue(false);
+	it('should not render Voice call when hasMediaCallPermission is false', () => {
+		mockUseNewMediaCall.mockReturnValue({
+			openNewMediaCall: noopOpenNewMediaCall,
+			hasMediaCallPermission: false
+		});
 		const { queryByTestId } = render(
 			<Wrapper>
 				<RoomInfoButtons {...defaultProps} />

From 6b545c5d35c52628548533466978c2a83e18bcd6 Mon Sep 17 00:00:00 2001
From: diegolmello <diegolmello@users.noreply.github.com>
Date: Fri, 6 Mar 2026 19:18:18 +0000
Subject: [PATCH 14/20] chore: format code and fix lint issues

---
 .../useMediaCallPermission.test.ts            |  5 +-
 app/views/NewMessageView/Item.test.tsx        | 56 +++----------------
 2 files changed, 8 insertions(+), 53 deletions(-)

diff --git a/app/lib/hooks/useMediaCallPermission/useMediaCallPermission.test.ts b/app/lib/hooks/useMediaCallPermission/useMediaCallPermission.test.ts
index 1999711152a..bce46a27bdd 100644
--- a/app/lib/hooks/useMediaCallPermission/useMediaCallPermission.test.ts
+++ b/app/lib/hooks/useMediaCallPermission/useMediaCallPermission.test.ts
@@ -25,10 +25,7 @@ describe('useMediaCallPermission', () => {
 		const { result } = renderHook(() => useMediaCallPermission());
 
 		expect(result.current).toBe(false);
-		expect(mockUsePermissions).toHaveBeenCalledWith([
-			'allow-internal-voice-calls',
-			'allow-external-voice-calls'
-		]);
+		expect(mockUsePermissions).toHaveBeenCalledWith(['allow-internal-voice-calls', 'allow-external-voice-calls']);
 	});
 
 	it('should return false when voip module exists but no voice call permissions', () => {
diff --git a/app/views/NewMessageView/Item.test.tsx b/app/views/NewMessageView/Item.test.tsx
index ff1c2df92c0..b17a1f875d6 100644
--- a/app/views/NewMessageView/Item.test.tsx
+++ b/app/views/NewMessageView/Item.test.tsx
@@ -46,13 +46,7 @@ describe('NewMessageView Item', () => {
 	it('should render correctly', () => {
 		const { getByTestId } = render(
 			<Wrapper>
-				<Item
-					userId='user123'
-					name='John Doe'
-					username='john.doe'
-					onPress={() => {}}
-					testID='new-message-view-item-john.doe'
-				/>
+				<Item userId='user123' name='John Doe' username='john.doe' onPress={() => {}} testID='new-message-view-item-john.doe' />
 			</Wrapper>
 		);
 		expect(getByTestId('new-message-view-item-john.doe')).toBeTruthy();
@@ -61,13 +55,7 @@ describe('NewMessageView Item', () => {
 	it('should display the name', () => {
 		const { getByText } = render(
 			<Wrapper>
-				<Item
-					userId='user123'
-					name='John Doe'
-					username='john.doe'
-					onPress={() => {}}
-					testID='new-message-view-item-john.doe'
-				/>
+				<Item userId='user123' name='John Doe' username='john.doe' onPress={() => {}} testID='new-message-view-item-john.doe' />
 			</Wrapper>
 		);
 		expect(getByText('John Doe')).toBeTruthy();
@@ -112,13 +100,7 @@ describe('NewMessageView Item', () => {
 		mockUseMediaCallPermission.mockReturnValue(true);
 		const { getByTestId } = render(
 			<Wrapper>
-				<Item
-					userId='user123'
-					name='John Doe'
-					username='john.doe'
-					onPress={() => {}}
-					testID='new-message-view-item-john.doe'
-				/>
+				<Item userId='user123' name='John Doe' username='john.doe' onPress={() => {}} testID='new-message-view-item-john.doe' />
 			</Wrapper>
 		);
 		fireEvent.press(getByTestId('new-message-view-item-john.doe-call'));
@@ -138,13 +120,7 @@ describe('NewMessageView Item', () => {
 		mockUseMediaCallPermission.mockReturnValue(false);
 		const { queryByTestId } = render(
 			<Wrapper>
-				<Item
-					userId='user123'
-					name='John Doe'
-					username='john.doe'
-					onPress={() => {}}
-					testID='new-message-view-item-john.doe'
-				/>
+				<Item userId='user123' name='John Doe' username='john.doe' onPress={() => {}} testID='new-message-view-item-john.doe' />
 			</Wrapper>
 		);
 		expect(queryByTestId('new-message-view-item-john.doe-call')).toBeNull();
@@ -154,13 +130,7 @@ describe('NewMessageView Item', () => {
 		mockUseMediaCallPermission.mockReturnValue(true);
 		const { getByTestId } = render(
 			<Wrapper>
-				<Item
-					userId={''}
-					name='John Doe'
-					username='john.doe'
-					onPress={() => {}}
-					testID='new-message-view-item-john.doe'
-				/>
+				<Item userId={''} name='John Doe' username='john.doe' onPress={() => {}} testID='new-message-view-item-john.doe' />
 			</Wrapper>
 		);
 		fireEvent.press(getByTestId('new-message-view-item-john.doe-call'));
@@ -171,13 +141,7 @@ describe('NewMessageView Item', () => {
 	it('should have correct accessibility label', () => {
 		const { getByLabelText } = render(
 			<Wrapper>
-				<Item
-					userId='user123'
-					name='John Doe'
-					username='john.doe'
-					onPress={() => {}}
-					testID='new-message-view-item-john.doe'
-				/>
+				<Item userId='user123' name='John Doe' username='john.doe' onPress={() => {}} testID='new-message-view-item-john.doe' />
 			</Wrapper>
 		);
 		expect(getByLabelText('John Doe')).toBeTruthy();
@@ -187,13 +151,7 @@ describe('NewMessageView Item', () => {
 		mockUseMediaCallPermission.mockReturnValue(false);
 		const { toJSON } = render(
 			<Wrapper>
-				<Item
-					userId='user123'
-					name='John Doe'
-					username='john.doe'
-					onPress={() => {}}
-					testID='new-message-view-item-john.doe'
-				/>
+				<Item userId='user123' name='John Doe' username='john.doe' onPress={() => {}} testID='new-message-view-item-john.doe' />
 			</Wrapper>
 		);
 		expect(toJSON()).toMatchSnapshot();

From 6974083af0b8f2278202632c8cb9f001ba513876 Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Fri, 6 Mar 2026 17:39:38 -0300
Subject: [PATCH 15/20] refactor: simplify NewMediaCall components by removing
 unused state management and adding FilterHeader

---
 .../NewMediaCall/Container.stories.tsx        |  31 +-
 app/containers/NewMediaCall/Container.tsx     |  63 +--
 .../NewMediaCall/CreateCall.test.tsx          |   2 +-
 app/containers/NewMediaCall/CreateCall.tsx    |   7 +-
 .../NewMediaCall/FilterHeader.stories.tsx     |  55 +++
 .../NewMediaCall/FilterHeader.test.tsx        |  72 ++++
 app/containers/NewMediaCall/FilterHeader.tsx  |  70 ++++
 app/containers/NewMediaCall/NewMediaCall.tsx  |   2 +
 app/containers/NewMediaCall/PeerList.tsx      |   3 +-
 .../__snapshots__/FilterHeader.test.tsx.snap  | 383 ++++++++++++++++++
 app/lib/hooks/useSubscription.ts              |   4 +
 .../voip/getPeerAutocompleteOptions.ts        |   7 +-
 .../voip/usePeerAutocompleteStore.test.ts     |   3 -
 .../services/voip/usePeerAutocompleteStore.ts |   2 +-
 app/views/NewMessageView/Item.tsx             |   2 +-
 15 files changed, 600 insertions(+), 106 deletions(-)
 create mode 100644 app/containers/NewMediaCall/FilterHeader.stories.tsx
 create mode 100644 app/containers/NewMediaCall/FilterHeader.test.tsx
 create mode 100644 app/containers/NewMediaCall/FilterHeader.tsx
 create mode 100644 app/containers/NewMediaCall/__snapshots__/FilterHeader.test.tsx.snap

diff --git a/app/containers/NewMediaCall/Container.stories.tsx b/app/containers/NewMediaCall/Container.stories.tsx
index 4aaa6dbaf52..0d460e15853 100644
--- a/app/containers/NewMediaCall/Container.stories.tsx
+++ b/app/containers/NewMediaCall/Container.stories.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import BottomSheet from '@discord/bottom-sheet';
 
-import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
 import { Container } from './Container';
 
 const styles = StyleSheet.create({
@@ -17,14 +16,6 @@ const styles = StyleSheet.create({
 	}
 });
 
-const setStoreState = (filter: string) => {
-	usePeerAutocompleteStore.setState({
-		filter,
-		selectedPeer: null,
-		options: []
-	});
-};
-
 const PlaceholderChildren = () => (
 	<View style={styles.placeholder}>
 		<Text>Mock children placeholder</Text>
@@ -56,20 +47,8 @@ export default {
 	]
 };
 
-export const Default = () => {
-	setStoreState('');
-	return (
-		<Container>
-			<PlaceholderChildren />
-		</Container>
-	);
-};
-
-export const WithFilter = () => {
-	setStoreState('alice');
-	return (
-		<Container>
-			<PlaceholderChildren />
-		</Container>
-	);
-};
+export const Default = () => (
+	<Container>
+		<PlaceholderChildren />
+	</Container>
+);
diff --git a/app/containers/NewMediaCall/Container.tsx b/app/containers/NewMediaCall/Container.tsx
index 895cdebc5c7..94724e34b2f 100644
--- a/app/containers/NewMediaCall/Container.tsx
+++ b/app/containers/NewMediaCall/Container.tsx
@@ -1,52 +1,12 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
-import I18n from '../../i18n';
 import { useTheme } from '../../theme';
-import { FormTextInput } from '../TextInput';
-import sharedStyles from '../../views/Styles';
-import { textInputDebounceTime } from '../../lib/constants/debounceConfig';
-import { useDebounce } from '../../lib/methods/helpers';
-import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
 
 export const Container = ({ children }: { children: React.ReactElement[] | React.ReactElement }) => {
 	const { colors } = useTheme();
 
-	const filter = usePeerAutocompleteStore(state => state.filter);
-	const setFilter = usePeerAutocompleteStore(state => state.setFilter);
-	const fetchOptions = usePeerAutocompleteStore(state => state.fetchOptions);
-	const clearSelection = usePeerAutocompleteStore(state => state.clearSelection);
-
-	const debouncedFetchOptions = useDebounce((value: string) => {
-		fetchOptions(value);
-	}, textInputDebounceTime);
-
-	const handleChangeText = (value: string) => {
-		setFilter(value);
-		clearSelection();
-		debouncedFetchOptions(value);
-	};
-
-	return (
-		<View style={[styles.container, { backgroundColor: colors.surfaceLight }]}>
-			<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('New_call')}</Text>
-
-			<View style={styles.searchContainer}>
-				<FormTextInput
-					containerStyle={styles.searchInputContainer}
-					iconRight='search'
-					bottomSheet
-					showErrorMessage={false}
-					testID='new-media-call-search-input'
-					onChangeText={handleChangeText}
-					value={filter}
-				/>
-			</View>
-			<Text style={[styles.inputLabel, { color: colors.fontDefault }]}>{I18n.t('Enter_username_or_number')}</Text>
-
-			{children}
-		</View>
-	);
+	return <View style={[styles.container, { backgroundColor: colors.surfaceLight }]}>{children}</View>;
 };
 
 const styles = StyleSheet.create({
@@ -54,24 +14,5 @@ const styles = StyleSheet.create({
 		flex: 1,
 		paddingHorizontal: 16,
 		paddingTop: 16
-	},
-	title: {
-		fontSize: 20,
-		lineHeight: 28,
-		marginTop: 4,
-		...sharedStyles.textBold
-	},
-	searchContainer: {
-		marginTop: 28,
-		marginBottom: 8
-	},
-	searchInputContainer: {
-		marginBottom: 0
-	},
-	inputLabel: {
-		fontSize: 16,
-		lineHeight: 24,
-		marginBottom: 16,
-		...sharedStyles.textRegular
 	}
 });
diff --git a/app/containers/NewMediaCall/CreateCall.test.tsx b/app/containers/NewMediaCall/CreateCall.test.tsx
index 42021cfe375..e6514083daf 100644
--- a/app/containers/NewMediaCall/CreateCall.test.tsx
+++ b/app/containers/NewMediaCall/CreateCall.test.tsx
@@ -123,7 +123,7 @@ describe('CreateCall', () => {
 
 		fireEvent.press(getByTestId('new-media-call-button'));
 		expect(mockStartCall).toHaveBeenCalledTimes(1);
-		expect(mockStartCall).toHaveBeenCalledWith('+5511999999999', 'user');
+		expect(mockStartCall).toHaveBeenCalledWith('+5511999999999', 'sip');
 		expect(mockHideActionSheet).toHaveBeenCalledTimes(1);
 	});
 });
diff --git a/app/containers/NewMediaCall/CreateCall.tsx b/app/containers/NewMediaCall/CreateCall.tsx
index bbcfe619a8b..3cbfa1e1916 100644
--- a/app/containers/NewMediaCall/CreateCall.tsx
+++ b/app/containers/NewMediaCall/CreateCall.tsx
@@ -19,12 +19,7 @@ export const CreateCall = () => {
 			return;
 		}
 
-		if ('number' in selectedPeer) {
-			mediaSessionInstance.startCall(selectedPeer.value, 'sip');
-		} else {
-			mediaSessionInstance.startCall(selectedPeer.value, 'user');
-		}
-
+		mediaSessionInstance.startCall(selectedPeer.value, selectedPeer.type);
 		hideActionSheetRef();
 	};
 
diff --git a/app/containers/NewMediaCall/FilterHeader.stories.tsx b/app/containers/NewMediaCall/FilterHeader.stories.tsx
new file mode 100644
index 00000000000..a375668bd4a
--- /dev/null
+++ b/app/containers/NewMediaCall/FilterHeader.stories.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import BottomSheet from '@discord/bottom-sheet';
+
+import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
+import { FilterHeader } from './FilterHeader';
+
+const styles = StyleSheet.create({
+	root: {
+		flex: 1
+	}
+});
+
+const setStoreState = (filter: string) => {
+	usePeerAutocompleteStore.setState({
+		filter,
+		selectedPeer: null,
+		options: []
+	});
+};
+
+const BottomSheetWrapper = ({ children }: { children: React.ReactNode }) => (
+	<View style={styles.root}>
+		<BottomSheet
+			index={0}
+			snapPoints={['95%']}
+			handleComponent={null}
+			enablePanDownToClose={false}
+			backgroundStyle={{ backgroundColor: 'transparent' }}>
+			<View style={styles.root}>{children}</View>
+		</BottomSheet>
+	</View>
+);
+
+export default {
+	title: 'NewMediaCall/FilterHeader',
+	component: FilterHeader,
+	decorators: [
+		(Story: React.ComponentType) => (
+			<BottomSheetWrapper>
+				<Story />
+			</BottomSheetWrapper>
+		)
+	]
+};
+
+export const Default = () => {
+	setStoreState('');
+	return <FilterHeader />;
+};
+
+export const WithFilter = () => {
+	setStoreState('alice');
+	return <FilterHeader />;
+};
diff --git a/app/containers/NewMediaCall/FilterHeader.test.tsx b/app/containers/NewMediaCall/FilterHeader.test.tsx
new file mode 100644
index 00000000000..434a90a548d
--- /dev/null
+++ b/app/containers/NewMediaCall/FilterHeader.test.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { act, fireEvent, render } from '@testing-library/react-native';
+import { Provider } from 'react-redux';
+
+import I18n from '../../i18n';
+import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
+import { mockedStore } from '../../reducers/mockedStore';
+import { textInputDebounceTime } from '../../lib/constants/debounceConfig';
+import { FilterHeader } from './FilterHeader';
+import * as stories from './FilterHeader.stories';
+import { generateSnapshots } from '../../../.rnstorybook/generateSnapshots';
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => <Provider store={mockedStore}>{children}</Provider>;
+
+describe('FilterHeader', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		jest.useFakeTimers();
+		usePeerAutocompleteStore.getState().reset();
+	});
+
+	afterEach(() => {
+		jest.runOnlyPendingTimers();
+		jest.useRealTimers();
+	});
+
+	it('should render title, label and search input', () => {
+		const { getByText, getByTestId } = render(
+			<Wrapper>
+				<FilterHeader />
+			</Wrapper>
+		);
+
+		expect(getByText(I18n.t('New_call'))).toBeTruthy();
+		expect(getByText(I18n.t('Enter_username_or_number'))).toBeTruthy();
+		expect(getByTestId('new-media-call-search-input')).toBeTruthy();
+	});
+
+	it('should update filter, clear selection and fetch options after debounce', () => {
+		const setFilter = jest.fn();
+		const clearSelection = jest.fn();
+		const fetchOptions = jest.fn();
+		usePeerAutocompleteStore.setState({
+			filter: '',
+			selectedPeer: null,
+			options: [],
+			setFilter,
+			clearSelection,
+			fetchOptions
+		});
+
+		const { getByTestId } = render(
+			<Wrapper>
+				<FilterHeader />
+			</Wrapper>
+		);
+
+		fireEvent.changeText(getByTestId('new-media-call-search-input'), 'alice');
+
+		expect(setFilter).toHaveBeenCalledWith('alice');
+		expect(clearSelection).toHaveBeenCalledTimes(1);
+		expect(fetchOptions).not.toHaveBeenCalled();
+
+		act(() => {
+			jest.advanceTimersByTime(textInputDebounceTime);
+		});
+
+		expect(fetchOptions).toHaveBeenCalledWith('alice');
+	});
+});
+
+generateSnapshots(stories);
diff --git a/app/containers/NewMediaCall/FilterHeader.tsx b/app/containers/NewMediaCall/FilterHeader.tsx
new file mode 100644
index 00000000000..ab86283d6d3
--- /dev/null
+++ b/app/containers/NewMediaCall/FilterHeader.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import I18n from '../../i18n';
+import { useTheme } from '../../theme';
+import { FormTextInput } from '../TextInput';
+import sharedStyles from '../../views/Styles';
+import { textInputDebounceTime } from '../../lib/constants/debounceConfig';
+import { useDebounce } from '../../lib/methods/helpers';
+import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
+
+export const FilterHeader = (): React.ReactElement => {
+	const { colors } = useTheme();
+
+	const filter = usePeerAutocompleteStore(state => state.filter);
+	const setFilter = usePeerAutocompleteStore(state => state.setFilter);
+	const fetchOptions = usePeerAutocompleteStore(state => state.fetchOptions);
+	const clearSelection = usePeerAutocompleteStore(state => state.clearSelection);
+
+	const debouncedFetchOptions = useDebounce((value: string) => {
+		fetchOptions(value);
+	}, textInputDebounceTime);
+
+	const handleChangeText = (value: string) => {
+		setFilter(value);
+		clearSelection();
+		debouncedFetchOptions(value);
+	};
+
+	return (
+		<>
+			<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('New_call')}</Text>
+
+			<View style={styles.searchContainer}>
+				<FormTextInput
+					containerStyle={styles.searchInputContainer}
+					iconRight='search'
+					bottomSheet
+					showErrorMessage={false}
+					testID='new-media-call-search-input'
+					onChangeText={handleChangeText}
+					value={filter}
+				/>
+			</View>
+			<Text style={[styles.inputLabel, { color: colors.fontDefault }]}>{I18n.t('Enter_username_or_number')}</Text>
+		</>
+	);
+};
+
+const styles = StyleSheet.create({
+	title: {
+		fontSize: 20,
+		lineHeight: 28,
+		marginTop: 4,
+		...sharedStyles.textBold
+	},
+	searchContainer: {
+		marginTop: 28,
+		marginBottom: 8
+	},
+	searchInputContainer: {
+		marginBottom: 0
+	},
+	inputLabel: {
+		fontSize: 16,
+		lineHeight: 24,
+		marginBottom: 16,
+		...sharedStyles.textRegular
+	}
+});
diff --git a/app/containers/NewMediaCall/NewMediaCall.tsx b/app/containers/NewMediaCall/NewMediaCall.tsx
index 28a9fd9976c..d4da5e70db7 100644
--- a/app/containers/NewMediaCall/NewMediaCall.tsx
+++ b/app/containers/NewMediaCall/NewMediaCall.tsx
@@ -4,6 +4,7 @@ import { PeerList } from './PeerList';
 import { SelectedPeer } from './SelectedPeer';
 import { Container } from './Container';
 import { CreateCall } from './CreateCall';
+import { FilterHeader } from './FilterHeader';
 import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocompleteStore';
 
 export const NewMediaCall = (): React.ReactElement => {
@@ -13,6 +14,7 @@ export const NewMediaCall = (): React.ReactElement => {
 
 	return (
 		<Container>
+			<FilterHeader />
 			<SelectedPeer />
 			<PeerList />
 			<CreateCall />
diff --git a/app/containers/NewMediaCall/PeerList.tsx b/app/containers/NewMediaCall/PeerList.tsx
index 91284cb22ef..94a77a8cec5 100644
--- a/app/containers/NewMediaCall/PeerList.tsx
+++ b/app/containers/NewMediaCall/PeerList.tsx
@@ -23,8 +23,7 @@ export const PeerList = () => {
 						value: option.value,
 						label: option.label,
 						username: option.username,
-						callerId: option.callerId,
-						status: option.status
+						callerId: option.callerId
 				  };
 
 		setSelectedPeer(peerItem);
diff --git a/app/containers/NewMediaCall/__snapshots__/FilterHeader.test.tsx.snap b/app/containers/NewMediaCall/__snapshots__/FilterHeader.test.tsx.snap
new file mode 100644
index 00000000000..6ab5db2b71b
--- /dev/null
+++ b/app/containers/NewMediaCall/__snapshots__/FilterHeader.test.tsx.snap
@@ -0,0 +1,383 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Story Snapshots: Default should match snapshot 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    backgroundStyle={
+      {
+        "backgroundColor": "transparent",
+      }
+    }
+    enablePanDownToClose={false}
+    handleComponent={null}
+    index={0}
+    snapPoints={
+      [
+        "95%",
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "fontFamily": "Inter",
+              "fontSize": 20,
+              "fontWeight": "700",
+              "lineHeight": 28,
+              "marginTop": 4,
+              "textAlign": "left",
+            },
+            {
+              "color": "#1F2329",
+            },
+          ]
+        }
+      >
+        New call
+      </Text>
+      <View
+        style={
+          {
+            "marginBottom": 8,
+            "marginTop": 28,
+          }
+        }
+      >
+        <A11yOrderView
+          orderKey=":r2:"
+        >
+          <A11yIndexView
+            importantForAccessibility="yes"
+            orderFocusType={0}
+            orderIndex={1}
+            orderKey=":r2:"
+          >
+            <View
+              style={
+                [
+                  {
+                    "gap": 4,
+                    "marginBottom": 10,
+                  },
+                  {
+                    "marginBottom": 0,
+                  },
+                ]
+              }
+            >
+              <View
+                accessible={false}
+                style={
+                  {
+                    "justifyContent": "center",
+                    "position": "relative",
+                  }
+                }
+              >
+                <TextInput
+                  accessibilityLabel=""
+                  accessible={true}
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  onChangeText={[Function]}
+                  placeholderTextColor="#9EA2A8"
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "borderRadius": 4,
+                        "borderWidth": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "paddingHorizontal": 16,
+                        "paddingVertical": 14,
+                        "textAlign": "left",
+                      },
+                      undefined,
+                      {
+                        "paddingRight": 45,
+                      },
+                      {
+                        "backgroundColor": "#FFFFFF",
+                        "borderColor": "#9EA2A8",
+                        "color": "#1F2329",
+                      },
+                      {},
+                      undefined,
+                    ]
+                  }
+                  testID="new-media-call-search-input"
+                  underlineColorAndroid="transparent"
+                  value=""
+                />
+                <Text
+                  accessible={false}
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#2F343D",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                        },
+                        [
+                          {
+                            "position": "absolute",
+                          },
+                          {
+                            "right": 12,
+                          },
+                        ],
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                  testID="new-media-call-search-input-icon-right"
+                >
+                  
+                </Text>
+              </View>
+            </View>
+          </A11yIndexView>
+        </A11yOrderView>
+      </View>
+      <Text
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 24,
+              "marginBottom": 16,
+              "textAlign": "left",
+            },
+            {
+              "color": "#2F343D",
+            },
+          ]
+        }
+      >
+        Enter username or number
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Story Snapshots: WithFilter should match snapshot 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    backgroundStyle={
+      {
+        "backgroundColor": "transparent",
+      }
+    }
+    enablePanDownToClose={false}
+    handleComponent={null}
+    index={0}
+    snapPoints={
+      [
+        "95%",
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "flex": 1,
+        }
+      }
+    >
+      <Text
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "fontFamily": "Inter",
+              "fontSize": 20,
+              "fontWeight": "700",
+              "lineHeight": 28,
+              "marginTop": 4,
+              "textAlign": "left",
+            },
+            {
+              "color": "#1F2329",
+            },
+          ]
+        }
+      >
+        New call
+      </Text>
+      <View
+        style={
+          {
+            "marginBottom": 8,
+            "marginTop": 28,
+          }
+        }
+      >
+        <A11yOrderView
+          orderKey=":r3:"
+        >
+          <A11yIndexView
+            importantForAccessibility="yes"
+            orderFocusType={0}
+            orderIndex={1}
+            orderKey=":r3:"
+          >
+            <View
+              style={
+                [
+                  {
+                    "gap": 4,
+                    "marginBottom": 10,
+                  },
+                  {
+                    "marginBottom": 0,
+                  },
+                ]
+              }
+            >
+              <View
+                accessible={false}
+                style={
+                  {
+                    "justifyContent": "center",
+                    "position": "relative",
+                  }
+                }
+              >
+                <TextInput
+                  accessibilityLabel="alice."
+                  accessible={true}
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  onChangeText={[Function]}
+                  placeholderTextColor="#9EA2A8"
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "borderRadius": 4,
+                        "borderWidth": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontWeight": "400",
+                        "paddingHorizontal": 16,
+                        "paddingVertical": 14,
+                        "textAlign": "left",
+                      },
+                      undefined,
+                      {
+                        "paddingRight": 45,
+                      },
+                      {
+                        "backgroundColor": "#FFFFFF",
+                        "borderColor": "#9EA2A8",
+                        "color": "#1F2329",
+                      },
+                      {},
+                      undefined,
+                    ]
+                  }
+                  testID="new-media-call-search-input"
+                  underlineColorAndroid="transparent"
+                  value="alice"
+                />
+                <Text
+                  accessible={false}
+                  allowFontScaling={false}
+                  selectable={false}
+                  style={
+                    [
+                      {
+                        "color": "#2F343D",
+                        "fontSize": 20,
+                      },
+                      [
+                        {
+                          "lineHeight": 20,
+                        },
+                        [
+                          {
+                            "position": "absolute",
+                          },
+                          {
+                            "right": 12,
+                          },
+                        ],
+                      ],
+                      {
+                        "fontFamily": "custom",
+                        "fontStyle": "normal",
+                        "fontWeight": "normal",
+                      },
+                      {},
+                    ]
+                  }
+                  testID="new-media-call-search-input-icon-right"
+                >
+                  
+                </Text>
+              </View>
+            </View>
+          </A11yIndexView>
+        </A11yOrderView>
+      </View>
+      <Text
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontWeight": "400",
+              "lineHeight": 24,
+              "marginBottom": 16,
+              "textAlign": "left",
+            },
+            {
+              "color": "#2F343D",
+            },
+          ]
+        }
+      >
+        Enter username or number
+      </Text>
+    </View>
+  </View>
+</View>
+`;
diff --git a/app/lib/hooks/useSubscription.ts b/app/lib/hooks/useSubscription.ts
index ef44e22882e..1766836afbd 100644
--- a/app/lib/hooks/useSubscription.ts
+++ b/app/lib/hooks/useSubscription.ts
@@ -16,6 +16,10 @@ export const useSubscription = (rid?: string): TSubscriptionModel | undefined =>
 			}
 		};
 		load();
+
+		return () => {
+			setSubscription(undefined);
+		};
 	}, [rid]);
 
 	return subscription;
diff --git a/app/lib/services/voip/getPeerAutocompleteOptions.ts b/app/lib/services/voip/getPeerAutocompleteOptions.ts
index 38b5411c7f3..e54d2c78efc 100644
--- a/app/lib/services/voip/getPeerAutocompleteOptions.ts
+++ b/app/lib/services/voip/getPeerAutocompleteOptions.ts
@@ -1,9 +1,8 @@
-import type { TUserStatus } from '../../../definitions';
 import { usersAutoComplete } from '../restApi';
 import { store as reduxStore } from '../../store/auxStore';
 
 export type TPeerItem =
-	| { type: 'user'; value: string; label: string; username?: string; callerId?: string; status?: TUserStatus }
+	| { type: 'user'; value: string; label: string; username?: string; callerId?: string }
 	| { type: 'sip'; value: string; label: string };
 
 type TUserAutocompleteResponse = {
@@ -13,7 +12,6 @@ type TUserAutocompleteResponse = {
 		name?: string;
 		username?: string;
 		freeSwitchExtension?: string;
-		status?: TUserStatus;
 	}>;
 };
 
@@ -79,8 +77,7 @@ export const getPeerAutocompleteOptions = async ({
 					value: item._id,
 					label: item.name || item.username || '',
 					username: item.username,
-					callerId: item.freeSwitchExtension,
-					status: item.status
+					callerId: item.freeSwitchExtension
 				}))
 		: [];
 
diff --git a/app/lib/services/voip/usePeerAutocompleteStore.test.ts b/app/lib/services/voip/usePeerAutocompleteStore.test.ts
index 312a2a0a100..b0e2e6e01bd 100644
--- a/app/lib/services/voip/usePeerAutocompleteStore.test.ts
+++ b/app/lib/services/voip/usePeerAutocompleteStore.test.ts
@@ -137,7 +137,6 @@ describe('usePeerAutocompleteStore', () => {
 
 		it('should set empty options on fetch error', async () => {
 			mockGetPeerAutocompleteOptions.mockRejectedValue(new Error('API error'));
-			const consoleSpy = jest.spyOn(console, 'log').mockImplementation();
 
 			const { result } = renderHook(() => usePeerAutocompleteStore());
 
@@ -146,8 +145,6 @@ describe('usePeerAutocompleteStore', () => {
 			});
 
 			expect(usePeerAutocompleteStore.getState().options).toEqual([]);
-			expect(consoleSpy).toHaveBeenCalledWith('Failed to fetch options');
-			consoleSpy.mockRestore();
 		});
 	});
 });
diff --git a/app/lib/services/voip/usePeerAutocompleteStore.ts b/app/lib/services/voip/usePeerAutocompleteStore.ts
index df1381f5f03..8952b1dc0c2 100644
--- a/app/lib/services/voip/usePeerAutocompleteStore.ts
+++ b/app/lib/services/voip/usePeerAutocompleteStore.ts
@@ -39,7 +39,7 @@ export const usePeerAutocompleteStore = create<TPeerAutocompleteStore>((set, get
 
 			set({ options });
 		} catch {
-			console.log('Failed to fetch options');
+			set({ options: [] });
 		}
 	},
 
diff --git a/app/views/NewMessageView/Item.tsx b/app/views/NewMessageView/Item.tsx
index bccbe860fdc..7af100e119e 100644
--- a/app/views/NewMessageView/Item.tsx
+++ b/app/views/NewMessageView/Item.tsx
@@ -27,7 +27,7 @@ const Item = ({ userId, name, username, onPress, testID, onLongPress }: IItem) =
 
 	const handleCallPress = () => {
 		if (!userId) return;
-		usePeerAutocompleteStore.getState().setSelectedPeer({ type: 'user', value: userId, label: name });
+		usePeerAutocompleteStore.getState().setSelectedPeer({ type: 'user', value: userId, label: name, username });
 		showActionSheetRef({
 			children: <NewMediaCall />
 		});

From b8cfd586fb4704592dc4bc0cc62b5fd32c467af6 Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Fri, 6 Mar 2026 17:47:39 -0300
Subject: [PATCH 16/20] Update tests

---
 .../__snapshots__/MediaCallHeader.test.tsx.snap        | 10 +++++-----
 app/views/NewMessageView/Item.test.tsx                 |  1 +
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap b/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap
index 4b3a0116b8b..5958d9d6323 100644
--- a/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap
+++ b/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap
@@ -229,7 +229,7 @@ exports[`Story Snapshots: ActiveCall should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16523:14:23
+              16524:47:23
             </Text>
           </Text>
         </View>
@@ -576,7 +576,7 @@ exports[`Story Snapshots: Collapsed should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16523:14:23
+              16524:47:23
             </Text>
           </Text>
         </View>
@@ -1266,7 +1266,7 @@ exports[`Story Snapshots: Focused should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16523:14:23
+              16524:47:23
             </Text>
           </Text>
         </View>
@@ -1633,7 +1633,7 @@ exports[`Story Snapshots: WithRemoteHeld should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16523:14:23
+              16524:47:23
             </Text>
           </Text>
         </View>
@@ -1980,7 +1980,7 @@ exports[`Story Snapshots: WithRemoteMuted should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16523:14:23
+              16524:47:23
             </Text>
           </Text>
         </View>
diff --git a/app/views/NewMessageView/Item.test.tsx b/app/views/NewMessageView/Item.test.tsx
index b17a1f875d6..11e834246f7 100644
--- a/app/views/NewMessageView/Item.test.tsx
+++ b/app/views/NewMessageView/Item.test.tsx
@@ -108,6 +108,7 @@ describe('NewMessageView Item', () => {
 		expect(mockSetSelectedPeer).toHaveBeenCalledWith({
 			type: 'user',
 			value: 'user123',
+			username: 'john.doe',
 			label: 'John Doe'
 		});
 		expect(mockShowActionSheetRef).toHaveBeenCalledTimes(1);

From 59fb65fbc8d343f0ea77bedd77c5fbefa8520514 Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Fri, 6 Mar 2026 17:57:29 -0300
Subject: [PATCH 17/20] Fix tests

---
 .../MediaCallHeader.test.tsx.snap             | 10 ++++-----
 app/containers/NewMediaCall/PeerList.test.tsx | 22 +++++++------------
 app/containers/NewMediaCall/PeerList.tsx      |  4 ----
 .../services/voip/usePeerAutocompleteStore.ts |  2 ++
 4 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap b/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap
index 5958d9d6323..1374029d7d3 100644
--- a/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap
+++ b/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap
@@ -229,7 +229,7 @@ exports[`Story Snapshots: ActiveCall should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16524:47:23
+              16524:56:56
             </Text>
           </Text>
         </View>
@@ -576,7 +576,7 @@ exports[`Story Snapshots: Collapsed should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16524:47:23
+              16524:56:56
             </Text>
           </Text>
         </View>
@@ -1266,7 +1266,7 @@ exports[`Story Snapshots: Focused should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16524:47:23
+              16524:56:56
             </Text>
           </Text>
         </View>
@@ -1633,7 +1633,7 @@ exports[`Story Snapshots: WithRemoteHeld should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16524:47:23
+              16524:56:56
             </Text>
           </Text>
         </View>
@@ -1980,7 +1980,7 @@ exports[`Story Snapshots: WithRemoteMuted should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16524:47:23
+              16524:56:56
             </Text>
           </Text>
         </View>
diff --git a/app/containers/NewMediaCall/PeerList.test.tsx b/app/containers/NewMediaCall/PeerList.test.tsx
index b713cdc9e51..76ea517fe82 100644
--- a/app/containers/NewMediaCall/PeerList.test.tsx
+++ b/app/containers/NewMediaCall/PeerList.test.tsx
@@ -68,15 +68,10 @@ describe('PeerList', () => {
 	});
 
 	it('should set selected peer, clear filter and fetch options when option is pressed', () => {
-		const setSelectedPeer = jest.fn();
-		const setFilter = jest.fn();
-		const fetchOptions = jest.fn();
 		usePeerAutocompleteStore.setState({
 			options: mockOptions,
 			selectedPeer: null,
-			setSelectedPeer,
-			setFilter,
-			fetchOptions
+			filter: 'Alice'
 		});
 
 		const { getByTestId } = render(
@@ -87,7 +82,7 @@ describe('PeerList', () => {
 
 		fireEvent.press(getByTestId('new-media-call-option-user-1'));
 
-		expect(setSelectedPeer).toHaveBeenCalledWith(
+		expect(usePeerAutocompleteStore.getState().selectedPeer).toEqual(
 			expect.objectContaining({
 				type: 'user',
 				value: 'user-1',
@@ -95,18 +90,15 @@ describe('PeerList', () => {
 				username: 'alice.johnson'
 			})
 		);
-		expect(setFilter).toHaveBeenCalledWith('');
-		expect(fetchOptions).toHaveBeenCalledWith('');
+		expect(usePeerAutocompleteStore.getState().filter).toBe('');
+		expect(usePeerAutocompleteStore.getState().options).toEqual([]);
 	});
 
 	it('should pass sip item correctly when SIP option is pressed', () => {
-		const setSelectedPeer = jest.fn();
 		usePeerAutocompleteStore.setState({
 			options: mockOptions,
 			selectedPeer: null,
-			setSelectedPeer,
-			setFilter: jest.fn(),
-			fetchOptions: jest.fn()
+			filter: '+55 11 98888-7777'
 		});
 
 		const { getByTestId } = render(
@@ -117,13 +109,15 @@ describe('PeerList', () => {
 
 		fireEvent.press(getByTestId('new-media-call-option-+5511988887777'));
 
-		expect(setSelectedPeer).toHaveBeenCalledWith(
+		expect(usePeerAutocompleteStore.getState().selectedPeer).toEqual(
 			expect.objectContaining({
 				type: 'sip',
 				value: '+5511988887777',
 				label: '+55 11 98888-7777'
 			})
 		);
+		expect(usePeerAutocompleteStore.getState().filter).toBe('');
+		expect(usePeerAutocompleteStore.getState().options).toEqual([]);
 	});
 });
 
diff --git a/app/containers/NewMediaCall/PeerList.tsx b/app/containers/NewMediaCall/PeerList.tsx
index 94a77a8cec5..68470b8903f 100644
--- a/app/containers/NewMediaCall/PeerList.tsx
+++ b/app/containers/NewMediaCall/PeerList.tsx
@@ -8,8 +8,6 @@ import { usePeerAutocompleteStore } from '../../lib/services/voip/usePeerAutocom
 export const PeerList = () => {
 	const setSelectedPeer = usePeerAutocompleteStore(state => state.setSelectedPeer);
 	const selectedPeer = usePeerAutocompleteStore(state => state.selectedPeer);
-	const setFilter = usePeerAutocompleteStore(state => state.setFilter);
-	const fetchOptions = usePeerAutocompleteStore(state => state.fetchOptions);
 	const options = usePeerAutocompleteStore(state => state.options);
 
 	if (selectedPeer) return null;
@@ -27,8 +25,6 @@ export const PeerList = () => {
 				  };
 
 		setSelectedPeer(peerItem);
-		setFilter('');
-		fetchOptions('');
 	};
 
 	const renderItem = ({ item }: { item: TPeerItem }) => <PeerItem item={item} onSelectOption={handleSelectOption} />;
diff --git a/app/lib/services/voip/usePeerAutocompleteStore.ts b/app/lib/services/voip/usePeerAutocompleteStore.ts
index 8952b1dc0c2..414aa83b902 100644
--- a/app/lib/services/voip/usePeerAutocompleteStore.ts
+++ b/app/lib/services/voip/usePeerAutocompleteStore.ts
@@ -45,6 +45,8 @@ export const usePeerAutocompleteStore = create<TPeerAutocompleteStore>((set, get
 
 	setSelectedPeer: (peer: TPeerItem | null) => {
 		set({ selectedPeer: peer });
+		set({ filter: '' });
+		set({ options: [] });
 	},
 
 	setFilter: (filter: string) => {

From b9fd3e780b9bbe99b13001746469ecad2aeb6854 Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Mon, 9 Mar 2026 10:26:39 -0300
Subject: [PATCH 18/20] Fix tests

---
 .../MediaCallHeader/MediaCallHeader.test.tsx        | 13 ++++++++++++-
 .../__snapshots__/MediaCallHeader.test.tsx.snap     | 10 +++++-----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/app/containers/MediaCallHeader/MediaCallHeader.test.tsx b/app/containers/MediaCallHeader/MediaCallHeader.test.tsx
index f145f038d7e..d4229750e97 100644
--- a/app/containers/MediaCallHeader/MediaCallHeader.test.tsx
+++ b/app/containers/MediaCallHeader/MediaCallHeader.test.tsx
@@ -11,6 +11,8 @@ import { generateSnapshots } from '../../../.rnstorybook/generateSnapshots';
 // Mock alert
 global.alert = jest.fn();
 
+const mockCallStartTime = 1713340800000;
+
 // Helper to create a mock call
 const createMockCall = (overrides: Record<string, unknown> = {}) => ({
 	state: 'active',
@@ -42,7 +44,7 @@ const setStoreState = (overrides: Partial<ReturnType<typeof useCallStore.getStat
 		isMuted: false,
 		isOnHold: false,
 		isSpeakerOn: false,
-		callStartTime: Date.now(),
+		callStartTime: mockCallStartTime,
 		contact: {
 			id: 'user-1',
 			displayName: 'Bob Burnquist',
@@ -58,6 +60,15 @@ const setStoreState = (overrides: Partial<ReturnType<typeof useCallStore.getStat
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => <Provider store={mockedStore}>{children}</Provider>;
 
+beforeAll(() => {
+	jest.useFakeTimers();
+	jest.setSystemTime(mockCallStartTime);
+});
+
+afterAll(() => {
+	jest.useRealTimers();
+});
+
 describe('MediaCallHeader', () => {
 	beforeEach(() => {
 		useCallStore.getState().reset();
diff --git a/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap b/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap
index 1374029d7d3..86f5b4ca9d3 100644
--- a/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap
+++ b/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap
@@ -229,7 +229,7 @@ exports[`Story Snapshots: ActiveCall should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16524:56:56
+              00:00
             </Text>
           </Text>
         </View>
@@ -576,7 +576,7 @@ exports[`Story Snapshots: Collapsed should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16524:56:56
+              00:00
             </Text>
           </Text>
         </View>
@@ -1266,7 +1266,7 @@ exports[`Story Snapshots: Focused should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16524:56:56
+              00:00
             </Text>
           </Text>
         </View>
@@ -1633,7 +1633,7 @@ exports[`Story Snapshots: WithRemoteHeld should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16524:56:56
+              00:00
             </Text>
           </Text>
         </View>
@@ -1980,7 +1980,7 @@ exports[`Story Snapshots: WithRemoteMuted should match snapshot 1`] = `
             Bob Burnquist
             <Text>
                - 
-              16524:56:56
+              00:00
             </Text>
           </Text>
         </View>

From 1d48d38cc30f14da9e926610c87525cf91d07ffd Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Mon, 9 Mar 2026 10:58:49 -0300
Subject: [PATCH 19/20] Atomic update

---
 app/lib/services/voip/usePeerAutocompleteStore.ts | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/app/lib/services/voip/usePeerAutocompleteStore.ts b/app/lib/services/voip/usePeerAutocompleteStore.ts
index 414aa83b902..e34ead9f56d 100644
--- a/app/lib/services/voip/usePeerAutocompleteStore.ts
+++ b/app/lib/services/voip/usePeerAutocompleteStore.ts
@@ -44,9 +44,7 @@ export const usePeerAutocompleteStore = create<TPeerAutocompleteStore>((set, get
 	},
 
 	setSelectedPeer: (peer: TPeerItem | null) => {
-		set({ selectedPeer: peer });
-		set({ filter: '' });
-		set({ options: [] });
+		set({ selectedPeer: peer, filter: '', options: [] });
 	},
 
 	setFilter: (filter: string) => {

From cd623c1244a59c18f1f100d7291c1ec691d5323f Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Mon, 9 Mar 2026 10:59:00 -0300
Subject: [PATCH 20/20] Improve use sub and write tests

---
 app/lib/hooks/useSubscription.test.ts | 109 ++++++++++++++++++++++++++
 app/lib/hooks/useSubscription.ts      |   8 +-
 2 files changed, 114 insertions(+), 3 deletions(-)
 create mode 100644 app/lib/hooks/useSubscription.test.ts

diff --git a/app/lib/hooks/useSubscription.test.ts b/app/lib/hooks/useSubscription.test.ts
new file mode 100644
index 00000000000..4d93b1a6164
--- /dev/null
+++ b/app/lib/hooks/useSubscription.test.ts
@@ -0,0 +1,109 @@
+import { act, renderHook, waitFor } from '@testing-library/react-native';
+
+import { useSubscription } from './useSubscription';
+import { getSubscriptionByRoomId } from '../database/services/Subscription';
+
+jest.mock('../database/services/Subscription', () => ({
+	getSubscriptionByRoomId: jest.fn()
+}));
+
+const mockedGetSubscriptionByRoomId = jest.mocked(getSubscriptionByRoomId);
+
+const createDeferred = <T,>() => {
+	let resolve!: (value: T) => void;
+	const promise = new Promise<T>(res => {
+		resolve = res;
+	});
+
+	return { promise, resolve };
+};
+
+describe('useSubscription', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should return undefined and skip loading when rid is missing', () => {
+		const { result } = renderHook(() => useSubscription());
+
+		expect(result.current).toBeUndefined();
+		expect(mockedGetSubscriptionByRoomId).not.toHaveBeenCalled();
+	});
+
+	it('should load subscription for the provided rid', async () => {
+		const subscription = { id: 'sub-1', rid: 'room-1' } as any;
+		mockedGetSubscriptionByRoomId.mockResolvedValue(subscription);
+
+		const { result } = renderHook(() => useSubscription('room-1'));
+
+		await waitFor(() => expect(result.current).toBe(subscription));
+		expect(mockedGetSubscriptionByRoomId).toHaveBeenCalledWith('room-1');
+	});
+
+	it('should keep the current subscription while loading the next rid', async () => {
+		const firstSubscription = { id: 'sub-1', rid: 'room-1' } as any;
+		const secondSubscription = { id: 'sub-2', rid: 'room-2' } as any;
+		const secondRequest = createDeferred<typeof secondSubscription | null>();
+
+		mockedGetSubscriptionByRoomId
+			.mockResolvedValueOnce(firstSubscription)
+			.mockImplementationOnce(() => secondRequest.promise);
+
+		const { result, rerender } = renderHook(({ rid }: { rid?: string }) => useSubscription(rid), {
+			initialProps: { rid: 'room-1' }
+		});
+
+		await waitFor(() => expect(result.current).toBe(firstSubscription));
+
+		rerender({ rid: 'room-2' });
+
+		expect(result.current).toBe(firstSubscription);
+
+		await act(async () => {
+			secondRequest.resolve(secondSubscription);
+			await secondRequest.promise;
+		});
+
+		await waitFor(() => expect(result.current).toBe(secondSubscription));
+	});
+
+	it('should return undefined when the lookup does not find a subscription', async () => {
+		mockedGetSubscriptionByRoomId.mockResolvedValue(null);
+
+		const { result } = renderHook(() => useSubscription('room-1'));
+
+		await waitFor(() => expect(mockedGetSubscriptionByRoomId).toHaveBeenCalledWith('room-1'));
+		expect(result.current).toBeUndefined();
+	});
+
+	it('should ignore stale requests when rid changes', async () => {
+		const firstSubscription = { id: 'sub-1', rid: 'room-1' } as any;
+		const secondSubscription = { id: 'sub-2', rid: 'room-2' } as any;
+		const firstRequest = createDeferred<typeof firstSubscription | null>();
+		const secondRequest = createDeferred<typeof secondSubscription | null>();
+
+		mockedGetSubscriptionByRoomId
+			.mockImplementationOnce(() => firstRequest.promise)
+			.mockImplementationOnce(() => secondRequest.promise);
+
+		const { result, rerender } = renderHook(({ rid }: { rid?: string }) => useSubscription(rid), {
+			initialProps: { rid: 'room-1' }
+		});
+
+		rerender({ rid: 'room-2' });
+
+		await act(async () => {
+			firstRequest.resolve(firstSubscription);
+			await firstRequest.promise;
+		});
+
+		expect(result.current).toBeUndefined();
+
+		await act(async () => {
+			secondRequest.resolve(secondSubscription);
+			await secondRequest.promise;
+		});
+
+		await waitFor(() => expect(result.current).toBe(secondSubscription));
+	});
+});
diff --git a/app/lib/hooks/useSubscription.ts b/app/lib/hooks/useSubscription.ts
index 1766836afbd..c48683eee31 100644
--- a/app/lib/hooks/useSubscription.ts
+++ b/app/lib/hooks/useSubscription.ts
@@ -8,17 +8,19 @@ export const useSubscription = (rid?: string): TSubscriptionModel | undefined =>
 
 	const [subscription, setSubscription] = useState<TSubscriptionModel>();
 	useEffect(() => {
+		let isActive = true;
+
 		const load = async () => {
 			if (!rid) return;
 			const result = await getSubscriptionByRoomId(rid);
-			if (result) {
-				setSubscription(result);
+			if (isActive) {
+				setSubscription(result ?? undefined);
 			}
 		};
 		load();
 
 		return () => {
-			setSubscription(undefined);
+			isActive = false;
 		};
 	}, [rid]);