diff --git a/app/constants/constantDisplayMode.js b/app/constants/constantDisplayMode.js
deleted file mode 100644
index d7d7e1d5..00000000
--- a/app/constants/constantDisplayMode.js
+++ /dev/null
@@ -1,2 +0,0 @@
-export const DISPLAY_MODE_CONDENSED = 'condensed';
-export const DISPLAY_MODE_EXPANDED = 'expanded';
diff --git a/app/constants/constantDisplayMode.ts b/app/constants/constantDisplayMode.ts
new file mode 100644
index 00000000..ecb6bd4b
--- /dev/null
+++ b/app/constants/constantDisplayMode.ts
@@ -0,0 +1,9 @@
+export enum DisplayMode {
+	Condensed = 'condensed',
+	Expanded = 'expanded'
+}
+
+export enum SortBy {
+	Alphabetical = 'alphabetical',
+	Activity = 'activity'
+}
diff --git a/app/presentation/RoomItem/Actions.tsx b/app/presentation/RoomItem/Actions.tsx
index 19c63baa..2b53955a 100644
--- a/app/presentation/RoomItem/Actions.tsx
+++ b/app/presentation/RoomItem/Actions.tsx
@@ -5,7 +5,7 @@ import { RectButton } from 'react-native-gesture-handler';
 import { isRTL } from '../../i18n';
 import { CustomIcon } from '../../lib/Icons';
 import { themes } from '../../constants/colors';
