Merge branch 'develop' into new.add-discusions-roomactionsview

.prettierignore

@@ -23,3 +23,4 @@ SECURITY.md
 npm-debug.log
 yarn-error.log
 
+app/i18n/locales/

android/app/build.gradle

@@ -144,7 +144,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode VERSIONCODE as Integer
-        versionName "4.20.0"
+        versionName "4.21.0"
         vectorDrawables.useSupportLibrary = true
         if (!isFoss) {
             manifestPlaceholders = [BugsnagAPIKey: BugsnagAPIKey as String]
@@ -292,6 +292,8 @@ dependencies {
     implementation "com.github.bumptech.glide:glide:4.9.0"
     annotationProcessor "com.github.bumptech.glide:compiler:4.9.0"
     implementation "com.tencent:mmkv-static:1.2.1"
+    implementation 'com.squareup.okhttp3:okhttp:4.9.0'
+    implementation "com.squareup.okhttp3:okhttp-urlconnection:4.9.0"
 }
 
 // Run this once to be able to run the application with BUCK

android/app/src/main/AndroidManifest.xml

@@ -3,7 +3,6 @@
     package="chat.rocket.reactnative">
 
     <uses-permission android:name="android.permission.INTERNET" />
-    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
 
     <application

android/build.gradle

@@ -10,8 +10,8 @@ buildscript {
     ext {
         buildToolsVersion = "29.0.3"
         minSdkVersion = 23
-        compileSdkVersion = 29
+        compileSdkVersion = 30
-        targetSdkVersion = 29
+        targetSdkVersion = 30
         ndkVersion = "20.1.5948944"
         glideVersion = "4.11.0"
         kotlin_version = "1.3.50"
@@ -68,10 +68,10 @@ subprojects { subproject ->
     afterEvaluate {
         if ((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {
             android {
-                compileSdkVersion 29
+                compileSdkVersion 30
                 buildToolsVersion "29.0.3"
                 defaultConfig {
-                    targetSdkVersion 29
+                    targetSdkVersion 30
                 }
                 variantFilter { variant ->
                     def names = variant.flavors*.name

app/actions/actionsTypes.js

@@ -18,8 +18,6 @@ export const ROOMS = createRequestTypes('ROOMS', [
 	'SET_SEARCH',
 	'CLOSE_SERVER_DROPDOWN',
 	'TOGGLE_SERVER_DROPDOWN',
-	'CLOSE_SORT_DROPDOWN',
-	'TOGGLE_SORT_DROPDOWN',
 	'OPEN_SEARCH_HEADER',
 	'CLOSE_SEARCH_HEADER'
 ]);

app/actions/rooms.js

@@ -45,18 +45,6 @@ export function toggleServerDropdown() {
 	};
 }
 
-export function closeSortDropdown() {
-	return {
-		type: types.ROOMS.CLOSE_SORT_DROPDOWN
-	};
-}
-
-export function toggleSortDropdown() {
-	return {
-		type: types.ROOMS.TOGGLE_SORT_DROPDOWN
-	};
-}
-
 export function openSearchHeader() {
 	return {
 		type: types.ROOMS.OPEN_SEARCH_HEADER

app/constants/constantDisplayMode.js

@@ -0,0 +1,2 @@
+export const DISPLAY_MODE_CONDENSED = 'condensed';
+export const DISPLAY_MODE_EXPANDED = 'expanded';

app/containers/Avatar/Avatar.tsx

@@ -85,7 +85,7 @@ const Avatar = React.memo(
 		}
 
 		return (
-			<View style={[avatarStyle, style]}>
+			<View style={[avatarStyle, style]} testID='avatar'>
 				{image}
 				{children}
 			</View>

app/ee/omnichannel/views/QueueListView.js

@@ -51,7 +51,9 @@ class QueueListView extends React.Component {
 		server: PropTypes.string,
 		useRealName: PropTypes.bool,
 		navigation: PropTypes.object,
-		theme: PropTypes.string
+		theme: PropTypes.string,
+		showAvatar: PropTypes.bool,
+		displayMode: PropTypes.string
 	};
 
 	shouldComponentUpdate(nextProps) {
@@ -95,7 +97,9 @@ class QueueListView extends React.Component {
 			useRealName,
 			theme,
 			isMasterDetail,
-			width
+			width,
+			showAvatar,
+			displayMode
 		} = this.props;
 		const id = this.getUidDirectMessage(item);
 
@@ -117,6 +121,8 @@ class QueueListView extends React.Component {
 				getRoomAvatar={this.getRoomAvatar}
 				visitor={item.v}
 				swipeEnabled={false}
+				showAvatar={showAvatar}
+				displayMode={displayMode}
 			/>
 		);
 	};
@@ -151,6 +157,8 @@ const mapStateToProps = state => ({
 	isMasterDetail: state.app.isMasterDetail,
 	server: state.server.server,
 	useRealName: state.settings.UI_Use_Real_Name,
-	queued: getInquiryQueueSelector(state)
+	queued: getInquiryQueueSelector(state),
+	showAvatar: state.sortPreferences.showAvatar,
+	displayMode: state.sortPreferences.displayMode
 });
 export default connect(mapStateToProps)(withDimensions(withTheme(QueueListView)));

app/i18n/locales/ar.json

@@ -79,7 +79,6 @@
   "error-user-registration-secret": "التسجيل مسموح به عبر عنوان الويب السري فقط",
   "error-you-are-last-owner": "أنت المالك الأخير. يرجى تعيين مالك جديد قبل مغادرة الغرفة",
   "Actions": "الإجراءات",
-	"activity": "نشاط",
   "Activity": "النشاط",
   "Add_Reaction": "إضافة تفاعل",
   "Add_Server": "إضافة خادم",
@@ -224,7 +223,6 @@
   "Everyone_can_access_this_channel": "يمكن للجميع الوصول إلى هذه القناة",
   "Error_uploading": "خطأ في الرفع",
   "Expiration_Days": "انتهاء (أيام)",
-	"Favorite": "مفضل",
   "Favorites": "مفضلات",
   "Files": "ملفات",
   "File_description": "وصف الملف",
@@ -241,9 +239,6 @@
   "Forward_to_user": "إعادة توجيه لمستخدم",
   "Full_table": "انقر لرؤية الجدول كاملاً",
   "Generate_New_Link": "إنشاء رابط جديد",
-	"Group_by_favorites": "جمع حسب المفضلة",
-	"Group_by_type": "جمع حسب النوع",
-	"Hide": "إخفاء",
   "Has_joined_the_channel": "انضم إلى القناة",
   "Has_joined_the_conversation": "انضم إلى المحادثة",
   "Has_left_the_channel": "غادر القناة",
@@ -321,7 +316,6 @@
   "My_servers": "الخوادم",
   "N_people_reacted": "{{n}} تفاعل الناس",
   "N_users": "{{n}} مستخدمين",
-	"name": "اسم",
   "Name": "اسم",
   "Navigation_history": "تاريخ التصفح",
   "Never": "أبداً",
@@ -398,7 +392,6 @@
   "Reactions_are_disabled": "التفاعل معطل",
   "Reactions_are_enabled": "التفاعل مفعل",
   "Reactions": "التفاعلات",
-	"Read": "قراءة",
   "Read_External_Permission_Message": "يحتاج Rocket.chat للوصول إلى الصور والملفات الموجودة على الجهاز",
   "Read_External_Permission": "صلاحية قراءة الوسائط",
   "Read_Only_Channel": "قناة للقراءة فقط",
@@ -490,7 +483,6 @@
   "Sign_in_your_server": "تسجيل الدخول إلى الخادم الخاص بك",
   "Sign_Up": "تسجيل جديد",
   "Some_field_is_invalid_or_empty": "بعض الحقول غير صالحة أو فارغة",
-	"Sorting_by": "فرز حسب {{key}}",
   "Sound": "الصوت",
   "Star_room": "تمييز الغرفة",
   "Star": "تمييز",
@@ -529,7 +521,6 @@
   "unarchive": "إلغاء الأرشفة",
   "UNARCHIVE": "إلغاء الأرشفة",
   "Unblock_user": "إلغاء حظر عن مستخدم",
-	"Unfavorite": "إزالة من المفضلة",
   "Unfollowed_thread": "موضوع غير متابع",
   "Unmute": "إلغاء كتم",
   "unmuted": "إلغاء كتم",

app/i18n/locales/de.json

@@ -81,7 +81,6 @@
   "error-you-are-last-owner": "Du bist der letzte Besitzer. Bitte setze einen neuen Besitzer, bevor du den Raum verlässt.",
   "error-status-not-allowed": "Unsichtbar-Status ist deaktiviert",
   "Actions": "Aktionen",
-	"activity": "Aktivität",
   "Activity": "Aktivität",
   "Add_Reaction": "Reaktion hinzufügen",
   "Add_Server": "Server hinzufügen",
@@ -232,7 +231,6 @@
   "Everyone_can_access_this_team": "Jeder kann auf dieses Team zugreifen",
   "Error_uploading": "Fehler beim Hochladen",
   "Expiration_Days": "läuft ab (Tage)",
-	"Favorite": "Favorisieren",
   "Favorites": "Favoriten",
   "Files": "Dateien",
   "File_description": "Dateibeschreibung",
@@ -249,9 +247,6 @@
   "Forward_to_user": "Weiterleiten an Benutzer",
   "Full_table": "Klicken um die ganze Tabelle anzuzeigen",
   "Generate_New_Link": "Neuen Link erstellen",
-	"Group_by_favorites": "Nach Favoriten gruppieren",
-	"Group_by_type": "Gruppieren nach Typ",
-	"Hide": "Ausblenden",
   "Has_joined_the_channel": "Ist dem Kanal beigetreten",
   "Has_joined_the_conversation": "Hat sich dem Gespräch angeschlossen",
   "Has_left_the_channel": "Hat den Kanal verlassen",
@@ -334,7 +329,6 @@
   "N_people_reacted": "{{n}} Leute haben reagiert",
   "N_users": "{{n}} Benutzer",
   "N_channels": "{{n}} Kanäle",
-	"name": "Name",
   "Name": "Name",
   "Navigation_history": "Navigations-Verlauf",
   "Never": "Niemals",
@@ -412,7 +406,6 @@
   "Reactions_are_disabled": "Reaktionen sind deaktiviert",
   "Reactions_are_enabled": "Reaktionen sind aktiviert",
   "Reactions": "Reaktionen",
-	"Read": "Gelesen",
   "Read_External_Permission_Message": "Rocket.Chat benötigt Zugriff auf deine Fotos, Medien und Dateien auf deinem Gerät",
   "Read_External_Permission": "Lese-Zugriff auf Medien",
   "Read_Only_Channel": "Nur-Lese-Kanal",
@@ -507,7 +500,6 @@
   "Sign_in_your_server": "Melde dich bei deinem Server an",
   "Sign_Up": "Anmelden",
   "Some_field_is_invalid_or_empty": "Ein Feld ist ungültig oder leer",
-	"Sorting_by": "Sortierung nach {{key}}",
   "Sound": "Ton",
   "Star_room": "Favorisierter Raum",
   "Star": "Favoriten",
@@ -546,7 +538,6 @@
   "unarchive": "wiederherstellen",
   "UNARCHIVE": "WIEDERHERSTELLEN",
   "Unblock_user": "Benutzer entsperren",
-	"Unfavorite": "Nicht mehr favorisieren",
   "Unfollowed_thread": "Thread nicht mehr folgen",
   "Unmute": "Stummschaltung aufheben",
   "unmuted": "Stummschaltung aufgehoben",

app/i18n/locales/es-ES.json

@@ -76,7 +76,6 @@
   "error-user-registration-secret": "El registro de usuarios sólo está permitido por URL secretas",
   "error-you-are-last-owner": "Eres el único propietario existente. Debes establecer un nuevo propietario antes de abandonar la sala.",
   "Actions": "Acciones",
-	"activity": "actividad",
   "Activity": "Actividad",
   "Add_Reaction": "Añadir reacción",
   "Add_Server": "Añadir servidor",
@@ -176,7 +175,6 @@
   "Enable_notifications": "Permitir notificaciones",
   "Everyone_can_access_this_channel": "Todos los usuarios pueden acceder a este canal",
   "Error_uploading": "Error en la subida",
-	"Favorite": "Favorito",
   "Favorites": "Favoritos",
   "Files": "Archivos",
   "File_description": "Descripción del archivo",
@@ -188,9 +186,6 @@
   "Forgot_password": "¿Ha olvidado su contraseña?",
   "Forgot_Password": "Olvidé la contraseña",
   "Full_table": "Click para ver la tabla completa",
-	"Group_by_favorites": "Agrupar por favoritos",
-	"Group_by_type": "Agrupar por tipo",
-	"Hide": "Ocultar",
   "Has_joined_the_channel": "se ha unido al canal",
   "Has_joined_the_conversation": "se ha unido a la conversación",
   "Has_left_the_channel": "ha dejado el canal",
@@ -237,7 +232,6 @@
   "My_servers": "Mis servidores",
   "N_people_reacted": "Han reaccionado {{n}} personas",
   "N_users": "{{n}} usuarios",
-	"name": "nombre",
   "Name": "Nombre",
   "New_Message": "Nuevo mensaje",
   "New_Password": "Nueva contraseña",
@@ -292,7 +286,6 @@
   "Reactions_are_disabled": "Las reacciones están desactivadas",
   "Reactions_are_enabled": "Las reacciones están activadas",
   "Reactions": "Reacciones",
-	"Read": "Leer",
   "Read_Only_Channel": "Canal de sólo lectura",
   "Read_Only": "Sólo lectura ",
   "Read_Receipt": "Comprobante de lectura",
@@ -356,7 +349,6 @@
   "Sign_in_your_server": "Accede a tu servidor",
   "Sign_Up": "Registrarse",
   "Some_field_is_invalid_or_empty": "Algún campo no es correcto o está vacío",
-	"Sorting_by": "Ordenado por {{key}}",
   "Sound": "Sonido",
   "Star_room": "Destacar sala",
   "Star": "Destacar",
@@ -390,7 +382,6 @@
   "unarchive": "desarchivar",
   "UNARCHIVE": "DESARCHIVAR",
   "Unblock_user": "Desbloquear usuario",
-	"Unfavorite": "Quitar favorito",
   "Unfollowed_thread": "Dejar de seguir el hilo",
   "Unmute": "Desmutear",
   "unmuted": "Desmuteado",

app/i18n/locales/fr.json

@@ -81,7 +81,6 @@
   "error-you-are-last-owner": "Vous êtes le dernier propriétaire. Veuillez définir un nouveau propriétaire avant de quitter le salon.",
   "error-status-not-allowed": "Le statut invisible est désactivé",
   "Actions": "Actions",
-	"activity": "activité",
   "Activity": "Activité",
   "Add_Reaction": "Ajouter une réaction",
   "Add_Server": "Ajouter un serveur",
@@ -232,7 +231,6 @@
   "Everyone_can_access_this_team": "Tout le monde peut accéder à cette équipe",
   "Error_uploading": "Erreur lors de l'envoi",
   "Expiration_Days": "Expiration (Jours)",
-	"Favorite": "Favori",
   "Favorites": "Favoris",
   "Files": "Fichiers",
   "File_description": "Description du fichier",
@@ -249,9 +247,6 @@
   "Forward_to_user": "Transmettre à l'utilisateur",
   "Full_table": "Cliquez pour voir le tableau complet",
   "Generate_New_Link": "Générer un nouveau lien",
-	"Group_by_favorites": "Grouper par favoris",
-	"Group_by_type": "Grouper par type",
-	"Hide": "Cacher",
   "Has_joined_the_channel": "a rejoint le canal",
   "Has_joined_the_conversation": "a rejoint la conversation",
   "Has_left_the_channel": "a quitté le canal",
@@ -334,7 +329,6 @@
   "N_people_reacted": "{{n}} personnes ont réagi",
   "N_users": "{{n}} utilisateurs",
   "N_channels": "{{n}} canaux",
-	"name": "nom",
   "Name": "Nom",
   "Navigation_history": "Historique de navigation",
   "Never": "Jamais",
@@ -412,7 +406,6 @@
   "Reactions_are_disabled": "Les réactions sont désactivées",
   "Reactions_are_enabled": "Les réactions sont activées",
   "Reactions": "Réactions",
-	"Read": "Lecture",
   "Read_External_Permission_Message": "Rocket.Chat doit accéder aux photos, aux médias et aux fichiers sur votre appareil",
   "Read_External_Permission": "Permission de lecture des fichiers",
   "Read_Only_Channel": "Canal en lecture seule",
@@ -507,7 +500,6 @@
   "Sign_in_your_server": "Connectez-vous à votre serveur",
   "Sign_Up": "S'inscrire",
   "Some_field_is_invalid_or_empty": "Certains champs sont invalides ou vides",
-	"Sorting_by": "Tri par {{key}}",
   "Sound": "Son",
   "Star_room": "Canal favoris",
   "Star": "Mettre en favoris",
@@ -546,7 +538,6 @@
   "unarchive": "désarchiver",
   "UNARCHIVE": "DÉSARCHIVER",
   "Unblock_user": "Débloquer l'utilisateur",
-	"Unfavorite": "Supprimer des favoris",
   "Unfollowed_thread": "Ne plus suivre ce fil",
   "Unmute": "Rendre la parole",
   "unmuted": "rendu la parole",

app/i18n/locales/it.json

@@ -79,7 +79,6 @@
   "error-user-registration-secret": "Registrazione utente permessa solo via URL segreto",
   "error-you-are-last-owner": "Sei l'ultimo proprietario rimasto. Imposta un nuovo proprietario prima di lasciare la stanza.",
   "Actions": "Azioni",
-	"activity": "attività",
   "Activity": "Attività",
   "Add_Reaction": "Aggiungi reazione",
   "Add_Server": "Aggiungi server",
@@ -227,7 +226,6 @@
   "Everyone_can_access_this_channel": "Tutti hanno accesso a questo canale",
   "Error_uploading": "Errore nel caricamento di",
   "Expiration_Days": "Scadenza (giorni)",
-	"Favorite": "Preferito",
   "Favorites": "Preferiti",
   "Files": "File",
   "File_description": "Descrizione file",
@@ -244,9 +242,6 @@
   "Forward_to_user": "Inoltra ad udente",
   "Full_table": "Clicca per la tabella completa",
   "Generate_New_Link": "Genera nuovo link",
-	"Group_by_favorites": "Raggruppa per preferiti",
-	"Group_by_type": "Raggruppa per tipo",
-	"Hide": "Nascondi",
   "Has_joined_the_channel": "si è unito al canale",
   "Has_joined_the_conversation": "si è unito alla conversazione",
   "Has_left_the_channel": "ha lasciato il canale",
@@ -326,7 +321,6 @@
   "My_servers": "I miei server",
   "N_people_reacted": "{{n}} persone hanno reagito",
   "N_users": "{{n}} utenti",
-	"name": "nome",
   "Name": "Nome",
   "Navigation_history": "Cronologia di navigazione",
   "Never": "Mai",
@@ -404,7 +398,6 @@
   "Reactions_are_disabled": "Le reazioni sono disabilitate",
   "Reactions_are_enabled": "Le reazioni sono abilitate",
   "Reactions": "Reazioni",
-	"Read": "Letto",
   "Read_External_Permission_Message": "Rocket.Chat deve accedere alle foto, media, e documenti sul tuo dispositivo",
   "Read_External_Permission": "Permesso di Lettura della Memoria",
   "Read_Only_Channel": "Canale in sola lettura",
@@ -498,7 +491,6 @@
   "Sign_in_your_server": "Accedi al tuo server",
   "Sign_Up": "Registrati",
   "Some_field_is_invalid_or_empty": "Un campo non è valido o è vuoto",
-	"Sorting_by": "Ordina per {{key}}",
   "Sound": "Suono",
   "Star_room": "Aggiungi stanza ai preferiti",
   "Star": "Aggiungi ai preferiti",
@@ -537,7 +529,6 @@
   "unarchive": "rimuovi dall'archivio",
   "UNARCHIVE": "RIMUOVI DALL'ARCHIVIO",
   "Unblock_user": "Sblocca utente",
-	"Unfavorite": "Rimuovi preferito",
   "Unfollowed_thread": "Non segui più il thread",
   "Unmute": "Attiva notifiche",
   "unmuted": "notifiche attivate",

app/i18n/locales/ja.json

@@ -77,7 +77,6 @@
   "error-user-registration-secret": "ユーザーの登録は登録用URLからのみ許可されています",
   "error-you-are-last-owner": "あなたは最後のオーナーです。ルームを退出する前に別のオーナーを設定してください。",
   "Actions": "アクション",
-	"activity": "アクティビティ",
   "Activity": "アクティビティ順",
   "Add_Reaction": "リアクションを追加",
   "Add_Server": "サーバーを追加",
@@ -183,7 +182,6 @@
   "Everyone_can_access_this_channel": "全員このチャンネルにアクセスできます",
   "Error_uploading": "アップロードエラー",
   "Expiration_Days": "期限切れ (日)",
-	"Favorite": "お気に入り",
   "Favorites": "お気に入り",
   "Files": "ファイル",
   "File_description": "ファイルの説明",
@@ -196,9 +194,6 @@
   "Forgot_Password": "パスワードを忘れた",
   "Full_table": "クリックしてテーブル全体を見る",
   "Generate_New_Link": "新しいリンクを生成",
-	"Group_by_favorites": "お気に入りをグループ化",
-	"Group_by_type": "タイプ別にグループ化",
-	"Hide": "隠す",
   "Has_joined_the_channel": "はチャンネルに参加しました",
   "Has_joined_the_conversation": "は会話に参加しました",
   "Has_left_the_channel": "はチャンネルを退出しました",
@@ -251,7 +246,6 @@
   "My_servers": "自分のサーバー",
   "N_people_reacted": "{{n}}人がリアクションしました",
   "N_users": "{{n}}人",
-	"name": "アルファベット",
   "Name": "名前",
   "Never": "ずっと受け取らない",
   "New_Message": "メッセージ",
@@ -308,7 +302,6 @@
   "Reactions_are_disabled": "リアクションは無効化されています",
   "Reactions_are_enabled": "リアクションは有効化されています",
   "Reactions": "リアクション",
-	"Read": "読む",
   "Read_Only_Channel": "読み取り専用チャンネル",
   "Read_Only": "読み取り専用",
   "Read_Receipt": "レシートを見る",
@@ -382,7 +375,6 @@
   "Sign_in_your_server": "サーバーに接続",
   "Sign_Up": "登録",
   "Some_field_is_invalid_or_empty": "不正、または空の入力欄があります。",
-	"Sorting_by": "{{key}}順",
   "Sound": "音",
   "Star_room": "お気に入りルーム",
   "Star": "お気に入り",
@@ -416,7 +408,6 @@
   "unarchive": "アーカイブ解除",
   "UNARCHIVE": "アーカイブ解除",
   "Unblock_user": "ブロックを解除",
-	"Unfavorite": "お気に入り解除",
   "Unfollowed_thread": "スレッド更新時に通知しない",
   "Unmute": "ミュート解除",
   "unmuted": "ミュート解除しました",

app/i18n/locales/nl.json

@@ -81,7 +81,6 @@
   "error-you-are-last-owner": "Je bent de laatste eigenaar. Stel een nieuwe eigenaar in voordat je de kamer verlaat.",
   "error-status-not-allowed": "Onzichtbare status is uitgeschakeld",
   "Actions": "Acties",
-	"activity": "activiteit",
   "Activity": "Activiteit",
   "Add_Reaction": "Reactie toevoegen",
   "Add_Server": "Server toevoegen",
@@ -232,7 +231,6 @@
   "Everyone_can_access_this_team": "Iedereen heeft toegang tot dit team",
   "Error_uploading": "Fout bij uploaden",
   "Expiration_Days": "Vervaldatum (Dagen)",
-	"Favorite": "Favoriet",
   "Favorites": "Favorieten",
   "Files": "Bestanden",
   "File_description": "Bestandsbeschrijving",
@@ -249,9 +247,6 @@
   "Forward_to_user": "Doorsturen naar gebruiker",
   "Full_table": "Klik om de volledige tabel te zien",
   "Generate_New_Link": "Nieuwe link genereren",
-	"Group_by_favorites": "Groepeer favorieten",
-	"Group_by_type": "Groeperen op type",
-	"Hide": "Verberg",
   "Has_joined_the_channel": "is bij het kanaal gekomen",
   "Has_joined_the_conversation": "heeft zich bij het gesprek aangesloten",
   "Has_left_the_channel": "heeft het kanaal verlaten",
@@ -334,7 +329,6 @@
   "N_people_reacted": "{{n}} mensen hebben gereageerd",
   "N_users": "{{n}} gebruikers",
   "N_channels": "{{n}} kanalen",
-	"name": "naam",
   "Name": "Naam",
   "Navigation_history": "Navigatie geschiedenis",
   "Never": "Nooit",
@@ -412,7 +406,6 @@
   "Reactions_are_disabled": "Reacties zijn uitgeschakeld",
   "Reactions_are_enabled": "Reacties zijn ingeschakeld",
   "Reactions": "Reacties",
-	"Read": "Lezen",
   "Read_External_Permission_Message": "Rocket.Chat heeft toegang nodig tot foto's, media en bestanden op je apparaat",
   "Read_External_Permission": "Lees toestemming voor media",
   "Read_Only_Channel": "Alleen-lezen kanaal",
@@ -507,7 +500,6 @@
   "Sign_in_your_server": "Log in op je server",
   "Sign_Up": "Registreren",
   "Some_field_is_invalid_or_empty": "Sommige velden zijn ongeldig of leeg",
-	"Sorting_by": "Sorteren op {{key}}",
   "Sound": "Geluid",
   "Star_room": "Favoriete kanalen",
   "Star": "Ster",
@@ -546,7 +538,6 @@
   "unarchive": "dearchiveren",
   "UNARCHIVE": "DEARCHIVEREN",
   "Unblock_user": "Deblokkeer gebruiker",
-	"Unfavorite": "Uit favorieten halen",
   "Unfollowed_thread": "Draad ontvolgd",
   "Unmute": "Dempen opheffen",
   "unmuted": "ongedempt",

app/i18n/locales/pt-BR.json

@@ -77,7 +77,6 @@
   "error-you-are-last-owner": "Você é o último proprietário da sala. Por favor defina um novo proprietário antes de sair.",
   "error-status-not-allowed": "O status invisível está desativado",
   "Actions": "Ações",
-	"activity": "atividade",
   "Activity": "Atividade",
   "Add_Reaction": "Reagir",
   "Add_Server": "Adicionar servidor",
@@ -219,7 +218,6 @@
   "Everyone_can_access_this_channel": "Todos podem acessar este canal",
   "Error_uploading": "Erro subindo",
   "Expiration_Days": "Expira em (dias)",
-	"Favorite": "Adicionar aos Favoritos",
   "Favorites": "Favoritos",
   "Files": "Arquivos",
   "File_description": "Descrição do arquivo",
@@ -236,9 +234,6 @@
   "Forward_to_user": "Encaminhar para usuário",
   "Full_table": "Clique para ver a tabela completa",
   "Generate_New_Link": "Gerar novo convite",
-	"Group_by_favorites": "Agrupar favoritos",
-	"Group_by_type": "Agrupar por tipo",
-	"Hide": "Ocultar",
   "Has_joined_the_channel": "entrou no canal",
   "Has_joined_the_conversation": "entrou na conversa",
   "Has_left_the_channel": "saiu da conversa",
@@ -307,7 +302,6 @@
   "muted": "mudo",
   "N_people_reacted": "{{n}} pessoas reagiram",
   "N_users": "{{n}} usuários",
-	"name": "nome",
   "Name": "Nome",
   "Navigation_history": "Histórico de navegação",
   "Never": "Nunca",
@@ -466,7 +460,6 @@
   "Sign_in_your_server": "Entrar no seu servidor",
   "Sign_Up": "Registrar",
   "Some_field_is_invalid_or_empty": "Algum campo está inválido ou vazio",
-	"Sorting_by": "Ordenando por {{key}}",
   "Sound": "Som da notificação",
   "Star_room": "Favoritar sala",
   "Star": "Favorito",
@@ -502,7 +495,6 @@
   "unarchive": "desarquivar",
   "UNARCHIVE": "DESARQUIVAR",
   "Unblock_user": "Desbloquear usuário",
-	"Unfavorite": "Remover dos Favoritos",
   "Unfollowed_thread": "Parou de seguir tópico",
   "Unmute": "Permitir que o usuário fale",
   "unmuted": "permitiu que o usuário fale",
@@ -673,6 +665,13 @@
   "Deleted_The_Team_Successfully": "Time deletado com sucesso",
   "Deleted_The_Room_Successfully": "Sala deletada com sucesso",
   "Convert_to_Channel": "Converter para um Canal",
+  "Display": "Display",
+  "Avatars": "Avatars",
+  "Sort_by": "Ordenar por",
+  "Group_by": "Agrupar por",
+  "Types": "Tipos",
+  "Expanded": "Estendido",
+  "Condensed": "Condensado",
   "Canned_Responses": "Respostas Predefinidas",
   "No_match_found": "Nenhum resultado encontrado",
   "Check_canned_responses": "Verifique nas respostas predefinidas",

app/i18n/locales/pt-PT.json

@@ -81,7 +81,6 @@
   "error-you-are-last-owner": "Você é o último proprietário. Por favor, defina novo proprietário antes de sair da sala.",
   "error-status-not-allowed": "O estado invisível está desactivado",
   "Actions": "Acções",
-	"activity": "actividade",
   "Activity": "Actividade",
   "Add_Reaction": "Adicionar Reacção",
   "Add_Server": "Adicionar Servidor",
@@ -232,7 +231,6 @@
   "Everyone_can_access_this_team": "Todos podem aceder a esta equipa",
   "Error_uploading": "Erro ao fazer o envio",
   "Expiration_Days": "Validade (Dias)",
-	"Favorite": "Favorito",
   "Favorites": "Favoritos",
   "Files": "Ficheiros",
   "File_description": "Descrição do ficheiro",
@@ -249,9 +247,6 @@
   "Forward_to_user": "Reencaminhar para o utilizador",
   "Full_table": "Clique para ver a tabela completa",
   "Generate_New_Link": "Gerar Novo Link",
-	"Group_by_favorites": "Agrupar por favoritos",
-	"Group_by_type": "Agrupar por tipo",
-	"Hide": "Esconder",
   "Has_joined_the_channel": "entrou no canal",
   "Has_joined_the_conversation": "entrou na conversa",
   "Has_left_the_channel": "saiu do canal",
@@ -333,7 +328,6 @@
   "N_people_reacted": "{{n}} pessoas reagiram",
   "N_users": "{{n}} utilizadores",
   "N_channels": "{{n}} canais",
-	"name": "nome",
   "Name": "Nome",
   "Navigation_history": "Histórico de navegação",
   "Never": "Nunca",
@@ -411,7 +405,6 @@
   "Reactions_are_disabled": "Reacções desactivadas",
   "Reactions_are_enabled": "Reacções activadas",
   "Reactions": "Reacções",
-	"Read": "Ler",
   "Read_External_Permission_Message": "Rocket.Chat precisa acessar fotos, média e arquivos em seu dispositivo",
   "Read_External_Permission": "Permissão de leitura da média",
   "Read_Only_Channel": "Canal só de leitura",
@@ -458,7 +451,6 @@
   "Sign_in_your_server": "Entre no seu servidor",
   "Sign_Up": "Inscreva-se",
   "Some_field_is_invalid_or_empty": "Algum campo é inválido ou está vazio",
-	"Sorting_by": "Ordenar por {{key}}",
   "Star_room": "Marcar como favorito",
   "Star": "Dar estrela",
   "Starred_Messages": "Mensagens com estrela",

app/i18n/locales/ru.json

@@ -81,7 +81,6 @@
   "error-you-are-last-owner": "Вы последний владелец. Пожалуйста, назначьте нового владельца, прежде чем покинуть чат.",
   "error-status-not-allowed": "Статус Невидимый отключён",
   "Actions": "Действия",
-	"activity": "активности",
   "Activity": "По активности",
   "Add_Reaction": "Добавить реакцию",
   "Add_Server": "Добавить сервер",
@@ -232,7 +231,6 @@
   "Everyone_can_access_this_team": "Каждый может получить доступ к этой Команде",
   "Error_uploading": "Ошибка загрузки",
   "Expiration_Days": "Срок действия (Дни)",
-	"Favorite": "Избранное",
   "Favorites": "Избранные",
   "Files": "Файлы",
   "File_description": "Описание файла",
@@ -249,9 +247,6 @@
   "Forward_to_user": "Перенаправить пользователю",
   "Full_table": "Нажмите, чтобы увидеть полную таблицу",
   "Generate_New_Link": "Сгенерировать Новую Ссылку",
-	"Group_by_favorites": "По избранным",
-	"Group_by_type": "По типу",
-	"Hide": "Скрыть",
   "Has_joined_the_channel": "присоединился к каналу",
   "Has_joined_the_conversation": "присоединился к беседе",
   "Has_left_the_channel": "покинул канал",
@@ -334,7 +329,6 @@
   "N_people_reacted": "отреагировало {{n}} человек",
   "N_users": "{{n}} пользователи",
   "N_channels": "{{n}} каналов",
-	"name": "имя",
   "Name": "Имя",
   "Navigation_history": "История навигации",
   "Never": "Никогда",
@@ -412,7 +406,6 @@
   "Reactions_are_disabled": "Реакции отключены",
   "Reactions_are_enabled": "Реакции активированы",
   "Reactions": "Реакции",
-	"Read": "Читать",
   "Read_External_Permission_Message": "Rocket.Chat необходим доступ к фотографиям, медиа и другим файлам на вашем устройстве",
   "Read_External_Permission": "Разрешение на Чтение Медиа",
   "Read_Only_Channel": "Канал только для чтения",
@@ -507,7 +500,6 @@
   "Sign_in_your_server": "Войдите на ваш сервер",
   "Sign_Up": "Регистрация",
   "Some_field_is_invalid_or_empty": "Некоторые поля недопустимы или пусты",
-	"Sorting_by": "Сортировка по {{key}}",
   "Sound": "Звук",
   "Star_room": "В избранное",
   "Star": "Отметить",
@@ -546,7 +538,6 @@
   "unarchive": "разархивировать",
   "UNARCHIVE": "РАЗАРХИВИРОВАТЬ",
   "Unblock_user": "Разблокировать пользователя",
-	"Unfavorite": "Удалить из избранного",
   "Unfollowed_thread": "Не следить",
   "Unmute": "Отменить заглушивание",
   "unmuted": "Заглушивание отменено",

app/i18n/locales/tr.json

@@ -79,7 +79,6 @@
   "error-user-registration-secret": "Kullanıcı kaydına yalnızca Gizli URL aracılığıyla izin verilir!",
   "error-you-are-last-owner": "Son sahibi sizsiniz. Lütfen odadan ayrılmadan önce yeni bir sahip belirleyin.",
   "Actions": "İşlemler",
-	"activity": "etkinlik",
   "Activity": "Etkinlik",
   "Add_Reaction": "Tepki ekle",
   "Add_Server": "Sunucu ekle",
@@ -227,7 +226,6 @@
   "Everyone_can_access_this_channel": "Bu kanala herkes erişebilir",
   "Error_uploading": "Yükleme hatası",
   "Expiration_Days": "Geçerlilik Süresi (Gün)",
-	"Favorite": "Favori",
   "Favorites": "Favoriler",
   "Files": "Dosyalar",
   "File_description": "Dosya açıklaması",
@@ -244,9 +242,6 @@
   "Forward_to_user": "Kullanıcıya İlet",
   "Full_table": "Tam tabloyu görmek için tıklayın",
   "Generate_New_Link": "Yeni Bağlantı Oluştur",
-	"Group_by_favorites": "Favorilere göre grupla",
-	"Group_by_type": "Türe göre grupla",
-	"Hide": "Gizle",
   "Has_joined_the_channel": "kanala katıldı",
   "Has_joined_the_conversation": "sohbete katıldı",
   "Has_left_the_channel": "kanaldan ayrıldı",
@@ -327,7 +322,6 @@
   "My_servers": "Sunucularım",
   "N_people_reacted": "{{n}} kişi tepki verdi",
   "N_users": "{{n}} kullanıcı",
-	"name": "isim",
   "Name": "İsim",
   "Navigation_history": "Gezinti geçmişi",
   "Never": "Asla",
@@ -405,7 +399,6 @@
   "Reactions_are_disabled": "Tepkiler devre dışı bırakıldı",
   "Reactions_are_enabled": "Tepkiler etkinleştirildi",
   "Reactions": "Tepkiler",
-	"Read": "Oku",
   "Read_External_Permission_Message": "Rocket.Chat'in cihazınızdaki fotoğraflara, medyaya ve dosyalara erişmesi gerekiyor",
   "Read_External_Permission": "Medya Okuma İzni ",
   "Read_Only_Channel": "Yazma Kısıtlı Kanal",
@@ -498,7 +491,6 @@
   "Sign_in_your_server": "Sunucunuzda oturum açın",
   "Sign_Up": "Kaydol",
   "Some_field_is_invalid_or_empty": "Bazı alanlar geçersiz veya boş",
-	"Sorting_by": "{{key}} göre sıralanıyor",
   "Sound": "Ses",
   "Star_room": "Odayı Yıldızla",
   "Star": "Yıldızla",
@@ -537,7 +529,6 @@
   "unarchive": "arşivden çıkar",
   "UNARCHIVE": "ARŞİVDEN ÇIKAR",
   "Unblock_user": "Kullanıcının engelini kaldır",
-	"Unfavorite": "Favorilerden Çıkar",
   "Unfollowed_thread": "Takip edilmeyen başlık",
   "Unmute": "Sesi Aç",
   "unmuted": "Sesi Açıldı",

app/i18n/locales/zh-CN.json

@@ -79,7 +79,6 @@
   "error-user-registration-secret": "只能透过加密网址进行用戶注册",
   "error-you-are-last-owner": "您是最后的拥有者。请删除此人之前设置一个新的拥有者。",
   "Actions": "操作",
-	"activity": "活动时间",
   "Activity": "按活动时间排列",
   "Add_Reaction": "增加表情貼",
   "Add_Server": "創建服务器",
@@ -227,7 +226,6 @@
   "Everyone_can_access_this_channel": "每个人都可以访问此频道",
   "Error_uploading": "错误上传",
   "Expiration_Days": "到期 (日)",
-	"Favorite": "收藏",
   "Favorites": "收藏",
   "Files": "文件",
   "File_description": "文件描述",
@@ -244,9 +242,6 @@
   "Forward_to_user": "转发给用戶",
   "Full_table": "点击以查看完整表格",
   "Generate_New_Link": "产生新的链接",
-	"Group_by_favorites": "收藏优先",
-	"Group_by_type": "以类型分组",
-	"Hide": "隐藏",
   "Has_joined_the_channel": "已加入频道",
   "Has_joined_the_conversation": "已经加入此对话",
   "Has_left_the_channel": "已离开频道",
@@ -324,7 +319,6 @@
   "My_servers": "我的服务器",
   "N_people_reacted": "{{n}} 人回复",
   "N_users": "{{n}} 位用户",
-	"name": "名称",
   "Name": "名称",
   "Navigation_history": "浏览历史记录",
   "Never": "从不",
@@ -402,7 +396,6 @@
   "Reactions_are_disabled": "表情貼被禁用",
   "Reactions_are_enabled": "表情貼被启用",
   "Reactions": "表情貼",
-	"Read": "读取",
   "Read_External_Permission_Message": "Rocket.Chat 需要存取您装置上的相片、多媒体及文件",
   "Read_External_Permission": "读取媒体权限",
   "Read_Only_Channel": "只读频道",
@@ -496,7 +489,6 @@
   "Sign_in_your_server": "登录你的服务器",
   "Sign_Up": "注册",
   "Some_field_is_invalid_or_empty": "某些字段无效或为空",
-	"Sorting_by": "按{{key}}排序",
   "Sound": "声音",
   "Star_room": "将聊天室标记",
   "Star": "标记",
@@ -535,7 +527,6 @@
   "unarchive": "取消封存",
   "UNARCHIVE": "取消封存",
   "Unblock_user": "解除屏蔽",
-	"Unfavorite": "取消收藏",
   "Unfollowed_thread": "取消追踪讨论",
   "Unmute": "取消静音",
   "unmuted": "静音状态",

app/i18n/locales/zh-TW.json

@@ -79,7 +79,6 @@
   "error-user-registration-secret": "只能透過加密網址進行使用者註冊",
   "error-you-are-last-owner": "您是最後的擁有者。請刪除此人之前設置一個新的擁有者。",
   "Actions": "操作",
-	"activity": "活動時間",
   "Activity": "以活動時間排序",
   "Add_Reaction": "增加表情貼",
   "Add_Server": "新增伺服器",
@@ -227,7 +226,6 @@
   "Everyone_can_access_this_channel": "所有人皆可存取此頻道",
   "Error_uploading": "錯誤上傳",
   "Expiration_Days": "到期 (日)",
-	"Favorite": "我的最愛",
   "Favorites": "我的最愛",
   "Files": "檔案",
   "File_description": "檔案描述",
@@ -244,9 +242,6 @@
   "Forward_to_user": "轉發給使用者",
   "Full_table": "點擊以查看完整表格",
   "Generate_New_Link": "產生新的連結",
-	"Group_by_favorites": "我的最愛優先",
-	"Group_by_type": "以類型分組",
-	"Hide": "隱藏",
   "Has_joined_the_channel": "已加入頻道",
   "Has_joined_the_conversation": "已經加入此對話",
   "Has_left_the_channel": "已離開頻道",
@@ -325,7 +320,6 @@
   "My_servers": "我的伺服器",
   "N_people_reacted": "{{n}} 人回复",
   "N_users": "{{n}} 位使用者",
-	"name": "名稱",
   "Name": "名稱",
   "Navigation_history": "瀏覽歷史記錄",
   "Never": "從不",
@@ -403,7 +397,6 @@
   "Reactions_are_disabled": "表情貼被禁用",
   "Reactions_are_enabled": "表情貼被啟用",
   "Reactions": "表情貼",
-	"Read": "讀取",
   "Read_External_Permission_Message": "Rocket.Chat 需要存取您裝置上的相片、多媒體及檔案",
   "Read_External_Permission": "讀取媒體權限",
   "Read_Only_Channel": "唯讀頻道",
@@ -497,7 +490,6 @@
   "Sign_in_your_server": "登錄你的伺服器",
   "Sign_Up": "註冊",
   "Some_field_is_invalid_or_empty": "某些字段無效或為空",
-	"Sorting_by": "以{{key}}排序",
   "Sound": "聲音",
   "Star_room": "標記聊天室",
   "Star": "標記",
@@ -536,7 +528,6 @@
   "unarchive": "取消封存",
   "UNARCHIVE": "取消封存",
   "Unblock_user": "解除封鎖",
-	"Unfavorite": "取消最愛",
   "Unfollowed_thread": "取消追蹤討論",
   "Unmute": "取消靜音",
   "unmuted": "靜音狀態",

app/presentation/RoomItem/Actions.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Animated, Text, View } from 'react-native';
+import { Animated, View } from 'react-native';
 import { RectButton } from 'react-native-gesture-handler';
 
-import I18n, { isRTL } from '../../i18n';
+import { isRTL } from '../../i18n';
-import styles, { ACTION_WIDTH, LONG_SWIPE } from './styles';
 import { CustomIcon } from '../../lib/Icons';
 import { themes } from '../../constants/colors';
+import { DISPLAY_MODE_CONDENSED } from '../../constants/constantDisplayMode';
+import styles, { ACTION_WIDTH, LONG_SWIPE, ROW_HEIGHT_CONDENSED } from './styles';
 
 interface ILeftActions {
 	theme: string;
@@ -13,6 +14,7 @@ interface ILeftActions {
 	isRead: boolean;
 	width: number;
 	onToggleReadPress(): void;
+	displayMode: string;
 }
 
 interface IRightActions {
@@ -22,11 +24,14 @@ interface IRightActions {
 	width: number;
 	toggleFav(): void;
 	onHidePress(): void;
+	displayMode: string;
 }
 
 const reverse = new Animated.Value(isRTL() ? -1 : 1);
+const CONDENSED_ICON_SIZE = 24;
+const EXPANDED_ICON_SIZE = 28;
 
-export const LeftActions = React.memo(({ theme, transX, isRead, width, onToggleReadPress }: ILeftActions) => {
+export const LeftActions = React.memo(({ theme, transX, isRead, width, onToggleReadPress, displayMode }: ILeftActions) => {
 	const translateX = Animated.multiply(
 		transX.interpolate({
 			inputRange: [0, ACTION_WIDTH],
@@ -34,6 +39,10 @@ export const LeftActions = React.memo(({ theme, transX, isRead, width, onToggleR
 		}),
 		reverse
 	);
+
+	const isCondensed = displayMode === DISPLAY_MODE_CONDENSED;
+	const viewHeight = isCondensed ? { height: ROW_HEIGHT_CONDENSED } : null;
+
 	return (
 		<View style={[styles.actionsContainer, styles.actionLeftContainer]} pointerEvents='box-none'>
 			<Animated.View
@@ -44,14 +53,16 @@ export const LeftActions = React.memo(({ theme, transX, isRead, width, onToggleR
 						width,
 						transform: [{ translateX }],
 						backgroundColor: themes[theme].tintColor
-					}
+					},
+					viewHeight
 				]}>
-				<View style={styles.actionLeftButtonContainer}>
+				<View style={[styles.actionLeftButtonContainer, viewHeight]}>
 					<RectButton style={styles.actionButton} onPress={onToggleReadPress}>
-						<>
+						<CustomIcon
-							<CustomIcon size={20} name={isRead ? 'flag' : 'check'} color='white' />
+							size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
-							<Text style={[styles.actionText, { color: themes[theme].buttonText }]}>{I18n.t(isRead ? 'Unread' : 'Read')}</Text>
+							name={isRead ? 'flag' : 'check'}
-						</>
+							color={themes[theme].buttonText}
+						/>
 					</RectButton>
 				</View>
 			</Animated.View>
@@ -59,7 +70,8 @@ export const LeftActions = React.memo(({ theme, transX, isRead, width, onToggleR
 	);
 });
 
-export const RightActions = React.memo(({ transX, favorite, width, toggleFav, onHidePress, theme }: IRightActions) => {
+export const RightActions = React.memo(
+	({ transX, favorite, width, toggleFav, onHidePress, theme, displayMode }: IRightActions) => {
 		const translateXFav = Animated.multiply(
 			transX.interpolate({
 				inputRange: [-width / 2, -ACTION_WIDTH * 2, 0],
@@ -74,16 +86,12 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
 			}),
 			reverse
 		);
+
+		const isCondensed = displayMode === DISPLAY_MODE_CONDENSED;
+		const viewHeight = isCondensed ? { height: ROW_HEIGHT_CONDENSED } : null;
+
 		return (
-		<View
+			<View style={[styles.actionsLeftContainer, viewHeight]} pointerEvents='box-none'>
-			style={{
-				position: 'absolute',
-				left: 0,
-				right: 0,
-				height: 75,
-				flexDirection: 'row'
-			}}
-			pointerEvents='box-none'>
 				<Animated.View
 					style={[
 						styles.actionRightButtonContainer,
@@ -91,15 +99,15 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
 							width,
 							transform: [{ translateX: translateXFav }],
 							backgroundColor: themes[theme].hideBackground
-					}
+						},
+						viewHeight
 					]}>
 					<RectButton style={[styles.actionButton, { backgroundColor: themes[theme].favoriteBackground }]} onPress={toggleFav}>
-					<>
+						<CustomIcon
-						<CustomIcon size={20} name={favorite ? 'star-filled' : 'star'} color={themes[theme].buttonText} />
+							size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
-						<Text style={[styles.actionText, { color: themes[theme].buttonText }]}>
+							name={favorite ? 'star-filled' : 'star'}
-							{I18n.t(favorite ? 'Unfavorite' : 'Favorite')}
+							color={themes[theme].buttonText}
-						</Text>
+						/>
-					</>
 					</RectButton>
 				</Animated.View>
 				<Animated.View
@@ -108,15 +116,18 @@ export const RightActions = React.memo(({ transX, favorite, width, toggleFav, on
 						{
 							width,
 							transform: [{ translateX: translateXHide }]
-					}
+						},
+						isCondensed && { height: ROW_HEIGHT_CONDENSED }
 					]}>
 					<RectButton style={[styles.actionButton, { backgroundColor: themes[theme].hideBackground }]} onPress={onHidePress}>
-					<>
+						<CustomIcon
-						<CustomIcon size={20} name='unread-on-top-disabled' color={themes[theme].buttonText} />
+							size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
-						<Text style={[styles.actionText, { color: themes[theme].buttonText }]}>{I18n.t('Hide')}</Text>
+							name='unread-on-top-disabled'
-					</>
+							color={themes[theme].buttonText}
+						/>
 					</RectButton>
 				</Animated.View>
 			</View>
 		);
-});
+	}
+);

app/presentation/RoomItem/IconOrAvatar.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { View } from 'react-native';
+import PropTypes from 'prop-types';
+
+import Avatar from '../../containers/Avatar';
+import { DISPLAY_MODE_CONDENSED, DISPLAY_MODE_EXPANDED } from '../../constants/constantDisplayMode';
+import TypeIcon from './TypeIcon';
+import styles from './styles';
+
+const IconOrAvatar = ({
+	avatar,
+	type,
+	rid,
+	showAvatar,
+	prid,
+	status,
+	isGroupChat,
+	teamMain,
+	showLastMessage,
+	theme,
+	displayMode
+}) => {
+	if (showAvatar) {
+		return (
+			<Avatar text={avatar} size={displayMode === DISPLAY_MODE_CONDENSED ? 36 : 48} type={type} style={styles.avatar} rid={rid} />
+		);
+	}
+
+	if (displayMode === DISPLAY_MODE_EXPANDED && showLastMessage) {
+		return (
+			<View style={styles.typeIcon}>
+				<TypeIcon
+					type={type}
+					prid={prid}
+					status={status}
+					isGroupChat={isGroupChat}
+					theme={theme}
+					teamMain={teamMain}
+					size={24}
+					style={{ marginRight: 12 }}
+				/>
+			</View>
+		);
+	}
+
+	return null;
+};
+
+IconOrAvatar.propTypes = {
+	avatar: PropTypes.string,
+	type: PropTypes.string,
+	theme: PropTypes.string,
+	rid: PropTypes.string,
+	showAvatar: PropTypes.bool,
+	displayMode: PropTypes.string,
+	prid: PropTypes.string,
+	status: PropTypes.string,
+	isGroupChat: PropTypes.bool,
+	teamMain: PropTypes.bool,
+	showLastMessage: PropTypes.bool
+};
+
+export default IconOrAvatar;

app/presentation/RoomItem/LastMessage.tsx

@@ -80,6 +80,7 @@ const LastMessage = React.memo(
 			numberOfLines={2}
 			preview
 			theme={theme}
+			testID='room-item-last-message'
 		/>
 	),
 	arePropsEqual

app/presentation/RoomItem/RoomItem.tsx

@@ -11,6 +11,7 @@ import UpdatedAt from './UpdatedAt';
 import Touchable from './Touchable';
 import Tag from './Tag';
 import I18n from '../../i18n';
+import { DISPLAY_MODE_EXPANDED } from '../../constants/constantDisplayMode';
 
 interface IRoomItem {
 	rid: string;
@@ -57,6 +58,8 @@ interface IRoomItem {
 	hideChannel(): void;
 	autoJoin: boolean;
 	size?: number;
+	showAvatar: boolean;
+	displayMode: string;
 }
 
 const RoomItem = ({
@@ -95,7 +98,9 @@ const RoomItem = ({
 	toggleRead,
 	hideChannel,
 	teamMain,
-	autoJoin
+	autoJoin,
+	showAvatar,
+	displayMode
 }: IRoomItem) => (
 	<Touchable
 		onPress={onPress}
@@ -111,12 +116,28 @@ const RoomItem = ({
 		type={type}
 		theme={theme}
 		isFocused={isFocused}
-		swipeEnabled={swipeEnabled}>
+		swipeEnabled={swipeEnabled}
-		<Wrapper accessibilityLabel={accessibilityLabel} avatar={avatar} avatarSize={avatarSize} type={type} theme={theme} rid={rid}>
+		displayMode={displayMode}>
-			{showLastMessage ? (
+		<Wrapper
+			accessibilityLabel={accessibilityLabel}
+			avatar={avatar}
+			avatarSize={avatarSize}
+			type={type}
+			theme={theme}
+			rid={rid}
+			prid={prid}
+			status={status}
+			isGroupChat={isGroupChat}
+			teamMain={teamMain}
+			displayMode={displayMode}
+			showAvatar={showAvatar}
+			showLastMessage={showLastMessage}>
+			{showLastMessage && displayMode === DISPLAY_MODE_EXPANDED ? (
 				<>
 					<View style={styles.titleContainer}>
+						{showAvatar ? (
 							<TypeIcon type={type} prid={prid} status={status} isGroupChat={isGroupChat} theme={theme} teamMain={teamMain} />
+						) : null}
 						<Title name={name} theme={theme} hideUnreadStatus={hideUnreadStatus} alert={alert} />
 						{autoJoin ? <Tag testID='auto-join-tag' name={I18n.t('Auto-join')} /> : null}
 						<UpdatedAt date={date} theme={theme} hideUnreadStatus={hideUnreadStatus} alert={alert} />
@@ -143,9 +164,20 @@ const RoomItem = ({
 				</>
 			) : (
 				<View style={[styles.titleContainer, styles.flex]}>
-					<TypeIcon type={type} prid={prid} status={status} isGroupChat={isGroupChat} theme={theme} teamMain={teamMain} />
+					<TypeIcon
+						type={type}
+						prid={prid}
+						status={status}
+						isGroupChat={isGroupChat}
+						theme={theme}
+						teamMain={teamMain}
+						size={22}
+						style={{ marginRight: 8 }}
+					/>
 					<Title name={name} theme={theme} hideUnreadStatus={hideUnreadStatus} alert={alert} />
 					{autoJoin ? <Tag name={I18n.t('Auto-join')} /> : null}
+					<View style={styles.wrapUpdatedAndBadge}>
+						<UpdatedAt date={date} theme={theme} hideUnreadStatus={hideUnreadStatus} alert={alert} />
 						<UnreadBadge
 							unread={unread}
 							userMentions={userMentions}
@@ -155,6 +187,7 @@ const RoomItem = ({
 							tunreadGroup={tunreadGroup}
 						/>
 					</View>
+				</View>
 			)}
 		</Wrapper>
 	</Touchable>

app/presentation/RoomItem/Touchable.tsx

@@ -24,6 +24,7 @@ interface ITouchableProps {
 	theme: string;
 	isFocused: boolean;
 	swipeEnabled: boolean;
+	displayMode: string;
 }
 
 class Touchable extends React.Component<ITouchableProps, any> {
@@ -227,7 +228,7 @@ class Touchable extends React.Component<ITouchableProps, any> {
 	};
 
 	render() {
-		const { testID, isRead, width, favorite, children, theme, isFocused, swipeEnabled } = this.props;
+		const { testID, isRead, width, favorite, children, theme, isFocused, swipeEnabled, displayMode } = this.props;
 
 		return (
 			<LongPressGestureHandler onHandlerStateChange={this.onLongPressHandlerStateChange}>
@@ -244,6 +245,7 @@ class Touchable extends React.Component<ITouchableProps, any> {
 								width={width}
 								onToggleReadPress={this.onToggleReadPress}
 								theme={theme}
+								displayMode={displayMode}
 							/>
 							<RightActions
 								transX={this.transXReverse}
@@ -252,6 +254,7 @@ class Touchable extends React.Component<ITouchableProps, any> {
 								toggleFav={this.toggleFav}
 								onHidePress={this.onHidePress}
 								theme={theme}
+								displayMode={displayMode}
 							/>
 							<Animated.View
 								style={{

app/presentation/RoomItem/TypeIcon.tsx

@@ -9,10 +9,19 @@ interface ITypeIcon {
 	isGroupChat: boolean;
 	teamMain: boolean;
 	theme?: string;
+	size?: number;
+	style?: object;
 }
 
-const TypeIcon = React.memo(({ type, prid, status, isGroupChat, teamMain }: ITypeIcon) => (
+const TypeIcon = React.memo(({ type, prid, status, isGroupChat, teamMain, size, style }: ITypeIcon) => (
-	<RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} teamMain={teamMain} />
+	<RoomTypeIcon
+		type={prid ? 'discussion' : type}
+		isGroupChat={isGroupChat}
+		status={status}
+		teamMain={teamMain}
+		size={size}
+		style={style}
+	/>
 ));
 
 export default TypeIcon;

app/presentation/RoomItem/Wrapper.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import styles from './styles';
 import { themes } from '../../constants/colors';
-import Avatar from '../../containers/Avatar';
+import { DISPLAY_MODE_CONDENSED } from '../../constants/constantDisplayMode';
+import IconOrAvatar from './IconOrAvatar';
+import styles from './styles';
 
 interface IWrapper {
 	accessibilityLabel: string;
@@ -13,17 +14,27 @@ interface IWrapper {
 	theme: string;
 	rid: string;
 	children: JSX.Element;
+	displayMode: string;
+	prid: string;
+	showLastMessage: boolean;
+	status: string;
+	isGroupChat: boolean;
+	teamMain: boolean;
+	showAvatar: boolean;
 }
 
-const Wrapper = ({ accessibilityLabel, avatar, avatarSize, type, theme, rid, children }: IWrapper) => (
+const Wrapper = ({ accessibilityLabel, theme, children, displayMode, ...props }: IWrapper) => (
-	<View style={styles.container} accessibilityLabel={accessibilityLabel}>
+	<View
-		<Avatar text={avatar} size={avatarSize} type={type} style={styles.avatar} rid={rid} />
+		style={[styles.container, displayMode === DISPLAY_MODE_CONDENSED && styles.containerCondensed]}
+		accessibilityLabel={accessibilityLabel}>
+		<IconOrAvatar theme={theme} displayMode={displayMode} {...props} />
 		<View
 			style={[
 				styles.centerContainer,
 				{
 					borderColor: themes[theme].separatorColor
-				}
+				},
+				displayMode === DISPLAY_MODE_CONDENSED && styles.condensedPaddingVertical
 			]}>
 			{children}
 		</View>

app/presentation/RoomItem/index.tsx

@@ -2,12 +2,11 @@ import React from 'react';
 import { connect } from 'react-redux';
 
 import I18n from '../../i18n';
-import { ROW_HEIGHT } from './styles';
+import { ROW_HEIGHT, ROW_HEIGHT_CONDENSED } from './styles';
 import { formatDate } from '../../utils/room';
 import RoomItem from './RoomItem';
 
-export { ROW_HEIGHT };
+export { ROW_HEIGHT, ROW_HEIGHT_CONDENSED };
-
 interface IRoomItemContainerProps {
 	item: any;
 	showLastMessage: boolean;
@@ -32,9 +31,22 @@ interface IRoomItemContainerProps {
 	getIsRead: Function;
 	swipeEnabled: boolean;
 	autoJoin: boolean;
+	showAvatar: boolean;
+	displayMode: string;
 }
 
-const attrs = ['width', 'status', 'connected', 'theme', 'isFocused', 'forceUpdate', 'showLastMessage', 'autoJoin'];
+const attrs = [
+	'width',
+	'status',
+	'connected',
+	'theme',
+	'isFocused',
+	'forceUpdate',
+	'showLastMessage',
+	'autoJoin',
+	'showAvatar',
+	'displayMode'
+];
 
 class RoomItemContainer extends React.Component<IRoomItemContainerProps, any> {
 	private mounted: boolean;
@@ -137,7 +149,9 @@ class RoomItemContainer extends React.Component<IRoomItemContainerProps, any> {
 			username,
 			useRealName,
 			swipeEnabled,
-			autoJoin
+			autoJoin,
+			showAvatar,
+			displayMode
 		} = this.props;
 		const name = getRoomTitle(item);
 		const testID = `rooms-list-view-item-${name}`;
@@ -200,6 +214,8 @@ class RoomItemContainer extends React.Component<IRoomItemContainerProps, any> {
 				swipeEnabled={swipeEnabled}
 				teamMain={item.teamMain}
 				autoJoin={autoJoin}
+				showAvatar={showAvatar}
+				displayMode={displayMode}
 			/>
 		);
 	}

app/presentation/RoomItem/styles.ts

@@ -3,6 +3,7 @@ import { PixelRatio, StyleSheet } from 'react-native';
 import sharedStyles from '../../views/Styles';
 
 export const ROW_HEIGHT = 75 * PixelRatio.getFontScale();
+export const ROW_HEIGHT_CONDENSED = 60 * PixelRatio.getFontScale();
 export const ACTION_WIDTH = 80;
 export const SMALL_SWIPE = ACTION_WIDTH / 2;
 export const LONG_SWIPE = ACTION_WIDTH * 3;
@@ -17,6 +18,12 @@ export default StyleSheet.create<any>({
 		paddingLeft: 14,
 		height: ROW_HEIGHT
 	},
+	containerCondensed: {
+		height: ROW_HEIGHT_CONDENSED
+	},
+	condensedPaddingVertical: {
+		paddingVertical: 20
+	},
 	centerContainer: {
 		flex: 1,
 		paddingVertical: 10,
@@ -37,6 +44,9 @@ export default StyleSheet.create<any>({
 		flexDirection: 'row',
 		alignItems: 'flex-start'
 	},
+	wrapUpdatedAndBadge: {
+		alignItems: 'flex-end'
+	},
 	titleContainer: {
 		width: '100%',
 		flexDirection: 'row',
@@ -72,11 +82,12 @@ export default StyleSheet.create<any>({
 		right: 0,
 		height: ROW_HEIGHT
 	},
-	actionText: {
+	actionsLeftContainer: {
-		fontSize: 15,
+		flexDirection: 'row',
-		justifyContent: 'center',
+		position: 'absolute',
-		marginTop: 4,
+		left: 0,
-		...sharedStyles.textSemibold
+		right: 0,
+		height: ROW_HEIGHT
 	},
 	actionLeftButtonContainer: {
 		position: 'absolute',
@@ -107,5 +118,9 @@ export default StyleSheet.create<any>({
 		fontSize: 13,
 		paddingHorizontal: 4,
 		...sharedStyles.textSemibold
+	},
+	typeIcon: {
+		height: ROW_HEIGHT,
+		justifyContent: 'center'
 	}
 });

app/reducers/rooms.js

@@ -8,7 +8,6 @@ const initialState = {
 	searchText: '',
 	showServerDropdown: false,
 	closeServerDropdown: false,
-	showSortDropdown: false,
 	showSearchHeader: false
 };
 
@@ -56,16 +55,6 @@ export default function login(state = initialState, action) {
 				...state,
 				showServerDropdown: !state.showServerDropdown
 			};
-		case types.ROOMS.CLOSE_SORT_DROPDOWN:
-			return {
-				...state,
-				closeSortDropdown: !state.closeSortDropdown
-			};
-		case types.ROOMS.TOGGLE_SORT_DROPDOWN:
-			return {
-				...state,
-				showSortDropdown: !state.showSortDropdown
-			};
 		case types.ROOMS.OPEN_SEARCH_HEADER:
 			return {
 				...state,

app/reducers/sortPreferences.js

@@ -1,10 +1,13 @@
 import { SORT_PREFERENCES } from '../actions/actionsTypes';
+import { DISPLAY_MODE_EXPANDED } from '../constants/constantDisplayMode';
 
 const initialState = {
 	sortBy: 'activity',
 	groupByType: false,
 	showFavorites: false,
-	showUnread: false
+	showUnread: false,
+	showAvatar: true,
+	displayMode: DISPLAY_MODE_EXPANDED
 };
 
 export default (state = initialState, action) => {

app/stacks/InsideStack.js

@@ -38,6 +38,9 @@ import ProfileView from '../views/ProfileView';
 import UserPreferencesView from '../views/UserPreferencesView';
 import UserNotificationPrefView from '../views/UserNotificationPreferencesView';
 
+// Display Preferences View
+import DisplayPrefsView from '../views/DisplayPrefsView';
+
 // Settings Stack
 import SettingsView from '../views/SettingsView';
 import SecurityPrivacyView from '../views/SecurityPrivacyView';
@@ -222,6 +225,18 @@ const AdminPanelStackNavigator = () => {
 	);
 };
 
+// DisplayPreferenceNavigator
+const DisplayPrefStack = createStackNavigator();
+const DisplayPrefStackNavigator = () => {
+	const { theme } = React.useContext(ThemeContext);
+
+	return (
+		<DisplayPrefStack.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation }}>
+			<DisplayPrefStack.Screen name='DisplayPrefsView' component={DisplayPrefsView} />
+		</DisplayPrefStack.Navigator>
+	);
+};
+
 // DrawerNavigator
 const Drawer = createDrawerNavigator();
 const DrawerNavigator = () => {
@@ -238,6 +253,7 @@ const DrawerNavigator = () => {
 			<Drawer.Screen name='ProfileStackNavigator' component={ProfileStackNavigator} />
 			<Drawer.Screen name='SettingsStackNavigator' component={SettingsStackNavigator} />
 			<Drawer.Screen name='AdminPanelStackNavigator' component={AdminPanelStackNavigator} />
+			<Drawer.Screen name='DisplayPrefStackNavigator' component={DisplayPrefStackNavigator} />
 		</Drawer.Navigator>
 	);
 };

app/stacks/MasterDetailStack/index.js

@@ -33,6 +33,7 @@ import TeamChannelsView from '../../views/TeamChannelsView';
 import MarkdownTableView from '../../views/MarkdownTableView';
 import ReadReceiptsView from '../../views/ReadReceiptView';
 import ProfileView from '../../views/ProfileView';
+import DisplayPrefsView from '../../views/DisplayPrefsView';
 import SettingsView from '../../views/SettingsView';
 import LanguageView from '../../views/LanguageView';
 import ThemeView from '../../views/ThemeView';
@@ -206,6 +207,7 @@ const ModalStackNavigator = React.memo(({ navigation }) => {
 					component={ProfileView}
 					options={props => ProfileView.navigationOptions({ ...props, isMasterDetail: true })}
 				/>
+				<ModalStack.Screen name='DisplayPrefsView' component={DisplayPrefsView} />
 				<ModalStack.Screen
 					name='AdminPanelView'
 					component={AdminPanelView}

app/utils/log/events.js

@@ -66,15 +66,18 @@ export default {
 	RL_TOGGLE_READ_F: 'rl_toggle_read_f',
 	RL_HIDE_CHANNEL: 'rl_hide_channel',
 	RL_HIDE_CHANNEL_F: 'rl_hide_channel_f',
-	RL_TOGGLE_SORT_DROPDOWN: 'rl_toggle_sort_dropdown',
-	RL_SORT_CHANNELS_BY_NAME: 'rl_sort_channels_by_name',
-	RL_SORT_CHANNELS_BY_ACTIVITY: 'rl_sort_channels_by_activity',
-	RL_SORT_CHANNELS_F: 'rl_sort_channels_f',
-	RL_GROUP_CHANNELS_BY_TYPE: 'rl_group_channels_by_type',
-	RL_GROUP_CHANNELS_BY_FAVORITE: 'rl_group_channels_by_favorite',
-	RL_GROUP_CHANNELS_BY_UNREAD: 'rl_group_channels_by_unread',
 	RL_CREATE_NEW_WORKSPACE: 'rl_create_new_workspace',
 
+	// DISPLAY PREFERENCES VIEW
+	DP_SORT_CHANNELS_BY_NAME: 'dp_sort_channels_by_name',
+	DP_SORT_CHANNELS_BY_ACTIVITY: 'dp_sort_channels_by_activity',
+	DP_GROUP_CHANNELS_BY_TYPE: 'dp_group_channels_by_type',
+	DP_GROUP_CHANNELS_BY_FAVORITE: 'dp_group_channels_by_favorite',
+	DP_GROUP_CHANNELS_BY_UNREAD: 'dp_group_channels_by_unread',
+	DP_TOGGLE_AVATAR: 'dp_toggle_avatar',
+	DP_DISPLAY_EXPANDED: 'dp_display_expanded',
+	DP_DISPLAY_CONDENSED: 'dp_display_condensed',
+
 	// QUEUE LIST VIEW
 	QL_GO_ROOM: 'ql_go_room',
 

app/views/DisplayPrefsView.js

@@ -0,0 +1,192 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Switch } from 'react-native';
+import { RadioButton } from 'react-native-ui-lib';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { setPreference } from '../actions/sortPreferences';
+import RocketChat from '../lib/rocketchat';
+import StatusBar from '../containers/StatusBar';
+import I18n from '../i18n';
+import * as List from '../containers/List';
+import { useTheme } from '../theme';
+import { themes } from '../constants/colors';
+import * as HeaderButton from '../containers/HeaderButton';
+import SafeAreaView from '../containers/SafeAreaView';
+import { ICON_SIZE } from '../containers/List/constants';
+import log, { events, logEvent } from '../utils/log';
+import { DISPLAY_MODE_CONDENSED, DISPLAY_MODE_EXPANDED } from '../constants/constantDisplayMode';
+
+const DisplayPrefsView = props => {
+	const { theme } = useTheme();
+
+	const { sortBy, groupByType, showFavorites, showUnread, showAvatar, displayMode } = useSelector(state => state.sortPreferences);
+	const dispatch = useDispatch();
+
+	useEffect(() => {
+		const { navigation, isMasterDetail } = props;
+		navigation.setOptions({
+			title: I18n.t('Display'),
+			headerLeft: () =>
+				isMasterDetail ? (
+					<HeaderButton.CloseModal navigation={navigation} testID='display-view-close' />
+				) : (
+					<HeaderButton.Drawer navigation={navigation} testID='display-view-drawer' />
+				)
+		});
+	}, []);
+
+	const setSortPreference = async param => {
+		try {
+			dispatch(setPreference(param));
+			await RocketChat.saveSortPreference(param);
+		} catch (e) {
+			log(e);
+		}
+	};
+
+	const sortByName = async () => {
+		logEvent(events.DP_SORT_CHANNELS_BY_NAME);
+		await setSortPreference({ sortBy: 'alphabetical' });
+	};
+
+	const sortByActivity = async () => {
+		logEvent(events.DP_SORT_CHANNELS_BY_ACTIVITY);
+		await setSortPreference({ sortBy: 'activity' });
+	};
+
+	const toggleGroupByType = async () => {
+		logEvent(events.DP_GROUP_CHANNELS_BY_TYPE);
+		await setSortPreference({ groupByType: !groupByType });
+	};
+
+	const toggleGroupByFavorites = async () => {
+		logEvent(events.DP_GROUP_CHANNELS_BY_FAVORITE);
+		await setSortPreference({ showFavorites: !showFavorites });
+	};
+
+	const toggleUnread = async () => {
+		logEvent(events.DP_GROUP_CHANNELS_BY_UNREAD);
+		await setSortPreference({ showUnread: !showUnread });
+	};
+
+	const toggleAvatar = async () => {
+		logEvent(events.DP_TOGGLE_AVATAR);
+		await setSortPreference({ showAvatar: !showAvatar });
+	};
+
+	const displayExpanded = async () => {
+		logEvent(events.DP_DISPLAY_EXPANDED);
+		await setSortPreference({ displayMode: DISPLAY_MODE_EXPANDED });
+	};
+
+	const displayCondensed = async () => {
+		logEvent(events.DP_DISPLAY_CONDENSED);
+		await setSortPreference({ displayMode: DISPLAY_MODE_CONDENSED });
+	};
+
+	const renderCheckBox = value => (
+		<List.Icon name={value ? 'checkbox-checked' : 'checkbox-unchecked'} color={value ? themes[theme].actionTintColor : null} />
+	);
+
+	const renderAvatarSwitch = value => (
+		<Switch value={value} onValueChange={() => toggleAvatar()} testID='display-pref-view-avatar-switch' />
+	);
+
+	const renderRadio = value => (
+		<RadioButton
+			selected={!!value}
+			color={value ? themes[theme].actionTintColor : themes[theme].auxiliaryText}
+			size={ICON_SIZE}
+		/>
+	);
+
+	return (
+		<SafeAreaView>
+			<StatusBar />
+			<List.Container testID='display-view-list'>
+				<List.Section title='Display'>
+					<List.Separator />
+					<List.Item
+						left={() => <List.Icon name='view-extended' />}
+						title='Expanded'
+						testID='display-pref-view-expanded'
+						right={() => renderRadio(displayMode === DISPLAY_MODE_EXPANDED)}
+						onPress={displayExpanded}
+					/>
+					<List.Separator />
+					<List.Item
+						left={() => <List.Icon name='view-medium' />}
+						title='Condensed'
+						testID='display-pref-view-condensed'
+						right={() => renderRadio(displayMode === DISPLAY_MODE_CONDENSED)}
+						onPress={displayCondensed}
+					/>
+					<List.Separator />
+					<List.Item
+						left={() => <List.Icon name='avatar' />}
+						title='Avatars'
+						testID='display-pref-view-avatars'
+						right={() => renderAvatarSwitch(showAvatar)}
+					/>
+					<List.Separator />
+				</List.Section>
+
+				<List.Section title='Sort_by'>
+					<List.Separator />
+					<List.Item
+						title='Activity'
+						testID='display-pref-view-activity'
+						left={() => <List.Icon name='clock' />}
+						onPress={sortByActivity}
+						right={() => renderRadio(sortBy === 'activity')}
+					/>
+					<List.Separator />
+					<List.Item
+						title='Name'
+						testID='display-pref-view-name'
+						left={() => <List.Icon name='sort-az' />}
+						onPress={sortByName}
+						right={() => renderRadio(sortBy === 'alphabetical')}
+					/>
+					<List.Separator />
+				</List.Section>
+
+				<List.Section title='Group_by'>
+					<List.Separator />
+					<List.Item
+						title='Unread_on_top'
+						testID='display-pref-view-unread'
+						left={() => <List.Icon name='flag' />}
+						onPress={toggleUnread}
+						right={() => renderCheckBox(showUnread)}
+					/>
+					<List.Separator />
+					<List.Item
+						title='Favorites'
+						testID='display-pref-view-favorites'
+						left={() => <List.Icon name='star' />}
+						onPress={toggleGroupByFavorites}
+						right={() => renderCheckBox(showFavorites)}
+					/>
+					<List.Separator />
+					<List.Item
+						title='Types'
+						testID='display-pref-view-types'
+						left={() => <List.Icon name='group-by-type' />}
+						onPress={toggleGroupByType}
+						right={() => renderCheckBox(groupByType)}
+					/>
+					<List.Separator />
+				</List.Section>
+			</List.Container>
+		</SafeAreaView>
+	);
+};
+
+DisplayPrefsView.propTypes = {
+	navigation: PropTypes.object,
+	isMasterDetail: PropTypes.bool
+};
+
+export default DisplayPrefsView;

app/views/LegalView.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import { StackNavigationOptions } from '@react-navigation/stack';
 
 import I18n from '../i18n';
 import StatusBar from '../containers/StatusBar';
@@ -9,13 +9,17 @@ import { withTheme } from '../theme';
 import SafeAreaView from '../containers/SafeAreaView';
 import * as List from '../containers/List';
 
-class LegalView extends React.Component {
+interface ILegalView {
-	static propTypes = {
+	server: string;
-		server: PropTypes.string,
+	theme: string;
-		theme: PropTypes.string
+}
+
+class LegalView extends React.Component<ILegalView, any> {
+	static navigationOptions: StackNavigationOptions = {
+		title: I18n.t('Legal')
 	};
 
-	onPressItem = ({ route }) => {
+	onPressItem = ({ route }: { route: string }) => {
 		const { server, theme } = this.props;
 		if (!server) {
 			return;
@@ -51,12 +55,8 @@ class LegalView extends React.Component {
 	}
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
 	server: state.server.server
 });
 
-LegalView.navigationOptions = {
-	title: I18n.t('Legal')
-};
-
 export default connect(mapStateToProps)(withTheme(LegalView));

app/views/RoomsListView/Header/index.js

@@ -2,12 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 
-import {
+import { toggleServerDropdown, closeServerDropdown, setSearch as setSearchAction } from '../../../actions/rooms';
-	closeServerDropdown,
-	closeSortDropdown,
-	setSearch as setSearchAction,
-	toggleServerDropdown
-} from '../../../actions/rooms';
 import { withTheme } from '../../../theme';
 import EventEmitter from '../../../utils/events';
 import { KEY_COMMAND, handleCommandOpenServerDropdown } from '../../../commands';
@@ -18,7 +13,6 @@ import Header from './Header';
 class RoomsListHeaderView extends PureComponent {
 	static propTypes = {
 		showServerDropdown: PropTypes.bool,
-		showSortDropdown: PropTypes.bool,
 		showSearchHeader: PropTypes.bool,
 		serverName: PropTypes.string,
 		connecting: PropTypes.bool,
@@ -28,7 +22,6 @@ class RoomsListHeaderView extends PureComponent {
 		server: PropTypes.string,
 		open: PropTypes.func,
 		close: PropTypes.func,
-		closeSort: PropTypes.func,
 		setSearch: PropTypes.func
 	};
 
@@ -58,14 +51,9 @@ class RoomsListHeaderView extends PureComponent {
 
 	onPress = () => {
 		logEvent(events.RL_TOGGLE_SERVER_DROPDOWN);
-		const { showServerDropdown, showSortDropdown, close, open, closeSort } = this.props;
+		const { showServerDropdown, close, open } = this.props;
 		if (showServerDropdown) {
 			close();
-		} else if (showSortDropdown) {
-			closeSort();
-			setTimeout(() => {
-				open();
-			}, 300);
 		} else {
 			open();
 		}
@@ -93,7 +81,6 @@ class RoomsListHeaderView extends PureComponent {
 
 const mapStateToProps = state => ({
 	showServerDropdown: state.rooms.showServerDropdown,
-	showSortDropdown: state.rooms.showSortDropdown,
 	showSearchHeader: state.rooms.showSearchHeader,
 	connecting: state.meteor.connecting || state.server.loading,
 	connected: state.meteor.connected,
@@ -105,7 +92,6 @@ const mapStateToProps = state => ({
 const mapDispatchtoProps = dispatch => ({
 	close: () => dispatch(closeServerDropdown()),
 	open: () => dispatch(toggleServerDropdown()),
-	closeSort: () => dispatch(closeSortDropdown()),
 	setSearch: searchText => dispatch(setSearchAction(searchText))
 });
 

app/views/RoomsListView/ListHeader/index.js

@@ -2,16 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { withTheme } from '../../../theme';
-import I18n from '../../../i18n';
 import * as List from '../../../containers/List';
 import { E2E_BANNER_TYPE } from '../../../lib/encryption/constants';
 import { themes } from '../../../constants/colors';
 import OmnichannelStatus from '../../../ee/omnichannel/containers/OmnichannelStatus';
 
 const ListHeader = React.memo(
-	({ searching, sortBy, toggleSort, goEncryption, goQueue, queueSize, inquiryEnabled, encryptionBanner, user, theme }) => {
+	({ searching, goEncryption, goQueue, queueSize, inquiryEnabled, encryptionBanner, user, theme }) => {
-		const sortTitle = I18n.t('Sorting_by', { key: I18n.t(sortBy === 'alphabetical' ? 'name' : 'activity') });
-
 		if (searching) {
 			return null;
 		}
@@ -36,13 +33,6 @@ const ListHeader = React.memo(
 						<List.Separator />
 					</>
 				) : null}
-				<List.Item
-					title={sortTitle}
-					left={() => <List.Icon name='sort' />}
-					color={themes[theme].auxiliaryText}
-					onPress={toggleSort}
-					translateTitle={false}
-				/>
 				<List.Separator />
 				<OmnichannelStatus
 					searching={searching}
@@ -58,8 +48,6 @@ const ListHeader = React.memo(
 
 ListHeader.propTypes = {
 	searching: PropTypes.bool,
-	sortBy: PropTypes.string,
-	toggleSort: PropTypes.func,
 	goEncryption: PropTypes.func,
 	goQueue: PropTypes.func,
 	queueSize: PropTypes.number,

app/views/RoomsListView/SortDropdown/index.js

@@ -1,207 +0,0 @@
-import React, { PureComponent } from 'react';
-import { Animated, Easing, TouchableWithoutFeedback } from 'react-native';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { withSafeAreaInsets } from 'react-native-safe-area-context';
-
-import styles from '../styles';
-import * as List from '../../../containers/List';
-import RocketChat from '../../../lib/rocketchat';
-import { setPreference } from '../../../actions/sortPreferences';
-import log, { events, logEvent } from '../../../utils/log';
-import I18n from '../../../i18n';
-import { withTheme } from '../../../theme';
-import { themes } from '../../../constants/colors';
-import { headerHeight } from '../../../containers/Header';
-
-const ANIMATION_DURATION = 200;
-
-class Sort extends PureComponent {
-	static propTypes = {
-		closeSortDropdown: PropTypes.bool,
-		close: PropTypes.func,
-		sortBy: PropTypes.string,
-		groupByType: PropTypes.bool,
-		showFavorites: PropTypes.bool,
-		showUnread: PropTypes.bool,
-		isMasterDetail: PropTypes.bool,
-		theme: PropTypes.string,
-		insets: PropTypes.object,
-		setSortPreference: PropTypes.func
-	};
-
-	constructor(props) {
-		super(props);
-		this.animatedValue = new Animated.Value(0);
-	}
-
-	componentDidMount() {
-		Animated.timing(this.animatedValue, {
-			toValue: 1,
-			duration: ANIMATION_DURATION,
-			easing: Easing.inOut(Easing.quad),
-			useNativeDriver: true
-		}).start();
-	}
-
-	componentDidUpdate(prevProps) {
-		const { closeSortDropdown } = this.props;
-		if (prevProps.closeSortDropdown !== closeSortDropdown) {
-			this.close();
-		}
-	}
-
-	setSortPreference = param => {
-		const { setSortPreference } = this.props;
-
-		try {
-			setSortPreference(param);
-			RocketChat.saveSortPreference(param);
-		} catch (e) {
-			logEvent(events.RL_SORT_CHANNELS_F);
-			log(e);
-		}
-	};
-
-	sortByName = () => {
-		logEvent(events.RL_SORT_CHANNELS_BY_NAME);
-		this.setSortPreference({ sortBy: 'alphabetical' });
-		this.close();
-	};
-
-	sortByActivity = () => {
-		logEvent(events.RL_SORT_CHANNELS_BY_ACTIVITY);
-		this.setSortPreference({ sortBy: 'activity' });
-		this.close();
-	};
-
-	toggleGroupByType = () => {
-		logEvent(events.RL_GROUP_CHANNELS_BY_TYPE);
-		const { groupByType } = this.props;
-		this.setSortPreference({ groupByType: !groupByType });
-	};
-
-	toggleGroupByFavorites = () => {
-		logEvent(events.RL_GROUP_CHANNELS_BY_FAVORITE);
-		const { showFavorites } = this.props;
-		this.setSortPreference({ showFavorites: !showFavorites });
-	};
-
-	toggleUnread = () => {
-		logEvent(events.RL_GROUP_CHANNELS_BY_UNREAD);
-		const { showUnread } = this.props;
-		this.setSortPreference({ showUnread: !showUnread });
-	};
-
-	close = () => {
-		const { close } = this.props;
-		Animated.timing(this.animatedValue, {
-			toValue: 0,
-			duration: ANIMATION_DURATION,
-			easing: Easing.inOut(Easing.quad),
-			useNativeDriver: true
-		}).start(() => close());
-	};
-
-	renderCheck = () => {
-		const { theme } = this.props;
-		return <List.Icon name='check' color={themes[theme].tintColor} />;
-	};
-
-	render() {
-		const { isMasterDetail, insets } = this.props;
-		const statusBarHeight = insets?.top ?? 0;
-		const heightDestination = isMasterDetail ? headerHeight + statusBarHeight : 0;
-		const translateY = this.animatedValue.interpolate({
-			inputRange: [0, 1],
-			outputRange: [-326, heightDestination]
-		});
-		const { sortBy, groupByType, showFavorites, showUnread, theme } = this.props;
-		const backdropOpacity = this.animatedValue.interpolate({
-			inputRange: [0, 1],
-			outputRange: [0, themes[theme].backdropOpacity]
-		});
-
-		return (
-			<>
-				<TouchableWithoutFeedback onPress={this.close}>
-					<Animated.View
-						style={[
-							styles.backdrop,
-							{
-								backgroundColor: themes[theme].backdropColor,
-								opacity: backdropOpacity,
-								top: heightDestination
-							}
-						]}
-					/>
-				</TouchableWithoutFeedback>
-				<Animated.View
-					style={[
-						styles.dropdownContainer,
-						{
-							transform: [{ translateY }],
-							backgroundColor: themes[theme].backgroundColor,
-							borderColor: themes[theme].separatorColor
-						}
-					]}>
-					<List.Item
-						title={I18n.t('Sorting_by', { key: I18n.t(sortBy === 'alphabetical' ? 'name' : 'activity') })}
-						left={() => <List.Icon name='sort' />}
-						color={themes[theme].auxiliaryText}
-						onPress={this.close}
-						translateTitle={false}
-					/>
-					<List.Separator />
-					<List.Item
-						title='Alphabetical'
-						left={() => <List.Icon name='sort-az' />}
-						color={themes[theme].auxiliaryText}
-						onPress={this.sortByName}
-						right={() => (sortBy === 'alphabetical' ? this.renderCheck() : null)}
-					/>
-					<List.Item
-						title='Activity'
-						left={() => <List.Icon name='clock' />}
-						color={themes[theme].auxiliaryText}
-						onPress={this.sortByActivity}
-						right={() => (sortBy === 'activity' ? this.renderCheck() : null)}
-					/>
-					<List.Separator />
-					<List.Item
-						title='Group_by_type'
-						left={() => <List.Icon name='group-by-type' />}
-						color={themes[theme].auxiliaryText}
-						onPress={this.toggleGroupByType}
-						right={() => (groupByType ? this.renderCheck() : null)}
-					/>
-					<List.Item
-						title='Group_by_favorites'
-						left={() => <List.Icon name='star' />}
-						color={themes[theme].auxiliaryText}
-						onPress={this.toggleGroupByFavorites}
-						right={() => (showFavorites ? this.renderCheck() : null)}
-					/>
-					<List.Item
-						title='Unread_on_top'
-						left={() => <List.Icon name='unread-on-top-disabled' />}
-						color={themes[theme].auxiliaryText}
-						onPress={this.toggleUnread}
-						right={() => (showUnread ? this.renderCheck() : null)}
-					/>
-				</Animated.View>
-			</>
-		);
-	}
-}
-
-const mapStateToProps = state => ({
-	closeSortDropdown: state.rooms.closeSortDropdown,
-	isMasterDetail: state.app.isMasterDetail
-});
-
-const mapDispatchToProps = dispatch => ({
-	setSortPreference: preference => dispatch(setPreference(preference))
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(withSafeAreaInsets(withTheme(Sort)));

app/views/RoomsListView/index.js

@@ -9,15 +9,14 @@ import { withSafeAreaInsets } from 'react-native-safe-area-context';
 
 import database from '../../lib/database';
 import RocketChat from '../../lib/rocketchat';
-import RoomItem, { ROW_HEIGHT } from '../../presentation/RoomItem';
+import RoomItem, { ROW_HEIGHT, ROW_HEIGHT_CONDENSED } from '../../presentation/RoomItem';
-import log, { events, logEvent } from '../../utils/log';
+import log, { logEvent, events } from '../../utils/log';
 import I18n from '../../i18n';
 import {
 	closeSearchHeader as closeSearchHeaderAction,
 	closeServerDropdown as closeServerDropdownAction,
 	openSearchHeader as openSearchHeaderAction,
-	roomsRequest as roomsRequestAction,
+	roomsRequest as roomsRequestAction
-	toggleSortDropdown as toggleSortDropdownAction
 } from '../../actions/rooms';
 import { appStart as appStartAction, ROOT_OUTSIDE } from '../../actions/app';
 import debounce from '../../utils/debounce';
@@ -50,11 +49,11 @@ import { showConfirmationAlert, showErrorAlert } from '../../utils/info';
 import { E2E_BANNER_TYPE } from '../../lib/encryption/constants';
 import { getInquiryQueueSelector } from '../../ee/omnichannel/selectors/inquiry';
 import { changeLivechatStatus, isOmnichannelStatusAvailable } from '../../ee/omnichannel/lib';
+import { DISPLAY_MODE_CONDENSED } from '../../constants/constantDisplayMode';
+import styles from './styles';
+import ServerDropdown from './ServerDropdown';
 import ListHeader from './ListHeader';
 import RoomsListHeaderView from './Header';
-import ServerDropdown from './ServerDropdown';
-import SortDropdown from './SortDropdown';
-import styles from './styles';
 
 const INITIAL_NUM_TO_RENDER = isTablet ? 20 : 12;
 const CHATS_HEADER = 'Chats';
@@ -77,11 +76,6 @@ const shouldUpdateProps = [
 	'searchText',
 	'loadingServer',
 	'showServerDropdown',
-	'showSortDropdown',
-	'sortBy',
-	'groupByType',
-	'showFavorites',
-	'showUnread',
 	'useRealName',
 	'StoreLastMessage',
 	'theme',
@@ -96,9 +90,14 @@ const shouldUpdateProps = [
 	'createPrivateChannelPermission',
 	'createDiscussionPermission'
 ];
-const getItemLayout = (data, index) => ({
+
-	length: ROW_HEIGHT,
+const sortPreferencesShouldUpdate = ['sortBy', 'groupByType', 'showFavorites', 'showUnread'];
-	offset: ROW_HEIGHT * index,
+
+const displayPropsShouldUpdate = ['showAvatar', 'displayMode'];
+
+const getItemLayout = (data, index, height) => ({
+	length: height,
+	offset: height * index,
 	index
 });
 const keyExtractor = item => item.rid;
@@ -118,7 +117,6 @@ class RoomsListView extends React.Component {
 		changingServer: PropTypes.bool,
 		loadingServer: PropTypes.bool,
 		showServerDropdown: PropTypes.bool,
-		showSortDropdown: PropTypes.bool,
 		sortBy: PropTypes.string,
 		groupByType: PropTypes.bool,
 		showFavorites: PropTypes.bool,
@@ -126,7 +124,6 @@ class RoomsListView extends React.Component {
 		refreshing: PropTypes.bool,
 		StoreLastMessage: PropTypes.bool,
 		theme: PropTypes.string,
-		toggleSortDropdown: PropTypes.func,
 		openSearchHeader: PropTypes.func,
 		closeSearchHeader: PropTypes.func,
 		appStart: PropTypes.func,
@@ -140,6 +137,8 @@ class RoomsListView extends React.Component {
 		queueSize: PropTypes.number,
 		inquiryEnabled: PropTypes.bool,
 		encryptionBanner: PropTypes.string,
+		showAvatar: PropTypes.bool,
+		displayMode: PropTypes.string,
 		createTeamPermission: PropTypes.array,
 		createDirectMessagePermission: PropTypes.array,
 		createPublicChannelPermission: PropTypes.array,
@@ -180,6 +179,11 @@ class RoomsListView extends React.Component {
 		this.unsubscribeFocus = navigation.addListener('focus', () => {
 			Orientation.unlockAllOrientations();
 			this.animated = true;
+			// Check if there were changes with sort preference, then call getSubscription to remount the list
+			if (this.sortPreferencesChanged) {
+				this.getSubscriptions();
+				this.sortPreferencesChanged = false;
+			}
 			// Check if there were changes while not focused (it's set on sCU)
 			if (this.shouldUpdate) {
 				this.forceUpdate();
@@ -222,6 +226,20 @@ class RoomsListView extends React.Component {
 			return true;
 		}
 
+		// check if some display props are changed to force update when focus this view again
+		// eslint-disable-next-line react/destructuring-assignment
+		const displayUpdated = displayPropsShouldUpdate.some(key => nextProps[key] !== this.props[key]);
+		if (displayUpdated) {
+			this.shouldUpdate = true;
+		}
+
+		// check if some sort preferences are changed to getSubscription() when focus this view again
+		// eslint-disable-next-line react/destructuring-assignment
+		const sortPreferencesUpdate = sortPreferencesShouldUpdate.some(key => nextProps[key] !== this.props[key]);
+		if (sortPreferencesUpdate) {
+			this.sortPreferencesChanged = true;
+		}
+
 		// Compare changes only once
 		const chatsNotEqual = !dequal(nextState.chatsUpdate, chatsUpdate);
 
@@ -285,7 +303,9 @@ class RoomsListView extends React.Component {
 			createPublicChannelPermission,
 			createPrivateChannelPermission,
 			createDirectMessagePermission,
-			createDiscussionPermission
+			createDiscussionPermission,
+			showAvatar,
+			displayMode
 		} = this.props;
 		const { item } = this.state;
 
@@ -294,7 +314,9 @@ class RoomsListView extends React.Component {
 				prevProps.sortBy === sortBy &&
 				prevProps.groupByType === groupByType &&
 				prevProps.showFavorites === showFavorites &&
-				prevProps.showUnread === showUnread
+				prevProps.showUnread === showUnread &&
+				prevProps.showAvatar === showAvatar &&
+				prevProps.displayMode === displayMode
 			)
 		) {
 			this.getSubscriptions();
@@ -616,16 +638,6 @@ class RoomsListView extends React.Component {
 		}
 	};
 
-	toggleSort = () => {
-		logEvent(events.RL_TOGGLE_SORT_DROPDOWN);
-		const { toggleSortDropdown } = this.props;
-
-		this.scrollToTop();
-		setTimeout(() => {
-			toggleSortDropdown();
-		}, 100);
-	};
-
 	toggleFav = async (rid, favorite) => {
 		logEvent(favorite ? events.RL_UNFAVORITE_CHANNEL : events.RL_FAVORITE_CHANNEL);
 		try {
@@ -874,12 +886,10 @@ class RoomsListView extends React.Component {
 
 	renderListHeader = () => {
 		const { searching } = this.state;
-		const { sortBy, queueSize, inquiryEnabled, encryptionBanner, user } = this.props;
+		const { queueSize, inquiryEnabled, encryptionBanner, user } = this.props;
 		return (
 			<ListHeader
 				searching={searching}
-				sortBy={sortBy}
-				toggleSort={this.toggleSort}
 				goEncryption={this.goEncryption}
 				goQueue={this.goQueue}
 				queueSize={queueSize}
@@ -913,7 +923,9 @@ class RoomsListView extends React.Component {
 			useRealName,
 			theme,
 			isMasterDetail,
-			width
+			width,
+			showAvatar,
+			displayMode
 		} = this.props;
 		const id = this.getUidDirectMessage(item);
 
@@ -938,6 +950,8 @@ class RoomsListView extends React.Component {
 				getIsRead={this.isRead}
 				visitor={item.visitor}
 				isFocused={currentItem?.rid === item.rid}
+				showAvatar={showAvatar}
+				displayMode={displayMode}
 			/>
 		);
 	};
@@ -953,7 +967,9 @@ class RoomsListView extends React.Component {
 
 	renderScroll = () => {
 		const { loading, chats, search, searching } = this.state;
-		const { theme, refreshing } = this.props;
+		const { theme, refreshing, displayMode } = this.props;
+
+		const height = displayMode === DISPLAY_MODE_CONDENSED ? ROW_HEIGHT_CONDENSED : ROW_HEIGHT;
 
 		if (loading) {
 			return <ActivityIndicator theme={theme} />;
@@ -968,7 +984,7 @@ class RoomsListView extends React.Component {
 				style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
 				renderItem={this.renderItem}
 				ListHeaderComponent={this.renderListHeader}
-				getItemLayout={getItemLayout}
+				getItemLayout={(data, index) => getItemLayout(data, index, height)}
 				removeClippedSubviews={isIOS}
 				keyboardShouldPersistTaps='always'
 				initialNumToRender={INITIAL_NUM_TO_RENDER}
@@ -984,23 +1000,13 @@ class RoomsListView extends React.Component {
 
 	render = () => {
 		console.count(`${this.constructor.name}.render calls`);
-		const { sortBy, groupByType, showFavorites, showUnread, showServerDropdown, showSortDropdown, theme, navigation } =
+		const { showServerDropdown, theme, navigation } = this.props;
-			this.props;
 
 		return (
 			<SafeAreaView testID='rooms-list-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
 				<StatusBar />
 				{this.renderHeader()}
 				{this.renderScroll()}
-				{showSortDropdown ? (
-					<SortDropdown
-						close={this.toggleSort}
-						sortBy={sortBy}
-						groupByType={groupByType}
-						showFavorites={showFavorites}
-						showUnread={showUnread}
-					/>
-				) : null}
 				{showServerDropdown ? <ServerDropdown navigation={navigation} /> : null}
 			</SafeAreaView>
 		);
@@ -1015,7 +1021,6 @@ const mapStateToProps = state => ({
 	searchText: state.rooms.searchText,
 	loadingServer: state.server.loading,
 	showServerDropdown: state.rooms.showServerDropdown,
-	showSortDropdown: state.rooms.showSortDropdown,
 	refreshing: state.rooms.refreshing,
 	sortBy: state.sortPreferences.sortBy,
 	groupByType: state.sortPreferences.groupByType,
@@ -1027,6 +1032,8 @@ const mapStateToProps = state => ({
 	queueSize: getInquiryQueueSelector(state).length,
 	inquiryEnabled: state.inquiry.enabled,
 	encryptionBanner: state.encryption.banner,
+	showAvatar: state.sortPreferences.showAvatar,
+	displayMode: state.sortPreferences.displayMode,
 	createTeamPermission: state.permissions['create-team'],
 	createDirectMessagePermission: state.permissions['create-d'],
 	createPublicChannelPermission: state.permissions['create-c'],
@@ -1035,7 +1042,6 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-	toggleSortDropdown: () => dispatch(toggleSortDropdownAction()),
 	openSearchHeader: () => dispatch(openSearchHeaderAction()),
 	closeSearchHeader: () => dispatch(closeSearchHeaderAction()),
 	roomsRequest: params => dispatch(roomsRequestAction(params)),

app/views/SettingsView/index.js

@@ -185,6 +185,8 @@ class SettingsView extends React.Component {
 								<List.Separator />
 							</List.Section>
 							<List.Section>
+								<List.Separator />
+								<List.Item title='Display' onPress={() => this.navigateToScreen('DisplayPrefsView')} showActionIndicator />
 								<List.Separator />
 								<List.Item
 									title='Profile'

app/views/SidebarView/index.js

@@ -193,6 +193,13 @@ class Sidebar extends Component {
 					testID='sidebar-profile'
 					current={this.currentItemKey === 'ProfileStackNavigator'}
 				/>
+				<SidebarItem
+					text={I18n.t('Display')}
+					left={<CustomIcon name='sort' size={20} color={themes[theme].titleText} />}
+					onPress={() => this.sidebarNavigate('DisplayPrefStackNavigator')}
+					testID='sidebar-display'
+					current={this.currentItemKey === 'DisplayPrefStackNavigator'}
+				/>
 				<SidebarItem
 					text={I18n.t('Settings')}
 					left={<CustomIcon name='administration' size={20} color={themes[theme].titleText} />}

app/views/TeamChannelsView.js

@@ -61,7 +61,9 @@ class TeamChannelsView extends React.Component {
 		deleteCPermission: PropTypes.array,
 		deletePPermission: PropTypes.array,
 		showActionSheet: PropTypes.func,
-		deleteRoom: PropTypes.func
+		deleteRoom: PropTypes.func,
+		showAvatar: PropTypes.bool,
+		displayMode: PropTypes.string
 	};
 
 	constructor(props) {
@@ -470,7 +472,7 @@ class TeamChannelsView extends React.Component {
 	};
 
 	renderItem = ({ item }) => {
-		const { StoreLastMessage, useRealName, theme, width } = this.props;
+		const { StoreLastMessage, useRealName, theme, width, showAvatar, displayMode } = this.props;
 		return (
 			<RoomItem
 				item={item}
@@ -485,6 +487,8 @@ class TeamChannelsView extends React.Component {
 				getRoomAvatar={this.getRoomAvatar}
 				swipeEnabled={false}
 				autoJoin={item.teamDefault}
+				showAvatar={showAvatar}
+				displayMode={displayMode}
 			/>
 		);
 	};
@@ -547,7 +551,9 @@ const mapStateToProps = state => ({
 	editTeamChannelPermission: state.permissions[PERMISSION_EDIT_TEAM_CHANNEL],
 	removeTeamChannelPermission: state.permissions[PERMISSION_REMOVE_TEAM_CHANNEL],
 	deleteCPermission: state.permissions[PERMISSION_DELETE_C],
-	deletePPermission: state.permissions[PERMISSION_DELETE_P]
+	deletePPermission: state.permissions[PERMISSION_DELETE_P],
+	showAvatar: state.sortPreferences.showAvatar,
+	displayMode: state.sortPreferences.displayMode
 });
 
 const mapDispatchToProps = dispatch => ({

e2e/tests/assorted/13-display-pref.spec.js

@@ -0,0 +1,96 @@
+const { login, navigateToLogin } = require('../../helpers/app');
+const data = require('../../data');
+
+const goToDisplayPref = async () => {
+	await expect(element(by.id('rooms-list-view-sidebar'))).toBeVisible();
+	await element(by.id('rooms-list-view-sidebar')).tap();
+	await expect(element(by.id('sidebar-display'))).toBeVisible();
+	await element(by.id('sidebar-display')).tap();
+};
+const goToRoomList = async () => {
+	await expect(element(by.id('display-view-drawer'))).toBeVisible();
+	await element(by.id('display-view-drawer')).tap();
+	await expect(element(by.id('sidebar-chats'))).toBeVisible();
+	await element(by.id('sidebar-chats')).tap();
+};
+
+describe('Rooms list screen', () => {
+	before(async () => {
+		await device.launchApp({ permissions: { notifications: 'YES' }, newInstance: true, delete: true });
+		await navigateToLogin();
+		await login(data.users.regular.username, data.users.regular.password);
+	});
+
+	describe('Render', () => {
+		it('should have rooms list screen', async () => {
+			await expect(element(by.id('rooms-list-view'))).toBeVisible();
+		});
+
+		it('should have room item', async () => {
+			await expect(element(by.id('rooms-list-view-item-general'))).toExist();
+		});
+
+		// Render - Header
+		describe('Header', () => {
+			it('should have create channel button', async () => {
+				await expect(element(by.id('rooms-list-view-create-channel'))).toBeVisible();
+			});
+
+			it('should have sidebar button', async () => {
+				await expect(element(by.id('rooms-list-view-sidebar'))).toBeVisible();
+			});
+		});
+
+		describe('DisplayPrefView', () => {
+			it('should go to Display Preferences', async () => {
+				await goToDisplayPref();
+			});
+
+			it('should have Displays button, expanded, condensed, avatars', async () => {
+				await expect(element(by.id('display-pref-view-expanded'))).toBeVisible();
+				await expect(element(by.id('display-pref-view-condensed'))).toBeVisible();
+				await expect(element(by.id('display-pref-view-avatars'))).toBeVisible();
+			});
+
+			it('should have Sort By button', async () => {
+				await expect(element(by.id('display-pref-view-activity'))).toBeVisible();
+				await expect(element(by.id('display-pref-view-name'))).toBeVisible();
+			});
+
+			it('should have Group by button', async () => {
+				await expect(element(by.id('display-pref-view-unread'))).toBeVisible();
+				await expect(element(by.id('display-pref-view-favorites'))).toBeVisible();
+				await expect(element(by.id('display-pref-view-types'))).toBeVisible();
+			});
+		});
+
+		describe('Change display', () => {
+			it('should appear the last message in RoomList when is Expanded', async () => {
+				await element(by.id('display-pref-view-expanded')).tap();
+				await goToRoomList();
+				await expect(element(by.id('room-item-last-message')).atIndex(0)).toBeVisible();
+			});
+
+			it('should not appear the last message in RoomList when is Condensed', async () => {
+				await goToDisplayPref();
+				await element(by.id('display-pref-view-condensed')).tap();
+				await goToRoomList();
+				await expect(element(by.id('room-item-last-message'))).not.toBeVisible();
+			});
+		});
+
+		describe('Change the avatar visible', () => {
+			it('should have avatar as default in room list', async () => {
+				await expect(element(by.id('avatar')).atIndex(0)).toExist();
+			});
+
+			it('should hide the avatar', async () => {
+				await goToDisplayPref();
+				await expect(element(by.id('display-pref-view-avatar-switch'))).toBeVisible();
+				await element(by.id('display-pref-view-avatar-switch')).tap();
+				await goToRoomList();
+				await expect(element(by.id('avatar'))).not.toBeVisible();
+			});
+		});
+	});
+});

ios/Podfile.lock

@@ -530,12 +530,12 @@ PODS:
     - RNFBApp
   - RNGestureHandler (1.10.3):
     - React-Core
-  - RNImageCropPicker (0.31.1):
+  - RNImageCropPicker (0.36.3):
     - React-Core
     - React-RCTImage
-    - RNImageCropPicker/QBImagePickerController (= 0.31.1)
+    - RNImageCropPicker/QBImagePickerController (= 0.36.3)
     - TOCropViewController
-  - RNImageCropPicker/QBImagePickerController (0.31.1):
+  - RNImageCropPicker/QBImagePickerController (0.36.3):
     - React-Core
     - React-RCTImage
     - TOCropViewController
@@ -977,7 +977,7 @@ SPEC CHECKSUMS:
   EXVideoThumbnails: cd257fc6e07884a704a5674d362a6410933acb68
   EXWebBrowser: d37a5ffdea1b65947352bc001dd9f732463725d4
   FBLazyVector: e686045572151edef46010a6f819ade377dfeb4b
-  FBReactNativeSpec: 686ac17e193dcf7d5df4d772b224504dd2f3ad81
+  FBReactNativeSpec: 110d69378fce79af38271c39894b59fec7890221
   Firebase: 919186c8e119dd9372a45fd1dd17a8a942bc1892
   FirebaseAnalytics: 5fa308e1b13f838d0f6dc74719ac2a72e8c5afc4
   FirebaseCore: 8cd4f8ea22075e0ee582849b1cf79d8816506085
@@ -1061,7 +1061,7 @@ SPEC CHECKSUMS:
   RNFBApp: 6fd8a7e757135d4168bf033a8812c241af7363a0
   RNFBCrashlytics: 88de72c2476b5868a892d9523b89b86c527c540e
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
-  RNImageCropPicker: 38865ab4af1b0b2146ad66061196bc0184946855
+  RNImageCropPicker: 97289cd94fb01ab79db4e5c92938be4d0d63415d
   RNLocalize: 82a569022724d35461e2dc5b5d015a13c3ca995b
   RNReanimated: 241c586663f44f19a53883c63375fdd041253960
   RNRootView: 895a4813dedeaca82db2fa868ca1c333d790e494

ios/RocketChatRN.xcodeproj/project.pbxproj

@@ -1689,7 +1689,7 @@
 				INFOPLIST_FILE = NotificationService/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @executable_path/../../Frameworks";
-				MARKETING_VERSION = 4.20.0;
+				MARKETING_VERSION = 4.21.0;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = chat.rocket.reactnative.NotificationService;
@@ -1726,7 +1726,7 @@
 				INFOPLIST_FILE = NotificationService/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @executable_path/../../Frameworks";
-				MARKETING_VERSION = 4.20.0;
+				MARKETING_VERSION = 4.21.0;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = chat.rocket.reactnative.NotificationService;
 				PRODUCT_NAME = "$(TARGET_NAME)";

ios/RocketChatRN/Info.plist

@@ -26,7 +26,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>4.20.0</string>
+	<string>4.21.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>

ios/ShareRocketChatRN/Info.plist

@@ -26,7 +26,7 @@
 	<key>CFBundlePackageType</key>
 	<string>XPC!</string>
 	<key>CFBundleShortVersionString</key>
-	<string>4.20.0</string>
+	<string>4.21.0</string>
 	<key>CFBundleVersion</key>
 	<string>1</string>
 	<key>KeychainGroup</key>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "rocket-chat-reactnative",
-	"version": "4.20.0",
+	"version": "4.21.0",
 	"private": true,
 	"scripts": {
 		"start": "react-native start",
@@ -56,7 +56,6 @@
 		"commonmark-react-renderer": "git+https://github.com/RocketChat/commonmark-react-renderer.git",
 		"dequal": "^2.0.2",
 		"ejson": "2.2.1",
-		"eslint-config-airbnb": "^18.1.0",
 		"expo-apple-authentication": "^2.2.1",
 		"expo-av": "8.2.1",
 		"expo-file-system": "9.0.1",

patches/react-native-image-crop-picker+0.31.1.patch

@@ -1,12 +0,0 @@
-diff --git a/node_modules/react-native-image-crop-picker/android/src/main/java/com/reactnative/ivpusic/imagepicker/PickerModule.java b/node_modules/react-native-image-crop-picker/android/src/main/java/com/reactnative/ivpusic/imagepicker/PickerModule.java
-index 3500542..94e45b6 100644
---- a/node_modules/react-native-image-crop-picker/android/src/main/java/com/reactnative/ivpusic/imagepicker/PickerModule.java
-+++ b/node_modules/react-native-image-crop-picker/android/src/main/java/com/reactnative/ivpusic/imagepicker/PickerModule.java
-@@ -584,6 +584,7 @@ class PickerModule extends ReactContextBaseJavaModule implements ActivityEventLi
-         image.putInt("height", options.outHeight);
-         image.putString("mime", options.outMimeType);
-         image.putInt("size", (int) new File(compressedImagePath).length());
-+        image.putString("filename", compressedImage.getName());
-         image.putString("modificationDate", String.valueOf(modificationDate));
- 
-         if (includeBase64) {

storybook/stories/RoomItem.js

@@ -7,6 +7,7 @@ import { Provider } from 'react-redux';
 import { themes } from '../../app/constants/colors';
 import RoomItemComponent from '../../app/presentation/RoomItem/RoomItem';
 import { longText } from '../utils';
+import { DISPLAY_MODE_CONDENSED, DISPLAY_MODE_EXPANDED } from '../../app/constants/constantDisplayMode';
 import { store } from './index';
 
 const baseUrl = 'https://open.rocket.chat';
@@ -30,6 +31,8 @@ const RoomItem = props => (
 		baseUrl={baseUrl}
 		width={width}
 		theme={_theme}
+		showAvatar
+		displayMode={DISPLAY_MODE_EXPANDED}
 		{...updatedAt}
 		{...props}
 	/>
@@ -126,3 +129,57 @@ stories.add('Last Message', () => (
 		<RoomItem showLastMessage alert tunread={[1]} lastMessage={lastMessage} />
 	</>
 ));
+
+stories.add('Condensed Room Item', () => (
+	<>
+		<RoomItem showLastMessage alert tunread={[1]} lastMessage={lastMessage} displayMode={DISPLAY_MODE_CONDENSED} />
+		<RoomItem showLastMessage alert name='unread' unread={1000} displayMode={DISPLAY_MODE_CONDENSED} />
+
+		<RoomItem type='c' displayMode={DISPLAY_MODE_CONDENSED} autoJoin />
+	</>
+));
+
+stories.add('Condensed Room Item without Avatar', () => (
+	<>
+		<RoomItem
+			showLastMessage
+			alert
+			tunread={[1]}
+			lastMessage={lastMessage}
+			displayMode={DISPLAY_MODE_CONDENSED}
+			showAvatar={false}
+		/>
+		<RoomItem type='p' displayMode={DISPLAY_MODE_CONDENSED} showAvatar={false} />
+		<RoomItem name={longText} autoJoin displayMode={DISPLAY_MODE_CONDENSED} showAvatar={false} />
+	</>
+));
+
+stories.add('Expanded Room Item without Avatar', () => (
+	<>
+		<RoomItem
+			showLastMessage
+			alert
+			tunread={[1]}
+			lastMessage={lastMessage}
+			displayMode={DISPLAY_MODE_EXPANDED}
+			showAvatar={false}
+		/>
+		<RoomItem
+			status='online'
+			showLastMessage
+			alert
+			tunread={[1]}
+			lastMessage={lastMessage}
+			displayMode={DISPLAY_MODE_EXPANDED}
+			showAvatar={false}
+		/>
+		<RoomItem
+			status='online'
+			showLastMessage
+			alert
+			lastMessage={lastMessage}
+			displayMode={DISPLAY_MODE_EXPANDED}
+			showAvatar={false}
+		/>
+	</>
+));

yarn.lock

@@ -6389,11 +6389,6 @@ concat-stream@^2.0.0:
     readable-stream "^3.0.2"
     typedarray "^0.0.6"
 
-confusing-browser-globals@^1.0.9:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.9.tgz#72bc13b483c0276801681871d4898516f8f54fdd"
-  integrity sha512-KbS1Y0jMtyPgIxjO7ZzMAuUpAKMt1SzCL9fsrKsX6b0zJPTaT0SiSPmewwVZg9UAO83HVIlEhZF84LIjZ0lmAw==
-
 connect@^3.6.5:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/connect/-/connect-3.7.0.tgz#5d49348910caa5e07a01800b030d0c35f20484f8"
@@ -7505,24 +7500,6 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-airbnb-base@^14.1.0:
-  version "14.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.1.0.tgz#2ba4592dd6843258221d9bff2b6831bd77c874e4"
-  integrity sha512-+XCcfGyCnbzOnktDVhwsCAx+9DmrzEmuwxyHUJpw+kqBVT744OUBrB09khgFKlK1lshVww6qXGsYPZpavoNjJw==
-  dependencies:
-    confusing-browser-globals "^1.0.9"
-    object.assign "^4.1.0"
-    object.entries "^1.1.1"
-
-eslint-config-airbnb@^18.1.0:
-  version "18.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-airbnb/-/eslint-config-airbnb-18.1.0.tgz#724d7e93dadd2169492ff5363c5aaa779e01257d"
-  integrity sha512-kZFuQC/MPnH7KJp6v95xsLBf63G/w7YqdPfQ0MUanxQ7zcKUNG8j+sSY860g3NwCBOa62apw16J6pRN+AOgXzw==
-  dependencies:
-    eslint-config-airbnb-base "^14.1.0"
-    object.assign "^4.1.0"
-    object.entries "^1.1.1"
-
 eslint-config-prettier@^8.3.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.3.0.tgz#f7471b20b6fe8a9a9254cc684454202886a2dd7a"
@@ -12322,7 +12299,7 @@ object.assign@^4.1.2:
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
-object.entries@^1.1.0, object.entries@^1.1.1:
+object.entries@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.2.tgz#bc73f00acb6b6bb16c203434b10f9a7e797d3add"
   integrity sha512-BQdB9qKmb/HyNdMNWVr7O3+z5MUIx3aiegEIJqjMBbBf0YT9RRxTJSim4mzFqtyr7PDAHigq0N9dO0m0tRakQA==
@@ -13702,8 +13679,8 @@ react-native-gesture-handler@^1.10.3:
     prop-types "^15.7.2"
 
 react-native-image-crop-picker@RocketChat/react-native-image-crop-picker:
-  version "0.31.1"
+  version "0.36.3"
-  resolved "https://codeload.github.com/RocketChat/react-native-image-crop-picker/tar.gz/db1040b57e8536bd64db699897361167009b359c"
+  resolved "https://codeload.github.com/RocketChat/react-native-image-crop-picker/tar.gz/f347776247afb5cbd1400dde215689d7ca8fd6f2"
 
 react-native-image-progress@^1.1.1:
   version "1.1.1"