-import { DISPLAY_MODE_CONDENSED } from '../../constants/constantDisplayMode';
+import { DisplayMode } from '../../constants/constantDisplayMode';
 import styles, { ACTION_WIDTH, LONG_SWIPE, ROW_HEIGHT_CONDENSED } from './styles';
 
 interface ILeftActions {
@@ -40,7 +40,7 @@ export const LeftActions = React.memo(({ theme, transX, isRead, width, onToggleR
 		reverse
 	);
 
-	const isCondensed = displayMode === DISPLAY_MODE_CONDENSED;
+	const isCondensed = displayMode === DisplayMode.Condensed;
 	const viewHeight = isCondensed ? { height: ROW_HEIGHT_CONDENSED } : null;
 
 	return (
@@ -87,7 +87,7 @@ export const RightActions = React.memo(
 			reverse
 		);
 
-		const isCondensed = displayMode === DISPLAY_MODE_CONDENSED;
+		const isCondensed = displayMode === DisplayMode.Condensed;
 		const viewHeight = isCondensed ? { height: ROW_HEIGHT_CONDENSED } : null;
 
 		return (
diff --git a/app/presentation/RoomItem/IconOrAvatar.js b/app/presentation/RoomItem/IconOrAvatar.js
index cedd3b0f..29343477 100644
--- a/app/presentation/RoomItem/IconOrAvatar.js
+++ b/app/presentation/RoomItem/IconOrAvatar.js
@@ -3,7 +3,7 @@ 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 { DisplayMode } from '../../constants/constantDisplayMode';
 import TypeIcon from './TypeIcon';
 import styles from './styles';
 
@@ -22,11 +22,11 @@ const IconOrAvatar = ({
 }) => {
 	if (showAvatar) {
 		return (
-			<Avatar text={avatar} size={displayMode === DISPLAY_MODE_CONDENSED ? 36 : 48} type={type} style={styles.avatar} rid={rid} />
+			<Avatar text={avatar} size={displayMode === DisplayMode.Condensed ? 36 : 48} type={type} style={styles.avatar} rid={rid} />
 		);
 	}
 
-	if (displayMode === DISPLAY_MODE_EXPANDED && showLastMessage) {
+	if (displayMode === DisplayMode.Expanded && showLastMessage) {
 		return (
 			<View style={styles.typeIcon}>
 				<TypeIcon
diff --git a/app/presentation/RoomItem/RoomItem.tsx b/app/presentation/RoomItem/RoomItem.tsx
index fcd529c8..e823d94e 100644
--- a/app/presentation/RoomItem/RoomItem.tsx
+++ b/app/presentation/RoomItem/RoomItem.tsx
@@ -11,7 +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';
+import { DisplayMode } from '../../constants/constantDisplayMode';
 
 interface IRoomItem {
 	rid: string;
@@ -132,7 +132,7 @@ const RoomItem = ({
 			displayMode={displayMode}
 			showAvatar={showAvatar}
 			showLastMessage={showLastMessage}>
-			{showLastMessage && displayMode === DISPLAY_MODE_EXPANDED ? (
+			{showLastMessage && displayMode === DisplayMode.Expanded ? (
 				<>
 					<View style={styles.titleContainer}>
 						{showAvatar ? (
diff --git a/app/presentation/RoomItem/Wrapper.tsx b/app/presentation/RoomItem/Wrapper.tsx
index cb4d6e1b..30c3283d 100644
--- a/app/presentation/RoomItem/Wrapper.tsx
+++ b/app/presentation/RoomItem/Wrapper.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 
 import { themes } from '../../constants/colors';
-import { DISPLAY_MODE_CONDENSED } from '../../constants/constantDisplayMode';
+import { DisplayMode } from '../../constants/constantDisplayMode';
 import IconOrAvatar from './IconOrAvatar';
 import styles from './styles';
 
@@ -25,7 +25,7 @@ interface IWrapper {
 
 const Wrapper = ({ accessibilityLabel, theme, children, displayMode, ...props }: IWrapper) => (
 	<View
-		style={[styles.container, displayMode === DISPLAY_MODE_CONDENSED && styles.containerCondensed]}
+		style={[styles.container, displayMode === DisplayMode.Condensed && styles.containerCondensed]}
 		accessibilityLabel={accessibilityLabel}>
 		<IconOrAvatar theme={theme} displayMode={displayMode} {...props} />
 		<View
@@ -34,7 +34,7 @@ const Wrapper = ({ accessibilityLabel, theme, children, displayMode, ...props }:
 				{
 					borderColor: themes[theme].separatorColor
 				},
-				displayMode === DISPLAY_MODE_CONDENSED && styles.condensedPaddingVertical
+				displayMode === DisplayMode.Condensed && styles.condensedPaddingVertical
 			]}>
 			{children}
 		</View>
diff --git a/app/reducers/sortPreferences.js b/app/reducers/sortPreferences.js
index 31b50185..4ad9e797 100644
--- a/app/reducers/sortPreferences.js
+++ b/app/reducers/sortPreferences.js
@@ -1,13 +1,13 @@
 import { SORT_PREFERENCES } from '../actions/actionsTypes';
-import { DISPLAY_MODE_EXPANDED } from '../constants/constantDisplayMode';
+import { DisplayMode, SortBy } from '../constants/constantDisplayMode';
 
 const initialState = {
-	sortBy: 'activity',
+	sortBy: SortBy.Activity,
 	groupByType: false,
 	showFavorites: false,
 	showUnread: false,
 	showAvatar: true,
-	displayMode: DISPLAY_MODE_EXPANDED
+	displayMode: DisplayMode.Expanded
 };
 
 export default (state = initialState, action) => {
diff --git a/app/views/DisplayPrefsView.js b/app/views/DisplayPrefsView.tsx
similarity index 76%
rename from app/views/DisplayPrefsView.js
rename to app/views/DisplayPrefsView.tsx
index 09da4edc..959682c4 100644
--- a/app/views/DisplayPrefsView.js
+++ b/app/views/DisplayPrefsView.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
 import { Switch } from 'react-native';
 import { RadioButton } from 'react-native-ui-lib';
+import { StackNavigationProp } from '@react-navigation/stack';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { setPreference } from '../actions/sortPreferences';
@@ -15,13 +15,30 @@ 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';
+import { DisplayMode, SortBy } from '../constants/constantDisplayMode';
+import { SettingsStackParamList } from '../stacks/types';
 
-const DisplayPrefsView = props => {
+interface IParam {
+	sortBy: SortBy;
+	groupByType: boolean;
+	showFavorites: boolean;
+	showUnread: boolean;
+	showAvatar: boolean;
+	displayMode: DisplayMode;
+}
+
+interface IDisplayPrefsView {
+	navigation: StackNavigationProp<SettingsStackParamList, 'DisplayPrefsView'>;
+	isMasterDetail: boolean;
+}
+
+const DisplayPrefsView = (props: IDisplayPrefsView): JSX.Element => {
 	const { theme } = useTheme();
 
-	const { sortBy, groupByType, showFavorites, showUnread, showAvatar, displayMode } = useSelector(state => state.sortPreferences);
-	const { isMasterDetail } = useSelector(state => state.app);
+	const { sortBy, groupByType, showFavorites, showUnread, showAvatar, displayMode } = useSelector(
+		(state: any) => state.sortPreferences
+	);
+	const { isMasterDetail } = useSelector((state: any) => state.app);
 	const dispatch = useDispatch();
 
 	useEffect(() => {
@@ -36,7 +53,7 @@ const DisplayPrefsView = props => {
 		}
 	}, []);
 
-	const setSortPreference = async param => {
+	const setSortPreference = async (param: Partial<IParam>) => {
 		try {
 			dispatch(setPreference(param));
 			await RocketChat.saveSortPreference(param);
@@ -47,12 +64,12 @@ const DisplayPrefsView = props => {
 
 	const sortByName = async () => {
 		logEvent(events.DP_SORT_CHANNELS_BY_NAME);
-		await setSortPreference({ sortBy: 'alphabetical' });
+		await setSortPreference({ sortBy: SortBy.Alphabetical });
 	};
 
 	const sortByActivity = async () => {
 		logEvent(events.DP_SORT_CHANNELS_BY_ACTIVITY);
-		await setSortPreference({ sortBy: 'activity' });
+		await setSortPreference({ sortBy: SortBy.Activity });
 	};
 
 	const toggleGroupByType = async () => {
@@ -77,23 +94,23 @@ const DisplayPrefsView = props => {
 
 	const displayExpanded = async () => {
 		logEvent(events.DP_DISPLAY_EXPANDED);
-		await setSortPreference({ displayMode: DISPLAY_MODE_EXPANDED });
+		await setSortPreference({ displayMode: DisplayMode.Expanded });
 	};
 
 	const displayCondensed = async () => {
 		logEvent(events.DP_DISPLAY_CONDENSED);
-		await setSortPreference({ displayMode: DISPLAY_MODE_CONDENSED });
+		await setSortPreference({ displayMode: DisplayMode.Condensed });
 	};
 
-	const renderCheckBox = value => (
+	const renderCheckBox = (value: boolean) => (
 		<List.Icon name={value ? 'checkbox-checked' : 'checkbox-unchecked'} color={value ? themes[theme].actionTintColor : null} />
 	);
 
-	const renderAvatarSwitch = value => (
+	const renderAvatarSwitch = (value: boolean) => (
 		<Switch value={value} onValueChange={() => toggleAvatar()} testID='display-pref-view-avatar-switch' />
 	);
 
-	const renderRadio = value => (
+	const renderRadio = (value: boolean) => (
 		<RadioButton
 			selected={!!value}
 			color={value ? themes[theme].actionTintColor : themes[theme].auxiliaryText}
@@ -111,7 +128,7 @@ const DisplayPrefsView = props => {
 						left={() => <List.Icon name='view-extended' />}
 						title='Expanded'
 						testID='display-pref-view-expanded'
-						right={() => renderRadio(displayMode === DISPLAY_MODE_EXPANDED)}
+						right={() => renderRadio(displayMode === DisplayMode.Expanded)}
 						onPress={displayExpanded}
 					/>
 					<List.Separator />
@@ -119,7 +136,7 @@ const DisplayPrefsView = props => {
 						left={() => <List.Icon name='view-medium' />}
 						title='Condensed'
 						testID='display-pref-view-condensed'
-						right={() => renderRadio(displayMode === DISPLAY_MODE_CONDENSED)}
+						right={() => renderRadio(displayMode === DisplayMode.Condensed)}
 						onPress={displayCondensed}
 					/>
 					<List.Separator />
@@ -139,7 +156,7 @@ const DisplayPrefsView = props => {
 						testID='display-pref-view-activity'
 						left={() => <List.Icon name='clock' />}
 						onPress={sortByActivity}
-						right={() => renderRadio(sortBy === 'activity')}
+						right={() => renderRadio(sortBy === SortBy.Activity)}
 					/>
 					<List.Separator />
 					<List.Item
@@ -147,7 +164,7 @@ const DisplayPrefsView = props => {
 						testID='display-pref-view-name'
 						left={() => <List.Icon name='sort-az' />}
 						onPress={sortByName}
-						right={() => renderRadio(sortBy === 'alphabetical')}
+						right={() => renderRadio(sortBy === SortBy.Alphabetical)}
 					/>
 					<List.Separator />
 				</List.Section>
@@ -184,9 +201,6 @@ const DisplayPrefsView = props => {
 	);
 };
 
-DisplayPrefsView.propTypes = {
-	navigation: PropTypes.object,
-	isMasterDetail: PropTypes.bool
-};
+DisplayPrefsView.propTypes = {};
 
 export default DisplayPrefsView;
diff --git a/app/views/RoomsListView/index.js b/app/views/RoomsListView/index.js
index 518e10c4..9dc3bca7 100644
--- a/app/views/RoomsListView/index.js
+++ b/app/views/RoomsListView/index.js
@@ -49,7 +49,7 @@ 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 { DisplayMode, SortBy } from '../../constants/constantDisplayMode';
 import styles from './styles';
 import ServerDropdown from './ServerDropdown';
 import ListHeader from './ListHeader';
@@ -453,7 +453,7 @@ class RoomsListView extends React.Component {
 
 		const defaultWhereClause = [Q.where('archived', false), Q.where('open', true)];
 
-		if (sortBy === 'alphabetical') {
+		if (sortBy === SortBy.Alphabetical) {
 			defaultWhereClause.push(Q.experimentalSortBy(`${this.useRealName ? 'fname' : 'name'}`, Q.asc));
 		} else {
 			defaultWhereClause.push(Q.experimentalSortBy('room_updated_at', Q.desc));
@@ -973,7 +973,7 @@ class RoomsListView extends React.Component {
 		const { loading, chats, search, searching } = this.state;
 		const { theme, refreshing, displayMode } = this.props;
 
-		const height = displayMode === DISPLAY_MODE_CONDENSED ? ROW_HEIGHT_CONDENSED : ROW_HEIGHT;
+		const height = displayMode === DisplayMode.Condensed ? ROW_HEIGHT_CONDENSED : ROW_HEIGHT;
 
 		if (loading) {
 			return <ActivityIndicator theme={theme} />;
diff --git a/storybook/stories/RoomItem.js b/storybook/stories/RoomItem.js
index 1538c118..e6ae40e7 100644
--- a/storybook/stories/RoomItem.js
+++ b/storybook/stories/RoomItem.js
@@ -7,7 +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 { DisplayMode } from '../../app/constants/constantDisplayMode';
 import { store } from './index';
 
 const baseUrl = 'https://open.rocket.chat';
@@ -32,7 +32,7 @@ const RoomItem = props => (
 		width={width}
 		theme={_theme}
 		showAvatar
-		displayMode={DISPLAY_MODE_EXPANDED}
+		displayMode={DisplayMode.Expanded}
 		{...updatedAt}
 		{...props}
 	/>
@@ -132,10 +132,10 @@ stories.add('Last Message', () => (
 
 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 showLastMessage alert tunread={[1]} lastMessage={lastMessage} displayMode={DisplayMode.Condensed} />
+		<RoomItem showLastMessage alert name='unread' unread={1000} displayMode={DisplayMode.Condensed} />
 
-		<RoomItem type='c' displayMode={DISPLAY_MODE_CONDENSED} autoJoin />
+		<RoomItem type='c' displayMode={DisplayMode.Condensed} autoJoin />
 	</>
 ));
 
@@ -146,11 +146,11 @@ stories.add('Condensed Room Item without Avatar', () => (
 			alert
 			tunread={[1]}
 			lastMessage={lastMessage}
-			displayMode={DISPLAY_MODE_CONDENSED}
+			displayMode={DisplayMode.Condensed}
 			showAvatar={false}
 		/>
-		<RoomItem type='p' displayMode={DISPLAY_MODE_CONDENSED} showAvatar={false} />
-		<RoomItem name={longText} autoJoin displayMode={DISPLAY_MODE_CONDENSED} showAvatar={false} />
+		<RoomItem type='p' displayMode={DisplayMode.Condensed} showAvatar={false} />
+		<RoomItem name={longText} autoJoin displayMode={DisplayMode.Condensed} showAvatar={false} />
 	</>
 ));
 
@@ -161,7 +161,7 @@ stories.add('Expanded Room Item without Avatar', () => (
 			alert
 			tunread={[1]}
 			lastMessage={lastMessage}
-			displayMode={DISPLAY_MODE_EXPANDED}
+			displayMode={DisplayMode.Expanded}
 			showAvatar={false}
 		/>
 		<RoomItem
@@ -170,7 +170,7 @@ stories.add('Expanded Room Item without Avatar', () => (
 			alert
 			tunread={[1]}
 			lastMessage={lastMessage}
-			displayMode={DISPLAY_MODE_EXPANDED}
+			displayMode={DisplayMode.Expanded}
 			showAvatar={false}
 		/>
 		<RoomItem
@@ -178,7 +178,7 @@ stories.add('Expanded Room Item without Avatar', () => (
 			showLastMessage
 			alert
 			lastMessage={lastMessage}
-			displayMode={DISPLAY_MODE_EXPANDED}
+			displayMode={DisplayMode.Expanded}
 			showAvatar={false}
 		/>
 	</>