From 04db33a61e07e569db9d1cfa6137f259b8dfe08d Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Mon, 24 Jan 2022 17:12:36 -0300
Subject: [PATCH] Merge 4.24.0 into master (#3648)

---
 .eslintrc.js                                  |   5 +-
 android/app/build.gradle                      |   2 +-
 .../networking/SSLPinningModule.java          |  47 ++---
 app/AppContainer.tsx                          |   2 +-
 .../{actionsTypes.js => actionsTypes.ts}      |   4 +-
 app/actions/activeUsers.js                    |   8 -
 app/actions/activeUsers.ts                    |  15 ++
 app/actions/selectedUsers.js                  |  28 ---
 app/actions/selectedUsers.ts                  |  43 +++++
 app/constants/constantDisplayMode.js          |   2 -
 app/constants/constantDisplayMode.ts          |   9 +
 app/containers/ActionSheet/Button.ts          |   3 +-
 app/containers/Avatar/Avatar.tsx              |   5 +-
 app/containers/Avatar/index.tsx               |  10 +-
 app/containers/Avatar/interfaces.ts           |  38 ++--
 app/containers/BackgroundContainer/index.tsx  |  10 +-
 app/containers/HeaderButton/Common.tsx        |  10 +-
 .../HeaderButton/HeaderButtonItem.tsx         |  16 +-
 app/containers/List/ListContainer.tsx         |   4 +-
 app/containers/List/ListHeader.tsx            |   6 +-
 app/containers/List/ListIcon.tsx              |  12 +-
 app/containers/List/ListInfo.tsx              |   6 +-
 app/containers/List/ListItem.tsx              |  41 ++---
 app/containers/List/ListSection.tsx           |   6 +-
 app/containers/List/ListSeparator.tsx         |   8 +-
 app/containers/Loading.tsx                    |   6 +-
 app/containers/MessageActions/Header.tsx      |  10 +-
 app/containers/MessageActions/index.tsx       |   4 +-
 .../MessageBox/CommandsPreview/Item.tsx       |   4 +-
 .../MessageBox/CommandsPreview/index.tsx      |   4 +-
 app/containers/MessageBox/index.tsx           |  29 ++-
 app/containers/Passcode/Base/Button.tsx       |  20 +--
 app/containers/RoomHeader/RoomHeader.tsx      |  16 +-
 app/containers/RoomHeader/index.tsx           |   7 +-
 app/containers/RoomTypeIcon.tsx               |  20 ++-
 app/containers/SafeAreaView.tsx               |  12 +-
 app/containers/SearchBox.tsx                  |  24 +--
 .../{SearchHeader.js => SearchHeader.tsx}     |  16 +-
 app/containers/StatusBar.tsx                  |   8 +-
 app/containers/TextInput.tsx                  |   2 +-
 app/containers/ThreadDetails.tsx              |  33 ++--
 app/containers/Toast.tsx                      |   6 +-
 app/containers/TwoFactor/index.tsx            |   8 +-
 app/containers/markdown/index.tsx             |   9 +-
 app/containers/message/Audio.tsx              |   2 +-
 app/containers/message/Reactions.tsx          |   2 +-
 app/containers/message/Reply.tsx              |  28 +--
 app/containers/message/Urls.tsx               |   6 +-
 app/containers/message/User.tsx               |  22 +--
 app/containers/message/Video.tsx              |  10 +-
 app/containers/message/index.tsx              | 100 +++++------
 app/containers/message/interfaces.ts          |   7 +-
 app/containers/message/utils.ts               |  16 +-
 app/definitions/IAttachment.ts                |  15 ++
 app/definitions/ICommand.ts                   |   6 +
 app/definitions/ICustomEmoji.ts               |  10 ++
 app/definitions/IFrequentlyUsedEmoji.ts       |  10 ++
 app/definitions/ILoggedUser.ts                |  18 ++
 app/definitions/IMention.ts                   |   6 +
 app/definitions/IMessage.ts                   |  96 +++++++++-
 app/definitions/INotification.ts              |  13 ++
 app/definitions/IPermission.ts                |   9 +
 app/definitions/IReaction.ts                  |   5 +
 app/definitions/IRocketChatRecord.ts          |   4 -
 app/definitions/IRole.ts                      |   8 +
 app/definitions/IRoom.ts                      |  44 ++---
 app/definitions/IServedBy.ts                  |   5 +
 app/definitions/IServer.ts                    |   8 +-
 app/definitions/IServerHistory.ts             |  10 ++
 app/definitions/ISettings.ts                  |  12 ++
 app/definitions/ISlashCommand.ts              |  12 ++
 app/definitions/ISubscription.ts              |  91 ++++++++++
 app/definitions/ITheme.ts                     |   8 +
 app/definitions/IThread.ts                    |  78 +++++++++
 app/definitions/IThreadMessage.ts             |  44 +++++
 app/definitions/IUpload.ts                    |  16 ++
 app/definitions/IUrl.ts                       |   6 +
 app/definitions/IUser.ts                      |  10 ++
 app/definitions/index.ts                      |  19 ++
 app/{ => definitions}/navigationTypes.ts      |  23 ++-
 app/definitions/redux/index.ts                |  31 ++++
 app/dimensions.tsx                            |   7 +-
 app/externalModules.d.ts                      |   1 +
 app/i18n/locales/en.json                      |   2 +
 app/index.tsx                                 |  11 +-
 app/lib/rocketchat.js                         |  14 +-
 ...{userPreferences.js => userPreferences.ts} |  15 +-
 app/notifications/push/index.js               |  50 ------
 app/notifications/push/index.ts               |  58 ++++++
 app/notifications/push/push.android.js        |  32 ----
 .../push/{push.ios.js => push.ios.ts}         |  54 +++---
 app/notifications/push/push.ts                |  36 ++++
 app/presentation/RoomItem/Actions.tsx         |   6 +-
 app/presentation/RoomItem/IconOrAvatar.js     |   6 +-
 app/presentation/RoomItem/RoomItem.tsx        |   4 +-
 app/presentation/RoomItem/Wrapper.tsx         |   6 +-
 app/presentation/ServerItem/index.tsx         |  16 +-
 app/presentation/TextInput.tsx                |   5 +-
 app/presentation/UnreadBadge/index.tsx        |  20 +--
 app/reducers/activeUsers.js                   |  15 --
 app/reducers/activeUsers.test.ts              |  16 ++
 app/reducers/activeUsers.ts                   |  26 +++
 app/reducers/mockedStore.ts                   |   7 +
 app/reducers/selectedUsers.test.ts            |  36 ++++
 .../{selectedUsers.js => selectedUsers.ts}    |  19 +-
 app/reducers/sortPreferences.js               |   6 +-
 app/sagas/room.js                             |   2 +-
 app/share.tsx                                 |  10 +-
 .../MasterDetailStack/ModalContainer.tsx      |  28 ++-
 app/stacks/MasterDetailStack/index.tsx        |  16 +-
 app/stacks/MasterDetailStack/types.ts         |  34 ++--
 app/stacks/types.ts                           |  43 ++---
 app/theme.tsx                                 |  15 +-
 app/utils/{appGroup.js => appGroup.ts}        |   2 +-
 app/utils/{avatar.js => avatar.ts}            |   8 +-
 app/utils/base64-js/{index.js => index.ts}    |  19 +-
 app/utils/debounce.js                         |  20 ---
 app/utils/debounce.ts                         |  22 +++
 app/utils/{deviceInfo.js => deviceInfo.ts}    |   2 +-
 app/utils/{events.js => events.ts}            |  22 ++-
 app/utils/{fetch.js => fetch.ts}              |  14 +-
 .../fileUpload/{index.ios.js => index.ios.ts} |  15 +-
 .../fileUpload/{index.android.js => index.ts} |   6 +-
 app/utils/fileUpload/interfaces.ts            |   7 +
 app/utils/{goRoom.js => goRoom.ts}            |  33 +++-
 app/utils/info.js                             |  25 ---
 app/utils/info.ts                             |  41 +++++
 app/utils/{isReadOnly.js => isReadOnly.ts}    |  11 +-
 .../{isValidEmail.js => isValidEmail.ts}      |   2 +-
 ...{layoutAnimation.js => layoutAnimation.ts} |   0
 ...thentication.js => localAuthentication.ts} |  45 +++--
 app/utils/log/{events.js => events.ts}        |   0
 app/utils/log/{index.js => index.ts}          |  24 +--
 app/utils/{media.js => media.ts}              |  13 +-
 .../{messageTypes.js => messageTypes.ts}      |   8 +
 app/utils/{moment.js => moment.ts}            |   4 +-
 .../{animations.js => animations.ts}          |  14 +-
 .../{conditional.js => conditional.ts}        |   6 +-
 app/utils/{openLink.js => openLink.ts}        |   9 +-
 app/utils/{random.js => random.ts}            |   2 +-
 app/utils/{review.js => review.ts}            |   4 +-
 app/utils/room.js                             |  53 ------
 app/utils/room.ts                             |  65 +++++++
 app/utils/{server.js => server.ts}            |   2 +-
 .../shortnameToUnicode/{ascii.js => ascii.ts} |   2 +-
 .../{emojis.js => emojis.ts}                  |   2 +-
 .../shortnameToUnicode/{index.js => index.ts} |   8 +-
 app/utils/{sslPinning.js => sslPinning.ts}    |  22 ++-
 app/utils/{theme.js => theme.ts}              |  16 +-
 app/utils/throttle.js                         |  26 ---
 app/utils/{touch.js => touch.tsx}             |  27 +--
 app/utils/{twoFactor.js => twoFactor.ts}      |   9 +-
 app/utils/{url.js => url.ts}                  |   4 +-
 app/views/AddExistingChannelView.tsx          |  14 +-
 app/views/AdminPanelView/index.tsx            |   3 +-
 app/views/AttachmentView.tsx                  |   6 +-
 app/views/AutoTranslateView/index.tsx         |   8 +-
 .../CreateDiscussionView/SelectChannel.tsx    |   2 -
 .../CreateDiscussionView/SelectUsers.tsx      |   5 +-
 app/views/CreateDiscussionView/interfaces.ts  |   3 +-
 app/views/DefaultBrowserView.tsx              |   4 +-
 app/views/DirectoryView/index.tsx             |   6 +-
 ...splayPrefsView.js => DisplayPrefsView.tsx} |  56 +++---
 app/views/E2EEncryptionSecurityView.tsx       |   4 -
 app/views/InviteUsersView/index.tsx           |   4 +-
 app/views/LanguageView/index.tsx              |   2 +-
 app/views/LegalView.tsx                       |   4 +-
 app/views/MessagesView/index.tsx              |  16 +-
 app/views/ModalBlockView.tsx                  |  19 +-
 app/views/NewServerView/ServerInput/Item.tsx  |   6 +-
 app/views/NewServerView/ServerInput/index.tsx |   6 +-
 app/views/NewServerView/index.tsx             |  20 +--
 app/views/PickerView.tsx                      |   2 +-
 app/views/ProfileView/index.tsx               |   1 -
 app/views/ProfileView/interfaces.ts           |   4 +-
 app/views/RoomInfoView/Direct.js              |   4 +-
 app/views/RoomInfoView/index.js               |  27 ++-
 app/views/RoomMembersView/index.js            |   1 -
 app/views/RoomsListView/index.js              |   6 +-
 app/views/ScreenLockConfigView.tsx            |  20 +--
 app/views/SearchMessagesView/index.tsx        |  12 +-
 app/views/SelectListView.tsx                  |  46 ++---
 app/views/SelectServerView.tsx                |   9 +-
 app/views/SelectedUsersView.tsx               |  92 ++++------
 app/views/SettingsView/index.tsx              |   8 +-
 app/views/ShareListView/index.tsx             |  15 +-
 app/views/ShareView/Header.tsx                |   8 +-
 app/views/ShareView/index.tsx                 |  16 +-
 app/views/SidebarView/SidebarItem.tsx         |   4 +-
 app/views/SidebarView/index.tsx               |  36 ++--
 app/views/StatusView.tsx                      |  10 +-
 app/views/ThemeView.tsx                       |  22 +--
 .../{DropdownItem.js => DropdownItem.tsx}     |  23 ++-
 ...wnItemFilter.js => DropdownItemFilter.tsx} |  16 +-
 ...wnItemHeader.js => DropdownItemHeader.tsx} |  19 +-
 .../Dropdown/{index.js => index.tsx}          |  41 ++---
 .../ThreadMessagesView/{Item.js => Item.tsx}  |  48 +++--
 app/views/ThreadMessagesView/filters.js       |   5 -
 app/views/ThreadMessagesView/filters.ts       |   5 +
 .../{index.js => index.tsx}                   | 165 ++++++++++++------
 .../{styles.js => styles.ts}                  |   2 +-
 app/views/UserPreferencesView/index.tsx       |  19 +-
 app/views/WorkspaceView/index.tsx             |   4 +-
 ios/Podfile.lock                              |   8 +-
 ios/RocketChatRN.xcodeproj/project.pbxproj    |   4 +-
 ios/RocketChatRN/Info.plist                   |   2 +-
 ios/ShareRocketChatRN/Info.plist              |   2 +-
 package.json                                  |   8 +-
 ...h => react-native-device-info+8.4.8.patch} |   2 +-
 storybook/stories/RoomItem.js                 |  22 +--
 yarn.lock                                     |  74 +++++++-
 211 files changed, 2254 insertions(+), 1364 deletions(-)
 rename app/actions/{actionsTypes.js => actionsTypes.ts} (96%)
 delete mode 100644 app/actions/activeUsers.js
 create mode 100644 app/actions/activeUsers.ts
 delete mode 100644 app/actions/selectedUsers.js
 create mode 100644 app/actions/selectedUsers.ts
 delete mode 100644 app/constants/constantDisplayMode.js
 create mode 100644 app/constants/constantDisplayMode.ts
 rename app/containers/{SearchHeader.js => SearchHeader.tsx} (80%)
 create mode 100644 app/definitions/ICommand.ts
 create mode 100644 app/definitions/ICustomEmoji.ts
 create mode 100644 app/definitions/IFrequentlyUsedEmoji.ts
 create mode 100644 app/definitions/ILoggedUser.ts
 create mode 100644 app/definitions/IMention.ts
 create mode 100644 app/definitions/INotification.ts
 create mode 100644 app/definitions/IPermission.ts
 create mode 100644 app/definitions/IReaction.ts
 delete mode 100644 app/definitions/IRocketChatRecord.ts
 create mode 100644 app/definitions/IRole.ts
 create mode 100644 app/definitions/IServedBy.ts
 create mode 100644 app/definitions/IServerHistory.ts
 create mode 100644 app/definitions/ISettings.ts
 create mode 100644 app/definitions/ISlashCommand.ts
 create mode 100644 app/definitions/ISubscription.ts
 create mode 100644 app/definitions/ITheme.ts
 create mode 100644 app/definitions/IThread.ts
 create mode 100644 app/definitions/IThreadMessage.ts
 create mode 100644 app/definitions/IUpload.ts
 create mode 100644 app/definitions/IUrl.ts
 create mode 100644 app/definitions/IUser.ts
 create mode 100644 app/definitions/index.ts
 rename app/{ => definitions}/navigationTypes.ts (63%)
 create mode 100644 app/definitions/redux/index.ts
 rename app/lib/{userPreferences.js => userPreferences.ts} (75%)
 delete mode 100644 app/notifications/push/index.js
 create mode 100644 app/notifications/push/index.ts
 delete mode 100644 app/notifications/push/push.android.js
 rename app/notifications/push/{push.ios.js => push.ios.ts} (52%)
 create mode 100644 app/notifications/push/push.ts
 delete mode 100644 app/reducers/activeUsers.js
 create mode 100644 app/reducers/activeUsers.test.ts
 create mode 100644 app/reducers/activeUsers.ts
 create mode 100644 app/reducers/mockedStore.ts
 create mode 100644 app/reducers/selectedUsers.test.ts
 rename app/reducers/{selectedUsers.js => selectedUsers.ts} (55%)
 rename app/utils/{appGroup.js => appGroup.ts} (83%)
 rename app/utils/{avatar.js => avatar.ts} (72%)
 rename app/utils/base64-js/{index.js => index.ts} (87%)
 delete mode 100644 app/utils/debounce.js
 create mode 100644 app/utils/debounce.ts
 rename app/utils/{deviceInfo.js => deviceInfo.ts} (92%)
 rename app/utils/{events.js => events.ts} (53%)
 rename app/utils/{fetch.js => fetch.ts} (75%)
 rename app/utils/fileUpload/{index.ios.js => index.ios.ts} (65%)
 rename app/utils/fileUpload/{index.android.js => index.ts} (64%)
 create mode 100644 app/utils/fileUpload/interfaces.ts
 rename app/utils/{goRoom.js => goRoom.ts} (58%)
 delete mode 100644 app/utils/info.js
 create mode 100644 app/utils/info.ts
 rename app/utils/{isReadOnly.js => isReadOnly.ts} (59%)
 rename app/utils/{isValidEmail.js => isValidEmail.ts} (78%)
 rename app/utils/{layoutAnimation.js => layoutAnimation.ts} (100%)
 rename app/utils/{localAuthentication.js => localAuthentication.ts} (73%)
 rename app/utils/log/{events.js => events.ts} (100%)
 rename app/utils/log/{index.js => index.ts} (66%)
 rename app/utils/{media.js => media.ts} (65%)
 rename app/utils/{messageTypes.js => messageTypes.ts} (88%)
 rename app/utils/{moment.js => moment.ts} (57%)
 rename app/utils/navigation/{animations.js => animations.ts} (71%)
 rename app/utils/navigation/{conditional.js => conditional.ts} (87%)
 rename app/utils/{openLink.js => openLink.ts} (83%)
 rename app/utils/{random.js => random.ts} (80%)
 rename app/utils/{review.js => review.ts} (96%)
 delete mode 100644 app/utils/room.js
 create mode 100644 app/utils/room.ts
 rename app/utils/{server.js => server.ts} (84%)
 rename app/utils/shortnameToUnicode/{ascii.js => ascii.ts} (98%)
 rename app/utils/shortnameToUnicode/{emojis.js => emojis.ts} (99%)
 rename app/utils/shortnameToUnicode/{index.js => index.ts} (80%)
 rename app/utils/{sslPinning.js => sslPinning.ts} (75%)
 rename app/utils/{theme.js => theme.ts} (71%)
 delete mode 100644 app/utils/throttle.js
 rename app/utils/{touch.js => touch.tsx} (55%)
 rename app/utils/{twoFactor.js => twoFactor.ts} (68%)
 rename app/utils/{url.js => url.ts} (77%)
 rename app/views/{DisplayPrefsView.js => DisplayPrefsView.tsx} (76%)
 rename app/views/ThreadMessagesView/Dropdown/{DropdownItem.js => DropdownItem.tsx} (65%)
 rename app/views/ThreadMessagesView/Dropdown/{DropdownItemFilter.js => DropdownItemFilter.tsx} (51%)
 rename app/views/ThreadMessagesView/Dropdown/{DropdownItemHeader.js => DropdownItemHeader.tsx} (61%)
 rename app/views/ThreadMessagesView/Dropdown/{index.js => index.tsx} (67%)
 rename app/views/ThreadMessagesView/{Item.js => Item.tsx} (72%)
 delete mode 100644 app/views/ThreadMessagesView/filters.js
 create mode 100644 app/views/ThreadMessagesView/filters.ts
 rename app/views/ThreadMessagesView/{index.js => index.tsx} (74%)
 rename app/views/ThreadMessagesView/{styles.js => styles.ts} (93%)
 rename patches/{react-native-device-info+8.1.3.patch => react-native-device-info+8.4.8.patch} (98%)

diff --git a/.eslintrc.js b/.eslintrc.js
index 085f3a89d..952621fbf 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -17,14 +17,15 @@ module.exports = {
 			legacyDecorators: true
 		}
 	},
-	plugins: ['react', 'jsx-a11y', 'import', 'react-native', '@babel'],
+	plugins: ['react', 'jsx-a11y', 'import', 'react-native', '@babel', 'jest'],
 	env: {
 		browser: true,
 		commonjs: true,
 		es6: true,
 		node: true,
 		jquery: true,
-		mocha: true
+		mocha: true,
+		'jest/globals': true
 	},
 	rules: {
 		'import/extensions': [
diff --git a/android/app/build.gradle b/android/app/build.gradle
index 524eebd82..c95a2f79b 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -144,7 +144,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode VERSIONCODE as Integer
-        versionName "4.23.0"
+        versionName "4.24.0"
         vectorDrawables.useSupportLibrary = true
         if (!isFoss) {
             manifestPlaceholders = [BugsnagAPIKey: BugsnagAPIKey as String]
diff --git a/android/app/src/main/java/chat/rocket/reactnative/networking/SSLPinningModule.java b/android/app/src/main/java/chat/rocket/reactnative/networking/SSLPinningModule.java
index 6a690a180..aad807859 100644
--- a/android/app/src/main/java/chat/rocket/reactnative/networking/SSLPinningModule.java
+++ b/android/app/src/main/java/chat/rocket/reactnative/networking/SSLPinningModule.java
@@ -11,9 +11,12 @@ import com.facebook.react.bridge.ReactMethod;
 import com.facebook.react.bridge.Promise;
 
 import java.net.Socket;
+import java.security.KeyStore;
 import java.security.Principal;
 import java.security.cert.CertificateException;
 import java.security.cert.X509Certificate;
+
+import javax.net.ssl.TrustManagerFactory;
 import javax.net.ssl.X509ExtendedKeyManager;
 import java.security.PrivateKey;
 import javax.net.ssl.SSLContext;
@@ -21,11 +24,12 @@ import javax.net.ssl.X509TrustManager;
 import javax.net.ssl.SSLSocketFactory;
 import javax.net.ssl.TrustManager;
 import okhttp3.OkHttpClient;
-import java.lang.InterruptedException;
 import android.app.Activity;
 import javax.net.ssl.KeyManager;
 import android.security.KeyChain;
 import android.security.KeyChainAliasCallback;
+
+import java.util.Arrays;
 import java.util.concurrent.TimeUnit;
 
 import com.RNFetchBlob.RNFetchBlob;
@@ -52,8 +56,9 @@ public class SSLPinningModule extends ReactContextBaseJavaModule implements KeyC
         public void apply(OkHttpClient.Builder builder) {
             if (alias != null) {
                 SSLSocketFactory sslSocketFactory = getSSLFactory(alias);
+                X509TrustManager trustManager = getTrustManagerFactory();
                 if (sslSocketFactory != null) {
-                    builder.sslSocketFactory(sslSocketFactory);
+                    builder.sslSocketFactory(sslSocketFactory, trustManager);
                 }
             }
         }
@@ -68,8 +73,9 @@ public class SSLPinningModule extends ReactContextBaseJavaModule implements KeyC
 
         if (alias != null) {
             SSLSocketFactory sslSocketFactory = getSSLFactory(alias);
+            X509TrustManager trustManager = getTrustManagerFactory();
             if (sslSocketFactory != null) {
-                builder.sslSocketFactory(sslSocketFactory);
+                builder.sslSocketFactory(sslSocketFactory, trustManager);
             }
         }
 
@@ -162,25 +168,9 @@ public class SSLPinningModule extends ReactContextBaseJavaModule implements KeyC
                 }
             };
 
-            final TrustManager[] trustAllCerts = new TrustManager[] {
-                    new X509TrustManager() {
-                        @Override
-                        public void checkClientTrusted(java.security.cert.X509Certificate[] chain, String authType) throws CertificateException {
-                        }
-
-                        @Override
-                        public void checkServerTrusted(java.security.cert.X509Certificate[] chain, String authType) throws CertificateException {
-                        }
-
-                        @Override
-                        public java.security.cert.X509Certificate[] getAcceptedIssuers() {
-                            return certChain;
-                        }
-                    }
-            };
-
+            final X509TrustManager trustManager = getTrustManagerFactory();
             final SSLContext sslContext = SSLContext.getInstance("TLS");
-            sslContext.init(new KeyManager[]{keyManager}, trustAllCerts, new java.security.SecureRandom());
+            sslContext.init(new KeyManager[]{keyManager}, new TrustManager[]{trustManager}, new java.security.SecureRandom());
             SSLContext.setDefault(sslContext);
 
             final SSLSocketFactory sslSocketFactory = sslContext.getSocketFactory();
@@ -190,4 +180,19 @@ public class SSLPinningModule extends ReactContextBaseJavaModule implements KeyC
             return null;
         }
     }
+
+    public static X509TrustManager getTrustManagerFactory() {
+        try {
+            TrustManagerFactory trustManagerFactory = TrustManagerFactory.getInstance(TrustManagerFactory.getDefaultAlgorithm());
+            trustManagerFactory.init((KeyStore) null);
+            TrustManager[] trustManagers = trustManagerFactory.getTrustManagers();
+            if (trustManagers.length != 1 || !(trustManagers[0] instanceof X509TrustManager)) {
+                throw new IllegalStateException("Unexpected default trust managers:" + Arrays.toString(trustManagers));
+            }
+            final X509TrustManager trustManager = (X509TrustManager) trustManagers[0];
+            return trustManager;
+        } catch (Exception e) {
+            return null;
+        }
+    }
 }
diff --git a/app/AppContainer.tsx b/app/AppContainer.tsx
index b73aaf8e3..441220fec 100644
--- a/app/AppContainer.tsx
+++ b/app/AppContainer.tsx
@@ -3,7 +3,7 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import { connect } from 'react-redux';
 
-import { SetUsernameStackParamList, StackParamList } from './navigationTypes';
+import { SetUsernameStackParamList, StackParamList } from './definitions/navigationTypes';
 import Navigation from './lib/Navigation';
 import { defaultHeader, getActiveRouteName, navigationTheme } from './utils/navigation';
 import { ROOT_INSIDE, ROOT_LOADING, ROOT_OUTSIDE, ROOT_SET_USERNAME } from './actions/app';
diff --git a/app/actions/actionsTypes.js b/app/actions/actionsTypes.ts
similarity index 96%
rename from app/actions/actionsTypes.js
rename to app/actions/actionsTypes.ts
index 852ce83ea..ad2d1718d 100644
--- a/app/actions/actionsTypes.js
+++ b/app/actions/actionsTypes.ts
@@ -2,8 +2,8 @@ const REQUEST = 'REQUEST';
 const SUCCESS = 'SUCCESS';
 const FAILURE = 'FAILURE';
 const defaultTypes = [REQUEST, SUCCESS, FAILURE];
-function createRequestTypes(base, types = defaultTypes) {
-	const res = {};
+function createRequestTypes(base = {}, types = defaultTypes): Record<any, any> {
+	const res: Record<any, any> = {};
 	types.forEach(type => (res[type] = `${base}_${type}`));
 	return res;
 }
diff --git a/app/actions/activeUsers.js b/app/actions/activeUsers.js
deleted file mode 100644
index fc359602c..000000000
--- a/app/actions/activeUsers.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { SET_ACTIVE_USERS } from './actionsTypes';
-
-export function setActiveUsers(activeUsers) {
-	return {
-		type: SET_ACTIVE_USERS,
-		activeUsers
-	};
-}
diff --git a/app/actions/activeUsers.ts b/app/actions/activeUsers.ts
new file mode 100644
index 000000000..737ae86b3
--- /dev/null
+++ b/app/actions/activeUsers.ts
@@ -0,0 +1,15 @@
+import { Action } from 'redux';
+
+import { IActiveUsers } from '../reducers/activeUsers';
+import { SET_ACTIVE_USERS } from './actionsTypes';
+
+export interface ISetActiveUsers extends Action {
+	activeUsers: IActiveUsers;
+}
+
+export type TActionActiveUsers = ISetActiveUsers;
+
+export const setActiveUsers = (activeUsers: IActiveUsers): ISetActiveUsers => ({
+	type: SET_ACTIVE_USERS,
+	activeUsers
+});
diff --git a/app/actions/selectedUsers.js b/app/actions/selectedUsers.js
deleted file mode 100644
index 65fbb0015..000000000
--- a/app/actions/selectedUsers.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as types from './actionsTypes';
-
-export function addUser(user) {
-	return {
-		type: types.SELECTED_USERS.ADD_USER,
-		user
-	};
-}
-
-export function removeUser(user) {
-	return {
-		type: types.SELECTED_USERS.REMOVE_USER,
-		user
-	};
-}
-
-export function reset() {
-	return {
-		type: types.SELECTED_USERS.RESET
-	};
-}
-
-export function setLoading(loading) {
-	return {
-		type: types.SELECTED_USERS.SET_LOADING,
-		loading
-	};
-}
diff --git a/app/actions/selectedUsers.ts b/app/actions/selectedUsers.ts
new file mode 100644
index 000000000..6924a5696
--- /dev/null
+++ b/app/actions/selectedUsers.ts
@@ -0,0 +1,43 @@
+import { Action } from 'redux';
+
+import { ISelectedUser } from '../reducers/selectedUsers';
+import * as types from './actionsTypes';
+
+type TUser = {
+	user: ISelectedUser;
+};
+
+type TAction = Action & TUser;
+
+interface ISetLoading extends Action {
+	loading: boolean;
+}
+
+export type TActionSelectedUsers = TAction & ISetLoading;
+
+export function addUser(user: ISelectedUser): TAction {
+	return {
+		type: types.SELECTED_USERS.ADD_USER,
+		user
+	};
+}
+
+export function removeUser(user: ISelectedUser): TAction {
+	return {
+		type: types.SELECTED_USERS.REMOVE_USER,
+		user
+	};
+}
+
+export function reset(): Action {
+	return {
+		type: types.SELECTED_USERS.RESET
+	};
+}
+
+export function setLoading(loading: boolean): ISetLoading {
+	return {
+		type: types.SELECTED_USERS.SET_LOADING,
+		loading
+	};
+}
diff --git a/app/constants/constantDisplayMode.js b/app/constants/constantDisplayMode.js
deleted file mode 100644
index d7d7e1d53..000000000
--- 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 000000000..ecb6bd4b7
--- /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/containers/ActionSheet/Button.ts b/app/containers/ActionSheet/Button.ts
index 5deb0f692..186cc6851 100644
--- a/app/containers/ActionSheet/Button.ts
+++ b/app/containers/ActionSheet/Button.ts
@@ -1,7 +1,8 @@
+import React from 'react';
 import { TouchableOpacity } from 'react-native';
 
 import { isAndroid } from '../../utils/deviceInfo';
 import Touch from '../../utils/touch';
 
 // Taken from https://github.com/rgommezz/react-native-scroll-bottom-sheet#touchables
-export const Button = isAndroid ? Touch : TouchableOpacity;
+export const Button: typeof React.Component = isAndroid ? Touch : TouchableOpacity;
diff --git a/app/containers/Avatar/Avatar.tsx b/app/containers/Avatar/Avatar.tsx
index 286bcc060..0ad2634f2 100644
--- a/app/containers/Avatar/Avatar.tsx
+++ b/app/containers/Avatar/Avatar.tsx
@@ -5,6 +5,7 @@ import Touchable from 'react-native-platform-touchable';
 import { settings as RocketChatSettings } from '@rocket.chat/sdk';
 
 import { avatarURL } from '../../utils/avatar';
+import { SubscriptionType } from '../../definitions/ISubscription';
 import Emoji from '../markdown/Emoji';
 import { IAvatar } from './interfaces';
 
@@ -27,8 +28,8 @@ const Avatar = React.memo(
 		text,
 		size = 25,
 		borderRadius = 4,
-		type = 'd'
-	}: Partial<IAvatar>) => {
+		type = SubscriptionType.DIRECT
+	}: IAvatar) => {
 		if ((!text && !avatar && !emoji && !rid) || !server) {
 			return null;
 		}
diff --git a/app/containers/Avatar/index.tsx b/app/containers/Avatar/index.tsx
index 9c95db839..2ce066479 100644
--- a/app/containers/Avatar/index.tsx
+++ b/app/containers/Avatar/index.tsx
@@ -7,17 +7,17 @@ import { getUserSelector } from '../../selectors/login';
 import Avatar from './Avatar';
 import { IAvatar } from './interfaces';
 
-class AvatarContainer extends React.Component<Partial<IAvatar>, any> {
+class AvatarContainer extends React.Component<IAvatar, any> {
 	private mounted: boolean;
 
-	private subscription!: any;
+	private subscription: any;
 
 	static defaultProps = {
 		text: '',
 		type: 'd'
 	};
 
-	constructor(props: Partial<IAvatar>) {
+	constructor(props: IAvatar) {
 		super(props);
 		this.mounted = false;
 		this.state = { avatarETag: '' };
@@ -55,7 +55,7 @@ class AvatarContainer extends React.Component<Partial<IAvatar>, any> {
 		try {
 			if (this.isDirect) {
 				const { text } = this.props;
-				const [user] = await usersCollection.query(Q.where('username', text!)).fetch();
+				const [user] = await usersCollection.query(Q.where('username', text)).fetch();
 				record = user;
 			} else {
 				const { rid } = this.props;
@@ -82,7 +82,7 @@ class AvatarContainer extends React.Component<Partial<IAvatar>, any> {
 	render() {
 		const { avatarETag } = this.state;
 		const { serverVersion } = this.props;
-		return <Avatar avatarETag={avatarETag} serverVersion={serverVersion} {...this.props} />;
+		return <Avatar {...this.props} avatarETag={avatarETag} serverVersion={serverVersion} />;
 	}
 }
 
diff --git a/app/containers/Avatar/interfaces.ts b/app/containers/Avatar/interfaces.ts
index ed7fd3b9e..78152e522 100644
--- a/app/containers/Avatar/interfaces.ts
+++ b/app/containers/Avatar/interfaces.ts
@@ -1,23 +1,23 @@
 export interface IAvatar {
-	server: string;
-	style: any;
+	server?: string;
+	style?: any;
 	text: string;
-	avatar: string;
-	emoji: string;
-	size: number;
-	borderRadius: number;
-	type: string;
-	children: JSX.Element;
-	user: {
-		id: string;
-		token: string;
+	avatar?: string;
+	emoji?: string;
+	size?: number;
+	borderRadius?: number;
+	type?: string;
+	children?: JSX.Element;
+	user?: {
+		id?: string;
+		token?: string;
 	};
-	theme: string;
-	onPress(): void;
-	getCustomEmoji(): any;
-	avatarETag: string;
-	isStatic: boolean | string;
-	rid: string;
-	blockUnauthenticatedAccess: boolean;
-	serverVersion: string;
+	theme?: string;
+	onPress?: () => void;
+	getCustomEmoji?: () => any;
+	avatarETag?: string;
+	isStatic?: boolean | string;
+	rid?: string;
+	blockUnauthenticatedAccess?: boolean;
+	serverVersion?: string;
 }
diff --git a/app/containers/BackgroundContainer/index.tsx b/app/containers/BackgroundContainer/index.tsx
index fbe5d3077..fc26fe0ab 100644
--- a/app/containers/BackgroundContainer/index.tsx
+++ b/app/containers/BackgroundContainer/index.tsx
@@ -6,9 +6,9 @@ import sharedStyles from '../../views/Styles';
 import { themes } from '../../constants/colors';
 
 interface IBackgroundContainer {
-	text: string;
-	theme: string;
-	loading: boolean;
+	text?: string;
+	theme?: string;
+	loading?: boolean;
 }
 
 const styles = StyleSheet.create({
@@ -35,8 +35,8 @@ const styles = StyleSheet.create({
 const BackgroundContainer = ({ theme, text, loading }: IBackgroundContainer) => (
 	<View style={styles.container}>
 		<ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />
-		{text ? <Text style={[styles.text, { color: themes[theme].auxiliaryTintColor }]}>{text}</Text> : null}
-		{loading ? <ActivityIndicator style={styles.text} color={themes[theme].auxiliaryTintColor} /> : null}
+		{text ? <Text style={[styles.text, { color: themes[theme!].auxiliaryTintColor }]}>{text}</Text> : null}
+		{loading ? <ActivityIndicator style={styles.text} color={themes[theme!].auxiliaryTintColor} /> : null}
 	</View>
 );
 
diff --git a/app/containers/HeaderButton/Common.tsx b/app/containers/HeaderButton/Common.tsx
index b40543ddb..0877fb4c6 100644
--- a/app/containers/HeaderButton/Common.tsx
+++ b/app/containers/HeaderButton/Common.tsx
@@ -29,9 +29,9 @@ export const CloseModal = React.memo(
 export const CancelModal = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => (
 	<Container left>
 		{isIOS ? (
-			<Item title={I18n.t('Cancel')} onPress={onPress} testID={testID} />
+			<Item title={I18n.t('Cancel')} onPress={onPress!} testID={testID} />
 		) : (
-			<Item iconName='close' onPress={onPress} testID={testID} />
+			<Item iconName='close' onPress={onPress!} testID={testID} />
 		)}
 	</Container>
 ));
@@ -39,19 +39,19 @@ export const CancelModal = React.memo(({ onPress, testID }: Partial<IHeaderButto
 // Right
 export const More = React.memo(({ onPress, testID }: Partial<IHeaderButtonCommon>) => (
 	<Container>
-		<Item iconName='kebab' onPress={onPress} testID={testID} />
+		<Item iconName='kebab' onPress={onPress!} testID={testID} />
 	</Container>
 ));
 
 export const Download = React.memo(({ onPress, testID, ...props }: Partial<IHeaderButtonCommon>) => (
 	<Container>
-		<Item iconName='download' onPress={onPress} testID={testID} {...props} />
+		<Item iconName='download' onPress={onPress!} testID={testID} {...props} />
 	</Container>
 ));
 
 export const Preferences = React.memo(({ onPress, testID, ...props }: Partial<IHeaderButtonCommon>) => (
 	<Container>
-		<Item iconName='settings' onPress={onPress} testID={testID} {...props} />
+		<Item iconName='settings' onPress={onPress!} testID={testID} {...props} />
 	</Container>
 ));
 
diff --git a/app/containers/HeaderButton/HeaderButtonItem.tsx b/app/containers/HeaderButton/HeaderButtonItem.tsx
index b350232d0..08f6b5a3a 100644
--- a/app/containers/HeaderButton/HeaderButtonItem.tsx
+++ b/app/containers/HeaderButton/HeaderButtonItem.tsx
@@ -8,12 +8,12 @@ import { themes } from '../../constants/colors';
 import sharedStyles from '../../views/Styles';
 
 interface IHeaderButtonItem {
-	title: string;
-	iconName: string;
-	onPress(): void;
-	testID: string;
-	theme: string;
-	badge(): void;
+	title?: string;
+	iconName?: string;
+	onPress: <T>(arg: T) => void;
+	testID?: string;
+	theme?: string;
+	badge?(): void;
 }
 
 export const BUTTON_HIT_SLOP = {
@@ -44,9 +44,9 @@ const Item = ({ title, iconName, onPress, testID, theme, badge }: IHeaderButtonI
 	<Touchable onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} style={styles.container}>
 		<>
 			{iconName ? (
-				<CustomIcon name={iconName} size={24} color={themes[theme].headerTintColor} />
+				<CustomIcon name={iconName} size={24} color={themes[theme!].headerTintColor} />
 			) : (
-				<Text style={[styles.title, { color: themes[theme].headerTintColor }]}>{title}</Text>
+				<Text style={[styles.title, { color: themes[theme!].headerTintColor }]}>{title}</Text>
 			)}
 			{badge ? badge() : null}
 		</>
diff --git a/app/containers/List/ListContainer.tsx b/app/containers/List/ListContainer.tsx
index 408310d9f..deb9c8a71 100644
--- a/app/containers/List/ListContainer.tsx
+++ b/app/containers/List/ListContainer.tsx
@@ -11,10 +11,10 @@ const styles = StyleSheet.create({
 });
 
 interface IListContainer {
-	children: JSX.Element;
+	children: React.ReactNode;
+	testID?: string;
 }
 const ListContainer = React.memo(({ children, ...props }: IListContainer) => (
-	// @ts-ignore
 	<ScrollView
 		contentContainerStyle={styles.container}
 		scrollIndicatorInsets={{ right: 1 }} // https://github.com/facebook/react-native/issues/26610#issuecomment-539843444
diff --git a/app/containers/List/ListHeader.tsx b/app/containers/List/ListHeader.tsx
index 0b67550e3..9a0b97731 100644
--- a/app/containers/List/ListHeader.tsx
+++ b/app/containers/List/ListHeader.tsx
@@ -20,13 +20,13 @@ const styles = StyleSheet.create({
 
 interface IListHeader {
 	title: string;
-	theme: string;
-	translateTitle: boolean;
+	theme?: string;
+	translateTitle?: boolean;
 }
 
 const ListHeader = React.memo(({ title, theme, translateTitle = true }: IListHeader) => (
 	<View style={styles.container}>
-		<Text style={[styles.title, { color: themes[theme].infoText }]} numberOfLines={1}>
+		<Text style={[styles.title, { color: themes[theme!].infoText }]} numberOfLines={1}>
 			{translateTitle ? I18n.t(title) : title}
 		</Text>
 	</View>
diff --git a/app/containers/List/ListIcon.tsx b/app/containers/List/ListIcon.tsx
index 7d569dce7..71e4fbdf2 100644
--- a/app/containers/List/ListIcon.tsx
+++ b/app/containers/List/ListIcon.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { themes } from '../../constants/colors';
 import { CustomIcon } from '../../lib/Icons';
@@ -7,11 +7,11 @@ import { withTheme } from '../../theme';
 import { ICON_SIZE } from './constants';
 
 interface IListIcon {
-	theme: string;
+	theme?: string;
 	name: string;
-	color: string;
-	style: object;
-	testID: string;
+	color?: string;
+	style?: StyleProp<ViewStyle>;
+	testID?: string;
 }
 
 const styles = StyleSheet.create({
@@ -23,7 +23,7 @@ const styles = StyleSheet.create({
 
 const ListIcon = React.memo(({ theme, name, color, style, testID }: IListIcon) => (
 	<View style={[styles.icon, style]}>
-		<CustomIcon name={name} color={color ?? themes[theme].auxiliaryText} size={ICON_SIZE} testID={testID} />
+		<CustomIcon name={name} color={color ?? themes[theme!].auxiliaryText} size={ICON_SIZE} testID={testID} />
 	</View>
 ));
 
diff --git a/app/containers/List/ListInfo.tsx b/app/containers/List/ListInfo.tsx
index bc4f02e33..2bfe68e32 100644
--- a/app/containers/List/ListInfo.tsx
+++ b/app/containers/List/ListInfo.tsx
@@ -20,13 +20,13 @@ const styles = StyleSheet.create({
 
 interface IListHeader {
 	info: string;
-	theme: string;
-	translateInfo: boolean;
+	theme?: string;
+	translateInfo?: boolean;
 }
 
 const ListInfo = React.memo(({ info, theme, translateInfo = true }: IListHeader) => (
 	<View style={styles.container}>
-		<Text style={[styles.text, { color: themes[theme].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
+		<Text style={[styles.text, { color: themes[theme!].infoText }]}>{translateInfo ? I18n.t(info) : info}</Text>
 	</View>
 ));
 
diff --git a/app/containers/List/ListItem.tsx b/app/containers/List/ListItem.tsx
index a05eaf9ad..87abfd2dd 100644
--- a/app/containers/List/ListItem.tsx
+++ b/app/containers/List/ListItem.tsx
@@ -56,11 +56,11 @@ const styles = StyleSheet.create({
 interface IListItemContent {
 	title?: string;
 	subtitle?: string;
-	left?: Function;
-	right?: Function;
+	left?: () => JSX.Element | null;
+	right?: () => JSX.Element | null;
 	disabled?: boolean;
 	testID?: string;
-	theme: string;
+	theme?: string;
 	color?: string;
 	translateTitle?: boolean;
 	translateSubtitle?: boolean;
@@ -89,15 +89,15 @@ const Content = React.memo(
 			{left ? <View style={styles.leftContainer}>{left()}</View> : null}
 			<View style={styles.textContainer}>
 				<View style={styles.textAlertContainer}>
-					<Text style={[styles.title, { color: color || themes[theme].titleText }]} numberOfLines={1}>
+					<Text style={[styles.title, { color: color || themes[theme!].titleText }]} numberOfLines={1}>
 						{translateTitle ? I18n.t(title) : title}
 					</Text>
 					{alert ? (
-						<CustomIcon style={[styles.alertIcon, { color: themes[theme].dangerColor }]} size={ICON_SIZE} name='info' />
+						<CustomIcon style={[styles.alertIcon, { color: themes[theme!].dangerColor }]} size={ICON_SIZE} name='info' />
 					) : null}
 				</View>
 				{subtitle ? (
-					<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
+					<Text style={[styles.subtitle, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
 						{translateSubtitle ? I18n.t(subtitle) : subtitle}
 					</Text>
 				) : null}
@@ -112,38 +112,39 @@ const Content = React.memo(
 	)
 );
 
-interface IListItemButton {
+interface IListButtonPress {
+	onPress?: Function;
+}
+
+interface IListItemButton extends IListButtonPress {
 	title?: string;
-	onPress: Function;
 	disabled?: boolean;
-	theme: string;
-	backgroundColor: string;
+	theme?: string;
+	backgroundColor?: string;
 	underlayColor?: string;
 }
 
-const Button = React.memo(({ onPress, backgroundColor, underlayColor, ...props }: IListItemButton) => (
+const Button = React.memo<IListItemButton>(({ onPress, backgroundColor, underlayColor, ...props }: IListItemButton) => (
 	<Touch
-		onPress={() => onPress(props.title)}
-		style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
+		onPress={() => onPress!(props.title)}
+		style={{ backgroundColor: backgroundColor || themes[props.theme!].backgroundColor }}
 		underlayColor={underlayColor}
 		enabled={!props.disabled}
-		theme={props.theme}>
+		theme={props.theme!}>
 		<Content {...props} />
 	</Touch>
 ));
 
-interface IListItem {
-	onPress: Function;
-	theme: string;
-	backgroundColor: string;
+interface IListItem extends IListItemContent, IListButtonPress {
+	backgroundColor?: string;
 }
 
-const ListItem = React.memo(({ ...props }: IListItem) => {
+const ListItem = React.memo<IListItem>(({ ...props }: IListItem) => {
 	if (props.onPress) {
 		return <Button {...props} />;
 	}
 	return (
-		<View style={{ backgroundColor: props.backgroundColor || themes[props.theme].backgroundColor }}>
+		<View style={{ backgroundColor: props.backgroundColor || themes[props.theme!].backgroundColor }}>
 			<Content {...props} />
 		</View>
 	);
diff --git a/app/containers/List/ListSection.tsx b/app/containers/List/ListSection.tsx
index 7607ad12d..e334f5f3f 100644
--- a/app/containers/List/ListSection.tsx
+++ b/app/containers/List/ListSection.tsx
@@ -11,9 +11,9 @@ const styles = StyleSheet.create({
 });
 
 interface IListSection {
-	children: JSX.Element;
-	title: string;
-	translateTitle: boolean;
+	children: React.ReactNode;
+	title?: string;
+	translateTitle?: boolean;
 }
 
 const ListSection = React.memo(({ children, title, translateTitle }: IListSection) => (
diff --git a/app/containers/List/ListSeparator.tsx b/app/containers/List/ListSeparator.tsx
index 6a78ef65e..db34b05ba 100644
--- a/app/containers/List/ListSeparator.tsx
+++ b/app/containers/List/ListSeparator.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
@@ -11,12 +11,12 @@ const styles = StyleSheet.create({
 });
 
 interface IListSeparator {
-	style: object;
-	theme: string;
+	style?: ViewStyle;
+	theme?: string;
 }
 
 const ListSeparator = React.memo(({ style, theme }: IListSeparator) => (
-	<View style={[styles.separator, style, { backgroundColor: themes[theme].separatorColor }]} />
+	<View style={[styles.separator, style, { backgroundColor: themes[theme!].separatorColor }]} />
 ));
 
 ListSeparator.displayName = 'List.Separator';
diff --git a/app/containers/Loading.tsx b/app/containers/Loading.tsx
index 6bcc3baa0..cd4ed285d 100644
--- a/app/containers/Loading.tsx
+++ b/app/containers/Loading.tsx
@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
 
 interface ILoadingProps {
 	visible: boolean;
-	theme: string;
+	theme?: string;
 }
 
 class Loading extends React.PureComponent<ILoadingProps, any> {
@@ -97,7 +97,7 @@ class Loading extends React.PureComponent<ILoadingProps, any> {
 
 		const opacityAnimation = opacity.interpolate({
 			inputRange: [0, 1],
-			outputRange: [0, themes[theme].backdropOpacity],
+			outputRange: [0, themes[theme!].backdropOpacity],
 			extrapolate: 'clamp'
 		});
 
@@ -109,7 +109,7 @@ class Loading extends React.PureComponent<ILoadingProps, any> {
 							{
 								// @ts-ignore
 								...StyleSheet.absoluteFill,
-								backgroundColor: themes[theme].backdropColor,
+								backgroundColor: themes[theme!].backdropColor,
 								opacity: opacityAnimation
 							}
 						]}
diff --git a/app/containers/MessageActions/Header.tsx b/app/containers/MessageActions/Header.tsx
index d3556ccb6..ace8d56b7 100644
--- a/app/containers/MessageActions/Header.tsx
+++ b/app/containers/MessageActions/Header.tsx
@@ -17,7 +17,7 @@ interface IHeader {
 	server: string;
 	message: object;
 	isMasterDetail: boolean;
-	theme: string;
+	theme?: string;
 }
 
 interface THeaderItem {
@@ -117,19 +117,19 @@ const Header = React.memo(({ handleReaction, server, message, isMasterDetail, th
 	const onReaction = ({ emoji }: { emoji: IEmoji }) => handleReaction(emoji, message);
 
 	const renderItem = useCallback(
-		({ item }) => <HeaderItem item={item} onReaction={onReaction} server={server} theme={theme} />,
+		({ item }) => <HeaderItem item={item} onReaction={onReaction} server={server} theme={theme!} />,
 		[]
 	);
 
-	const renderFooter = useCallback(() => <HeaderFooter onReaction={onReaction} theme={theme} />, []);
+	const renderFooter = useCallback(() => <HeaderFooter onReaction={onReaction} theme={theme!} />, []);
 
 	return (
-		<View style={[styles.container, { backgroundColor: themes[theme].focusedBackground }]}>
+		<View style={[styles.container, { backgroundColor: themes[theme!].focusedBackground }]}>
 			<FlatList
 				data={items}
 				renderItem={renderItem}
 				ListFooterComponent={renderFooter}
-				style={{ backgroundColor: themes[theme].focusedBackground }}
+				style={{ backgroundColor: themes[theme!].focusedBackground }}
 				keyExtractor={keyExtractor}
 				showsHorizontalScrollIndicator={false}
 				scrollEnabled={false}
diff --git a/app/containers/MessageActions/index.tsx b/app/containers/MessageActions/index.tsx
index eb9be9675..4237e2c1e 100644
--- a/app/containers/MessageActions/index.tsx
+++ b/app/containers/MessageActions/index.tsx
@@ -18,7 +18,7 @@ import events from '../../utils/log/events';
 
 interface IMessageActions {
 	room: {
-		rid: string | number;
+		rid: string;
 		autoTranslateLanguage: any;
 		autoTranslate: any;
 		reactWhenReadOnly: any;
@@ -305,8 +305,6 @@ const MessageActions = React.memo(
 			};
 
 			const handleDelete = (message: any) => {
-				// TODO - migrate this function for ts when fix the lint erros
-				// @ts-ignore
 				showConfirmationAlert({
 					message: I18n.t('You_will_not_be_able_to_recover_this_message'),
 					confirmationText: I18n.t('Delete'),
diff --git a/app/containers/MessageBox/CommandsPreview/Item.tsx b/app/containers/MessageBox/CommandsPreview/Item.tsx
index 6f89d254e..33e3c4ff3 100644
--- a/app/containers/MessageBox/CommandsPreview/Item.tsx
+++ b/app/containers/MessageBox/CommandsPreview/Item.tsx
@@ -14,7 +14,7 @@ interface IMessageBoxCommandsPreviewItem {
 		id: string;
 		value: string;
 	};
-	theme: string;
+	theme?: string;
 }
 
 const Item = ({ item, theme }: IMessageBoxCommandsPreviewItem) => {
@@ -37,7 +37,7 @@ const Item = ({ item, theme }: IMessageBoxCommandsPreviewItem) => {
 					{loading ? <ActivityIndicator theme={theme} /> : null}
 				</FastImage>
 			) : (
-				<CustomIcon name='attach' size={36} color={themes[theme].actionTintColor} />
+				<CustomIcon name='attach' size={36} color={themes[theme!].actionTintColor} />
 			)}
 		</TouchableOpacity>
 	);
diff --git a/app/containers/MessageBox/CommandsPreview/index.tsx b/app/containers/MessageBox/CommandsPreview/index.tsx
index 3820f6fa6..c5434f669 100644
--- a/app/containers/MessageBox/CommandsPreview/index.tsx
+++ b/app/containers/MessageBox/CommandsPreview/index.tsx
@@ -10,7 +10,7 @@ import { withTheme } from '../../../theme';
 interface IMessageBoxCommandsPreview {
 	commandPreview: [];
 	showCommandPreview: boolean;
-	theme: string;
+	theme?: string;
 }
 
 const CommandsPreview = React.memo(
@@ -21,7 +21,7 @@ const CommandsPreview = React.memo(
 		return (
 			<FlatList
 				testID='commandbox-container'
-				style={[styles.mentionList, { backgroundColor: themes[theme].messageboxBackground }]}
+				style={[styles.mentionList, { backgroundColor: themes[theme!].messageboxBackground }]}
 				data={commandPreview}
 				renderItem={({ item }) => <Item item={item} theme={theme} />}
 				keyExtractor={(item: any) => item.id}
diff --git a/app/containers/MessageBox/index.tsx b/app/containers/MessageBox/index.tsx
index 9fe3d11a1..fbcf24cd2 100644
--- a/app/containers/MessageBox/index.tsx
+++ b/app/containers/MessageBox/index.tsx
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Alert, Keyboard, NativeModules, Text, View } from 'react-native';
 import { connect } from 'react-redux';
 import { KeyboardAccessoryView } from 'react-native-ui-lib/keyboard';
-import ImagePicker from 'react-native-image-crop-picker';
+import ImagePicker, { Image, ImageOrVideo } from 'react-native-image-crop-picker';
 import { dequal } from 'dequal';
 import DocumentPicker from 'react-native-document-picker';
 import { Q } from '@nozbe/watermelondb';
@@ -27,7 +27,7 @@ import LeftButtons from './LeftButtons';
 // @ts-ignore
 // eslint-disable-next-line import/extensions,import/no-unresolved
 import RightButtons from './RightButtons';
-import { isAndroid, isTablet } from '../../utils/deviceInfo';
+import { isAndroid, isIOS, isTablet } from '../../utils/deviceInfo';
 import { canUploadFile } from '../../utils/media';
 import EventEmiter from '../../utils/events';
 import { KEY_COMMAND, handleCommandShowUpload, handleCommandSubmit, handleCommandTyping } from '../../commands';
@@ -54,15 +54,16 @@ if (isAndroid) {
 
 const imagePickerConfig = {
 	cropping: true,
-	compressImageQuality: 0.8,
 	avoidEmptySpaceAroundImage: false,
-	freeStyleCropEnabled: true
+	freeStyleCropEnabled: true,
+	forceJpg: true
 };
 
 const libraryPickerConfig = {
 	multiple: true,
 	compressVideoPreset: 'Passthrough',
-	mediaType: 'any'
+	mediaType: 'any',
+	forceJpg: true
 };
 
 const videoPickerConfig = {
@@ -129,6 +130,18 @@ interface IMessageBoxState {
 	permissionToUpload: boolean;
 }
 
+const forceJpgExtension = (attachment: ImageOrVideo) => {
+	if (isIOS && attachment.mime === 'image/jpeg' && attachment.filename) {
+		const regex = new RegExp(/.heic$/i);
+		if (attachment.filename.match(regex)) {
+			attachment.filename = attachment.filename.replace(regex, '.jpg');
+		} else {
+			attachment.filename += '.jpg';
+		}
+	}
+	return attachment;
+};
+
 class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 	private text: string;
 
@@ -692,7 +705,8 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 	takePhoto = async () => {
 		logEvent(events.ROOM_BOX_ACTION_PHOTO);
 		try {
-			const image = await ImagePicker.openCamera(this.imagePickerConfig);
+			let image = (await ImagePicker.openCamera(this.imagePickerConfig)) as Image;
+			image = forceJpgExtension(image);
 			if (this.canUploadFile(image)) {
 				this.openShareView([image]);
 			}
@@ -716,7 +730,8 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
 	chooseFromLibrary = async () => {
 		logEvent(events.ROOM_BOX_ACTION_LIBRARY);
 		try {
-			const attachments = await ImagePicker.openPicker(this.libraryPickerConfig);
+			let attachments = (await ImagePicker.openPicker(this.libraryPickerConfig)) as ImageOrVideo[];
+			attachments = attachments.map(att => forceJpgExtension(att));
 			this.openShareView(attachments);
 		} catch (e) {
 			logEvent(events.ROOM_BOX_ACTION_LIBRARY_F);
diff --git a/app/containers/Passcode/Base/Button.tsx b/app/containers/Passcode/Base/Button.tsx
index f7e6c1a9a..50a1cf417 100644
--- a/app/containers/Passcode/Base/Button.tsx
+++ b/app/containers/Passcode/Base/Button.tsx
@@ -7,28 +7,28 @@ import Touch from '../../../utils/touch';
 import { CustomIcon } from '../../../lib/Icons';
 
 interface IPasscodeButton {
-	text: string;
-	icon: string;
+	text?: string;
+	icon?: string;
 	theme: string;
-	disabled: boolean;
-	onPress: Function;
+	disabled?: boolean;
+	onPress?: Function;
 }
 
-const Button = React.memo(({ text, disabled, theme, onPress, icon }: Partial<IPasscodeButton>) => {
-	const press = () => onPress && onPress(text!);
+const Button = React.memo(({ text, disabled, theme, onPress, icon }: IPasscodeButton) => {
+	const press = () => onPress && onPress(text);
 
 	return (
 		<Touch
 			style={[styles.buttonView, { backgroundColor: 'transparent' }]}
-			underlayColor={themes[theme!].passcodeButtonActive}
-			rippleColor={themes[theme!].passcodeButtonActive}
+			underlayColor={themes[theme].passcodeButtonActive}
+			rippleColor={themes[theme].passcodeButtonActive}
 			enabled={!disabled}
 			theme={theme}
 			onPress={press}>
 			{icon ? (
-				<CustomIcon name={icon} size={36} color={themes[theme!].passcodePrimary} />
+				<CustomIcon name={icon} size={36} color={themes[theme].passcodePrimary} />
 			) : (
-				<Text style={[styles.buttonText, { color: themes[theme!].passcodePrimary }]}>{text}</Text>
+				<Text style={[styles.buttonText, { color: themes[theme].passcodePrimary }]}>{text}</Text>
 			)}
 		</Touch>
 	);
diff --git a/app/containers/RoomHeader/RoomHeader.tsx b/app/containers/RoomHeader/RoomHeader.tsx
index 0ca3bbf5a..719725fec 100644
--- a/app/containers/RoomHeader/RoomHeader.tsx
+++ b/app/containers/RoomHeader/RoomHeader.tsx
@@ -68,11 +68,11 @@ interface IRoomHeader {
 	tmid: string;
 	teamMain: boolean;
 	status: string;
-	theme: string;
+	theme?: string;
 	usersTyping: [];
 	isGroupChat: boolean;
 	parentTitle: string;
-	onPress: Function;
+	onPress: () => void;
 	testID: string;
 }
 
@@ -164,7 +164,7 @@ const Header = React.memo(
 			renderFunc = () => (
 				<View style={styles.titleContainer}>
 					<RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} teamMain={teamMain} />
-					<Text style={[styles.subtitle, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
+					<Text style={[styles.subtitle, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
 						{parentTitle}
 					</Text>
 				</View>
@@ -186,9 +186,15 @@ const Header = React.memo(
 					{tmid ? null : (
 						<RoomTypeIcon type={prid ? 'discussion' : type} isGroupChat={isGroupChat} status={status} teamMain={teamMain} />
 					)}
-					<HeaderTitle title={title} tmid={tmid} prid={prid} scale={scale} theme={theme} testID={testID} />
+					<HeaderTitle title={title} tmid={tmid} prid={prid} scale={scale} theme={theme!} testID={testID} />
 				</View>
-				<SubTitle usersTyping={tmid ? [] : usersTyping} subtitle={subtitle} theme={theme} renderFunc={renderFunc} scale={scale} />
+				<SubTitle
+					usersTyping={tmid ? [] : usersTyping}
+					subtitle={subtitle}
+					theme={theme!}
+					renderFunc={renderFunc}
+					scale={scale}
+				/>
 			</TouchableOpacity>
 		);
 	}
diff --git a/app/containers/RoomHeader/index.tsx b/app/containers/RoomHeader/index.tsx
index 5b06fb898..fb00bc10c 100644
--- a/app/containers/RoomHeader/index.tsx
+++ b/app/containers/RoomHeader/index.tsx
@@ -13,7 +13,7 @@ interface IRoomHeaderContainerProps {
 	prid: string;
 	tmid: string;
 	teamMain: boolean;
-	usersTyping: string;
+	usersTyping: [];
 	status: string;
 	statusText: string;
 	connecting: boolean;
@@ -79,14 +79,12 @@ class RoomHeaderContainer extends Component<IRoomHeaderContainerProps, any> {
 			teamMain,
 			prid,
 			tmid,
-			widthOffset,
 			status = 'offline',
 			statusText,
 			connecting,
 			connected,
 			usersTyping,
 			onPress,
-			roomUserId,
 			width,
 			height,
 			parentTitle,
@@ -115,9 +113,6 @@ class RoomHeaderContainer extends Component<IRoomHeaderContainerProps, any> {
 				width={width}
 				height={height}
 				usersTyping={usersTyping}
-				widthOffset={widthOffset}
-				roomUserId={roomUserId}
-				connecting={connecting}
 				parentTitle={parentTitle}
 				isGroupChat={isGroupChat}
 				testID={testID}
diff --git a/app/containers/RoomTypeIcon.tsx b/app/containers/RoomTypeIcon.tsx
index b4ac871e6..a157f53b4 100644
--- a/app/containers/RoomTypeIcon.tsx
+++ b/app/containers/RoomTypeIcon.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle } from 'react-native';
 
 import { CustomIcon } from '../lib/Icons';
 import { STATUS_COLORS, themes } from '../constants/colors';
@@ -13,13 +13,13 @@ const styles = StyleSheet.create({
 });
 
 interface IRoomTypeIcon {
-	theme: string;
+	theme?: string;
 	type: string;
-	isGroupChat: boolean;
-	teamMain: boolean;
-	status: string;
-	size: number;
-	style: any;
+	isGroupChat?: boolean;
+	teamMain?: boolean;
+	status?: string;
+	size?: number;
+	style?: ViewStyle;
 }
 
 const RoomTypeIcon = React.memo(({ type, isGroupChat, status, style, theme, teamMain, size = 16 }: IRoomTypeIcon) => {
@@ -27,11 +27,13 @@ const RoomTypeIcon = React.memo(({ type, isGroupChat, status, style, theme, team
 		return null;
 	}
 
-	const color = themes[theme].titleText;
+	const color = themes[theme!].titleText;
 	const iconStyle = [styles.icon, { color }, style];
 
 	if (type === 'd' && !isGroupChat) {
-		return <Status style={[iconStyle, { color: STATUS_COLORS[status] ?? STATUS_COLORS.offline }]} size={size} status={status} />;
+		return (
+			<Status style={[iconStyle, { color: STATUS_COLORS[status!] ?? STATUS_COLORS.offline }]} size={size} status={status!} />
+		);
 	}
 
 	// TODO: move this to a separate function
diff --git a/app/containers/SafeAreaView.tsx b/app/containers/SafeAreaView.tsx
index 7daa3347e..3794fdb91 100644
--- a/app/containers/SafeAreaView.tsx
+++ b/app/containers/SafeAreaView.tsx
@@ -12,16 +12,16 @@ const styles = StyleSheet.create({
 });
 
 interface ISafeAreaView {
-	testID: string;
-	theme: string;
-	vertical: boolean;
-	style: object;
-	children: JSX.Element;
+	testID?: string;
+	theme?: string;
+	vertical?: boolean;
+	style?: object;
+	children: React.ReactNode;
 }
 
 const SafeAreaView = React.memo(({ style, children, testID, theme, vertical = true, ...props }: ISafeAreaView) => (
 	<SafeAreaContext
-		style={[styles.view, { backgroundColor: themes[theme].auxiliaryBackground }, style]}
+		style={[styles.view, { backgroundColor: themes[theme!].auxiliaryBackground }, style]}
 		edges={vertical ? ['right', 'left'] : undefined}
 		testID={testID}
 		{...props}>
diff --git a/app/containers/SearchBox.tsx b/app/containers/SearchBox.tsx
index 6668e0f76..9ab236eb0 100644
--- a/app/containers/SearchBox.tsx
+++ b/app/containers/SearchBox.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, TextInputProps, View } from 'react-native';
+import { NativeSyntheticEvent, StyleSheet, Text, TextInputFocusEventData, TextInputProps, View } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 
 import TextInput from '../presentation/TextInput';
@@ -45,13 +45,15 @@ const styles = StyleSheet.create({
 });
 
 interface ISearchBox {
+	value?: string;
 	onChangeText: TextInputProps['onChangeText'];
-	onSubmitEditing: () => void;
-	hasCancel: boolean;
-	onCancelPress: Function;
-	theme: string;
-	inputRef: any;
+	onSubmitEditing?: () => void;
+	hasCancel?: boolean;
+	onCancelPress?: Function;
+	theme?: string;
+	inputRef?: React.Ref<unknown>;
 	testID?: string;
+	onFocus?: (e: NativeSyntheticEvent<TextInputFocusEventData>) => void;
 }
 
 const CancelButton = (onCancelPress: Function, theme: string) => (
@@ -73,10 +75,10 @@ const SearchBox = ({
 	<View
 		style={[
 			styles.container,
-			{ backgroundColor: isIOS ? themes[theme].headerBackground : themes[theme].headerSecondaryBackground }
+			{ backgroundColor: isIOS ? themes[theme!].headerBackground : themes[theme!].headerSecondaryBackground }
 		]}>
-		<View style={[styles.searchBox, { backgroundColor: themes[theme].searchboxBackground }]}>
-			<CustomIcon name='search' size={14} color={themes[theme].auxiliaryText} />
+		<View style={[styles.searchBox, { backgroundColor: themes[theme!].searchboxBackground }]}>
+			<CustomIcon name='search' size={14} color={themes[theme!].auxiliaryText} />
 			<TextInput
 				ref={inputRef}
 				autoCapitalize='none'
@@ -90,11 +92,11 @@ const SearchBox = ({
 				underlineColorAndroid='transparent'
 				onChangeText={onChangeText}
 				onSubmitEditing={onSubmitEditing}
-				theme={theme}
+				theme={theme!}
 				{...props}
 			/>
 		</View>
-		{hasCancel ? CancelButton(onCancelPress, theme) : null}
+		{hasCancel ? CancelButton(onCancelPress!, theme!) : null}
 	</View>
 );
 
diff --git a/app/containers/SearchHeader.js b/app/containers/SearchHeader.tsx
similarity index 80%
rename from app/containers/SearchHeader.js
rename to app/containers/SearchHeader.tsx
index e231d0748..4b0a49176 100644
--- a/app/containers/SearchHeader.js
+++ b/app/containers/SearchHeader.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import PropTypes from 'prop-types';
 
 import { withTheme } from '../theme';
 import sharedStyles from '../views/Styles';
@@ -20,9 +19,14 @@ const styles = StyleSheet.create({
 	}
 });
 
+interface ISearchHeader {
+	theme?: string;
+	onSearchChangeText?: (text: string) => void;
+}
+
 // TODO: it might be useful to refactor this component for reusage
-const SearchHeader = ({ theme, onSearchChangeText }) => {
-	const titleColorStyle = { color: themes[theme].headerTitleColor };
+const SearchHeader = ({ theme, onSearchChangeText }: ISearchHeader) => {
+	const titleColorStyle = { color: themes[theme!].headerTitleColor };
 	const isLight = theme === 'light';
 	const { isLandscape } = useOrientation();
 	const scale = isIOS && isLandscape && !isTablet ? 0.8 : 1;
@@ -35,15 +39,11 @@ const SearchHeader = ({ theme, onSearchChangeText }) => {
 				style={[styles.title, isLight && titleColorStyle, { fontSize: titleFontSize }]}
 				placeholder='Search'
 				onChangeText={onSearchChangeText}
-				theme={theme}
+				theme={theme!}
 				testID='thread-messages-view-search-header'
 			/>
 		</View>
 	);
 };
 
-SearchHeader.propTypes = {
-	theme: PropTypes.string,
-	onSearchChangeText: PropTypes.func
-};
 export default withTheme(SearchHeader);
diff --git a/app/containers/StatusBar.tsx b/app/containers/StatusBar.tsx
index da115f4ed..5ebaf2307 100644
--- a/app/containers/StatusBar.tsx
+++ b/app/containers/StatusBar.tsx
@@ -5,9 +5,9 @@ import { themes } from '../constants/colors';
 import { withTheme } from '../theme';
 
 interface IStatusBar {
-	theme: string;
-	barStyle: any;
-	backgroundColor: string;
+	theme?: string;
+	barStyle?: any;
+	backgroundColor?: string;
 }
 
 const StatusBar = React.memo(({ theme, barStyle, backgroundColor }: IStatusBar) => {
@@ -17,7 +17,7 @@ const StatusBar = React.memo(({ theme, barStyle, backgroundColor }: IStatusBar)
 			barStyle = 'dark-content';
 		}
 	}
-	return <StatusBarRN backgroundColor={backgroundColor ?? themes[theme].headerBackground} barStyle={barStyle} animated />;
+	return <StatusBarRN backgroundColor={backgroundColor ?? themes[theme!].headerBackground} barStyle={barStyle} animated />;
 });
 
 export default withTheme(StatusBar);
diff --git a/app/containers/TextInput.tsx b/app/containers/TextInput.tsx
index 28ae1c2f1..76cb1765c 100644
--- a/app/containers/TextInput.tsx
+++ b/app/containers/TextInput.tsx
@@ -50,7 +50,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface IRCTextInputProps extends TextInputProps {
+export interface IRCTextInputProps extends TextInputProps {
 	label?: string;
 	error?: {
 		error: any;
diff --git a/app/containers/ThreadDetails.tsx b/app/containers/ThreadDetails.tsx
index 86f670f00..90f3faa4b 100644
--- a/app/containers/ThreadDetails.tsx
+++ b/app/containers/ThreadDetails.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 
 import { CustomIcon } from '../lib/Icons';
 import { themes } from '../constants/colors';
 import sharedStyles from '../views/Styles';
 import { withTheme } from '../theme';
+import { TThreadModel } from '../definitions/IThread';
 
 const styles = StyleSheet.create({
 	container: {
@@ -40,33 +41,25 @@ const styles = StyleSheet.create({
 });
 
 interface IThreadDetails {
-	item: {
-		tcount: number | string;
-		replies: any;
-		id: string;
-	};
+	item: Partial<TThreadModel>;
 	user: {
 		id: string;
 	};
-	badgeColor: string;
+	badgeColor?: string;
 	toggleFollowThread: Function;
-	style: object;
-	theme: string;
+	style: ViewStyle;
+	theme?: string;
 }
 
 const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style, theme }: IThreadDetails) => {
 	let { tcount } = item;
-	if (tcount >= 1000) {
+	if (tcount! >= 1000) {
 		tcount = '+999';
-	} else if (tcount >= 100) {
-		tcount = '+99';
 	}
 
-	let replies = item?.replies?.length ?? 0;
+	let replies: number | string = item?.replies?.length ?? 0;
 	if (replies >= 1000) {
 		replies = '+999';
-	} else if (replies >= 100) {
-		replies = '+99';
 	}
 
 	const isFollowing = item.replies?.find((u: any) => u === user?.id);
@@ -75,15 +68,15 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style, them
 		<View style={[styles.container, style]}>
 			<View style={styles.detailsContainer}>
 				<View style={styles.detailContainer}>
-					<CustomIcon name='threads' size={24} color={themes[theme].auxiliaryText} />
-					<Text style={[styles.detailText, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
+					<CustomIcon name='threads' size={24} color={themes[theme!].auxiliaryText} />
+					<Text style={[styles.detailText, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
 						{tcount}
 					</Text>
 				</View>
 
 				<View style={styles.detailContainer}>
-					<CustomIcon name='user' size={24} color={themes[theme].auxiliaryText} />
-					<Text style={[styles.detailText, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>
+					<CustomIcon name='user' size={24} color={themes[theme!].auxiliaryText} />
+					<Text style={[styles.detailText, { color: themes[theme!].auxiliaryText }]} numberOfLines={1}>
 						{replies}
 					</Text>
 				</View>
@@ -95,7 +88,7 @@ const ThreadDetails = ({ item, user, badgeColor, toggleFollowThread, style, them
 					<CustomIcon
 						size={24}
 						name={isFollowing ? 'notification' : 'notification-disabled'}
-						color={themes[theme].auxiliaryTintColor}
+						color={themes[theme!].auxiliaryTintColor}
 					/>
 				</Touchable>
 			</View>
diff --git a/app/containers/Toast.tsx b/app/containers/Toast.tsx
index 79fcc8272..7dca3e147 100644
--- a/app/containers/Toast.tsx
+++ b/app/containers/Toast.tsx
@@ -22,7 +22,7 @@ const styles = StyleSheet.create({
 export const LISTENER = 'Toast';
 
 interface IToastProps {
-	theme: string;
+	theme?: string;
 }
 
 class Toast extends React.Component<IToastProps, any> {
@@ -61,8 +61,8 @@ class Toast extends React.Component<IToastProps, any> {
 				ref={this.getToastRef}
 				// @ts-ignore
 				position='center'
-				style={[styles.toast, { backgroundColor: themes[theme].toastBackground }]}
-				textStyle={[styles.text, { color: themes[theme].buttonText }]}
+				style={[styles.toast, { backgroundColor: themes[theme!].toastBackground }]}
+				textStyle={[styles.text, { color: themes[theme!].buttonText }]}
 				opacity={0.9}
 			/>
 		);
diff --git a/app/containers/TwoFactor/index.tsx b/app/containers/TwoFactor/index.tsx
index dd2686ddc..5bb27774c 100644
--- a/app/containers/TwoFactor/index.tsx
+++ b/app/containers/TwoFactor/index.tsx
@@ -19,7 +19,7 @@ import styles from './styles';
 export const TWO_FACTOR = 'TWO_FACTOR';
 
 interface ITwoFactor {
-	theme: string;
+	theme?: string;
 	isMasterDetail: boolean;
 }
 
@@ -87,7 +87,7 @@ const TwoFactor = React.memo(({ theme, isMasterDetail }: ITwoFactor) => {
 		setData({});
 	};
 
-	const color = themes[theme].titleText;
+	const color = themes[theme!].titleText;
 	return (
 		<Modal
 			// @ts-ignore
@@ -101,7 +101,7 @@ const TwoFactor = React.memo(({ theme, isMasterDetail }: ITwoFactor) => {
 					style={[
 						styles.content,
 						isMasterDetail && [sharedStyles.modalFormSheet, styles.tablet],
-						{ backgroundColor: themes[theme].backgroundColor }
+						{ backgroundColor: themes[theme!].backgroundColor }
 					]}>
 					<Text style={[styles.title, { color }]}>{I18n.t(method?.title || 'Two_Factor_Authentication')}</Text>
 					{method?.text ? <Text style={[styles.subtitle, { color }]}>{I18n.t(method.text)}</Text> : null}
@@ -128,7 +128,7 @@ const TwoFactor = React.memo(({ theme, isMasterDetail }: ITwoFactor) => {
 						<Button
 							title={I18n.t('Cancel')}
 							type='secondary'
-							backgroundColor={themes[theme].chatComponentBackground}
+							backgroundColor={themes[theme!].chatComponentBackground}
 							style={styles.button}
 							onPress={onCancel}
 							theme={theme}
diff --git a/app/containers/markdown/index.tsx b/app/containers/markdown/index.tsx
index f4800579b..e8e2ea06b 100644
--- a/app/containers/markdown/index.tsx
+++ b/app/containers/markdown/index.tsx
@@ -5,6 +5,7 @@ import Renderer from 'commonmark-react-renderer';
 import removeMarkdown from 'remove-markdown';
 import { MarkdownAST } from '@rocket.chat/message-parser';
 
+import { UserMention } from '../message/interfaces';
 import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import I18n from '../../i18n';
 import { themes } from '../../constants/colors';
@@ -23,14 +24,6 @@ import styles from './styles';
 import { isValidURL } from '../../utils/url';
 import NewMarkdown from './new';
 
-interface IUser {
-	_id: string;
-	username: string;
-	name: string;
-}
-
-type UserMention = Pick<IUser, '_id' | 'username' | 'name'>;
-
 interface IMarkdownProps {
 	msg: string;
 	md: MarkdownAST;
diff --git a/app/containers/message/Audio.tsx b/app/containers/message/Audio.tsx
index 958ae8ee8..8a93cab14 100644
--- a/app/containers/message/Audio.tsx
+++ b/app/containers/message/Audio.tsx
@@ -30,7 +30,7 @@ interface IMessageAudioProps {
 	};
 	theme: string;
 	getCustomEmoji: Function;
-	scale: number;
+	scale?: number;
 }
 
 interface IMessageAudioState {
diff --git a/app/containers/message/Reactions.tsx b/app/containers/message/Reactions.tsx
index 823c4637d..58c82486e 100644
--- a/app/containers/message/Reactions.tsx
+++ b/app/containers/message/Reactions.tsx
@@ -24,7 +24,7 @@ interface IMessageReaction {
 }
 
 interface IMessageReactions {
-	reactions: object[];
+	reactions?: object[];
 	getCustomEmoji: Function;
 	theme: string;
 }
diff --git a/app/containers/message/Reply.tsx b/app/containers/message/Reply.tsx
index fbc8984fc..8d8126050 100644
--- a/app/containers/message/Reply.tsx
+++ b/app/containers/message/Reply.tsx
@@ -13,6 +13,7 @@ import { themes } from '../../constants/colors';
 import MessageContext from './Context';
 import { fileDownloadAndPreview } from '../../utils/fileDownload';
 import { formatAttachmentUrl } from '../../lib/utils';
+import { IAttachment } from '../../definitions/IAttachment';
 import RCActivityIndicator from '../ActivityIndicator';
 
 const styles = StyleSheet.create({
@@ -90,43 +91,26 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface IMessageReplyAttachment {
-	author_name: string;
-	message_link: string;
-	ts: string;
-	text: string;
-	title: string;
-	short: boolean;
-	value: string;
-	title_link: string;
-	author_link: string;
-	type: string;
-	color: string;
-	description: string;
-	fields: IMessageReplyAttachment[];
-	thumb_url: string;
-}
-
 interface IMessageTitle {
-	attachment: Partial<IMessageReplyAttachment>;
+	attachment: IAttachment;
 	timeFormat: string;
 	theme: string;
 }
 
 interface IMessageDescription {
-	attachment: Partial<IMessageReplyAttachment>;
+	attachment: IAttachment;
 	getCustomEmoji: Function;
 	theme: string;
 }
 
 interface IMessageFields {
-	attachment: Partial<IMessageReplyAttachment>;
+	attachment: IAttachment;
 	theme: string;
 	getCustomEmoji: Function;
 }
 
 interface IMessageReply {
-	attachment: IMessageReplyAttachment;
+	attachment: IAttachment;
 	timeFormat: string;
 	index: number;
 	theme: string;
@@ -198,7 +182,7 @@ const Fields = React.memo(
 						<Text style={[styles.fieldTitle, { color: themes[theme].bodyText }]}>{field.title}</Text>
 						{/* @ts-ignore*/}
 						<Markdown
-							msg={field.value}
+							msg={field.value!}
 							baseUrl={baseUrl}
 							username={user.username}
 							getCustomEmoji={getCustomEmoji}
diff --git a/app/containers/message/Urls.tsx b/app/containers/message/Urls.tsx
index f847fa146..f3b86dd1c 100644
--- a/app/containers/message/Urls.tsx
+++ b/app/containers/message/Urls.tsx
@@ -68,8 +68,8 @@ interface IMessageUrl {
 }
 
 interface IMessageUrls {
-	urls: any;
-	theme: string;
+	urls?: any;
+	theme?: string;
 }
 
 const UrlImage = React.memo(
@@ -156,7 +156,7 @@ const Urls = React.memo(
 			return null;
 		}
 
-		return urls.map((url: any, index: number) => <Url url={url} key={url.url} index={index} theme={theme} />);
+		return urls.map((url: any, index: number) => <Url url={url} key={url.url} index={index} theme={theme!} />);
 	},
 	(oldProps, newProps) => dequal(oldProps.urls, newProps.urls) && oldProps.theme === newProps.theme
 );
diff --git a/app/containers/message/User.tsx b/app/containers/message/User.tsx
index 73adf316e..b03620d9a 100644
--- a/app/containers/message/User.tsx
+++ b/app/containers/message/User.tsx
@@ -38,17 +38,17 @@ const styles = StyleSheet.create({
 });
 
 interface IMessageUser {
-	isHeader: boolean;
-	hasError: boolean;
+	isHeader?: boolean;
+	hasError?: boolean;
 	useRealName: boolean;
-	author: {
+	author?: {
 		_id: string;
-		name: string;
-		username: string;
+		name?: string;
+		username?: string;
 	};
-	alias: string;
-	ts: Date;
-	timeFormat: string;
+	alias?: string;
+	ts?: Date;
+	timeFormat?: string;
 	theme: string;
 	navToRoomInfo: Function;
 	type: string;
@@ -59,16 +59,16 @@ const User = React.memo(
 		if (isHeader || hasError) {
 			const navParam = {
 				t: 'd',
-				rid: author._id
+				rid: author!._id
 			};
 			const { user } = useContext(MessageContext);
-			const username = (useRealName && author.name) || author.username;
+			const username = (useRealName && author!.name) || author!.username;
 			const aliasUsername = alias ? (
 				<Text style={[styles.alias, { color: themes[theme].auxiliaryText }]}> @{username}</Text>
 			) : null;
 			const time = moment(ts).format(timeFormat);
 			const onUserPress = () => navToRoomInfo(navParam);
-			const isDisabled = author._id === user.id;
+			const isDisabled = author!._id === user.id;
 
 			const textContent = (
 				<>
diff --git a/app/containers/message/Video.tsx b/app/containers/message/Video.tsx
index afa5a68b2..15990eeb5 100644
--- a/app/containers/message/Video.tsx
+++ b/app/containers/message/Video.tsx
@@ -13,6 +13,7 @@ import { fileDownload } from '../../utils/fileDownload';
 import EventEmitter from '../../utils/events';
 import { LISTENER } from '../Toast';
 import I18n from '../../i18n';
+import { IAttachment } from '../../definitions/IAttachment';
 import RCActivityIndicator from '../ActivityIndicator';
 
 const SUPPORTED_TYPES = ['video/quicktime', 'video/mp4', ...(isIOS ? [] : ['video/3gp', 'video/mkv'])];
@@ -30,14 +31,7 @@ const styles = StyleSheet.create({
 });
 
 interface IMessageVideo {
-	file: {
-		title: string;
-		title_link: string;
-		type: string;
-		video_type: string;
-		video_url: string;
-		description: string;
-	};
+	file: IAttachment;
 	showAttachment: Function;
 	getCustomEmoji: Function;
 	theme: string;
diff --git a/app/containers/message/index.tsx b/app/containers/message/index.tsx
index 80f5db31c..ad86975e7 100644
--- a/app/containers/message/index.tsx
+++ b/app/containers/message/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Keyboard } from 'react-native';
+import { Keyboard, ViewStyle } from 'react-native';
 
 import Message from './Message';
 import MessageContext from './Context';
@@ -17,53 +17,55 @@ interface IMessageContainerProps {
 		username: string;
 		token: string;
 	};
-	rid: string;
+	msg?: string;
+	rid?: string;
 	timeFormat: string;
-	style: any;
-	archived: boolean;
-	broadcast: boolean;
-	previousItem: {
+	style?: ViewStyle;
+	archived?: boolean;
+	broadcast?: boolean;
+	previousItem?: {
 		ts: any;
 		u: any;
 		groupable: any;
-		id: any;
-		tmid: any;
+		id: string;
+		tmid: string;
 		status: any;
 	};
+	isHeader: boolean;
 	baseUrl: string;
-	Message_GroupingPeriod: number;
-	isReadReceiptEnabled: boolean;
+	Message_GroupingPeriod?: number;
+	isReadReceiptEnabled?: boolean;
 	isThreadRoom: boolean;
 	useRealName: boolean;
-	autoTranslateRoom: boolean;
-	autoTranslateLanguage: string;
-	status: number;
-	isIgnored: boolean;
-	highlighted: boolean;
-	getCustomEmoji(): void;
-	onLongPress: Function;
-	onReactionPress: Function;
-	onEncryptedPress: Function;
-	onDiscussionPress: Function;
-	onThreadPress: Function;
-	errorActionsShow: Function;
-	replyBroadcast: Function;
-	reactionInit: Function;
-	fetchThreadName: Function;
-	showAttachment: Function;
-	onReactionLongPress: Function;
-	navToRoomInfo: Function;
-	callJitsi: Function;
-	blockAction: Function;
-	onAnswerButtonPress: Function;
+	autoTranslateRoom?: boolean;
+	autoTranslateLanguage?: string;
+	status?: number;
+	isIgnored?: boolean;
+	highlighted?: boolean;
+	getCustomEmoji(name: string): void;
+	onLongPress?: Function;
+	onReactionPress?: Function;
+	onEncryptedPress?: Function;
+	onDiscussionPress?: Function;
+	onThreadPress?: Function;
+	errorActionsShow?: Function;
+	replyBroadcast?: Function;
+	reactionInit?: Function;
+	fetchThreadName?: Function;
+	showAttachment?: Function;
+	onReactionLongPress?: Function;
+	navToRoomInfo?: Function;
+	callJitsi?: Function;
+	blockAction?: Function;
+	onAnswerButtonPress?: Function;
 	theme: string;
-	threadBadgeColor: string;
-	toggleFollowThread: Function;
-	jumpToMessage: Function;
+	threadBadgeColor?: string;
+	toggleFollowThread?: Function;
+	jumpToMessage?: Function;
 	onPress: Function;
 }
 
-class MessageContainer extends React.Component<IMessageContainerProps, any> {
+class MessageContainer extends React.Component<IMessageContainerProps> {
 	static defaultProps = {
 		getCustomEmoji: () => {},
 		onLongPress: () => {},
@@ -224,7 +226,7 @@ class MessageContainer extends React.Component<IMessageContainerProps, any> {
 				previousItem.ts.toDateString() === item.ts.toDateString() &&
 				previousItem.u.username === item.u.username &&
 				!(previousItem.groupable === false || item.groupable === false || broadcast === true) &&
-				item.ts - previousItem.ts < Message_GroupingPeriod * 1000 &&
+				item.ts - previousItem.ts < Message_GroupingPeriod! * 1000 &&
 				previousItem.tmid === item.tmid
 			) {
 				return false;
@@ -299,7 +301,7 @@ class MessageContainer extends React.Component<IMessageContainerProps, any> {
 		const { item, theme, jumpToMessage } = this.props;
 		const isMessageLink = item?.attachments?.findIndex((att: any) => att?.message_link === link) !== -1;
 		if (isMessageLink) {
-			return jumpToMessage(link);
+			return jumpToMessage!(link);
 		}
 		openLink(link, theme);
 	};
@@ -365,7 +367,7 @@ class MessageContainer extends React.Component<IMessageContainerProps, any> {
 		// "autoTranslateRoom" and "autoTranslateLanguage" are properties from the subscription
 		// "autoTranslateMessage" is a toggle between "View Original" and "Translate" state
 		if (autoTranslateRoom && autoTranslateMessage) {
-			message = getMessageTranslation(item, autoTranslateLanguage) || message;
+			message = getMessageTranslation(item, autoTranslateLanguage!) || message;
 		}
 
 		return (
@@ -393,7 +395,7 @@ class MessageContainer extends React.Component<IMessageContainerProps, any> {
 					id={id}
 					msg={message}
 					md={md}
-					rid={rid}
+					rid={rid!}
 					author={u}
 					ts={ts}
 					type={t}
@@ -407,10 +409,10 @@ class MessageContainer extends React.Component<IMessageContainerProps, any> {
 					emoji={emoji}
 					timeFormat={timeFormat}
 					style={style}
-					archived={archived}
-					broadcast={broadcast}
+					archived={archived!}
+					broadcast={broadcast!}
 					useRealName={useRealName}
-					isReadReceiptEnabled={isReadReceiptEnabled}
+					isReadReceiptEnabled={isReadReceiptEnabled!}
 					unread={unread}
 					role={role}
 					drid={drid}
@@ -420,10 +422,10 @@ class MessageContainer extends React.Component<IMessageContainerProps, any> {
 					tcount={tcount}
 					tlm={tlm}
 					tmsg={tmsg}
-					fetchThreadName={fetchThreadName}
+					fetchThreadName={fetchThreadName!}
 					mentions={mentions}
 					channels={channels}
-					isIgnored={this.isIgnored}
+					isIgnored={this.isIgnored!}
 					isEdited={editedBy && !!editedBy.username}
 					isHeader={this.isHeader}
 					isThreadReply={this.isThreadReply}
@@ -433,13 +435,13 @@ class MessageContainer extends React.Component<IMessageContainerProps, any> {
 					isTemp={this.isTemp}
 					isEncrypted={this.isEncrypted}
 					hasError={this.hasError}
-					showAttachment={showAttachment}
+					showAttachment={showAttachment!}
 					getCustomEmoji={getCustomEmoji}
-					navToRoomInfo={navToRoomInfo}
-					callJitsi={callJitsi}
-					blockAction={blockAction}
+					navToRoomInfo={navToRoomInfo!}
+					callJitsi={callJitsi!}
+					blockAction={blockAction!}
 					theme={theme}
-					highlighted={highlighted}
+					highlighted={highlighted!}
 				/>
 			</MessageContext.Provider>
 		);
diff --git a/app/containers/message/interfaces.ts b/app/containers/message/interfaces.ts
index c9be40af9..7d3e14950 100644
--- a/app/containers/message/interfaces.ts
+++ b/app/containers/message/interfaces.ts
@@ -51,12 +51,13 @@ export interface IMessageCallButton {
 }
 
 export interface IUser {
-	_id: string;
+	id: string;
 	username: string;
+	token: string;
 	name: string;
 }
 
-export type UserMention = Pick<IUser, '_id' | 'username' | 'name'>;
+export type UserMention = Pick<IUser, 'id' | 'username' | 'name'>;
 
 export interface IMessageContent {
 	_id: string;
@@ -84,7 +85,7 @@ export interface IMessageContent {
 export interface IMessageDiscussion {
 	msg: string;
 	dcount: number;
-	dlm: string;
+	dlm: Date;
 	theme: string;
 }
 
diff --git a/app/containers/message/utils.ts b/app/containers/message/utils.ts
index d82fe25f1..27d904a5d 100644
--- a/app/containers/message/utils.ts
+++ b/app/containers/message/utils.ts
@@ -26,7 +26,9 @@ export const SYSTEM_MESSAGES = [
 	'au',
 	'ru',
 	'ul',
+	'ult',
 	'uj',
+	'ujt',
 	'ut',
 	'rm',
 	'user-muted',
@@ -50,8 +52,10 @@ export const SYSTEM_MESSAGE_TYPES = {
 	MESSAGE_PINNED: 'message_pinned',
 	MESSAGE_SNIPPETED: 'message_snippeted',
 	USER_JOINED_CHANNEL: 'uj',
+	USER_JOINED_TEAM: 'ujt',
 	USER_JOINED_DISCUSSION: 'ut',
-	USER_LEFT_CHANNEL: 'ul'
+	USER_LEFT_CHANNEL: 'ul',
+	USER_LEFT_TEAM: 'ult'
 };
 
 export const SYSTEM_MESSAGE_TYPES_WITH_AUTHOR_NAME = [
@@ -59,8 +63,10 @@ export const SYSTEM_MESSAGE_TYPES_WITH_AUTHOR_NAME = [
 	SYSTEM_MESSAGE_TYPES.MESSAGE_PINNED,
 	SYSTEM_MESSAGE_TYPES.MESSAGE_SNIPPETED,
 	SYSTEM_MESSAGE_TYPES.USER_JOINED_CHANNEL,
+	SYSTEM_MESSAGE_TYPES.USER_JOINED_TEAM,
 	SYSTEM_MESSAGE_TYPES.USER_JOINED_DISCUSSION,
-	SYSTEM_MESSAGE_TYPES.USER_LEFT_CHANNEL
+	SYSTEM_MESSAGE_TYPES.USER_LEFT_CHANNEL,
+	SYSTEM_MESSAGE_TYPES.USER_LEFT_TEAM
 ];
 
 type TInfoMessage = {
@@ -77,6 +83,9 @@ export const getInfoMessage = ({ type, role, msg, author }: TInfoMessage) => {
 	if (type === 'uj') {
 		return I18n.t('Has_joined_the_channel');
 	}
+	if (type === 'ujt') {
+		return I18n.t('Has_joined_the_team');
+	}
 	if (type === 'ut') {
 		return I18n.t('Has_joined_the_conversation');
 	}
@@ -92,6 +101,9 @@ export const getInfoMessage = ({ type, role, msg, author }: TInfoMessage) => {
 	if (type === 'ul') {
 		return I18n.t('Has_left_the_channel');
 	}
+	if (type === 'ult') {
+		return I18n.t('Has_left_the_team');
+	}
 	if (type === 'ru') {
 		return I18n.t('User_removed_by', { userRemoved: msg, userBy: username });
 	}
diff --git a/app/definitions/IAttachment.ts b/app/definitions/IAttachment.ts
index 168106177..4ff3aa8df 100644
--- a/app/definitions/IAttachment.ts
+++ b/app/definitions/IAttachment.ts
@@ -1,4 +1,5 @@
 export interface IAttachment {
+	ts: Date;
 	title: string;
 	type: string;
 	description: string;
@@ -7,4 +8,18 @@ export interface IAttachment {
 	image_type?: string;
 	video_url?: string;
 	video_type?: string;
+	title_link_download?: boolean;
+	fields?: IAttachment[];
+	image_dimensions?: { width?: number; height?: number };
+	image_preview?: string;
+	image_size?: number;
+	author_name?: string;
+	author_icon?: string;
+	message_link?: string;
+	text?: string;
+	short?: boolean;
+	value?: string;
+	author_link?: string;
+	color?: string;
+	thumb_url?: string;
 }
diff --git a/app/definitions/ICommand.ts b/app/definitions/ICommand.ts
new file mode 100644
index 000000000..a0abeec26
--- /dev/null
+++ b/app/definitions/ICommand.ts
@@ -0,0 +1,6 @@
+export interface ICommand {
+	event: {
+		input: string;
+		modifierFlags: number;
+	};
+}
diff --git a/app/definitions/ICustomEmoji.ts b/app/definitions/ICustomEmoji.ts
new file mode 100644
index 000000000..6a6c131a7
--- /dev/null
+++ b/app/definitions/ICustomEmoji.ts
@@ -0,0 +1,10 @@
+import Model from '@nozbe/watermelondb/Model';
+
+export interface ICustomEmoji {
+	name?: string;
+	aliases?: string;
+	extension: string;
+	_updatedAt: Date;
+}
+
+export type TCustomEmojiModel = ICustomEmoji & Model;
diff --git a/app/definitions/IFrequentlyUsedEmoji.ts b/app/definitions/IFrequentlyUsedEmoji.ts
new file mode 100644
index 000000000..a659e2abd
--- /dev/null
+++ b/app/definitions/IFrequentlyUsedEmoji.ts
@@ -0,0 +1,10 @@
+import Model from '@nozbe/watermelondb/Model';
+
+export interface IFrequentlyUsedEmoji {
+	content?: string;
+	extension?: string;
+	isCustom: boolean;
+	count: number;
+}
+
+export type TFrequentlyUsedEmoji = IFrequentlyUsedEmoji & Model;
diff --git a/app/definitions/ILoggedUser.ts b/app/definitions/ILoggedUser.ts
new file mode 100644
index 000000000..487d29c18
--- /dev/null
+++ b/app/definitions/ILoggedUser.ts
@@ -0,0 +1,18 @@
+import Model from '@nozbe/watermelondb/Model';
+
+export interface ILoggedUser {
+	id: string;
+	token: string;
+	username: string;
+	name: string;
+	language?: string;
+	status: string;
+	statusText?: string;
+	roles: string[];
+	avatarETag?: string;
+	showMessageInMainThread: boolean;
+	isFromWebView: boolean;
+	enableMessageParserEarlyAdoption?: boolean;
+}
+
+export type TLoggedUser = ILoggedUser & Model;
diff --git a/app/definitions/IMention.ts b/app/definitions/IMention.ts
new file mode 100644
index 000000000..81305e7e2
--- /dev/null
+++ b/app/definitions/IMention.ts
@@ -0,0 +1,6 @@
+export interface IMention {
+	_id: string;
+	name: string;
+	username: string;
+	type: string;
+}
diff --git a/app/definitions/IMessage.ts b/app/definitions/IMessage.ts
index aca651c10..d4c9d3266 100644
--- a/app/definitions/IMessage.ts
+++ b/app/definitions/IMessage.ts
@@ -1,3 +1,95 @@
-export interface IMessage {
-	msg: string;
+import Model from '@nozbe/watermelondb/Model';
+import { MarkdownAST } from '@rocket.chat/message-parser';
+
+import { IAttachment } from './IAttachment';
+import { IReaction } from './IReaction';
+import { SubscriptionType } from './ISubscription';
+
+export interface IUserMessage {
+	_id: string;
+	username?: string;
+	name?: string;
 }
+
+export interface IUserMention extends IUserMessage {
+	type: string;
+}
+
+export interface IUserChannel {
+	[index: number]: string | number;
+	name: string;
+	_id: string;
+}
+
+export interface IEditedBy {
+	_id: string;
+	username: string;
+}
+
+export type TOnLinkPress = (link: string) => void;
+
+export interface ITranslations {
+	_id: string;
+	language: string;
+	value: string;
+}
+
+export interface ILastMessage {
+	_id: string;
+	rid: string;
+	tshow: boolean;
+	tmid: string;
+	msg: string;
+	ts: Date;
+	u: IUserMessage;
+	_updatedAt: Date;
+	urls: string[];
+	mentions: IUserMention[];
+	channels: IUserChannel[];
+	md: MarkdownAST;
+	attachments: IAttachment[];
+	reactions: IReaction[];
+	unread: boolean;
+	status: boolean;
+}
+
+export interface IMessage {
+	msg?: string;
+	t?: SubscriptionType;
+	ts: Date;
+	u: IUserMessage;
+	alias: string;
+	parseUrls: boolean;
+	groupable?: boolean;
+	avatar?: string;
+	emoji?: string;
+	attachments?: IAttachment[];
+	urls?: string[];
+	_updatedAt: Date;
+	status?: number;
+	pinned?: boolean;
+	starred?: boolean;
+	editedBy?: IEditedBy;
+	reactions?: IReaction[];
+	role?: string;
+	drid?: string;
+	dcount?: number;
+	dlm?: Date;
+	tmid?: string;
+	tcount?: number;
+	tlm?: Date;
+	replies?: string[];
+	mentions?: IUserMention[];
+	channels?: IUserChannel[];
+	unread?: boolean;
+	autoTranslate?: boolean;
+	translations?: ITranslations[];
+	tmsg?: string;
+	blocks?: any;
+	e2e?: string;
+	tshow?: boolean;
+	md?: MarkdownAST;
+	subscription: { id: string };
+}
+
+export type TMessageModel = IMessage & Model;
diff --git a/app/definitions/INotification.ts b/app/definitions/INotification.ts
new file mode 100644
index 000000000..4974b0c91
--- /dev/null
+++ b/app/definitions/INotification.ts
@@ -0,0 +1,13 @@
+export interface INotification {
+	message: string;
+	style: string;
+	ejson: string;
+	collapse_key: string;
+	notId: string;
+	msgcnt: string;
+	title: string;
+	from: string;
+	image: string;
+	soundname: string;
+	getData: () => INotification;
+}
diff --git a/app/definitions/IPermission.ts b/app/definitions/IPermission.ts
new file mode 100644
index 000000000..0ccc13465
--- /dev/null
+++ b/app/definitions/IPermission.ts
@@ -0,0 +1,9 @@
+import Model from '@nozbe/watermelondb/Model';
+
+export interface IPermission {
+	id: string;
+	roles: string[];
+	_updatedAt: Date;
+}
+
+export type TPermissionModel = IPermission & Model;
diff --git a/app/definitions/IReaction.ts b/app/definitions/IReaction.ts
new file mode 100644
index 000000000..a28f5d06e
--- /dev/null
+++ b/app/definitions/IReaction.ts
@@ -0,0 +1,5 @@
+export interface IReaction {
+	_id: string;
+	emoji: string;
+	usernames: string[];
+}
diff --git a/app/definitions/IRocketChatRecord.ts b/app/definitions/IRocketChatRecord.ts
deleted file mode 100644
index 48d91fa84..000000000
--- a/app/definitions/IRocketChatRecord.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface IRocketChatRecord {
-	id: string;
-	updatedAt: Date;
-}
diff --git a/app/definitions/IRole.ts b/app/definitions/IRole.ts
new file mode 100644
index 000000000..1fec42150
--- /dev/null
+++ b/app/definitions/IRole.ts
@@ -0,0 +1,8 @@
+import Model from '@nozbe/watermelondb/Model';
+
+export interface IRole {
+	id: string;
+	description?: string;
+}
+
+export type TRoleModel = IRole & Model;
diff --git a/app/definitions/IRoom.ts b/app/definitions/IRoom.ts
index 786c1d7c8..503ea4dd7 100644
--- a/app/definitions/IRoom.ts
+++ b/app/definitions/IRoom.ts
@@ -1,27 +1,27 @@
-import { IRocketChatRecord } from './IRocketChatRecord';
+import Model from '@nozbe/watermelondb/Model';
 
-export enum RoomType {
-	GROUP = 'p',
-	DIRECT = 'd',
-	CHANNEL = 'c',
-	OMNICHANNEL = 'l',
-	THREAD = 'thread'
-}
+import { IServedBy } from './IServedBy';
+import { SubscriptionType } from './ISubscription';
 
-export interface IRoom extends IRocketChatRecord {
+export interface IRoom {
+	id: string;
 	rid: string;
-	t: RoomType;
+	prid: string;
+	t: SubscriptionType;
 	name: string;
-	fname: string;
-	prid?: string;
-	tmid?: string;
-	topic?: string;
-	teamMain?: boolean;
-	teamId?: string;
-	encrypted?: boolean;
-	visitor?: boolean;
-	autoTranslateLanguage?: boolean;
-	autoTranslate?: boolean;
-	observe?: Function;
-	usedCannedResponse: string;
+	teamMain: boolean;
+	alert?: boolean;
+	customFields: string[];
+	broadcast: boolean;
+	encrypted: boolean;
+	ro: boolean;
+	v?: string[];
+	servedBy?: IServedBy;
+	departmentId?: string;
+	livechatData?: any;
+	tags?: string[];
+	e2eKeyId?: string;
+	avatarETag?: string;
 }
+
+export type TRoomModel = IRoom & Model;
diff --git a/app/definitions/IServedBy.ts b/app/definitions/IServedBy.ts
new file mode 100644
index 000000000..4bf31aad2
--- /dev/null
+++ b/app/definitions/IServedBy.ts
@@ -0,0 +1,5 @@
+export interface IServedBy {
+	_id: string;
+	username: string;
+	ts: Date;
+}
diff --git a/app/definitions/IServer.ts b/app/definitions/IServer.ts
index 534a29c9c..0c3bf57d3 100644
--- a/app/definitions/IServer.ts
+++ b/app/definitions/IServer.ts
@@ -1,3 +1,5 @@
+import Model from '@nozbe/watermelondb/Model';
+
 export interface IServer {
 	name: string;
 	iconURL: string;
@@ -8,9 +10,11 @@ export interface IServer {
 	version: string;
 	lastLocalAuthenticatedSession: Date;
 	autoLock: boolean;
-	autoLockTime: number | null;
-	biometry: boolean | null;
+	autoLockTime?: number;
+	biometry?: boolean;
 	uniqueID: string;
 	enterpriseModules: string;
 	E2E_Enable: boolean;
 }
+
+export type TServerModel = IServer & Model;
diff --git a/app/definitions/IServerHistory.ts b/app/definitions/IServerHistory.ts
new file mode 100644
index 000000000..296cba4ed
--- /dev/null
+++ b/app/definitions/IServerHistory.ts
@@ -0,0 +1,10 @@
+import Model from '@nozbe/watermelondb/Model';
+
+export interface IServerHistory {
+	id: string;
+	url: string;
+	username: string;
+	updatedAt: Date;
+}
+
+export type TServerHistory = IServerHistory & Model;
diff --git a/app/definitions/ISettings.ts b/app/definitions/ISettings.ts
new file mode 100644
index 000000000..1fbb63ac8
--- /dev/null
+++ b/app/definitions/ISettings.ts
@@ -0,0 +1,12 @@
+import Model from '@nozbe/watermelondb/Model';
+
+export interface ISettings {
+	id: string;
+	valueAsString?: string;
+	valueAsBoolean?: boolean;
+	valueAsNumber?: number;
+	valueAsArray?: string[];
+	_updatedAt?: Date;
+}
+
+export type TSettingsModel = ISettings & Model;
diff --git a/app/definitions/ISlashCommand.ts b/app/definitions/ISlashCommand.ts
new file mode 100644
index 000000000..a859448df
--- /dev/null
+++ b/app/definitions/ISlashCommand.ts
@@ -0,0 +1,12 @@
+import Model from '@nozbe/watermelondb/Model';
+
+export interface ISlashCommand {
+	id: string;
+	params?: string;
+	description?: string;
+	clientOnly?: boolean;
+	providesPreview?: boolean;
+	appId?: string;
+}
+
+export type TSlashCommandModel = ISlashCommand & Model;
diff --git a/app/definitions/ISubscription.ts b/app/definitions/ISubscription.ts
new file mode 100644
index 000000000..1f241599a
--- /dev/null
+++ b/app/definitions/ISubscription.ts
@@ -0,0 +1,91 @@
+import Model from '@nozbe/watermelondb/Model';
+import Relation from '@nozbe/watermelondb/Relation';
+
+import { ILastMessage, TMessageModel } from './IMessage';
+import { IServedBy } from './IServedBy';
+import { TThreadModel } from './IThread';
+import { TThreadMessageModel } from './IThreadMessage';
+import { TUploadModel } from './IUpload';
+
+export enum SubscriptionType {
+	GROUP = 'p',
+	DIRECT = 'd',
+	CHANNEL = 'c',
+	OMNICHANNEL = 'l',
+	THREAD = 'thread'
+}
+
+export interface IVisitor {
+	_id: string;
+	username: string;
+	token: string;
+	status: string;
+	lastMessageTs: Date;
+}
+
+export interface ISubscription {
+	_id: string; // _id belongs watermelonDB
+	id: string; // id from server
+	f: boolean;
+	t: SubscriptionType;
+	ts: Date;
+	ls: Date;
+	name: string;
+	fname?: string;
+	rid: string; // the same as id
+	open: boolean;
+	alert: boolean;
+	roles?: string[];
+	unread: number;
+	userMentions: number;
+	groupMentions: number;
+	tunread?: string[];
+	tunreadUser?: string[];
+	tunreadGroup?: string[];
+	roomUpdatedAt: Date;
+	ro: boolean;
+	lastOpen?: Date;
+	description?: string;
+	announcement?: string;
+	bannerClosed?: boolean;
+	topic?: string;
+	blocked?: boolean;
+	blocker?: boolean;
+	reactWhenReadOnly?: boolean;
+	archived: boolean;
+	joinCodeRequired?: boolean;
+	muted?: string[];
+	ignored?: string[];
+	broadcast?: boolean;
+	prid?: string;
+	draftMessage?: string;
+	lastThreadSync?: Date;
+	jitsiTimeout?: number;
+	autoTranslate?: boolean;
+	autoTranslateLanguage: string;
+	lastMessage?: ILastMessage;
+	hideUnreadStatus?: boolean;
+	sysMes?: string[] | boolean;
+	uids?: string[];
+	usernames?: string[];
+	visitor?: IVisitor;
+	departmentId?: string;
+	servedBy?: IServedBy;
+	livechatData?: any;
+	tags?: string[];
+	E2EKey?: string;
+	encrypted?: boolean;
+	e2eKeyId?: string;
+	avatarETag?: string;
+	teamId?: string;
+	teamMain?: boolean;
+	search?: boolean;
+	username?: string;
+	// https://nozbe.github.io/WatermelonDB/Relation.html#relation-api
+	messages: Relation<TMessageModel>;
+	threads: Relation<TThreadModel>;
+	threadMessages: Relation<TThreadMessageModel>;
+	uploads: Relation<TUploadModel>;
+}
+
+export type TSubscriptionModel = ISubscription & Model;
diff --git a/app/definitions/ITheme.ts b/app/definitions/ITheme.ts
new file mode 100644
index 000000000..208a0b2d2
--- /dev/null
+++ b/app/definitions/ITheme.ts
@@ -0,0 +1,8 @@
+export type TThemeMode = 'automatic' | 'light' | 'dark';
+
+export type TDarkLevel = 'black' | 'dark';
+
+export interface IThemePreference {
+	currentTheme: TThemeMode;
+	darkLevel: TDarkLevel;
+}
diff --git a/app/definitions/IThread.ts b/app/definitions/IThread.ts
new file mode 100644
index 000000000..e97b2348c
--- /dev/null
+++ b/app/definitions/IThread.ts
@@ -0,0 +1,78 @@
+import Model from '@nozbe/watermelondb/Model';
+import { MarkdownAST } from '@rocket.chat/message-parser';
+
+import { IAttachment } from './IAttachment';
+import { IEditedBy, IUserChannel, IUserMention, IUserMessage } from './IMessage';
+import { IReaction } from './IReaction';
+import { SubscriptionType } from './ISubscription';
+
+export interface IUrl {
+	title: string;
+	description: string;
+	image: string;
+	url: string;
+}
+
+interface IFileThread {
+	_id: string;
+	name: string;
+	type: string;
+}
+
+export interface IThreadResult {
+	_id: string;
+	rid: string;
+	ts: string;
+	msg: string;
+	file?: IFileThread;
+	files?: IFileThread[];
+	groupable?: boolean;
+	attachments?: IAttachment[];
+	md?: MarkdownAST;
+	u: IUserMessage;
+	_updatedAt: string;
+	urls: IUrl[];
+	mentions: IUserMention[];
+	channels: IUserChannel[];
+	replies: string[];
+	tcount: number;
+	tlm: string;
+}
+
+export interface IThread {
+	id: string;
+	msg?: string;
+	t?: SubscriptionType;
+	rid?: string;
+	_updatedAt?: Date;
+	ts?: Date;
+	u?: IUserMessage;
+	alias?: string;
+	parseUrls?: boolean;
+	groupable?: boolean;
+	avatar?: string;
+	emoji?: string;
+	attachments?: IAttachment[];
+	urls?: IUrl[];
+	status?: number;
+	pinned?: boolean;
+	starred?: boolean;
+	editedBy?: IEditedBy;
+	reactions?: IReaction[];
+	role?: string;
+	drid?: string;
+	dcount?: number;
+	dlm?: number;
+	tmid?: string;
+	tcount: number | string;
+	tlm?: string;
+	replies?: string[];
+	mentions?: IUserMention[];
+	channels?: IUserChannel[];
+	unread?: boolean;
+	autoTranslate?: boolean;
+	translations?: any;
+	e2e?: string;
+}
+
+export type TThreadModel = IThread & Model;
diff --git a/app/definitions/IThreadMessage.ts b/app/definitions/IThreadMessage.ts
new file mode 100644
index 000000000..c773e4dc5
--- /dev/null
+++ b/app/definitions/IThreadMessage.ts
@@ -0,0 +1,44 @@
+import Model from '@nozbe/watermelondb/Model';
+
+import { IAttachment } from './IAttachment';
+import { IEditedBy, ITranslations, IUserChannel, IUserMention, IUserMessage } from './IMessage';
+import { IReaction } from './IReaction';
+import { SubscriptionType } from './ISubscription';
+
+export interface IThreadMessage {
+	msg?: string;
+	t?: SubscriptionType;
+	rid: string;
+	ts: Date;
+	u: IUserMessage;
+	alias?: string;
+	parseUrls?: boolean;
+	groupable?: boolean;
+	avatar?: string;
+	emoji?: string;
+	attachments?: IAttachment[];
+	urls?: string[];
+	_updatedAt?: Date;
+	status?: number;
+	pinned?: boolean;
+	starred?: boolean;
+	editedBy?: IEditedBy;
+	reactions?: IReaction[];
+	role?: string;
+	drid?: string;
+	dcount?: number;
+	dlm?: Date;
+	tmid?: string;
+	tcount?: number;
+	tlm?: Date;
+	replies?: string[];
+	mentions?: IUserMention[];
+	channels?: IUserChannel[];
+	unread?: boolean;
+	autoTranslate?: boolean;
+	translations?: ITranslations[];
+	e2e?: string;
+	subscription?: { id: string };
+}
+
+export type TThreadMessageModel = IThreadMessage & Model;
diff --git a/app/definitions/IUpload.ts b/app/definitions/IUpload.ts
new file mode 100644
index 000000000..6ff03c519
--- /dev/null
+++ b/app/definitions/IUpload.ts
@@ -0,0 +1,16 @@
+import Model from '@nozbe/watermelondb/Model';
+
+export interface IUpload {
+	id: string;
+	path?: string;
+	name?: string;
+	description?: string;
+	size: number;
+	type?: string;
+	store?: string;
+	progress: number;
+	error: boolean;
+	subscription: { id: string };
+}
+
+export type TUploadModel = IUpload & Model;
diff --git a/app/definitions/IUrl.ts b/app/definitions/IUrl.ts
new file mode 100644
index 000000000..9b72fda26
--- /dev/null
+++ b/app/definitions/IUrl.ts
@@ -0,0 +1,6 @@
+export interface IUrl {
+	title: string;
+	description: string;
+	image: string;
+	url: string;
+}
diff --git a/app/definitions/IUser.ts b/app/definitions/IUser.ts
new file mode 100644
index 000000000..012ef8087
--- /dev/null
+++ b/app/definitions/IUser.ts
@@ -0,0 +1,10 @@
+import Model from '@nozbe/watermelondb/Model';
+
+export interface IUser {
+	_id: string;
+	name?: string;
+	username: string;
+	avatarETag?: string;
+}
+
+export type TUserModel = IUser & Model;
diff --git a/app/definitions/index.ts b/app/definitions/index.ts
new file mode 100644
index 000000000..80eeb88ca
--- /dev/null
+++ b/app/definitions/index.ts
@@ -0,0 +1,19 @@
+import { RouteProp } from '@react-navigation/native';
+import { StackNavigationProp } from '@react-navigation/stack';
+import { Dispatch } from 'redux';
+
+export * from './IAttachment';
+export * from './IMessage';
+export * from './INotification';
+export * from './IRoom';
+export * from './IServer';
+export * from './ISubscription';
+
+export interface IBaseScreen<T extends Record<string, object | undefined>, S extends string> {
+	navigation: StackNavigationProp<T, S>;
+	route: RouteProp<T, S>;
+	dispatch: Dispatch;
+	theme: string;
+}
+
+export * from './redux';
diff --git a/app/navigationTypes.ts b/app/definitions/navigationTypes.ts
similarity index 63%
rename from app/navigationTypes.ts
rename to app/definitions/navigationTypes.ts
index 568b75d0f..6e2020943 100644
--- a/app/navigationTypes.ts
+++ b/app/definitions/navigationTypes.ts
@@ -1,10 +1,21 @@
 import { NavigatorScreenParams } from '@react-navigation/core';
+import { StackNavigationOptions } from '@react-navigation/stack';
 
-import { IRoom } from './definitions/IRoom';
-import { IServer } from './definitions/IServer';
-import { IAttachment } from './definitions/IAttachment';
-import { MasterDetailInsideStackParamList } from './stacks/MasterDetailStack/types';
-import { OutsideParamList, InsideStackParamList } from './stacks/types';
+import { ISubscription } from './ISubscription';
+import { IServer } from './IServer';
+import { IAttachment } from './IAttachment';
+import { MasterDetailInsideStackParamList } from '../stacks/MasterDetailStack/types';
+import { OutsideParamList, InsideStackParamList } from '../stacks/types';
+
+interface INavigationProps {
+	route?: any;
+	navigation?: any;
+	isMasterDetail?: boolean;
+}
+
+export type TNavigationOptions = {
+	navigationOptions?(props: INavigationProps): StackNavigationOptions;
+};
 
 export type SetUsernameStackParamList = {
 	SetUsernameView: {
@@ -28,7 +39,7 @@ export type ShareInsideStackParamList = {
 		isShareExtension: boolean;
 		serverInfo: IServer;
 		text: string;
-		room: IRoom;
+		room: ISubscription;
 		thread: any; // TODO: Change
 	};
 	SelectServerView: undefined;
diff --git a/app/definitions/redux/index.ts b/app/definitions/redux/index.ts
new file mode 100644
index 000000000..e95763e29
--- /dev/null
+++ b/app/definitions/redux/index.ts
@@ -0,0 +1,31 @@
+import { TActionSelectedUsers } from '../../actions/selectedUsers';
+import { TActionActiveUsers } from '../../actions/activeUsers';
+// REDUCERS
+import { IActiveUsers } from '../../reducers/activeUsers';
+import { ISelectedUsers } from '../../reducers/selectedUsers';
+
+export interface IApplicationState {
+	settings: any;
+	login: any;
+	meteor: any;
+	server: any;
+	selectedUsers: ISelectedUsers;
+	createChannel: any;
+	app: any;
+	room: any;
+	rooms: any;
+	sortPreferences: any;
+	share: any;
+	customEmojis: any;
+	activeUsers: IActiveUsers;
+	usersTyping: any;
+	inviteLinks: any;
+	createDiscussion: any;
+	inquiry: any;
+	enterpriseModules: any;
+	encryption: any;
+	permissions: any;
+	roles: any;
+}
+
+export type TApplicationActions = TActionActiveUsers & TActionSelectedUsers;
diff --git a/app/dimensions.tsx b/app/dimensions.tsx
index 676009683..ddf95d6d3 100644
--- a/app/dimensions.tsx
+++ b/app/dimensions.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { Dimensions } from 'react-native';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 
+import { TNavigationOptions } from './definitions/navigationTypes';
+
 export interface IDimensionsContextProps {
 	width: number;
 	height?: number;
@@ -22,10 +24,11 @@ export interface IDimensionsContextProps {
 
 export const DimensionsContext = React.createContext<Partial<IDimensionsContextProps>>(Dimensions.get('window'));
 
-export function withDimensions(Component: any): any {
-	const DimensionsComponent = (props: any) => (
+export function withDimensions<T extends object>(Component: React.ComponentType<T> & TNavigationOptions): typeof Component {
+	const DimensionsComponent = (props: T) => (
 		<DimensionsContext.Consumer>{contexts => <Component {...props} {...contexts} />}</DimensionsContext.Consumer>
 	);
+
 	hoistNonReactStatics(DimensionsComponent, Component);
 	return DimensionsComponent;
 }
diff --git a/app/externalModules.d.ts b/app/externalModules.d.ts
index f68cb5e39..02c57204f 100644
--- a/app/externalModules.d.ts
+++ b/app/externalModules.d.ts
@@ -13,3 +13,4 @@ declare module 'react-native-mime-types';
 declare module 'react-native-restart';
 declare module 'react-native-prompt-android';
 declare module 'react-native-jitsi-meet';
+declare module 'rn-root-view';
diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json
index f7e5a5493..499a50e7a 100644
--- a/app/i18n/locales/en.json
+++ b/app/i18n/locales/en.json
@@ -249,8 +249,10 @@
   "Full_table": "Click to see full table",
   "Generate_New_Link": "Generate New Link",
   "Has_joined_the_channel": "has joined the channel",
+  "Has_joined_the_team": "has joined the team",
   "Has_joined_the_conversation": "has joined the conversation",
   "Has_left_the_channel": "has left the channel",
+  "Has_left_the_team": "has left the team",
   "Hide_System_Messages": "Hide System Messages",
   "Hide_type_messages": "Hide \"{{type}}\" messages",
   "How_It_Works": "How It Works",
diff --git a/app/index.tsx b/app/index.tsx
index e6457e233..cc0a06a26 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -30,6 +30,8 @@ import InAppNotification from './containers/InAppNotification';
 import { ActionSheetProvider } from './containers/ActionSheet';
 import debounce from './utils/debounce';
 import { isFDroidBuild } from './constants/environment';
+import { IThemePreference } from './definitions/ITheme';
+import { ICommand } from './definitions/ICommand';
 
 RNScreens.enableScreens();
 
@@ -42,10 +44,7 @@ interface IDimensions {
 
 interface IState {
 	theme: string;
-	themePreferences: {
-		currentTheme: 'automatic' | 'light';
-		darkLevel: string;
-	};
+	themePreferences: IThemePreference;
 	width: number;
 	height: number;
 	scale: number;
@@ -175,7 +174,7 @@ export default class Root extends React.Component<{}, IState> {
 	setTheme = (newTheme = {}) => {
 		// change theme state
 		this.setState(
-			prevState => newThemeState(prevState, newTheme),
+			prevState => newThemeState(prevState, newTheme as IThemePreference),
 			() => {
 				const { themePreferences } = this.state;
 				// subscribe to Appearance changes
@@ -191,7 +190,7 @@ export default class Root extends React.Component<{}, IState> {
 	initTablet = () => {
 		const { width } = this.state;
 		this.setMasterDetail(width);
-		this.onKeyCommands = KeyCommandsEmitter.addListener('onKeyCommand', (command: unknown) => {
+		this.onKeyCommands = KeyCommandsEmitter.addListener('onKeyCommand', (command: ICommand) => {
 			EventEmitter.emit(KEY_COMMAND, { event: command });
 		});
 	};
diff --git a/app/lib/rocketchat.js b/app/lib/rocketchat.js
index 239487b1b..ac923025f 100644
--- a/app/lib/rocketchat.js
+++ b/app/lib/rocketchat.js
@@ -835,17 +835,21 @@ const RocketChat = {
 		// RC 3.13.0
 		return this.post('teams.removeRoom', { roomId, teamId });
 	},
-	leaveTeam({ teamName, rooms }) {
+	leaveTeam({ teamId, rooms }) {
 		// RC 3.13.0
-		return this.post('teams.leave', { teamName, rooms });
+		return this.post('teams.leave', {
+			teamId,
+			// RC 4.2.0
+			...(rooms?.length && { rooms })
+		});
 	},
-	removeTeamMember({ teamId, teamName, userId, rooms }) {
+	removeTeamMember({ teamId, userId, rooms }) {
 		// RC 3.13.0
 		return this.post('teams.removeMember', {
 			teamId,
-			teamName,
 			userId,
-			rooms
+			// RC 4.2.0
+			...(rooms?.length && { rooms })
 		});
 	},
 	updateTeamRoom({ roomId, isDefault }) {
diff --git a/app/lib/userPreferences.js b/app/lib/userPreferences.ts
similarity index 75%
rename from app/lib/userPreferences.js
rename to app/lib/userPreferences.ts
index 3377856d6..6f4818da6 100644
--- a/app/lib/userPreferences.js
+++ b/app/lib/userPreferences.ts
@@ -7,11 +7,12 @@ const MMKV = new MMKVStorage.Loader()
 	.initialize();
 
 class UserPreferences {
+	private mmkv: MMKVStorage.API;
 	constructor() {
 		this.mmkv = MMKV;
 	}
 
-	async getStringAsync(key) {
+	async getStringAsync(key: string) {
 		try {
 			const value = await this.mmkv.getStringAsync(key);
 			return value;
@@ -20,11 +21,11 @@ class UserPreferences {
 		}
 	}
 
-	setStringAsync(key, value) {
+	setStringAsync(key: string, value: string) {
 		return this.mmkv.setStringAsync(key, value);
 	}
 
-	async getBoolAsync(key) {
+	async getBoolAsync(key: string) {
 		try {
 			const value = await this.mmkv.getBoolAsync(key);
 			return value;
@@ -33,11 +34,11 @@ class UserPreferences {
 		}
 	}
 
-	setBoolAsync(key, value) {
+	setBoolAsync(key: string, value: boolean) {
 		return this.mmkv.setBoolAsync(key, value);
 	}
 
-	async getMapAsync(key) {
+	async getMapAsync(key: string) {
 		try {
 			const value = await this.mmkv.getMapAsync(key);
 			return value;
@@ -46,11 +47,11 @@ class UserPreferences {
 		}
 	}
 
-	setMapAsync(key, value) {
+	setMapAsync(key: string, value: object) {
 		return this.mmkv.setMapAsync(key, value);
 	}
 
-	removeItem(key) {
+	removeItem(key: string) {
 		return this.mmkv.removeItem(key);
 	}
 }
diff --git a/app/notifications/push/index.js b/app/notifications/push/index.js
deleted file mode 100644
index 074e22bf3..000000000
--- a/app/notifications/push/index.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import EJSON from 'ejson';
-
-import store from '../../lib/createStore';
-import { deepLinkingOpen } from '../../actions/deepLinking';
-import { isFDroidBuild } from '../../constants/environment';
-import PushNotification from './push';
-
-export const onNotification = notification => {
-	if (notification) {
-		const data = notification.getData();
-		if (data) {
-			try {
-				const { rid, name, sender, type, host, messageType, messageId } = EJSON.parse(data.ejson);
-
-				const types = {
-					c: 'channel',
-					d: 'direct',
-					p: 'group',
-					l: 'channels'
-				};
-				let roomName = type === 'd' ? sender.username : name;
-				if (type === 'l') {
-					roomName = sender.name;
-				}
-
-				const params = {
-					host,
-					rid,
-					messageId,
-					path: `${types[type]}/${roomName}`,
-					isCall: messageType === 'jitsi_call_started'
-				};
-				store.dispatch(deepLinkingOpen(params));
-			} catch (e) {
-				console.warn(e);
-			}
-		}
-	}
-};
-
-export const getDeviceToken = () => PushNotification.getDeviceToken();
-export const setBadgeCount = count => PushNotification.setBadgeCount(count);
-export const initializePushNotifications = () => {
-	if (!isFDroidBuild) {
-		setBadgeCount();
-		return PushNotification.configure({
-			onNotification
-		});
-	}
-};
diff --git a/app/notifications/push/index.ts b/app/notifications/push/index.ts
new file mode 100644
index 000000000..09fa86027
--- /dev/null
+++ b/app/notifications/push/index.ts
@@ -0,0 +1,58 @@
+import EJSON from 'ejson';
+
+import store from '../../lib/createStore';
+import { deepLinkingOpen } from '../../actions/deepLinking';
+import { isFDroidBuild } from '../../constants/environment';
+import PushNotification from './push';
+import { INotification, SubscriptionType } from '../../definitions';
+
+interface IEjson {
+	rid: string;
+	name: string;
+	sender: { username: string; name: string };
+	type: string;
+	host: string;
+	messageType: string;
+	messageId: string;
+}
+
+export const onNotification = (push: INotification): void => {
+	if (push) {
+		try {
+			const notification = push?.getData();
+			const { rid, name, sender, type, host, messageType, messageId }: IEjson = EJSON.parse(notification.ejson);
+
+			const types: Record<string, string> = {
+				c: 'channel',
+				d: 'direct',
+				p: 'group',
+				l: 'channels'
+			};
+			let roomName = type === SubscriptionType.DIRECT ? sender.username : name;
+			if (type === SubscriptionType.OMNICHANNEL) {
+				roomName = sender.name;
+			}
+
+			const params = {
+				host,
+				rid,
+				messageId,
+				path: `${types[type]}/${roomName}`,
+				isCall: messageType === 'jitsi_call_started'
+			};
+			// TODO REDUX MIGRATION TO TS
+			store.dispatch(deepLinkingOpen(params));
+		} catch (e) {
+			console.warn(e);
+		}
+	}
+};
+
+export const getDeviceToken = (): string => PushNotification.getDeviceToken();
+export const setBadgeCount = (count?: number): void => PushNotification.setBadgeCount(count);
+export const initializePushNotifications = (): Promise<INotification> | undefined => {
+	if (!isFDroidBuild) {
+		setBadgeCount();
+		return PushNotification.configure(onNotification);
+	}
+};
diff --git a/app/notifications/push/push.android.js b/app/notifications/push/push.android.js
deleted file mode 100644
index 51e767ad3..000000000
--- a/app/notifications/push/push.android.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { NotificationsAndroid, PendingNotifications } from 'react-native-notifications';
-
-class PushNotification {
-	constructor() {
-		this.onRegister = null;
-		this.onNotification = null;
-		this.deviceToken = null;
-
-		NotificationsAndroid.setRegistrationTokenUpdateListener(deviceToken => {
-			this.deviceToken = deviceToken;
-		});
-
-		NotificationsAndroid.setNotificationOpenedListener(notification => {
-			this.onNotification(notification);
-		});
-	}
-
-	getDeviceToken() {
-		return this.deviceToken;
-	}
-
-	setBadgeCount = () => {};
-
-	configure(params) {
-		this.onRegister = params.onRegister;
-		this.onNotification = params.onNotification;
-		NotificationsAndroid.refreshToken();
-		return PendingNotifications.getInitialNotification();
-	}
-}
-
-export default new PushNotification();
diff --git a/app/notifications/push/push.ios.js b/app/notifications/push/push.ios.ts
similarity index 52%
rename from app/notifications/push/push.ios.js
rename to app/notifications/push/push.ios.ts
index 068be4ee9..a6b1118c5 100644
--- a/app/notifications/push/push.ios.js
+++ b/app/notifications/push/push.ios.ts
@@ -1,29 +1,25 @@
-import NotificationsIOS, { NotificationAction, NotificationCategory } from 'react-native-notifications';
+// @ts-ignore
+// TODO BUMP LIB VERSION
+import NotificationsIOS, { NotificationAction, NotificationCategory, Notification } from 'react-native-notifications';
 
 import reduxStore from '../../lib/createStore';
 import I18n from '../../i18n';
-
-const replyAction = new NotificationAction({
-	activationMode: 'background',
-	title: I18n.t('Reply'),
-	textInput: {
-		buttonTitle: I18n.t('Reply'),
-		placeholder: I18n.t('Type_message')
-	},
-	identifier: 'REPLY_ACTION'
-});
+import { INotification } from '../../definitions/INotification';
 
 class PushNotification {
-	constructor() {
-		this.onRegister = null;
-		this.onNotification = null;
-		this.deviceToken = null;
+	onNotification: (notification: Notification) => void;
+	deviceToken: string;
 
-		NotificationsIOS.addEventListener('remoteNotificationsRegistered', deviceToken => {
+	constructor() {
+		this.onNotification = () => {};
+		this.deviceToken = '';
+
+		NotificationsIOS.addEventListener('remoteNotificationsRegistered', (deviceToken: string) => {
 			this.deviceToken = deviceToken;
 		});
 
-		NotificationsIOS.addEventListener('notificationOpened', (notification, completion) => {
+		NotificationsIOS.addEventListener('notificationOpened', (notification: Notification, completion: () => void) => {
+			// TODO REDUX MIGRATION TO TS
 			const { background } = reduxStore.getState().app;
 			if (background) {
 				this.onNotification(notification);
@@ -31,13 +27,22 @@ class PushNotification {
 			completion();
 		});
 
-		const actions = [];
-		actions.push(
+		const actions = [
 			new NotificationCategory({
 				identifier: 'MESSAGE',
-				actions: [replyAction]
+				actions: [
+					new NotificationAction({
+						activationMode: 'background',
+						title: I18n.t('Reply'),
+						textInput: {
+							buttonTitle: I18n.t('Reply'),
+							placeholder: I18n.t('Type_message')
+						},
+						identifier: 'REPLY_ACTION'
+					})
+				]
 			})
-		);
+		];
 		NotificationsIOS.requestPermissions(actions);
 	}
 
@@ -49,12 +54,9 @@ class PushNotification {
 		NotificationsIOS.setBadgesCount(count);
 	};
 
-	async configure(params) {
-		this.onRegister = params.onRegister;
-		this.onNotification = params.onNotification;
-
+	async configure(onNotification: (notification: INotification) => void) {
+		this.onNotification = onNotification;
 		const initial = await NotificationsIOS.getInitialNotification();
-		// NotificationsIOS.consumeBackgroundQueue();
 		return Promise.resolve(initial);
 	}
 }
diff --git a/app/notifications/push/push.ts b/app/notifications/push/push.ts
new file mode 100644
index 000000000..11eccbcb5
--- /dev/null
+++ b/app/notifications/push/push.ts
@@ -0,0 +1,36 @@
+// @ts-ignore
+// TODO BUMP LIB VERSION
+import { NotificationsAndroid, PendingNotifications, Notification } from 'react-native-notifications';
+
+import { INotification } from '../../definitions/INotification';
+
+class PushNotification {
+	onNotification: (notification: Notification) => void;
+	deviceToken: string;
+	constructor() {
+		this.onNotification = () => {};
+		this.deviceToken = '';
+
+		NotificationsAndroid.setRegistrationTokenUpdateListener((deviceToken: string) => {
+			this.deviceToken = deviceToken;
+		});
+
+		NotificationsAndroid.setNotificationOpenedListener((notification: Notification) => {
+			this.onNotification(notification);
+		});
+	}
+
+	getDeviceToken() {
+		return this.deviceToken;
+	}
+
+	setBadgeCount = (_?: number) => {};
+
+	configure(onNotification: (notification: INotification) => void) {
+		this.onNotification = onNotification;
+		NotificationsAndroid.refreshToken();
+		return PendingNotifications.getInitialNotification();
+	}
+}
+
+export default new PushNotification();
diff --git a/app/presentation/RoomItem/Actions.tsx b/app/presentation/RoomItem/Actions.tsx
index 19c63baaf..2b53955a9 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 cedd3b0ff..29343477a 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 fcd529c81..e823d94e9 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 cb4d6e1bd..30c3283d3 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/presentation/ServerItem/index.tsx b/app/presentation/ServerItem/index.tsx
index 772fac212..a9016753b 100644
--- a/app/presentation/ServerItem/index.tsx
+++ b/app/presentation/ServerItem/index.tsx
@@ -18,9 +18,9 @@ interface IServerItem {
 		name: string;
 	};
 	onPress(): void;
-	onLongPress(): void;
-	hasCheck: boolean;
-	theme: string;
+	onLongPress?(): void;
+	hasCheck?: boolean;
+	theme?: string;
 }
 
 const defaultLogo = require('../../static/images/logo.png');
@@ -31,10 +31,10 @@ const ServerItem = React.memo(({ item, onPress, onLongPress, hasCheck, theme }:
 		onLongPress={() => onLongPress?.()}
 		testID={`rooms-list-header-server-${item.id}`}
 		android_ripple={{
-			color: themes[theme].bannerBackground
+			color: themes[theme!].bannerBackground
 		}}
 		style={({ pressed }: any) => ({
-			backgroundColor: isIOS && pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor
+			backgroundColor: isIOS && pressed ? themes[theme!].bannerBackground : themes[theme!].backgroundColor
 		})}>
 		<View style={styles.serverItemContainer}>
 			{item.iconURL ? (
@@ -52,14 +52,14 @@ const ServerItem = React.memo(({ item, onPress, onLongPress, hasCheck, theme }:
 				<FastImage source={defaultLogo} style={styles.serverIcon} />
 			)}
 			<View style={styles.serverTextContainer}>
-				<Text numberOfLines={1} style={[styles.serverName, { color: themes[theme].titleText }]}>
+				<Text numberOfLines={1} style={[styles.serverName, { color: themes[theme!].titleText }]}>
 					{item.name || item.id}
 				</Text>
-				<Text numberOfLines={1} style={[styles.serverUrl, { color: themes[theme].auxiliaryText }]}>
+				<Text numberOfLines={1} style={[styles.serverUrl, { color: themes[theme!].auxiliaryText }]}>
 					{item.id}
 				</Text>
 			</View>
-			{hasCheck ? <Check theme={theme} /> : null}
+			{hasCheck ? <Check theme={theme!} /> : null}
 		</View>
 	</Pressable>
 ));
diff --git a/app/presentation/TextInput.tsx b/app/presentation/TextInput.tsx
index 028b811b5..4d575fa8f 100644
--- a/app/presentation/TextInput.tsx
+++ b/app/presentation/TextInput.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { I18nManager, StyleProp, StyleSheet, TextInput, TextInputProps, TextStyle } from 'react-native';
+import { I18nManager, StyleProp, StyleSheet, TextInput, TextStyle } from 'react-native';
 
+import { IRCTextInputProps } from '../containers/TextInput';
 import { themes } from '../constants/colors';
 
 const styles = StyleSheet.create({
@@ -9,7 +10,7 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface IThemedTextInput extends TextInputProps {
+interface IThemedTextInput extends IRCTextInputProps {
 	style: StyleProp<TextStyle>;
 	theme: string;
 }
diff --git a/app/presentation/UnreadBadge/index.tsx b/app/presentation/UnreadBadge/index.tsx
index 609278b92..96cff5cab 100644
--- a/app/presentation/UnreadBadge/index.tsx
+++ b/app/presentation/UnreadBadge/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 
 import sharedStyles from '../../views/Styles';
 import { getUnreadStyle } from './getUnreadStyle';
@@ -30,15 +30,15 @@ const styles = StyleSheet.create({
 });
 
 interface IUnreadBadge {
-	theme: string;
-	unread: number;
-	userMentions: number;
-	groupMentions: number;
-	style: object;
-	tunread: [];
-	tunreadUser: [];
-	tunreadGroup: [];
-	small: boolean;
+	theme?: string;
+	unread?: number;
+	userMentions?: number;
+	groupMentions?: number;
+	style?: ViewStyle;
+	tunread?: [];
+	tunreadUser?: [];
+	tunreadGroup?: [];
+	small?: boolean;
 }
 
 const UnreadBadge = React.memo(
diff --git a/app/reducers/activeUsers.js b/app/reducers/activeUsers.js
deleted file mode 100644
index 8f6c5b38a..000000000
--- a/app/reducers/activeUsers.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { SET_ACTIVE_USERS } from '../actions/actionsTypes';
-
-const initialState = {};
-
-export default function activeUsers(state = initialState, action) {
-	switch (action.type) {
-		case SET_ACTIVE_USERS:
-			return {
-				...state,
-				...action.activeUsers
-			};
-		default:
-			return state;
-	}
-}
diff --git a/app/reducers/activeUsers.test.ts b/app/reducers/activeUsers.test.ts
new file mode 100644
index 000000000..fbe35207a
--- /dev/null
+++ b/app/reducers/activeUsers.test.ts
@@ -0,0 +1,16 @@
+import { setActiveUsers } from '../actions/activeUsers';
+import { IActiveUsers, initialState } from './activeUsers';
+import { mockedStore } from './mockedStore';
+
+describe('test reducer', () => {
+	it('should return initial state', () => {
+		const state = mockedStore.getState().activeUsers;
+		expect(state).toEqual(initialState);
+	});
+	it('should return modified store after action', () => {
+		const activeUsers: IActiveUsers = { any: { status: 'online', statusText: 'any' } };
+		mockedStore.dispatch(setActiveUsers(activeUsers));
+		const state = mockedStore.getState().activeUsers;
+		expect(state).toEqual({ ...activeUsers });
+	});
+});
diff --git a/app/reducers/activeUsers.ts b/app/reducers/activeUsers.ts
new file mode 100644
index 000000000..9877a5ceb
--- /dev/null
+++ b/app/reducers/activeUsers.ts
@@ -0,0 +1,26 @@
+import { TApplicationActions } from '../definitions';
+import { SET_ACTIVE_USERS } from '../actions/actionsTypes';
+
+type TUserStatus = 'online' | 'offline';
+export interface IActiveUser {
+	status: TUserStatus;
+	statusText?: string;
+}
+
+export interface IActiveUsers {
+	[key: string]: IActiveUser;
+}
+
+export const initialState: IActiveUsers = {};
+
+export default function activeUsers(state = initialState, action: TApplicationActions): IActiveUsers {
+	switch (action.type) {
+		case SET_ACTIVE_USERS:
+			return {
+				...state,
+				...action.activeUsers
+			};
+		default:
+			return state;
+	}
+}
diff --git a/app/reducers/mockedStore.ts b/app/reducers/mockedStore.ts
new file mode 100644
index 000000000..5a03297f2
--- /dev/null
+++ b/app/reducers/mockedStore.ts
@@ -0,0 +1,7 @@
+import { applyMiddleware, compose, createStore } from 'redux';
+import createSagaMiddleware from 'redux-saga';
+
+import reducers from '.';
+
+const enhancers = compose(applyMiddleware(createSagaMiddleware()));
+export const mockedStore = createStore(reducers, enhancers);
diff --git a/app/reducers/selectedUsers.test.ts b/app/reducers/selectedUsers.test.ts
new file mode 100644
index 000000000..329be4f91
--- /dev/null
+++ b/app/reducers/selectedUsers.test.ts
@@ -0,0 +1,36 @@
+import { addUser, reset, setLoading, removeUser } from '../actions/selectedUsers';
+import { mockedStore } from './mockedStore';
+import { initialState } from './selectedUsers';
+
+describe('test selectedUsers reducer', () => {
+	it('should return initial state', () => {
+		const state = mockedStore.getState().selectedUsers;
+		expect(state).toEqual(initialState);
+	});
+
+	it('should return modified store after addUser', () => {
+		const user = { _id: 'xxx', name: 'xxx', fname: 'xxx' };
+		mockedStore.dispatch(addUser(user));
+		const state = mockedStore.getState().selectedUsers.users;
+		expect(state).toEqual([user]);
+	});
+
+	it('should return empty store after remove user', () => {
+		const user = { _id: 'xxx', name: 'xxx', fname: 'xxx' };
+		mockedStore.dispatch(removeUser(user));
+		const state = mockedStore.getState().selectedUsers.users;
+		expect(state).toEqual([]);
+	});
+
+	it('should return initial state after reset', () => {
+		mockedStore.dispatch(reset());
+		const state = mockedStore.getState().selectedUsers;
+		expect(state).toEqual(initialState);
+	});
+
+	it('should return loading after call action', () => {
+		mockedStore.dispatch(setLoading(true));
+		const state = mockedStore.getState().selectedUsers.loading;
+		expect(state).toEqual(true);
+	});
+});
diff --git a/app/reducers/selectedUsers.js b/app/reducers/selectedUsers.ts
similarity index 55%
rename from app/reducers/selectedUsers.js
rename to app/reducers/selectedUsers.ts
index 42d7982c1..f6573ac9e 100644
--- a/app/reducers/selectedUsers.js
+++ b/app/reducers/selectedUsers.ts
@@ -1,11 +1,26 @@
+import { TApplicationActions } from '../definitions';
 import { SELECTED_USERS } from '../actions/actionsTypes';
 
-const initialState = {
+export interface ISelectedUser {
+	_id: string;
+	name: string;
+	fname: string;
+	search?: boolean;
+	// username is used when is from searching
+	username?: string;
+}
+
+export interface ISelectedUsers {
+	users: ISelectedUser[];
+	loading: boolean;
+}
+
+export const initialState: ISelectedUsers = {
 	users: [],
 	loading: false
 };
 
-export default function (state = initialState, action) {
+export default function (state = initialState, action: TApplicationActions): ISelectedUsers {
 	switch (action.type) {
 		case SELECTED_USERS.ADD_USER:
 			return {
diff --git a/app/reducers/sortPreferences.js b/app/reducers/sortPreferences.js
index 31b501852..4ad9e797d 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/sagas/room.js b/app/sagas/room.js
index e3437a4ae..f45bf123a 100644
--- a/app/sagas/room.js
+++ b/app/sagas/room.js
@@ -67,7 +67,7 @@ const handleLeaveRoom = function* handleLeaveRoom({ room, roomType, selected })
 		if (roomType === 'channel') {
 			result = yield RocketChat.leaveRoom(room.rid, room.t);
 		} else if (roomType === 'team') {
-			result = yield RocketChat.leaveTeam({ teamName: room.name, ...(selected && { rooms: selected }) });
+			result = yield RocketChat.leaveTeam({ teamId: room.teamId, ...(selected && { rooms: selected }) });
 		}
 
 		if (result?.success) {
diff --git a/app/share.tsx b/app/share.tsx
index daee2fba0..4af2d6026 100644
--- a/app/share.tsx
+++ b/app/share.tsx
@@ -14,6 +14,7 @@ import { defaultHeader, getActiveRouteName, navigationTheme, themedHeader } from
 import RocketChat, { THEME_PREFERENCES_KEY } from './lib/rocketchat';
 import { ThemeContext } from './theme';
 import { localAuthenticate } from './utils/localAuthentication';
+import { IThemePreference } from './definitions/ITheme';
 import ScreenLockedView from './views/ScreenLockedView';
 // Outside Stack
 import WithoutServersView from './views/WithoutServersView';
@@ -25,7 +26,7 @@ import { setCurrentScreen } from './utils/log';
 import AuthLoadingView from './views/AuthLoadingView';
 import { DimensionsContext } from './dimensions';
 import debounce from './utils/debounce';
-import { ShareInsideStackParamList, ShareOutsideStackParamList, ShareAppStackParamList } from './navigationTypes';
+import { ShareInsideStackParamList, ShareOutsideStackParamList, ShareAppStackParamList } from './definitions/navigationTypes';
 
 interface IDimensions {
 	width: number;
@@ -36,10 +37,7 @@ interface IDimensions {
 
 interface IState {
 	theme: string;
-	themePreferences: {
-		currentTheme: 'automatic' | 'light';
-		darkLevel: string;
-	};
+	themePreferences: IThemePreference;
 	root: any;
 	width: number;
 	height: number;
@@ -135,7 +133,7 @@ class Root extends React.Component<{}, IState> {
 	setTheme = (newTheme = {}) => {
 		// change theme state
 		this.setState(
-			prevState => newThemeState(prevState, newTheme),
+			prevState => newThemeState(prevState, newTheme as IThemePreference),
 			() => {
 				const { themePreferences } = this.state;
 				// subscribe to Appearance changes
diff --git a/app/stacks/MasterDetailStack/ModalContainer.tsx b/app/stacks/MasterDetailStack/ModalContainer.tsx
index aeea3d88c..376ff8769 100644
--- a/app/stacks/MasterDetailStack/ModalContainer.tsx
+++ b/app/stacks/MasterDetailStack/ModalContainer.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
+import { StyleSheet, TouchableWithoutFeedback, useWindowDimensions, View } from 'react-native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { NavigationContainerProps } from '@react-navigation/core';
 
@@ -23,11 +23,21 @@ const styles = StyleSheet.create({
 	}
 });
 
-export const ModalContainer = ({ navigation, children, theme }: IModalContainer): JSX.Element => (
-	<View style={[styles.root, { backgroundColor: `${themes[theme].backdropColor}70` }]}>
-		<TouchableWithoutFeedback onPress={() => navigation.pop()}>
-			<View style={styles.backdrop} />
-		</TouchableWithoutFeedback>
-		<View style={sharedStyles.modalFormSheet}>{children}</View>
-	</View>
-);
+export const ModalContainer = ({ navigation, children, theme }: IModalContainer): JSX.Element => {
+	const { height } = useWindowDimensions();
+	const modalHeight = sharedStyles.modalFormSheet.height;
+	return (
+		<View style={[styles.root, { backgroundColor: `${themes[theme].backdropColor}70` }]}>
+			<TouchableWithoutFeedback onPress={() => navigation.pop()}>
+				<View style={styles.backdrop} />
+			</TouchableWithoutFeedback>
+			<View
+				style={{
+					...sharedStyles.modalFormSheet,
+					height: modalHeight > height ? height : modalHeight
+				}}>
+				{children}
+			</View>
+		</View>
+	);
+};
diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx
index 4a945fc0e..ad5dc2b99 100644
--- a/app/stacks/MasterDetailStack/index.tsx
+++ b/app/stacks/MasterDetailStack/index.tsx
@@ -116,10 +116,10 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 				<ModalStack.Screen
 					name='RoomActionsView'
 					component={RoomActionsView}
-					options={props => RoomActionsView.navigationOptions({ ...props, isMasterDetail: true })}
+					options={props => RoomActionsView.navigationOptions!({ ...props, isMasterDetail: true })}
 				/>
 				<ModalStack.Screen name='RoomInfoView' component={RoomInfoView} options={RoomInfoView.navigationOptions} />
-				<ModalStack.Screen name='SelectListView' component={SelectListView} options={SelectListView.navigationOptions} />
+				<ModalStack.Screen name='SelectListView' component={SelectListView} />
 				<ModalStack.Screen name='RoomInfoEditView' component={RoomInfoEditView} options={RoomInfoEditView.navigationOptions} />
 				<ModalStack.Screen name='RoomMembersView' component={RoomMembersView} options={RoomMembersView.navigationOptions} />
 				<ModalStack.Screen
@@ -145,12 +145,12 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 				<ModalStack.Screen
 					name='DirectoryView'
 					component={DirectoryView}
-					options={props => DirectoryView.navigationOptions({ ...props, isMasterDetail: true })}
+					options={props => DirectoryView.navigationOptions!({ ...props, isMasterDetail: true })}
 				/>
 				<ModalStack.Screen
 					name='QueueListView'
 					component={QueueListView}
-					options={props => QueueListView.navigationOptions({ ...props, isMasterDetail: true })}
+					options={props => QueueListView.navigationOptions!({ ...props, isMasterDetail: true })}
 				/>
 				<ModalStack.Screen
 					name='NotificationPrefView'
@@ -172,12 +172,12 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 				<ModalStack.Screen
 					name='ReadReceiptsView'
 					component={ReadReceiptsView}
-					options={props => ReadReceiptsView.navigationOptions({ ...props, isMasterDetail: true })}
+					options={props => ReadReceiptsView.navigationOptions!({ ...props, isMasterDetail: true })}
 				/>
 				<ModalStack.Screen
 					name='SettingsView'
 					component={SettingsView}
-					options={props => SettingsView.navigationOptions({ ...props, isMasterDetail: true })}
+					options={props => SettingsView.navigationOptions!({ ...props, isMasterDetail: true })}
 				/>
 				<ModalStack.Screen name='LanguageView' component={LanguageView} options={LanguageView.navigationOptions} />
 				<ModalStack.Screen name='ThemeView' component={ThemeView} options={ThemeView.navigationOptions} />
@@ -195,13 +195,13 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 				<ModalStack.Screen
 					name='ProfileView'
 					component={ProfileView}
-					options={props => ProfileView.navigationOptions({ ...props, isMasterDetail: true })}
+					options={props => ProfileView.navigationOptions!({ ...props, isMasterDetail: true })}
 				/>
 				<ModalStack.Screen name='DisplayPrefsView' component={DisplayPrefsView} />
 				<ModalStack.Screen
 					name='AdminPanelView'
 					component={AdminPanelView}
-					options={props => AdminPanelView.navigationOptions({ ...props, isMasterDetail: true })}
+					options={props => AdminPanelView.navigationOptions!({ ...props, isMasterDetail: true })}
 				/>
 				<ModalStack.Screen name='NewMessageView' component={NewMessageView} options={NewMessageView.navigationOptions} />
 				<ModalStack.Screen name='SelectedUsersViewCreateChannel' component={SelectedUsersView} />
diff --git a/app/stacks/MasterDetailStack/types.ts b/app/stacks/MasterDetailStack/types.ts
index 202ad6014..242c13bab 100644
--- a/app/stacks/MasterDetailStack/types.ts
+++ b/app/stacks/MasterDetailStack/types.ts
@@ -3,18 +3,18 @@ import { NavigatorScreenParams } from '@react-navigation/core';
 
 import { IAttachment } from '../../definitions/IAttachment';
 import { IMessage } from '../../definitions/IMessage';
-import { IRoom, RoomType } from '../../definitions/IRoom';
+import { ISubscription, SubscriptionType } from '../../definitions/ISubscription';
 
 export type MasterDetailChatsStackParamList = {
 	RoomView: {
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 		tmid?: string;
 		message?: string;
 		name?: string;
 		fname?: string;
 		prid?: string;
-		room: IRoom;
+		room: ISubscription;
 		jumpToMessageId?: string;
 		jumpToThreadId?: string;
 		roomUserId?: string;
@@ -27,17 +27,17 @@ export type MasterDetailDrawerParamList = {
 
 export type ModalStackParamList = {
 	RoomActionsView: {
-		room: IRoom;
+		room: ISubscription;
 		member: any;
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 		joined: boolean;
 	};
 	RoomInfoView: {
-		room: IRoom;
+		room: ISubscription;
 		member: any;
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 	};
 	SelectListView: {
 		data: any;
@@ -54,11 +54,11 @@ export type ModalStackParamList = {
 	};
 	RoomMembersView: {
 		rid: string;
-		room: IRoom;
+		room: ISubscription;
 	};
 	SearchMessagesView: {
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 		encrypted?: boolean;
 		showCloseModal?: boolean;
 	};
@@ -84,18 +84,18 @@ export type ModalStackParamList = {
 	};
 	MessagesView: {
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 		name: string;
 	};
 	AutoTranslateView: {
 		rid: string;
-		room: IRoom;
+		room: ISubscription;
 	};
 	DirectoryView: undefined;
 	QueueListView: undefined;
 	NotificationPrefView: {
 		rid: string;
-		room: IRoom;
+		room: ISubscription;
 	};
 	ForwardLivechatView: {
 		rid: string;
@@ -110,10 +110,10 @@ export type ModalStackParamList = {
 			scopeName: string;
 			tags: string[];
 		};
-		room: IRoom;
+		room: ISubscription;
 	};
 	LivechatEditView: {
-		room: IRoom;
+		room: ISubscription;
 		roomUser: any; // TODO: Change
 	};
 	PickerView: {
@@ -126,7 +126,7 @@ export type ModalStackParamList = {
 	};
 	ThreadMessagesView: {
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 	};
 	TeamChannelsView: {
 		teamId: string;
@@ -160,7 +160,7 @@ export type ModalStackParamList = {
 		teamId?: string;
 	};
 	CreateDiscussionView: {
-		channel: IRoom;
+		channel: ISubscription;
 		message: IMessage;
 		showCloseModal: boolean;
 	};
@@ -194,7 +194,7 @@ export type MasterDetailInsideStackParamList = {
 		isShareView?: boolean;
 		serverInfo: {};
 		text: string;
-		room: IRoom;
+		room: ISubscription;
 		thread: any; // TODO: Change
 	};
 };
diff --git a/app/stacks/types.ts b/app/stacks/types.ts
index 3107c69ce..3dbb31882 100644
--- a/app/stacks/types.ts
+++ b/app/stacks/types.ts
@@ -2,60 +2,61 @@ import { NavigatorScreenParams } from '@react-navigation/core';
 import { TextInputProps } from 'react-native';
 import Model from '@nozbe/watermelondb/Model';
 
+import { IRoom } from '../definitions/IRoom';
 import { IOptionsField } from '../views/NotificationPreferencesView/options';
 import { IServer } from '../definitions/IServer';
 import { IAttachment } from '../definitions/IAttachment';
 import { IMessage } from '../definitions/IMessage';
-import { IRoom, RoomType } from '../definitions/IRoom';
+import { ISubscription, SubscriptionType, TSubscriptionModel } from '../definitions/ISubscription';
 
 export type ChatsStackParamList = {
 	RoomsListView: undefined;
 	RoomView: {
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 		tmid?: string;
 		message?: string;
 		name?: string;
 		fname?: string;
 		prid?: string;
-		room: IRoom;
+		room?: ISubscription;
 		jumpToMessageId?: string;
 		jumpToThreadId?: string;
 		roomUserId?: string;
 	};
 	RoomActionsView: {
-		room: IRoom;
+		room: ISubscription;
 		member: any;
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 		joined: boolean;
 	};
 	SelectListView: {
-		data: any;
+		data: IRoom[];
 		title: string;
 		infoText: string;
-		nextAction: Function;
-		showAlert: boolean;
+		nextAction: (selected: string[]) => void;
+		showAlert: () => void;
 		isSearch: boolean;
-		onSearch: Function;
+		onSearch: (text: string) => Partial<IRoom[]>;
 		isRadio?: boolean;
 	};
 	RoomInfoView: {
-		room: IRoom;
+		room: ISubscription;
 		member: any;
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 	};
 	RoomInfoEditView: {
 		rid: string;
 	};
 	RoomMembersView: {
 		rid: string;
-		room: IRoom;
+		room: ISubscription;
 	};
 	SearchMessagesView: {
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 		encrypted?: boolean;
 		showCloseModal?: boolean;
 	};
@@ -64,7 +65,7 @@ export type ChatsStackParamList = {
 		showButton?: boolean;
 		title?: string;
 		buttonText?: string;
-		nextAction?: Function;
+		nextAction?(): void;
 	};
 	InviteUsersView: {
 		rid: string;
@@ -74,12 +75,12 @@ export type ChatsStackParamList = {
 	};
 	MessagesView: {
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 		name: string;
 	};
 	AutoTranslateView: {
 		rid: string;
-		room: IRoom;
+		room: TSubscriptionModel;
 	};
 	DirectoryView: undefined;
 	NotificationPrefView: {
@@ -90,7 +91,7 @@ export type ChatsStackParamList = {
 		rid: string;
 	};
 	LivechatEditView: {
-		room: IRoom;
+		room: ISubscription;
 		roomUser: any; // TODO: Change
 	};
 	PickerView: {
@@ -103,7 +104,7 @@ export type ChatsStackParamList = {
 	};
 	ThreadMessagesView: {
 		rid: string;
-		t: RoomType;
+		t: SubscriptionType;
 	};
 	TeamChannelsView: {
 		teamId: string;
@@ -138,7 +139,7 @@ export type ChatsStackParamList = {
 			scopeName: string;
 			tags: string[];
 		};
-		room: IRoom;
+		room: ISubscription;
 	};
 };
 
@@ -198,7 +199,7 @@ export type NewMessageStackParamList = {
 		teamId?: string;
 	};
 	CreateDiscussionView: {
-		channel: IRoom;
+		channel: ISubscription;
 		message: IMessage;
 		showCloseModal: boolean;
 	};
@@ -230,7 +231,7 @@ export type InsideStackParamList = {
 		isShareExtension: boolean;
 		serverInfo: IServer;
 		text: string;
-		room: IRoom;
+		room: ISubscription;
 		thread: any; // TODO: Change
 	};
 	ModalBlockView: {
diff --git a/app/theme.tsx b/app/theme.tsx
index 635ffda1c..2615fb577 100644
--- a/app/theme.tsx
+++ b/app/theme.tsx
@@ -1,23 +1,24 @@
 import React from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 
+import { TNavigationOptions } from './definitions/navigationTypes';
+import { IThemePreference } from './definitions/ITheme';
+
 interface IThemeContextProps {
 	theme: string;
-	themePreferences?: {
-		currentTheme: 'automatic' | 'light';
-		darkLevel: string;
-	};
+	themePreferences?: IThemePreference;
 	setTheme?: (newTheme?: {}) => void;
 }
 
 export const ThemeContext = React.createContext<IThemeContextProps>({ theme: 'light' });
 
-export function withTheme(Component: any): any {
-	const ThemedComponent = (props: any) => (
+export function withTheme<T extends object>(Component: React.ComponentType<T> & TNavigationOptions): typeof Component {
+	const ThemedComponent = (props: T) => (
 		<ThemeContext.Consumer>{contexts => <Component {...props} {...contexts} />}</ThemeContext.Consumer>
 	);
+
 	hoistNonReactStatics(ThemedComponent, Component);
 	return ThemedComponent;
 }
 
-export const useTheme = () => React.useContext(ThemeContext);
+export const useTheme = (): IThemeContextProps => React.useContext(ThemeContext);
diff --git a/app/utils/appGroup.js b/app/utils/appGroup.ts
similarity index 83%
rename from app/utils/appGroup.js
rename to app/utils/appGroup.ts
index 63fb428aa..f92227c03 100644
--- a/app/utils/appGroup.js
+++ b/app/utils/appGroup.ts
@@ -4,7 +4,7 @@ import { isIOS } from './deviceInfo';
 
 const { AppGroup } = NativeModules;
 
-const appGroup = {
+const appGroup: { path: string } = {
 	path: isIOS ? AppGroup.path : ''
 };
 
diff --git a/app/utils/avatar.js b/app/utils/avatar.ts
similarity index 72%
rename from app/utils/avatar.js
rename to app/utils/avatar.ts
index 4cc15cdad..7e4b28195 100644
--- a/app/utils/avatar.js
+++ b/app/utils/avatar.ts
@@ -1,6 +1,8 @@
 import { compareServerVersion, methods } from '../lib/utils';
+import { SubscriptionType } from '../definitions/ISubscription';
+import { IAvatar } from '../containers/Avatar/interfaces';
 
-const formatUrl = (url, size, query) => `${url}?format=png&size=${size}${query}`;
+const formatUrl = (url: string, size: number, query: string) => `${url}?format=png&size=${size}${query}`;
 
 export const avatarURL = ({
 	type,
@@ -13,9 +15,9 @@ export const avatarURL = ({
 	rid,
 	blockUnauthenticatedAccess,
 	serverVersion
-}) => {
+}: IAvatar): string => {
 	let room;
-	if (type === 'd') {
+	if (type === SubscriptionType.DIRECT) {
 		room = text;
 	} else if (rid && !compareServerVersion(serverVersion, '3.6.0', methods.lowerThan)) {
 		room = `room/${rid}`;
diff --git a/app/utils/base64-js/index.js b/app/utils/base64-js/index.ts
similarity index 87%
rename from app/utils/base64-js/index.js
rename to app/utils/base64-js/index.ts
index 5616f71df..71fac91ce 100644
--- a/app/utils/base64-js/index.js
+++ b/app/utils/base64-js/index.ts
@@ -1,8 +1,8 @@
 /* eslint-disable no-bitwise */
 // https://github.com/beatgammit/base64-js/blob/master/index.js
 
-const lookup = [];
-const revLookup = [];
+const lookup: string[] = [];
+const revLookup: number[] = [];
 const Arr = typeof Uint8Array !== 'undefined' ? Uint8Array : Array;
 
 const code = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
@@ -16,7 +16,7 @@ for (let i = 0, len = code.length; i < len; i += 1) {
 revLookup['-'.charCodeAt(0)] = 62;
 revLookup['_'.charCodeAt(0)] = 63;
 
-const getLens = b64 => {
+const getLens = (b64: string) => {
 	const len = b64.length;
 
 	// We're encoding some strings not multiple of 4, so, disable this check
@@ -37,16 +37,17 @@ const getLens = b64 => {
 };
 
 // base64 is 4/3 + up to two characters of the original data
-export const byteLength = b64 => {
+export const byteLength = (b64: string) => {
 	const lens = getLens(b64);
 	const validLen = lens[0];
 	const placeHoldersLen = lens[1];
 	return ((validLen + placeHoldersLen) * 3) / 4 - placeHoldersLen;
 };
 
-const _byteLength = (b64, validLen, placeHoldersLen) => ((validLen + placeHoldersLen) * 3) / 4 - placeHoldersLen;
+const _byteLength = (b64: string, validLen: number, placeHoldersLen: number) =>
+	((validLen + placeHoldersLen) * 3) / 4 - placeHoldersLen;
 
-export const toByteArray = b64 => {
+export const toByteArray = (b64: string) => {
 	let tmp;
 	const lens = getLens(b64);
 	const validLen = lens[0];
@@ -92,10 +93,10 @@ export const toByteArray = b64 => {
 	return arr;
 };
 
-const tripletToBase64 = num =>
+const tripletToBase64 = (num: number) =>
 	lookup[(num >> 18) & 0x3f] + lookup[(num >> 12) & 0x3f] + lookup[(num >> 6) & 0x3f] + lookup[num & 0x3f];
 
-const encodeChunk = (uint8, start, end) => {
+const encodeChunk = (uint8: number[] | Uint8Array, start: number, end: number) => {
 	let tmp;
 	const output = [];
 	for (let i = start; i < end; i += 3) {
@@ -105,7 +106,7 @@ const encodeChunk = (uint8, start, end) => {
 	return output.join('');
 };
 
-export const fromByteArray = uint8 => {
+export const fromByteArray = (uint8: number[] | Uint8Array) => {
 	let tmp;
 	const len = uint8.length;
 	const extraBytes = len % 3; // if we have 1 byte left, pad 2 bytes
diff --git a/app/utils/debounce.js b/app/utils/debounce.js
deleted file mode 100644
index 106c61d00..000000000
--- a/app/utils/debounce.js
+++ /dev/null
@@ -1,20 +0,0 @@
-export default function debounce(func, wait, immediate) {
-	let timeout;
-	function _debounce(...args) {
-		const context = this;
-		const later = function __debounce() {
-			timeout = null;
-			if (!immediate) {
-				func.apply(context, args);
-			}
-		};
-		const callNow = immediate && !timeout;
-		clearTimeout(timeout);
-		timeout = setTimeout(later, wait);
-		if (callNow) {
-			func.apply(context, args);
-		}
-	}
-	_debounce.stop = () => clearTimeout(timeout);
-	return _debounce;
-}
diff --git a/app/utils/debounce.ts b/app/utils/debounce.ts
new file mode 100644
index 000000000..e0c28b239
--- /dev/null
+++ b/app/utils/debounce.ts
@@ -0,0 +1,22 @@
+export default function debounce(func: Function, wait?: number, immediate?: boolean) {
+	let timeout: number | null;
+	function _debounce(...args: any[]) {
+		// @ts-ignore
+		// eslint-disable-next-line @typescript-eslint/no-this-alias
+		const context = this;
+		const later = function __debounce() {
+			timeout = null;
+			if (!immediate) {
+				func.apply(context, args);
+			}
+		};
+		const callNow = immediate && !timeout;
+		clearTimeout(timeout!);
+		timeout = setTimeout(later, wait);
+		if (callNow) {
+			func.apply(context, args);
+		}
+	}
+	_debounce.stop = () => clearTimeout(timeout!);
+	return _debounce;
+}
diff --git a/app/utils/deviceInfo.js b/app/utils/deviceInfo.ts
similarity index 92%
rename from app/utils/deviceInfo.js
rename to app/utils/deviceInfo.ts
index 7961b440a..9cb7ac727 100644
--- a/app/utils/deviceInfo.js
+++ b/app/utils/deviceInfo.ts
@@ -9,7 +9,7 @@ export const getBundleId = DeviceInfo.getBundleId();
 export const getDeviceModel = DeviceInfo.getModel();
 
 // Theme is supported by system on iOS 13+ or Android 10+
-export const supportSystemTheme = () => {
+export const supportSystemTheme = (): boolean => {
 	const systemVersion = parseInt(DeviceInfo.getSystemVersion(), 10);
 	return systemVersion >= (isIOS ? 13 : 10);
 };
diff --git a/app/utils/events.js b/app/utils/events.ts
similarity index 53%
rename from app/utils/events.js
rename to app/utils/events.ts
index 8e67fc82e..fc0b975ad 100644
--- a/app/utils/events.js
+++ b/app/utils/events.ts
@@ -1,11 +1,25 @@
+import { ICommand } from '../definitions/ICommand';
 import log from './log';
 
+type TEventEmitterEmmitArgs =
+	| { rid: string }
+	| { message: string }
+	| { method: string }
+	| { invalid: boolean }
+	| { force: boolean }
+	| { hasBiometry: boolean }
+	| { event: string | ICommand }
+	| { cancel: () => void }
+	| { submit: (param: string) => void };
+
 class EventEmitter {
+	private events: { [key: string]: any };
+
 	constructor() {
 		this.events = {};
 	}
 
-	addEventListener(event, listener) {
+	addEventListener(event: string, listener: Function) {
 		if (typeof this.events[event] !== 'object') {
 			this.events[event] = [];
 		}
@@ -13,7 +27,7 @@ class EventEmitter {
 		return listener;
 	}
 
-	removeListener(event, listener) {
+	removeListener(event: string, listener: Function) {
 		if (typeof this.events[event] === 'object') {
 			const idx = this.events[event].indexOf(listener);
 			if (idx > -1) {
@@ -25,9 +39,9 @@ class EventEmitter {
 		}
 	}
 
-	emit(event, ...args) {
+	emit(event: string, ...args: TEventEmitterEmmitArgs[]) {
 		if (typeof this.events[event] === 'object') {
-			this.events[event].forEach(listener => {
+			this.events[event].forEach((listener: Function) => {
 				try {
 					listener.apply(this, args);
 				} catch (e) {
diff --git a/app/utils/fetch.js b/app/utils/fetch.ts
similarity index 75%
rename from app/utils/fetch.js
rename to app/utils/fetch.ts
index 84f5669ae..c8758da8b 100644
--- a/app/utils/fetch.js
+++ b/app/utils/fetch.ts
@@ -4,15 +4,20 @@ import { settings as RocketChatSettings } from '@rocket.chat/sdk';
 
 import RocketChat from '../lib/rocketchat';
 
+interface CustomHeaders {
+	'User-Agent': string;
+	Authorization?: string;
+}
+
 // this form is required by Rocket.Chat's parser in "app/statistics/server/lib/UAParserCustom.js"
-export const headers = {
+export const headers: CustomHeaders = {
 	'User-Agent': `RC Mobile; ${
 		Platform.OS
 	} ${DeviceInfo.getSystemVersion()}; v${DeviceInfo.getVersion()} (${DeviceInfo.getBuildNumber()})`
 };
 
 let _basicAuth;
-export const setBasicAuth = basicAuth => {
+export const setBasicAuth = (basicAuth: string): void => {
 	_basicAuth = basicAuth;
 	if (basicAuth) {
 		RocketChatSettings.customHeaders = { ...headers, Authorization: `Basic ${_basicAuth}` };
@@ -24,12 +29,15 @@ export const BASIC_AUTH_KEY = 'BASIC_AUTH_KEY';
 
 RocketChatSettings.customHeaders = headers;
 
-export default (url, options = {}) => {
+export default (url: string, options: { headers?: Headers; signal?: AbortSignal } = {}): Promise<Response> => {
 	let customOptions = { ...options, headers: RocketChatSettings.customHeaders };
 	if (options && options.headers) {
 		customOptions = { ...customOptions, headers: { ...options.headers, ...customOptions.headers } };
 	}
+	// TODO: Refactor when migrate rocketchat.js
+	// @ts-ignore
 	if (RocketChat.controller) {
+		// @ts-ignore
 		const { signal } = RocketChat.controller;
 		customOptions = { ...customOptions, signal };
 	}
diff --git a/app/utils/fileUpload/index.ios.js b/app/utils/fileUpload/index.ios.ts
similarity index 65%
rename from app/utils/fileUpload/index.ios.js
rename to app/utils/fileUpload/index.ios.ts
index a97640553..ae5cfabc2 100644
--- a/app/utils/fileUpload/index.ios.js
+++ b/app/utils/fileUpload/index.ios.ts
@@ -1,19 +1,25 @@
+import { IFileUpload } from './interfaces';
+
 class Upload {
+	public xhr: XMLHttpRequest;
+
+	public formData: FormData;
+
 	constructor() {
 		this.xhr = new XMLHttpRequest();
 		this.formData = new FormData();
 	}
 
-	then = callback => {
+	then = (callback: (param: { respInfo: XMLHttpRequest }) => XMLHttpRequest) => {
 		this.xhr.onload = () => callback({ respInfo: this.xhr });
 		this.xhr.send(this.formData);
 	};
 
-	catch = callback => {
+	catch = (callback: ((this: XMLHttpRequest, ev: ProgressEvent<EventTarget>) => any) | null) => {
 		this.xhr.onerror = callback;
 	};
 
-	uploadProgress = callback => {
+	uploadProgress = (callback: (param: number, arg1: number) => any) => {
 		this.xhr.upload.onprogress = ({ total, loaded }) => callback(loaded, total);
 	};
 
@@ -24,7 +30,7 @@ class Upload {
 }
 
 class FileUpload {
-	fetch = (method, url, headers, data) => {
+	fetch = (method: string, url: string, headers: { [x: string]: string }, data: IFileUpload[]) => {
 		const upload = new Upload();
 		upload.xhr.open(method, url);
 
@@ -35,6 +41,7 @@ class FileUpload {
 		data.forEach(item => {
 			if (item.uri) {
 				upload.formData.append(item.name, {
+					// @ts-ignore
 					uri: item.uri,
 					type: item.type,
 					name: item.filename
diff --git a/app/utils/fileUpload/index.android.js b/app/utils/fileUpload/index.ts
similarity index 64%
rename from app/utils/fileUpload/index.android.js
rename to app/utils/fileUpload/index.ts
index 5c45c27bd..1d2bdb312 100644
--- a/app/utils/fileUpload/index.android.js
+++ b/app/utils/fileUpload/index.ts
@@ -1,7 +1,11 @@
 import RNFetchBlob from 'rn-fetch-blob';
 
+import { IFileUpload } from './interfaces';
+
+type TMethods = 'POST' | 'GET' | 'DELETE' | 'PUT' | 'post' | 'get' | 'delete' | 'put';
+
 class FileUpload {
-	fetch = (method, url, headers, data) => {
+	fetch = (method: TMethods, url: string, headers: { [key: string]: string }, data: IFileUpload[]) => {
 		const formData = data.map(item => {
 			if (item.uri) {
 				return {
diff --git a/app/utils/fileUpload/interfaces.ts b/app/utils/fileUpload/interfaces.ts
new file mode 100644
index 000000000..a3002f727
--- /dev/null
+++ b/app/utils/fileUpload/interfaces.ts
@@ -0,0 +1,7 @@
+export interface IFileUpload {
+	name: string;
+	uri?: string;
+	type: string;
+	filename: string;
+	data: any;
+}
diff --git a/app/utils/goRoom.js b/app/utils/goRoom.ts
similarity index 58%
rename from app/utils/goRoom.js
rename to app/utils/goRoom.ts
index 1025a17d4..dc8a31882 100644
--- a/app/utils/goRoom.js
+++ b/app/utils/goRoom.ts
@@ -1,7 +1,17 @@
+import { ChatsStackParamList } from '../stacks/types';
 import Navigation from '../lib/Navigation';
 import RocketChat from '../lib/rocketchat';
+import { ISubscription, SubscriptionType } from '../definitions/ISubscription';
 
-const navigate = ({ item, isMasterDetail, ...props }) => {
+const navigate = ({
+	item,
+	isMasterDetail,
+	...props
+}: {
+	item: IItem;
+	isMasterDetail: boolean;
+	navigationMethod?: () => ChatsStackParamList;
+}) => {
 	let navigationMethod = props.navigationMethod ?? Navigation.navigate;
 
 	if (isMasterDetail) {
@@ -20,7 +30,22 @@ const navigate = ({ item, isMasterDetail, ...props }) => {
 	});
 };
 
-export const goRoom = async ({ item = {}, isMasterDetail = false, ...props }) => {
+interface IItem extends Partial<ISubscription> {
+	rid: string;
+	name: string;
+	t: SubscriptionType;
+}
+
+export const goRoom = async ({
+	item,
+	isMasterDetail = false,
+	...props
+}: {
+	item: IItem;
+	isMasterDetail: boolean;
+	navigationMethod?: any;
+	jumpToMessageId?: string;
+}): Promise<void> => {
 	if (item.t === 'd' && item.search) {
 		// if user is using the search we need first to join/create room
 		try {
@@ -30,8 +55,8 @@ export const goRoom = async ({ item = {}, isMasterDetail = false, ...props }) =>
 				return navigate({
 					item: {
 						rid: result.room._id,
-						name: username,
-						t: 'd'
+						name: username!,
+						t: SubscriptionType.DIRECT
 					},
 					isMasterDetail,
 					...props
diff --git a/app/utils/info.js b/app/utils/info.js
deleted file mode 100644
index 5d72f200e..000000000
--- a/app/utils/info.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Alert } from 'react-native';
-
-import I18n from '../i18n';
-
-export const showErrorAlert = (message, title, onPress = () => {}) =>
-	Alert.alert(title, message, [{ text: 'OK', onPress }], { cancelable: true });
-
-export const showConfirmationAlert = ({ title, message, confirmationText, dismissText = I18n.t('Cancel'), onPress, onCancel }) =>
-	Alert.alert(
-		title || I18n.t('Are_you_sure_question_mark'),
-		message,
-		[
-			{
-				text: dismissText,
-				onPress: onCancel,
-				style: 'cancel'
-			},
-			{
-				text: confirmationText,
-				style: 'destructive',
-				onPress
-			}
-		],
-		{ cancelable: false }
-	);
diff --git a/app/utils/info.ts b/app/utils/info.ts
new file mode 100644
index 000000000..da882ee41
--- /dev/null
+++ b/app/utils/info.ts
@@ -0,0 +1,41 @@
+import { Alert } from 'react-native';
+
+import I18n from '../i18n';
+
+export const showErrorAlert = (message: string, title?: string, onPress = () => {}): void =>
+	Alert.alert(title!, message, [{ text: 'OK', onPress }], { cancelable: true });
+
+interface IShowConfirmationAlert {
+	title?: string;
+	message: string;
+	confirmationText: string;
+	dismissText?: string;
+	onPress: () => void;
+	onCancel?: () => void;
+}
+
+export const showConfirmationAlert = ({
+	title,
+	message,
+	confirmationText,
+	dismissText = I18n.t('Cancel'),
+	onPress,
+	onCancel
+}: IShowConfirmationAlert): void =>
+	Alert.alert(
+		title || I18n.t('Are_you_sure_question_mark'),
+		message,
+		[
+			{
+				text: dismissText,
+				onPress: onCancel,
+				style: 'cancel'
+			},
+			{
+				text: confirmationText,
+				style: 'destructive',
+				onPress
+			}
+		],
+		{ cancelable: false }
+	);
diff --git a/app/utils/isReadOnly.js b/app/utils/isReadOnly.ts
similarity index 59%
rename from app/utils/isReadOnly.js
rename to app/utils/isReadOnly.ts
index 62ae4fffe..d94b73c49 100644
--- a/app/utils/isReadOnly.js
+++ b/app/utils/isReadOnly.ts
@@ -1,16 +1,21 @@
 import RocketChat from '../lib/rocketchat';
 import reduxStore from '../lib/createStore';
+import { ISubscription } from '../definitions/ISubscription';
 
-const canPostReadOnly = async ({ rid }) => {
+const canPostReadOnly = async ({ rid }: { rid: string }) => {
 	// TODO: this is not reactive. If this permission changes, the component won't be updated
 	const postReadOnlyPermission = reduxStore.getState().permissions['post-readonly'];
 	const permission = await RocketChat.hasPermission([postReadOnlyPermission], rid);
 	return permission[0];
 };
 
-const isMuted = (room, user) => room && room.muted && room.muted.find && !!room.muted.find(m => m === user.username);
+const isMuted = (room: ISubscription, user: { username: string }) =>
+	room && room.muted && room.muted.find && !!room.muted.find(m => m === user.username);
 
-export const isReadOnly = async (room, user) => {
+export const isReadOnly = async (
+	room: ISubscription,
+	user: { id?: string; username: string; token?: string }
+): Promise<boolean> => {
 	if (room.archived) {
 		return true;
 	}
diff --git a/app/utils/isValidEmail.js b/app/utils/isValidEmail.ts
similarity index 78%
rename from app/utils/isValidEmail.js
rename to app/utils/isValidEmail.ts
index a8bd490f9..e230fc328 100644
--- a/app/utils/isValidEmail.js
+++ b/app/utils/isValidEmail.ts
@@ -1,4 +1,4 @@
-export default function isValidEmail(email) {
+export default function isValidEmail(email: string): boolean {
 	/* eslint-disable no-useless-escape */
 	const reg =
 		/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
diff --git a/app/utils/layoutAnimation.js b/app/utils/layoutAnimation.ts
similarity index 100%
rename from app/utils/layoutAnimation.js
rename to app/utils/layoutAnimation.ts
diff --git a/app/utils/localAuthentication.js b/app/utils/localAuthentication.ts
similarity index 73%
rename from app/utils/localAuthentication.js
rename to app/utils/localAuthentication.ts
index 29f256850..f43599633 100644
--- a/app/utils/localAuthentication.js
+++ b/app/utils/localAuthentication.ts
@@ -16,16 +16,17 @@ import {
 } from '../constants/localAuthentication';
 import I18n from '../i18n';
 import { setLocalAuthenticated } from '../actions/login';
+import { TServerModel } from '../definitions/IServer';
 import EventEmitter from './events';
 import { isIOS } from './deviceInfo';
 
-export const saveLastLocalAuthenticationSession = async (server, serverRecord) => {
+export const saveLastLocalAuthenticationSession = async (server: string, serverRecord?: TServerModel): Promise<void> => {
 	const serversDB = database.servers;
 	const serversCollection = serversDB.get('servers');
-	await serversDB.action(async () => {
+	await serversDB.write(async () => {
 		try {
 			if (!serverRecord) {
-				serverRecord = await serversCollection.find(server);
+				serverRecord = (await serversCollection.find(server)) as TServerModel;
 			}
 			await serverRecord.update(record => {
 				record.lastLocalAuthenticatedSession = new Date();
@@ -36,31 +37,31 @@ export const saveLastLocalAuthenticationSession = async (server, serverRecord) =
 	});
 };
 
-export const resetAttempts = () => AsyncStorage.multiRemove([LOCKED_OUT_TIMER_KEY, ATTEMPTS_KEY]);
+export const resetAttempts = (): Promise<void> => AsyncStorage.multiRemove([LOCKED_OUT_TIMER_KEY, ATTEMPTS_KEY]);
 
-const openModal = hasBiometry =>
-	new Promise(resolve => {
+const openModal = (hasBiometry: boolean) =>
+	new Promise<void>(resolve => {
 		EventEmitter.emit(LOCAL_AUTHENTICATE_EMITTER, {
 			submit: () => resolve(),
 			hasBiometry
 		});
 	});
 
-const openChangePasscodeModal = ({ force }) =>
-	new Promise((resolve, reject) => {
+const openChangePasscodeModal = ({ force }: { force: boolean }) =>
+	new Promise<string>((resolve, reject) => {
 		EventEmitter.emit(CHANGE_PASSCODE_EMITTER, {
-			submit: passcode => resolve(passcode),
+			submit: (passcode: string) => resolve(passcode),
 			cancel: () => reject(),
 			force
 		});
 	});
 
-export const changePasscode = async ({ force = false }) => {
+export const changePasscode = async ({ force = false }: { force: boolean }): Promise<void> => {
 	const passcode = await openChangePasscodeModal({ force });
 	await UserPreferences.setStringAsync(PASSCODE_KEY, sha256(passcode));
 };
 
-export const biometryAuth = force =>
+export const biometryAuth = (force?: boolean): Promise<LocalAuthentication.LocalAuthenticationResult> =>
 	LocalAuthentication.authenticateAsync({
 		disableDeviceFallback: true,
 		cancelLabel: force ? I18n.t('Dont_activate') : I18n.t('Local_authentication_biometry_fallback'),
@@ -71,11 +72,11 @@ export const biometryAuth = force =>
  * It'll help us to get the permission to use FaceID
  * and enable/disable the biometry when user put their first passcode
  */
-const checkBiometry = async serverRecord => {
+const checkBiometry = async (serverRecord: TServerModel) => {
 	const serversDB = database.servers;
 
 	const result = await biometryAuth(true);
-	await serversDB.action(async () => {
+	await serversDB.write(async () => {
 		try {
 			await serverRecord.update(record => {
 				record.biometry = !!result?.success;
@@ -86,7 +87,13 @@ const checkBiometry = async serverRecord => {
 	});
 };
 
-export const checkHasPasscode = async ({ force = true, serverRecord }) => {
+export const checkHasPasscode = async ({
+	force = true,
+	serverRecord
+}: {
+	force?: boolean;
+	serverRecord: TServerModel;
+}): Promise<{ newPasscode?: boolean } | void> => {
 	const storedPasscode = await UserPreferences.getStringAsync(PASSCODE_KEY);
 	if (!storedPasscode) {
 		await changePasscode({ force });
@@ -96,13 +103,13 @@ export const checkHasPasscode = async ({ force = true, serverRecord }) => {
 	return Promise.resolve();
 };
 
-export const localAuthenticate = async server => {
+export const localAuthenticate = async (server: string): Promise<void> => {
 	const serversDB = database.servers;
 	const serversCollection = serversDB.get('servers');
 
-	let serverRecord;
+	let serverRecord: TServerModel;
 	try {
-		serverRecord = await serversCollection.find(server);
+		serverRecord = (await serversCollection.find(server)) as TServerModel;
 	} catch (error) {
 		return Promise.reject();
 	}
@@ -125,7 +132,7 @@ export const localAuthenticate = async server => {
 			const diffToLastSession = moment().diff(serverRecord?.lastLocalAuthenticatedSession, 'seconds');
 
 			// if last authenticated session is older than configured auto lock time, authentication is required
-			if (diffToLastSession >= serverRecord?.autoLockTime) {
+			if (diffToLastSession >= serverRecord.autoLockTime!) {
 				// set isLocalAuthenticated to false
 				store.dispatch(setLocalAuthenticated(false));
 
@@ -150,7 +157,7 @@ export const localAuthenticate = async server => {
 	}
 };
 
-export const supportedBiometryLabel = async () => {
+export const supportedBiometryLabel = async (): Promise<string | null> => {
 	try {
 		const enrolled = await LocalAuthentication.isEnrolledAsync();
 
diff --git a/app/utils/log/events.js b/app/utils/log/events.ts
similarity index 100%
rename from app/utils/log/events.js
rename to app/utils/log/events.ts
diff --git a/app/utils/log/index.js b/app/utils/log/index.ts
similarity index 66%
rename from app/utils/log/index.js
rename to app/utils/log/index.ts
index 41074832f..d52bd0e94 100644
--- a/app/utils/log/index.js
+++ b/app/utils/log/index.ts
@@ -4,13 +4,13 @@ import { isFDroidBuild } from '../../constants/environment';
 import events from './events';
 
 const analytics = firebaseAnalytics || '';
-let bugsnag = '';
-let crashlytics;
+let bugsnag: any = '';
+let crashlytics: any;
 let reportCrashErrors = true;
 let reportAnalyticsEvents = true;
 
-export const getReportCrashErrorsValue = () => reportCrashErrors;
-export const getReportAnalyticsEventsValue = () => reportAnalyticsEvents;
+export const getReportCrashErrorsValue = (): boolean => reportCrashErrors;
+export const getReportAnalyticsEventsValue = (): boolean => reportAnalyticsEvents;
 
 if (!isFDroidBuild) {
 	bugsnag = require('@bugsnag/react-native').default;
@@ -18,7 +18,7 @@ if (!isFDroidBuild) {
 		onBreadcrumb() {
 			return reportAnalyticsEvents;
 		},
-		onError(error) {
+		onError(error: { breadcrumbs: string[] }) {
 			if (!reportAnalyticsEvents) {
 				error.breadcrumbs = [];
 			}
@@ -34,13 +34,13 @@ export { events };
 
 let metadata = {};
 
-export const logServerVersion = serverVersion => {
+export const logServerVersion = (serverVersion: string): void => {
 	metadata = {
 		serverVersion
 	};
 };
 
-export const logEvent = (eventName, payload) => {
+export const logEvent = (eventName: string, payload?: { [key: string]: any }): void => {
 	try {
 		if (!isFDroidBuild) {
 			analytics().logEvent(eventName, payload);
@@ -51,26 +51,26 @@ export const logEvent = (eventName, payload) => {
 	}
 };
 
-export const setCurrentScreen = currentScreen => {
+export const setCurrentScreen = (currentScreen: string): void => {
 	if (!isFDroidBuild) {
 		analytics().setCurrentScreen(currentScreen);
 		bugsnag.leaveBreadcrumb(currentScreen, { type: 'navigation' });
 	}
 };
 
-export const toggleCrashErrorsReport = value => {
+export const toggleCrashErrorsReport = (value: boolean): boolean => {
 	crashlytics().setCrashlyticsCollectionEnabled(value);
 	return (reportCrashErrors = value);
 };
 
-export const toggleAnalyticsEventsReport = value => {
+export const toggleAnalyticsEventsReport = (value: boolean): boolean => {
 	analytics().setAnalyticsCollectionEnabled(value);
 	return (reportAnalyticsEvents = value);
 };
 
-export default e => {
+export default (e: any): void => {
 	if (e instanceof Error && bugsnag && e.message !== 'Aborted' && !__DEV__) {
-		bugsnag.notify(e, event => {
+		bugsnag.notify(e, (event: { addMetadata: (arg0: string, arg1: {}) => void }) => {
 			event.addMetadata('details', { ...metadata });
 		});
 		if (!isFDroidBuild) {
diff --git a/app/utils/media.js b/app/utils/media.ts
similarity index 65%
rename from app/utils/media.js
rename to app/utils/media.ts
index 07f6f58d7..78b1c29f3 100644
--- a/app/utils/media.js
+++ b/app/utils/media.ts
@@ -1,4 +1,11 @@
-export const canUploadFile = (file, allowList, maxFileSize, permissionToUploadFile) => {
+import { IAttachment } from '../views/ShareView/interfaces';
+
+export const canUploadFile = (
+	file: IAttachment,
+	allowList: string,
+	maxFileSize: number,
+	permissionToUploadFile: boolean
+): { success: boolean; error?: string } => {
 	if (!(file && file.path)) {
 		return { success: true };
 	}
@@ -13,11 +20,11 @@ export const canUploadFile = (file, allowList, maxFileSize, permissionToUploadFi
 		return { success: true };
 	}
 	const allowedMime = allowList.split(',');
-	if (allowedMime.includes(file.mime)) {
+	if (allowedMime.includes(file.mime!)) {
 		return { success: true };
 	}
 	const wildCardGlob = '/*';
-	const wildCards = allowedMime.filter(item => item.indexOf(wildCardGlob) > 0);
+	const wildCards = allowedMime.filter((item: string) => item.indexOf(wildCardGlob) > 0);
 	if (file.mime && wildCards.includes(file.mime.replace(/(\/.*)$/, wildCardGlob))) {
 		return { success: true };
 	}
diff --git a/app/utils/messageTypes.js b/app/utils/messageTypes.ts
similarity index 88%
rename from app/utils/messageTypes.js
rename to app/utils/messageTypes.ts
index d1f6fbf69..4eefa614f 100644
--- a/app/utils/messageTypes.js
+++ b/app/utils/messageTypes.ts
@@ -3,10 +3,18 @@ export const MessageTypeValues = [
 		value: 'uj',
 		text: 'Message_HideType_uj'
 	},
+	{
+		value: 'ujt',
+		text: 'Message_HideType_ujt'
+	},
 	{
 		value: 'ul',
 		text: 'Message_HideType_ul'
 	},
+	{
+		value: 'ult',
+		text: 'Message_HideType_ult'
+	},
 	{
 		value: 'ru',
 		text: 'Message_HideType_ru'
diff --git a/app/utils/moment.js b/app/utils/moment.ts
similarity index 57%
rename from app/utils/moment.js
rename to app/utils/moment.ts
index 064b0f7f9..3379429c7 100644
--- a/app/utils/moment.js
+++ b/app/utils/moment.ts
@@ -1,4 +1,4 @@
-const localeKeys = {
+const localeKeys: { [key: string]: string } = {
 	en: 'en',
 	ru: 'ru',
 	'pt-BR': 'pt-br',
@@ -13,4 +13,4 @@ const localeKeys = {
 	'zh-TW': 'zh-tw'
 };
 
-export const toMomentLocale = locale => localeKeys[locale];
+export const toMomentLocale = (locale: string): string => localeKeys[locale];
diff --git a/app/utils/navigation/animations.js b/app/utils/navigation/animations.ts
similarity index 71%
rename from app/utils/navigation/animations.js
rename to app/utils/navigation/animations.ts
index 9f99764c4..a9f184088 100644
--- a/app/utils/navigation/animations.js
+++ b/app/utils/navigation/animations.ts
@@ -1,12 +1,14 @@
 import { Animated, Easing } from 'react-native';
-import { HeaderStyleInterpolators, TransitionPresets } from '@react-navigation/stack';
+import { HeaderStyleInterpolators, TransitionPreset, TransitionPresets } from '@react-navigation/stack';
+// eslint-disable-next-line import/no-unresolved
+import { StackCardStyleInterpolator, TransitionSpec } from '@react-navigation/stack/lib/typescript/src/types';
 
 import { isAndroid } from '../deviceInfo';
 import conditional from './conditional';
 
 const { multiply } = Animated;
 
-const forFadeFromCenter = ({ current, closing }) => {
+const forFadeFromCenter: StackCardStyleInterpolator = ({ current, closing }) => {
 	const opacity = conditional(
 		closing,
 		current.progress,
@@ -23,7 +25,7 @@ const forFadeFromCenter = ({ current, closing }) => {
 	};
 };
 
-const FadeIn = {
+const FadeIn: TransitionSpec = {
 	animation: 'timing',
 	config: {
 		duration: 250,
@@ -31,7 +33,7 @@ const FadeIn = {
 	}
 };
 
-const FadeOut = {
+const FadeOut: TransitionSpec = {
 	animation: 'timing',
 	config: {
 		duration: 150,
@@ -48,7 +50,7 @@ export const FadeFromCenterModal = {
 	cardStyleInterpolator: forFadeFromCenter
 };
 
-const forStackAndroid = ({ current, inverted, layouts: { screen } }) => {
+const forStackAndroid: StackCardStyleInterpolator = ({ current, inverted, layouts: { screen } }) => {
 	const translateX = multiply(
 		current.progress.interpolate({
 			inputRange: [0, 1],
@@ -70,7 +72,7 @@ const forStackAndroid = ({ current, inverted, layouts: { screen } }) => {
 	};
 };
 
-const StackAndroid = {
+const StackAndroid: TransitionPreset = {
 	gestureDirection: 'horizontal',
 	transitionSpec: {
 		open: FadeIn,
diff --git a/app/utils/navigation/conditional.js b/app/utils/navigation/conditional.ts
similarity index 87%
rename from app/utils/navigation/conditional.js
rename to app/utils/navigation/conditional.ts
index 015c52ae1..84c76d83a 100644
--- a/app/utils/navigation/conditional.js
+++ b/app/utils/navigation/conditional.ts
@@ -10,7 +10,11 @@ const { add, multiply } = Animated;
  * @param main Animated Node to use if the condition is `true`
  * @param fallback Animated Node to use if the condition is `false`
  */
-export default function conditional(condition, main, fallback) {
+export default function conditional(
+	condition: Animated.AnimatedInterpolation,
+	main: Animated.Animated,
+	fallback: Animated.Animated
+): Animated.AnimatedAddition {
 	// To implement this behavior, we multiply the main node with the condition.
 	// So if condition is 0, result will be 0, and if condition is 1, result will be main node.
 	// Then we multiple reverse of the condition (0 if condition is 1) with the fallback.
diff --git a/app/utils/openLink.js b/app/utils/openLink.ts
similarity index 83%
rename from app/utils/openLink.js
rename to app/utils/openLink.ts
index 92df16a70..4048b3add 100644
--- a/app/utils/openLink.js
+++ b/app/utils/openLink.ts
@@ -14,7 +14,7 @@ const scheme = {
 	brave: 'brave:'
 };
 
-const appSchemeURL = (url, browser) => {
+const appSchemeURL = (url: string, browser: string): string => {
 	let schemeUrl = url;
 	const parsedUrl = parse(url, true);
 	const { protocol } = parsedUrl;
@@ -35,7 +35,7 @@ const appSchemeURL = (url, browser) => {
 	return schemeUrl;
 };
 
-const openLink = async (url, theme = 'light') => {
+const openLink = async (url: string, theme = 'light'): Promise<void> => {
 	try {
 		const browser = await UserPreferences.getStringAsync(DEFAULT_BROWSER_KEY);
 
@@ -43,11 +43,12 @@ const openLink = async (url, theme = 'light') => {
 			await WebBrowser.openBrowserAsync(url, {
 				toolbarColor: themes[theme].headerBackground,
 				controlsColor: themes[theme].headerTintColor,
-				collapseToolbar: true,
+				// https://github.com/expo/expo/pull/4923
+				enableBarCollapsing: true,
 				showTitle: true
 			});
 		} else {
-			const schemeUrl = appSchemeURL(url, browser.replace(':', ''));
+			const schemeUrl = appSchemeURL(url, browser!.replace(':', ''));
 			await Linking.openURL(schemeUrl);
 		}
 	} catch {
diff --git a/app/utils/random.js b/app/utils/random.ts
similarity index 80%
rename from app/utils/random.js
rename to app/utils/random.ts
index 8f6adb880..2d2cd178b 100644
--- a/app/utils/random.js
+++ b/app/utils/random.ts
@@ -1,4 +1,4 @@
-export default function random(length) {
+export default function random(length: number): string {
 	let text = '';
 	const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 	for (let i = 0; i < length; i += 1) {
diff --git a/app/utils/review.js b/app/utils/review.ts
similarity index 96%
rename from app/utils/review.js
rename to app/utils/review.ts
index 15f1cf968..bbbb498be 100644
--- a/app/utils/review.js
+++ b/app/utils/review.ts
@@ -15,7 +15,7 @@ const reviewDelay = 2000;
 const numberOfDays = 7;
 const numberOfPositiveEvent = 5;
 
-const daysBetween = (date1, date2) => {
+const daysBetween = (date1: Date, date2: Date): number => {
 	const one_day = 1000 * 60 * 60 * 24;
 	const date1_ms = date1.getTime();
 	const date2_ms = date2.getTime();
@@ -32,7 +32,7 @@ const onCancelPress = () => {
 	}
 };
 
-export const onReviewPress = async () => {
+export const onReviewPress = async (): Promise<void> => {
 	logEvent(events.SE_REVIEW_THIS_APP);
 	await onCancelPress();
 	try {
diff --git a/app/utils/room.js b/app/utils/room.js
deleted file mode 100644
index 67df65a98..000000000
--- a/app/utils/room.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import moment from 'moment';
-
-import { themes } from '../constants/colors';
-import I18n from '../i18n';
-
-export const isBlocked = room => {
-	if (room) {
-		const { t, blocked, blocker } = room;
-		if (t === 'd' && (blocked || blocker)) {
-			return true;
-		}
-	}
-	return false;
-};
-
-export const capitalize = s => {
-	if (typeof s !== 'string') {
-		return '';
-	}
-	return s.charAt(0).toUpperCase() + s.slice(1);
-};
-
-export const formatDate = date =>
-	moment(date).calendar(null, {
-		lastDay: `[${I18n.t('Yesterday')}]`,
-		sameDay: 'LT',
-		lastWeek: 'dddd',
-		sameElse: 'L'
-	});
-
-export const formatDateThreads = date =>
-	moment(date).calendar(null, {
-		sameDay: 'LT',
-		lastDay: `[${I18n.t('Yesterday')}] LT`,
-		lastWeek: 'dddd LT',
-		sameElse: 'LL'
-	});
-
-export const getBadgeColor = ({ subscription, messageId, theme }) => {
-	if (subscription?.tunreadUser?.includes(messageId)) {
-		return themes[theme].mentionMeColor;
-	}
-	if (subscription?.tunreadGroup?.includes(messageId)) {
-		return themes[theme].mentionGroupColor;
-	}
-	if (subscription?.tunread?.includes(messageId)) {
-		return themes[theme].tunreadColor;
-	}
-};
-
-export const makeThreadName = messageRecord => messageRecord.msg || messageRecord?.attachments[0]?.title;
-
-export const isTeamRoom = ({ teamId, joined }) => teamId && joined;
diff --git a/app/utils/room.ts b/app/utils/room.ts
new file mode 100644
index 000000000..d39e40490
--- /dev/null
+++ b/app/utils/room.ts
@@ -0,0 +1,65 @@
+import moment from 'moment';
+
+import { themes } from '../constants/colors';
+import I18n from '../i18n';
+import { IAttachment } from '../definitions/IAttachment';
+import { ISubscription, SubscriptionType } from '../definitions/ISubscription';
+
+export const isBlocked = (room: ISubscription): boolean => {
+	if (room) {
+		const { t, blocked, blocker } = room;
+		if (t === SubscriptionType.DIRECT && (blocked || blocker)) {
+			return true;
+		}
+	}
+	return false;
+};
+
+export const capitalize = (s: string): string => {
+	if (typeof s !== 'string') {
+		return '';
+	}
+	return s.charAt(0).toUpperCase() + s.slice(1);
+};
+
+export const formatDate = (date: Date): string =>
+	moment(date).calendar(null, {
+		lastDay: `[${I18n.t('Yesterday')}]`,
+		sameDay: 'LT',
+		lastWeek: 'dddd',
+		sameElse: 'L'
+	});
+
+export const formatDateThreads = (date: Date): string =>
+	moment(date).calendar(null, {
+		sameDay: 'LT',
+		lastDay: `[${I18n.t('Yesterday')}] LT`,
+		lastWeek: 'dddd LT',
+		sameElse: 'LL'
+	});
+
+export const getBadgeColor = ({
+	subscription,
+	messageId,
+	theme
+}: {
+	// TODO: Refactor when migrate model folder
+	subscription: any;
+	messageId: string;
+	theme: string;
+}): string | undefined => {
+	if (subscription?.tunreadUser?.includes(messageId)) {
+		return themes[theme].mentionMeColor;
+	}
+	if (subscription?.tunreadGroup?.includes(messageId)) {
+		return themes[theme].mentionGroupColor;
+	}
+	if (subscription?.tunread?.includes(messageId)) {
+		return themes[theme].tunreadColor;
+	}
+};
+
+export const makeThreadName = (messageRecord: { id?: string; msg?: string; attachments?: IAttachment[] }): string | undefined =>
+	messageRecord.msg || messageRecord?.attachments?.[0]?.title;
+
+export const isTeamRoom = ({ teamId, joined }: { teamId: string; joined: boolean }): boolean => !!teamId && joined;
diff --git a/app/utils/server.js b/app/utils/server.ts
similarity index 84%
rename from app/utils/server.js
rename to app/utils/server.ts
index e7be96b30..52064757b 100644
--- a/app/utils/server.js
+++ b/app/utils/server.ts
@@ -3,7 +3,7 @@
 	url = 'https://open.rocket.chat/method'
 	hostname = 'open.rocket.chat'
 */
-export const extractHostname = url => {
+export const extractHostname = (url: string): string => {
 	let hostname;
 
 	if (url.indexOf('//') > -1) {
diff --git a/app/utils/shortnameToUnicode/ascii.js b/app/utils/shortnameToUnicode/ascii.ts
similarity index 98%
rename from app/utils/shortnameToUnicode/ascii.js
rename to app/utils/shortnameToUnicode/ascii.ts
index 4d9d04cd3..7eca5f7df 100644
--- a/app/utils/shortnameToUnicode/ascii.js
+++ b/app/utils/shortnameToUnicode/ascii.ts
@@ -3,7 +3,7 @@
 /* eslint-disable object-curly-spacing */
 /* eslint-disable comma-spacing */
 /* eslint-disable key-spacing */
-const ascii = {
+const ascii: { [key: string]: string } = {
 	'*\\0/*': '🙆',
 	'*\\O/*': '🙆',
 	'-___-': '😑',
diff --git a/app/utils/shortnameToUnicode/emojis.js b/app/utils/shortnameToUnicode/emojis.ts
similarity index 99%
rename from app/utils/shortnameToUnicode/emojis.js
rename to app/utils/shortnameToUnicode/emojis.ts
index 14cd61337..6a8a63c3a 100644
--- a/app/utils/shortnameToUnicode/emojis.js
+++ b/app/utils/shortnameToUnicode/emojis.ts
@@ -3,7 +3,7 @@
 /* eslint-disable object-curly-spacing */
 /* eslint-disable comma-spacing */
 /* eslint-disable key-spacing */
-const emojis = {
+const emojis: { [key: string]: string } = {
 	':england:': '🏴󠁧󠁢󠁥󠁮󠁧󠁿',
 	':scotland:': '🏴󠁧󠁢󠁳󠁣󠁴󠁿',
 	':wales:': '🏴󠁧󠁢󠁷󠁬󠁳󠁿',
diff --git a/app/utils/shortnameToUnicode/index.js b/app/utils/shortnameToUnicode/index.ts
similarity index 80%
rename from app/utils/shortnameToUnicode/index.js
rename to app/utils/shortnameToUnicode/index.ts
index 0a54aa3a3..b533da8ff 100644
--- a/app/utils/shortnameToUnicode/index.js
+++ b/app/utils/shortnameToUnicode/index.ts
@@ -2,11 +2,11 @@ import emojis from './emojis';
 import ascii, { asciiRegexp } from './ascii';
 
 const shortnamePattern = new RegExp(/:[-+_a-z0-9]+:/, 'gi');
-const replaceShortNameWithUnicode = shortname => emojis[shortname] || shortname;
+const replaceShortNameWithUnicode = (shortname: string) => emojis[shortname] || shortname;
 const regAscii = new RegExp(`((\\s|^)${asciiRegexp}(?=\\s|$|[!,.?]))`, 'gi');
 
-const unescapeHTML = string => {
-	const unescaped = {
+const unescapeHTML = (string: string) => {
+	const unescaped: { [key: string]: string } = {
 		'&amp;': '&',
 		'&#38;': '&',
 		'&#x26;': '&',
@@ -27,7 +27,7 @@ const unescapeHTML = string => {
 	return string.replace(/&(?:amp|#38|#x26|lt|#60|#x3C|gt|#62|#x3E|apos|#39|#x27|quot|#34|#x22);/gi, match => unescaped[match]);
 };
 
-const shortnameToUnicode = str => {
+const shortnameToUnicode = (str: string): string => {
 	str = str.replace(shortnamePattern, replaceShortNameWithUnicode);
 
 	str = str.replace(regAscii, (entire, m1, m2, m3) => {
diff --git a/app/utils/sslPinning.js b/app/utils/sslPinning.ts
similarity index 75%
rename from app/utils/sslPinning.js
rename to app/utils/sslPinning.ts
index c3e2128c9..42245c98a 100644
--- a/app/utils/sslPinning.js
+++ b/app/utils/sslPinning.ts
@@ -9,13 +9,18 @@ import { extractHostname } from './server';
 const { SSLPinning } = NativeModules;
 const { documentDirectory } = FileSystem;
 
-const extractFileScheme = path => path.replace('file://', ''); // file:// isn't allowed by obj-C
+const extractFileScheme = (path: string) => path.replace('file://', ''); // file:// isn't allowed by obj-C
 
-const getPath = name => `${documentDirectory}/${name}`;
+const getPath = (name: string) => `${documentDirectory}/${name}`;
 
-const persistCertificate = async (name, password) => {
+interface ICertificate {
+	path: string;
+	password: string;
+}
+
+const persistCertificate = async (name: string, password: string) => {
 	const certificatePath = getPath(name);
-	const certificate = {
+	const certificate: ICertificate = {
 		path: extractFileScheme(certificatePath),
 		password
 	};
@@ -29,6 +34,7 @@ const RCSSLPinning = Platform.select({
 			new Promise(async (resolve, reject) => {
 				try {
 					const res = await DocumentPicker.pick({
+						// @ts-ignore
 						type: ['com.rsa.pkcs-12']
 					});
 					const { uri, name } = res;
@@ -42,7 +48,7 @@ const RCSSLPinning = Platform.select({
 									try {
 										const certificatePath = getPath(name);
 										await FileSystem.copyAsync({ from: uri, to: certificatePath });
-										await persistCertificate(name, password);
+										await persistCertificate(name, password!);
 										resolve(name);
 									} catch (e) {
 										reject(e);
@@ -56,10 +62,10 @@ const RCSSLPinning = Platform.select({
 					reject(e);
 				}
 			}),
-		setCertificate: async (name, server) => {
+		setCertificate: async (name: string, server: string) => {
 			if (name) {
-				let certificate = await UserPreferences.getMapAsync(name);
-				if (!certificate.path.match(extractFileScheme(documentDirectory))) {
+				let certificate = (await UserPreferences.getMapAsync(name)) as ICertificate;
+				if (!certificate.path.match(extractFileScheme(documentDirectory!))) {
 					certificate = await persistCertificate(name, certificate.password);
 				}
 				await UserPreferences.setMapAsync(extractHostname(server), certificate);
diff --git a/app/utils/theme.js b/app/utils/theme.ts
similarity index 71%
rename from app/utils/theme.js
rename to app/utils/theme.ts
index c9038941d..0e9d8e058 100644
--- a/app/utils/theme.js
+++ b/app/utils/theme.ts
@@ -2,12 +2,13 @@ import { Appearance } from 'react-native-appearance';
 import changeNavigationBarColor from 'react-native-navigation-bar-color';
 import setRootViewColor from 'rn-root-view';
 
+import { IThemePreference, TThemeMode } from '../definitions/ITheme';
 import { themes } from '../constants/colors';
 import { isAndroid } from './deviceInfo';
 
-let themeListener;
+let themeListener: { remove: () => void } | null;
 
-export const defaultTheme = () => {
+export const defaultTheme = (): TThemeMode => {
 	const systemTheme = Appearance.getColorScheme();
 	if (systemTheme && systemTheme !== 'no-preference') {
 		return systemTheme;
@@ -15,7 +16,7 @@ export const defaultTheme = () => {
 	return 'light';
 };
 
-export const getTheme = themePreferences => {
+export const getTheme = (themePreferences: IThemePreference): string => {
 	const { darkLevel, currentTheme } = themePreferences;
 	let theme = currentTheme;
 	if (currentTheme === 'automatic') {
@@ -24,7 +25,7 @@ export const getTheme = themePreferences => {
 	return theme === 'dark' ? darkLevel : 'light';
 };
 
-export const newThemeState = (prevState, newTheme) => {
+export const newThemeState = (prevState: { themePreferences: IThemePreference }, newTheme: IThemePreference) => {
 	// new theme preferences
 	const themePreferences = {
 		...prevState.themePreferences,
@@ -35,12 +36,13 @@ export const newThemeState = (prevState, newTheme) => {
 	return { themePreferences, theme: getTheme(themePreferences) };
 };
 
-export const setNativeTheme = async themePreferences => {
+export const setNativeTheme = async (themePreferences: IThemePreference): Promise<void> => {
 	const theme = getTheme(themePreferences);
 	if (isAndroid) {
 		const iconsLight = theme === 'light';
 		try {
-			await changeNavigationBarColor(themes[theme].navbarBackground, iconsLight);
+			// The late param as default is true @ react-native-navigation-bar-color/src/index.js line 8
+			await changeNavigationBarColor(themes[theme].navbarBackground, iconsLight, true);
 		} catch (error) {
 			// Do nothing
 		}
@@ -55,7 +57,7 @@ export const unsubscribeTheme = () => {
 	}
 };
 
-export const subscribeTheme = (themePreferences, setTheme) => {
+export const subscribeTheme = (themePreferences: IThemePreference, setTheme: () => void): void => {
 	const { currentTheme } = themePreferences;
 	if (!themeListener && currentTheme === 'automatic') {
 		// not use listener params because we use getTheme
diff --git a/app/utils/throttle.js b/app/utils/throttle.js
deleted file mode 100644
index 88751335f..000000000
--- a/app/utils/throttle.js
+++ /dev/null
@@ -1,26 +0,0 @@
-export default function throttle(fn, threshhold = 250, scope) {
-	let last;
-	let deferTimer;
-
-	const _throttle = (...args) => {
-		const context = scope || this;
-
-		const now = +new Date();
-
-		if (last && now < last + threshhold) {
-			// hold on to it
-			clearTimeout(deferTimer);
-			deferTimer = setTimeout(() => {
-				last = now;
-				fn.apply(context, args);
-			}, threshhold);
-		} else {
-			last = now;
-			fn.apply(context, args);
-		}
-	};
-
-	_throttle.stop = () => clearTimeout(deferTimer);
-
-	return _throttle;
-}
diff --git a/app/utils/touch.js b/app/utils/touch.tsx
similarity index 55%
rename from app/utils/touch.js
rename to app/utils/touch.tsx
index 0bfece04a..3573c87c5 100644
--- a/app/utils/touch.js
+++ b/app/utils/touch.tsx
@@ -1,19 +1,27 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { RectButton } from 'react-native-gesture-handler';
+import { RectButton, RectButtonProps } from 'react-native-gesture-handler';
 
 import { themes } from '../constants/colors';
 
-class Touch extends React.Component {
-	setNativeProps(props) {
+interface ITouchProps extends RectButtonProps {
+	children: React.ReactNode;
+	theme: string;
+	accessibilityLabel?: string;
+	testID?: string;
+}
+
+class Touch extends React.Component<ITouchProps> {
+	private ref: any;
+
+	setNativeProps(props: ITouchProps): void {
 		this.ref.setNativeProps(props);
 	}
 
-	getRef = ref => {
+	getRef = (ref: RectButton): void => {
 		this.ref = ref;
 	};
 
-	render() {
+	render(): JSX.Element {
 		const { children, onPress, theme, underlayColor, ...props } = this.props;
 
 		return (
@@ -30,11 +38,4 @@ class Touch extends React.Component {
 	}
 }
 
-Touch.propTypes = {
-	children: PropTypes.node,
-	onPress: PropTypes.func,
-	theme: PropTypes.string,
-	underlayColor: PropTypes.string
-};
-
 export default Touch;
diff --git a/app/utils/twoFactor.js b/app/utils/twoFactor.ts
similarity index 68%
rename from app/utils/twoFactor.js
rename to app/utils/twoFactor.ts
index 6f2fa9c9d..a52ff93fd 100644
--- a/app/utils/twoFactor.js
+++ b/app/utils/twoFactor.ts
@@ -3,13 +3,18 @@ import { settings } from '@rocket.chat/sdk';
 import { TWO_FACTOR } from '../containers/TwoFactor';
 import EventEmitter from './events';
 
-export const twoFactor = ({ method, invalid }) =>
+interface ITwoFactor {
+	method: string;
+	invalid: boolean;
+}
+
+export const twoFactor = ({ method, invalid }: ITwoFactor): Promise<{ twoFactorCode: string; twoFactorMethod: string }> =>
 	new Promise((resolve, reject) => {
 		EventEmitter.emit(TWO_FACTOR, {
 			method,
 			invalid,
 			cancel: () => reject(),
-			submit: code => {
+			submit: (code: string) => {
 				settings.customHeaders = {
 					...settings.customHeaders,
 					'x-2fa-code': code,
diff --git a/app/utils/url.js b/app/utils/url.ts
similarity index 77%
rename from app/utils/url.js
rename to app/utils/url.ts
index 623524d7a..501795973 100644
--- a/app/utils/url.js
+++ b/app/utils/url.ts
@@ -1,4 +1,4 @@
-export const isValidURL = url => {
+export const isValidURL = (url: string): boolean => {
 	const pattern = new RegExp(
 		'^(https?:\\/\\/)?' + // protocol
 			'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
@@ -12,4 +12,4 @@ export const isValidURL = url => {
 };
 
 // Use useSsl: false only if server url starts with http://
-export const useSsl = url => !/http:\/\//.test(url);
+export const useSsl = (url: string): boolean => !/http:\/\//.test(url);
diff --git a/app/views/AddExistingChannelView.tsx b/app/views/AddExistingChannelView.tsx
index 86ab9b9cf..98fe4d2ba 100644
--- a/app/views/AddExistingChannelView.tsx
+++ b/app/views/AddExistingChannelView.tsx
@@ -22,11 +22,11 @@ import { goRoom } from '../utils/goRoom';
 import { showErrorAlert } from '../utils/info';
 import debounce from '../utils/debounce';
 import { ChatsStackParamList } from '../stacks/types';
+import { IRoom } from '../definitions/IRoom';
 
 interface IAddExistingChannelViewState {
-	// TODO: refactor with Room Model
-	search: any[];
-	channels: any[];
+	search: Array<IRoom>;
+	channels: Array<IRoom>;
 	selected: string[];
 	loading: boolean;
 }
@@ -43,6 +43,7 @@ const QUERY_SIZE = 50;
 
 class AddExistingChannelView extends React.Component<IAddExistingChannelViewProps, IAddExistingChannelViewState> {
 	private teamId?: string;
+
 	constructor(props: IAddExistingChannelViewProps) {
 		super(props);
 		this.query();
@@ -93,10 +94,9 @@ class AddExistingChannelView extends React.Component<IAddExistingChannelViewProp
 				)
 				.fetch();
 
-			// TODO: Refactor with Room Model
-			const asyncFilter = async (channelsArray: any[]) => {
+			const asyncFilter = async (channelsArray: Array<IRoom>) => {
 				const results = await Promise.all(
-					channelsArray.map(async (channel: any) => {
+					channelsArray.map(async (channel: IRoom) => {
 						if (channel.prid) {
 							return false;
 						}
@@ -197,7 +197,7 @@ class AddExistingChannelView extends React.Component<IAddExistingChannelViewProp
 			<FlatList
 				data={search.length > 0 ? search : channels}
 				extraData={this.state}
-				keyExtractor={item => item._id}
+				keyExtractor={item => item.id}
 				ListHeaderComponent={this.renderHeader}
 				renderItem={this.renderItem}
 				ItemSeparatorComponent={List.Separator}
diff --git a/app/views/AdminPanelView/index.tsx b/app/views/AdminPanelView/index.tsx
index f0af5dfa0..5a3dde90e 100644
--- a/app/views/AdminPanelView/index.tsx
+++ b/app/views/AdminPanelView/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { WebView } from 'react-native-webview';
 import { connect } from 'react-redux';
 import { DrawerScreenProps } from '@react-navigation/drawer';
+import { StackNavigationOptions } from '@react-navigation/stack';
 
 import I18n from '../../i18n';
 import StatusBar from '../../containers/StatusBar';
@@ -22,7 +23,7 @@ interface INavigationOptions {
 }
 
 class AdminPanelView extends React.Component<IAdminPanelViewProps, any> {
-	static navigationOptions = ({ navigation, isMasterDetail }: INavigationOptions) => ({
+	static navigationOptions = ({ navigation, isMasterDetail }: INavigationOptions): StackNavigationOptions => ({
 		headerLeft: isMasterDetail ? undefined : () => <HeaderButton.Drawer navigation={navigation} />,
 		title: I18n.t('Admin_Panel')
 	});
diff --git a/app/views/AttachmentView.tsx b/app/views/AttachmentView.tsx
index 09e2d5d61..d0bd021c9 100644
--- a/app/views/AttachmentView.tsx
+++ b/app/views/AttachmentView.tsx
@@ -123,7 +123,11 @@ class AttachmentView extends React.Component<IAttachmentViewProps, IAttachmentVi
 
 		this.setState({ loading: true });
 		try {
-			const extension = image_url ? `.${mime.extension(image_type) || 'jpg'}` : `.${mime.extension(video_type) || 'mp4'}`;
+			const extension = image_url
+				? `.${mime.extension(image_type) || 'jpg'}`
+				: `.${(video_type === 'video/quicktime' && 'mov') || mime.extension(video_type) || 'mp4'}`;
+			// The return of mime.extension('video/quicktime') is .qt,
+			// this format the iOS isn't recognize and can't save on gallery
 			const documentDir = `${RNFetchBlob.fs.dirs.DocumentDir}/`;
 			const path = `${documentDir + sha256(url!) + extension}`;
 			const file = await RNFetchBlob.config({ path }).fetch('GET', mediaAttachment);
diff --git a/app/views/AutoTranslateView/index.tsx b/app/views/AutoTranslateView/index.tsx
index f840ca12a..23f0e206c 100644
--- a/app/views/AutoTranslateView/index.tsx
+++ b/app/views/AutoTranslateView/index.tsx
@@ -11,7 +11,7 @@ import { SWITCH_TRACK_COLOR, themes } from '../../constants/colors';
 import { withTheme } from '../../theme';
 import SafeAreaView from '../../containers/SafeAreaView';
 import { events, logEvent } from '../../utils/log';
-import { IRoom } from '../../definitions/IRoom';
+import { ISubscription } from '../../definitions/ISubscription';
 
 const styles = StyleSheet.create({
 	list: {
@@ -42,7 +42,7 @@ class AutoTranslateView extends React.Component<IAutoTranslateViewProps, any> {
 
 		if (room && room.observe) {
 			this.roomObservable = room.observe();
-			this.subscription = this.roomObservable.subscribe((changes: IRoom) => {
+			this.subscription = this.roomObservable.subscribe((changes: ISubscription) => {
 				if (this.mounted) {
 					const { selectedLanguage, enableAutoTranslate } = this.state;
 					if (selectedLanguage !== changes.autoTranslateLanguage) {
@@ -113,7 +113,7 @@ class AutoTranslateView extends React.Component<IAutoTranslateViewProps, any> {
 
 	renderIcon = () => {
 		const { theme } = this.props;
-		return <List.Icon name='check' style={{ color: themes[theme].tintColor }} />;
+		return <List.Icon name='check' color={themes[theme!].tintColor} />;
 	};
 
 	renderSwitch = () => {
@@ -131,7 +131,7 @@ class AutoTranslateView extends React.Component<IAutoTranslateViewProps, any> {
 				title={name || language}
 				onPress={() => this.saveAutoTranslateLanguage(language)}
 				testID={`auto-translate-view-${language}`}
-				right={isSelected ? this.renderIcon : null}
+				right={() => (isSelected ? this.renderIcon() : null)}
 				translateTitle={false}
 			/>
 		);
diff --git a/app/views/CreateDiscussionView/SelectChannel.tsx b/app/views/CreateDiscussionView/SelectChannel.tsx
index e7653973f..41f7ab0b1 100644
--- a/app/views/CreateDiscussionView/SelectChannel.tsx
+++ b/app/views/CreateDiscussionView/SelectChannel.tsx
@@ -32,8 +32,6 @@ const SelectChannel = ({
 	}, 300);
 
 	const getAvatar = (item: any) =>
-		// TODO: remove this ts-ignore when migrate the file: app/utils/avatar.js
-		// @ts-ignore
 		avatarURL({
 			text: RocketChat.getRoomAvatar(item),
 			type: item.t,
diff --git a/app/views/CreateDiscussionView/SelectUsers.tsx b/app/views/CreateDiscussionView/SelectUsers.tsx
index 65a4e0a4a..d63c5ae6a 100644
--- a/app/views/CreateDiscussionView/SelectUsers.tsx
+++ b/app/views/CreateDiscussionView/SelectUsers.tsx
@@ -12,6 +12,7 @@ import { MultiSelect } from '../../containers/UIKit/MultiSelect';
 import { themes } from '../../constants/colors';
 import styles from './styles';
 import { ICreateDiscussionViewSelectUsers } from './interfaces';
+import { SubscriptionType } from '../../definitions/ISubscription';
 
 interface IUser {
 	name: string;
@@ -62,11 +63,9 @@ const SelectUsers = ({
 	}, 300);
 
 	const getAvatar = (item: any) =>
-		// TODO: remove this ts-ignore when migrate the file: app/utils/avatar.js
-		// @ts-ignore
 		avatarURL({
 			text: RocketChat.getRoomAvatar(item),
-			type: 'd',
+			type: SubscriptionType.DIRECT,
 			user: { id: userId, token },
 			server,
 			avatarETag: item.avatarETag,
diff --git a/app/views/CreateDiscussionView/interfaces.ts b/app/views/CreateDiscussionView/interfaces.ts
index e9d076b16..6009881c1 100644
--- a/app/views/CreateDiscussionView/interfaces.ts
+++ b/app/views/CreateDiscussionView/interfaces.ts
@@ -2,6 +2,7 @@ import { RouteProp } from '@react-navigation/core';
 import { StackNavigationProp } from '@react-navigation/stack';
 
 import { NewMessageStackParamList } from '../../stacks/types';
+import { SubscriptionType } from '../../definitions/ISubscription';
 
 export interface ICreateChannelViewProps {
 	navigation: StackNavigationProp<NewMessageStackParamList, 'CreateDiscussionView'>;
@@ -15,7 +16,7 @@ export interface ICreateChannelViewProps {
 	loading: boolean;
 	result: {
 		rid: string;
-		t: string;
+		t: SubscriptionType;
 		prid: string;
 	};
 	failure: boolean;
diff --git a/app/views/DefaultBrowserView.tsx b/app/views/DefaultBrowserView.tsx
index 0282e0df2..895f70860 100644
--- a/app/views/DefaultBrowserView.tsx
+++ b/app/views/DefaultBrowserView.tsx
@@ -107,7 +107,7 @@ class DefaultBrowserView extends React.Component<IDefaultBrowserViewProps, IDefa
 	changeDefaultBrowser = async (newBrowser: TValue) => {
 		logEvent(events.DB_CHANGE_DEFAULT_BROWSER, { browser: newBrowser });
 		try {
-			const browser = newBrowser !== 'systemDefault:' ? newBrowser : null;
+			const browser = newBrowser || 'systemDefault:';
 			await UserPreferences.setStringAsync(DEFAULT_BROWSER_KEY, browser);
 			this.setState({ browser });
 		} catch {
@@ -127,7 +127,7 @@ class DefaultBrowserView extends React.Component<IDefaultBrowserViewProps, IDefa
 				title={I18n.t(title, { defaultValue: title })}
 				onPress={() => this.changeDefaultBrowser(value)}
 				testID={`default-browser-view-${title}`}
-				right={this.isSelected(value) ? this.renderIcon : null}
+				right={() => (this.isSelected(value) ? this.renderIcon() : null)}
 				translateTitle={false}
 			/>
 		);
diff --git a/app/views/DirectoryView/index.tsx b/app/views/DirectoryView/index.tsx
index 9197815bd..2213497be 100644
--- a/app/views/DirectoryView/index.tsx
+++ b/app/views/DirectoryView/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FlatList, Text, View } from 'react-native';
 import { connect } from 'react-redux';
-import { StackNavigationProp } from '@react-navigation/stack';
+import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
 
 import { ChatsStackParamList } from '../../stacks/types';
 import * as List from '../../containers/List';
@@ -39,8 +39,8 @@ interface IDirectoryViewProps {
 }
 
 class DirectoryView extends React.Component<IDirectoryViewProps, any> {
-	static navigationOptions = ({ navigation, isMasterDetail }: any) => {
-		const options: any = {
+	static navigationOptions = ({ navigation, isMasterDetail }: IDirectoryViewProps) => {
+		const options: StackNavigationOptions = {
 			title: I18n.t('Directory')
 		};
 		if (isMasterDetail) {
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 09da4edc9..959682c4c 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/E2EEncryptionSecurityView.tsx b/app/views/E2EEncryptionSecurityView.tsx
index d5b0b27a2..347590430 100644
--- a/app/views/E2EEncryptionSecurityView.tsx
+++ b/app/views/E2EEncryptionSecurityView.tsx
@@ -75,8 +75,6 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
 		if (!newPassword.trim()) {
 			return;
 		}
-		// TODO: Remove ts-ignore when migrate the showConfirmationAlert
-		// @ts-ignore
 		showConfirmationAlert({
 			title: I18n.t('Are_you_sure_question_mark'),
 			message: I18n.t('E2E_encryption_change_password_message'),
@@ -98,8 +96,6 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
 	};
 
 	resetOwnKey = () => {
-		// TODO: Remove ts-ignore when migrate the showConfirmationAlert
-		// @ts-ignore
 		showConfirmationAlert({
 			title: I18n.t('Are_you_sure_question_mark'),
 			message: I18n.t('E2E_encryption_reset_message'),
diff --git a/app/views/InviteUsersView/index.tsx b/app/views/InviteUsersView/index.tsx
index b7bf30710..60ae339ad 100644
--- a/app/views/InviteUsersView/index.tsx
+++ b/app/views/InviteUsersView/index.tsx
@@ -40,9 +40,9 @@ interface IInviteUsersViewProps {
 class InviteUsersView extends React.Component<IInviteUsersViewProps, any> {
 	private rid: string;
 
-	static navigationOptions: StackNavigationOptions = {
+	static navigationOptions = (): StackNavigationOptions => ({
 		title: I18n.t('Invite_users')
-	};
+	});
 
 	constructor(props: IInviteUsersViewProps) {
 		super(props);
diff --git a/app/views/LanguageView/index.tsx b/app/views/LanguageView/index.tsx
index 955572e24..f544fc54f 100644
--- a/app/views/LanguageView/index.tsx
+++ b/app/views/LanguageView/index.tsx
@@ -134,7 +134,7 @@ class LanguageView extends React.Component<ILanguageViewProps, ILanguageViewStat
 				title={label}
 				onPress={() => this.submit(value)}
 				testID={`language-view-${value}`}
-				right={isSelected ? this.renderIcon : null}
+				right={() => (isSelected ? this.renderIcon() : null)}
 				translateTitle={false}
 			/>
 		);
diff --git a/app/views/LegalView.tsx b/app/views/LegalView.tsx
index 02ac172d9..692263418 100644
--- a/app/views/LegalView.tsx
+++ b/app/views/LegalView.tsx
@@ -15,9 +15,9 @@ interface ILegalView {
 }
 
 class LegalView extends React.Component<ILegalView, any> {
-	static navigationOptions: StackNavigationOptions = {
+	static navigationOptions = (): StackNavigationOptions => ({
 		title: I18n.t('Legal')
-	};
+	});
 
 	onPressItem = ({ route }: { route: string }) => {
 		const { server, theme } = this.props;
diff --git a/app/views/MessagesView/index.tsx b/app/views/MessagesView/index.tsx
index 14532051b..dc71ce842 100644
--- a/app/views/MessagesView/index.tsx
+++ b/app/views/MessagesView/index.tsx
@@ -20,11 +20,13 @@ import SafeAreaView from '../../containers/SafeAreaView';
 import getThreadName from '../../lib/methods/getThreadName';
 import styles from './styles';
 import { ChatsStackParamList } from '../../stacks/types';
-import { IRoom, RoomType } from '../../definitions/IRoom';
+import { ISubscription, SubscriptionType } from '../../definitions/ISubscription';
 
 interface IMessagesViewProps {
 	user: {
 		id: string;
+		username: string;
+		token: string;
 	};
 	baseUrl: string;
 	navigation: CompositeNavigationProp<
@@ -40,10 +42,10 @@ interface IMessagesViewProps {
 }
 
 interface IRoomInfoParam {
-	room: IRoom;
+	room: ISubscription;
 	member: any;
 	rid: string;
-	t: RoomType;
+	t: SubscriptionType;
 	joined: boolean;
 }
 
@@ -72,13 +74,13 @@ interface IMessageItem {
 
 interface IParams {
 	rid: string;
-	t: RoomType;
+	t: SubscriptionType;
 	tmid?: string;
 	message?: string;
 	name?: string;
 	fname?: string;
 	prid?: string;
-	room: IRoom;
+	room: ISubscription;
 	jumpToMessageId?: string;
 	jumpToThreadId?: string;
 	roomUserId?: string;
@@ -86,7 +88,7 @@ interface IParams {
 
 class MessagesView extends React.Component<IMessagesViewProps, any> {
 	private rid: string;
-	private t: RoomType;
+	private t: SubscriptionType;
 	private content: any;
 	private room: any;
 
@@ -158,7 +160,7 @@ class MessagesView extends React.Component<IMessagesViewProps, any> {
 				...params,
 				tmid: item.tmid,
 				name: await getThreadName(this.rid, item.tmid, item._id),
-				t: RoomType.THREAD
+				t: SubscriptionType.THREAD
 			};
 			navigation.push('RoomView', params);
 		} else {
diff --git a/app/views/ModalBlockView.tsx b/app/views/ModalBlockView.tsx
index 1a517745a..cfb6d7a4b 100644
--- a/app/views/ModalBlockView.tsx
+++ b/app/views/ModalBlockView.tsx
@@ -15,7 +15,6 @@ import ActivityIndicator from '../containers/ActivityIndicator';
 import { CONTAINER_TYPES, MODAL_ACTIONS } from '../lib/methods/actions';
 import { textParser } from '../containers/UIKit/utils';
 import Navigation from '../lib/Navigation';
-import sharedStyles from './Styles';
 import { MasterDetailInsideStackParamList } from '../stacks/MasterDetailStack/types';
 
 const styles = StyleSheet.create({
@@ -25,10 +24,6 @@ const styles = StyleSheet.create({
 	},
 	content: {
 		paddingVertical: 16
-	},
-	submit: {
-		...sharedStyles.textSemibold,
-		fontSize: 16
 	}
 });
 
@@ -152,24 +147,14 @@ class ModalBlockView extends React.Component<IModalBlockViewProps, IModalBlockVi
 			headerLeft: close
 				? () => (
 						<HeaderButton.Container>
-							<HeaderButton.Item
-								title={textParser([close.text])}
-								style={styles.submit}
-								onPress={this.cancel}
-								testID='close-modal-uikit'
-							/>
+							<HeaderButton.Item title={textParser([close.text])} onPress={this.cancel} testID='close-modal-uikit' />
 						</HeaderButton.Container>
 				  )
 				: undefined,
 			headerRight: submit
 				? () => (
 						<HeaderButton.Container>
-							<HeaderButton.Item
-								title={textParser([submit.text])}
-								style={styles.submit}
-								onPress={this.submit}
-								testID='submit-modal-uikit'
-							/>
+							<HeaderButton.Item title={textParser([submit.text])} onPress={this.submit} testID='submit-modal-uikit' />
 						</HeaderButton.Container>
 				  )
 				: undefined
diff --git a/app/views/NewServerView/ServerInput/Item.tsx b/app/views/NewServerView/ServerInput/Item.tsx
index 9fb44719e..cc8a9e3a7 100644
--- a/app/views/NewServerView/ServerInput/Item.tsx
+++ b/app/views/NewServerView/ServerInput/Item.tsx
@@ -6,7 +6,7 @@ import { themes } from '../../../constants/colors';
 import { CustomIcon } from '../../../lib/Icons';
 import sharedStyles from '../../Styles';
 import Touch from '../../../utils/touch';
-import { IServer } from '../index';
+import { TServerHistory } from '../../../definitions/IServerHistory';
 
 const styles = StyleSheet.create({
 	container: {
@@ -28,10 +28,10 @@ const styles = StyleSheet.create({
 });
 
 interface IItem {
-	item: IServer;
+	item: TServerHistory;
 	theme: string;
 	onPress(url: string): void;
-	onDelete(item: IServer): void;
+	onDelete(item: TServerHistory): void;
 }
 
 const Item = ({ item, theme, onPress, onDelete }: IItem): JSX.Element => (
diff --git a/app/views/NewServerView/ServerInput/index.tsx b/app/views/NewServerView/ServerInput/index.tsx
index 1da151367..e2b14fd69 100644
--- a/app/views/NewServerView/ServerInput/index.tsx
+++ b/app/views/NewServerView/ServerInput/index.tsx
@@ -5,8 +5,8 @@ import TextInput from '../../../containers/TextInput';
 import * as List from '../../../containers/List';
 import { themes } from '../../../constants/colors';
 import I18n from '../../../i18n';
+import { TServerHistory } from '../../../definitions/IServerHistory';
 import Item from './Item';
-import { IServer } from '../index';
 
 const styles = StyleSheet.create({
 	container: {
@@ -33,8 +33,8 @@ interface IServerInput extends TextInputProps {
 	theme: string;
 	serversHistory: any[];
 	onSubmit(): void;
-	onDelete(item: IServer): void;
-	onPressServerHistory(serverHistory: IServer): void;
+	onDelete(item: TServerHistory): void;
+	onPressServerHistory(serverHistory: TServerHistory): void;
 }
 
 const ServerInput = ({
diff --git a/app/views/NewServerView/index.tsx b/app/views/NewServerView/index.tsx
index aaacdf90f..93e493bea 100644
--- a/app/views/NewServerView/index.tsx
+++ b/app/views/NewServerView/index.tsx
@@ -8,7 +8,6 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 import Orientation from 'react-native-orientation-locker';
 import { StackNavigationProp } from '@react-navigation/stack';
 import { Dispatch } from 'redux';
-import Model from '@nozbe/watermelondb/Model';
 
 import UserPreferences from '../../lib/userPreferences';
 import EventEmitter from '../../utils/events';
@@ -34,6 +33,7 @@ import { verticalScale, moderateScale } from '../../utils/scaling';
 import { withDimensions } from '../../dimensions';
 import ServerInput from './ServerInput';
 import { OutsideParamList } from '../../stacks/types';
+import { TServerHistory } from '../../definitions/IServerHistory';
 
 const styles = StyleSheet.create({
 	onboardingImage: {
@@ -68,11 +68,6 @@ const styles = StyleSheet.create({
 	}
 });
 
-export interface IServer extends Model {
-	url: string;
-	username: string;
-}
-
 interface INewServerView {
 	navigation: StackNavigationProp<OutsideParamList, 'NewServerView'>;
 	theme: string;
@@ -90,7 +85,7 @@ interface IState {
 	text: string;
 	connectingOpen: boolean;
 	certificate: any;
-	serversHistory: IServer[];
+	serversHistory: TServerHistory[];
 }
 
 interface ISubmitParams {
@@ -166,7 +161,7 @@ class NewServerView extends React.Component<INewServerView, IState> {
 				const likeString = sanitizeLikeString(text);
 				whereClause = [...whereClause, Q.where('url', Q.like(`%${likeString}%`))];
 			}
-			const serversHistory = (await serversHistoryCollection.query(...whereClause).fetch()) as IServer[];
+			const serversHistory = (await serversHistoryCollection.query(...whereClause).fetch()) as TServerHistory[];
 			this.setState({ serversHistory });
 		} catch {
 			// Do nothing
@@ -190,7 +185,7 @@ class NewServerView extends React.Component<INewServerView, IState> {
 		connectServer(server);
 	};
 
-	onPressServerHistory = (serverHistory: IServer) => {
+	onPressServerHistory = (serverHistory: TServerHistory) => {
 		this.setState({ text: serverHistory.url }, () => this.submit({ fromServerHistory: true, username: serverHistory?.username }));
 	};
 
@@ -274,23 +269,22 @@ class NewServerView extends React.Component<INewServerView, IState> {
 	uriToPath = (uri: string) => uri.replace('file://', '');
 
 	handleRemove = () => {
-		// TODO: Remove ts-ignore when migrate the showConfirmationAlert
-		// @ts-ignore
 		showConfirmationAlert({
 			message: I18n.t('You_will_unset_a_certificate_for_this_server'),
 			confirmationText: I18n.t('Remove'),
+			// @ts-ignore
 			onPress: this.setState({ certificate: null }) // We not need delete file from DocumentPicker because it is a temp file
 		});
 	};
 
-	deleteServerHistory = async (item: IServer) => {
+	deleteServerHistory = async (item: TServerHistory) => {
 		const db = database.servers;
 		try {
 			await db.write(async () => {
 				await item.destroyPermanently();
 			});
 			this.setState((prevstate: IState) => ({
-				serversHistory: prevstate.serversHistory.filter((server: IServer) => server.id !== item.id)
+				serversHistory: prevstate.serversHistory.filter((server: TServerHistory) => server.id !== item.id)
 			}));
 		} catch {
 			// Nothing
diff --git a/app/views/PickerView.tsx b/app/views/PickerView.tsx
index db2a7a265..cf2f99d6d 100644
--- a/app/views/PickerView.tsx
+++ b/app/views/PickerView.tsx
@@ -48,7 +48,7 @@ interface IPickerViewProps {
 const Item = React.memo(({ item, selected, onItemPress, theme }: IItem) => (
 	<List.Item
 		title={I18n.t(item.label, { defaultValue: item.label, second: item?.second })}
-		right={selected && (() => <List.Icon name='check' color={themes[theme].tintColor} />)}
+		right={() => (selected ? <List.Icon name='check' color={themes[theme].tintColor} /> : null)}
 		onPress={onItemPress}
 		translateTitle={false}
 	/>
diff --git a/app/views/ProfileView/index.tsx b/app/views/ProfileView/index.tsx
index d0ca64eec..fc409002d 100644
--- a/app/views/ProfileView/index.tsx
+++ b/app/views/ProfileView/index.tsx
@@ -424,7 +424,6 @@ class ProfileView extends React.Component<IProfileViewProps, IProfileViewState>
 
 	logoutOtherLocations = () => {
 		logEvent(events.PL_OTHER_LOCATIONS);
-		// @ts-ignore
 		showConfirmationAlert({
 			message: I18n.t('You_will_be_logged_out_from_other_locations'),
 			confirmationText: I18n.t('Logout'),
diff --git a/app/views/ProfileView/interfaces.ts b/app/views/ProfileView/interfaces.ts
index bfec50c0d..0fe592f32 100644
--- a/app/views/ProfileView/interfaces.ts
+++ b/app/views/ProfileView/interfaces.ts
@@ -26,9 +26,9 @@ export interface IParams {
 }
 
 export interface IAvatarButton {
-	key: React.Key;
+	key: string;
 	child: React.ReactNode;
-	onPress: Function;
+	onPress: () => void;
 	disabled: boolean;
 }
 
diff --git a/app/views/RoomInfoView/Direct.js b/app/views/RoomInfoView/Direct.js
index 7bc962d69..cc6d8f393 100644
--- a/app/views/RoomInfoView/Direct.js
+++ b/app/views/RoomInfoView/Direct.js
@@ -15,8 +15,8 @@ const Roles = ({ roles, theme }) =>
 			<View style={styles.rolesContainer}>
 				{roles.map(role =>
 					role ? (
-						<View style={[styles.roleBadge, { backgroundColor: themes[theme].auxiliaryBackground }]} key={role}>
-							<Text style={styles.role}>{role}</Text>
+						<View style={[styles.roleBadge, { backgroundColor: themes[theme].chatComponentBackground }]} key={role}>
+							<Text style={[styles.role, { color: themes[theme].titleText }]}>{role}</Text>
 						</View>
 					) : null
 				)}
diff --git a/app/views/RoomInfoView/index.js b/app/views/RoomInfoView/index.js
index a27083613..53c2c7d5a 100644
--- a/app/views/RoomInfoView/index.js
+++ b/app/views/RoomInfoView/index.js
@@ -178,6 +178,14 @@ class RoomInfoView extends React.Component {
 		}
 	};
 
+	parseRoles = roleArray =>
+		Promise.all(
+			roleArray.map(async role => {
+				const description = await this.getRoleDescription(role);
+				return description;
+			})
+		);
+
 	loadUser = async () => {
 		const { room, roomUser } = this.state;
 
@@ -189,12 +197,7 @@ class RoomInfoView extends React.Component {
 					const { user } = result;
 					const { roles } = user;
 					if (roles && roles.length) {
-						user.parsedRoles = await Promise.all(
-							roles.map(async role => {
-								const description = await this.getRoleDescription(role);
-								return description;
-							})
-						);
+						user.parsedRoles = await this.parseRoles(roles);
 					}
 
 					this.setState({ roomUser: user });
@@ -202,6 +205,18 @@ class RoomInfoView extends React.Component {
 			} catch {
 				// do nothing
 			}
+		} else {
+			try {
+				const { roles } = roomUser;
+				if (roles && roles.length) {
+					const parsedRoles = await this.parseRoles(roles);
+					this.setState({ roomUser: { ...roomUser, parsedRoles } });
+				} else {
+					this.setState({ roomUser });
+				}
+			} catch (e) {
+				// do nothing
+			}
 		}
 	};
 
diff --git a/app/views/RoomMembersView/index.js b/app/views/RoomMembersView/index.js
index 9a93d1cae..3f936fba6 100644
--- a/app/views/RoomMembersView/index.js
+++ b/app/views/RoomMembersView/index.js
@@ -246,7 +246,6 @@ class RoomMembersView extends React.Component {
 			const userId = selectedUser._id;
 			const result = await RocketChat.removeTeamMember({
 				teamId: room.teamId,
-				teamName: room.name,
 				userId,
 				...(selected && { rooms: selected })
 			});
diff --git a/app/views/RoomsListView/index.js b/app/views/RoomsListView/index.js
index 518e10c48..9dc3bca73 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/app/views/ScreenLockConfigView.tsx b/app/views/ScreenLockConfigView.tsx
index 57638f417..76f0d0957 100644
--- a/app/views/ScreenLockConfigView.tsx
+++ b/app/views/ScreenLockConfigView.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { Switch } from 'react-native';
 import { connect } from 'react-redux';
 import { StackNavigationOptions } from '@react-navigation/stack';
-import Model from '@nozbe/watermelondb/Model';
 import { Subscription } from 'rxjs';
 
 import I18n from '../i18n';
@@ -15,15 +14,10 @@ import { changePasscode, checkHasPasscode, supportedBiometryLabel } from '../uti
 import { DEFAULT_AUTO_LOCK } from '../constants/localAuthentication';
 import SafeAreaView from '../containers/SafeAreaView';
 import { events, logEvent } from '../utils/log';
+import { TServerModel } from '../definitions/IServer';
 
 const DEFAULT_BIOMETRY = false;
 
-interface IServerRecords extends Model {
-	autoLock?: boolean;
-	autoLockTime?: number;
-	biometry?: boolean;
-}
-
 interface IItem {
 	title: string;
 	value: number;
@@ -38,14 +32,14 @@ interface IScreenLockConfigViewProps {
 }
 
 interface IScreenLockConfigViewState {
-	autoLock?: boolean;
+	autoLock: boolean;
 	autoLockTime?: number | null;
 	biometry?: boolean;
-	biometryLabel: null;
+	biometryLabel: string | null;
 }
 
 class ScreenLockConfigView extends React.Component<IScreenLockConfigViewProps, IScreenLockConfigViewState> {
-	private serverRecord?: IServerRecords;
+	private serverRecord?: TServerModel;
 
 	private observable?: Subscription;
 
@@ -98,7 +92,7 @@ class ScreenLockConfigView extends React.Component<IScreenLockConfigViewProps, I
 		const serversDB = database.servers;
 		const serversCollection = serversDB.get('servers');
 		try {
-			this.serverRecord = await serversCollection.find(server);
+			this.serverRecord = (await serversCollection.find(server)) as TServerModel;
 			this.setState({
 				autoLock: this.serverRecord?.autoLock,
 				autoLockTime: this.serverRecord?.autoLockTime === null ? DEFAULT_AUTO_LOCK : this.serverRecord?.autoLockTime,
@@ -151,7 +145,7 @@ class ScreenLockConfigView extends React.Component<IScreenLockConfigViewProps, I
 				const { autoLock } = this.state;
 				if (autoLock) {
 					try {
-						await checkHasPasscode({ force: false, serverRecord: this.serverRecord });
+						await checkHasPasscode({ force: false, serverRecord: this.serverRecord! });
 					} catch {
 						this.toggleAutoLock();
 					}
@@ -191,7 +185,7 @@ class ScreenLockConfigView extends React.Component<IScreenLockConfigViewProps, I
 				<List.Item
 					title={title}
 					onPress={() => this.changeAutoLockTime(value)}
-					right={this.isSelected(value) ? this.renderIcon : null}
+					right={() => (this.isSelected(value) ? this.renderIcon() : null)}
 					disabled={disabled}
 					translateTitle={false}
 				/>
diff --git a/app/views/SearchMessagesView/index.tsx b/app/views/SearchMessagesView/index.tsx
index a85df6745..70e924d2c 100644
--- a/app/views/SearchMessagesView/index.tsx
+++ b/app/views/SearchMessagesView/index.tsx
@@ -6,7 +6,7 @@ import { Q } from '@nozbe/watermelondb';
 import { connect } from 'react-redux';
 import { dequal } from 'dequal';
 
-import { IRoom, RoomType } from '../../definitions/IRoom';
+import { ISubscription, SubscriptionType } from '../../definitions/ISubscription';
 import { IAttachment } from '../../definitions/IAttachment';
 import RCTextInput from '../../containers/TextInput';
 import ActivityIndicator from '../../containers/ActivityIndicator';
@@ -42,10 +42,10 @@ interface ISearchMessagesViewState {
 }
 
 interface IRoomInfoParam {
-	room: IRoom;
+	room: ISubscription;
 	member: any;
 	rid: string;
-	t: RoomType;
+	t: SubscriptionType;
 	joined: boolean;
 }
 
@@ -58,7 +58,11 @@ interface INavigationOption {
 }
 
 interface ISearchMessagesViewProps extends INavigationOption {
-	user: { id: string };
+	user: {
+		id: string;
+		username: string;
+		token: string;
+	};
 	baseUrl: string;
 	serverVersion: string;
 	customEmojis: {
diff --git a/app/views/SelectListView.tsx b/app/views/SelectListView.tsx
index e6d67266b..6265983b3 100644
--- a/app/views/SelectListView.tsx
+++ b/app/views/SelectListView.tsx
@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { RadioButton } from 'react-native-ui-lib';
 import { RouteProp } from '@react-navigation/native';
 
+import { ChatsStackParamList } from '../stacks/types';
 import log from '../utils/log';
 import * as List from '../containers/List';
 import I18n from '../i18n';
@@ -17,6 +18,7 @@ import { animateNextTransition } from '../utils/layoutAnimation';
 import { ICON_SIZE } from '../containers/List/constants';
 import SearchBox from '../containers/SearchBox';
 import sharedStyles from './Styles';
+import { IRoom } from '../definitions/IRoom';
 
 const styles = StyleSheet.create({
 	buttonText: {
@@ -26,38 +28,16 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface IData {
-	rid: string;
-	name: string;
-	t?: string;
-	teamMain?: boolean;
-	alert?: boolean;
-}
-
 interface ISelectListViewState {
-	data: IData[];
-	dataFiltered: IData[];
+	data: IRoom[];
+	dataFiltered?: IRoom[];
 	isSearching: boolean;
 	selected: string[];
 }
 
 interface ISelectListViewProps {
-	navigation: StackNavigationProp<any, 'SelectListView'>;
-	route: RouteProp<
-		{
-			SelectView: {
-				data: IData[];
-				title: string;
-				infoText: string;
-				nextAction(selected: string[]): void;
-				showAlert(): void;
-				isSearch: boolean;
-				onSearch(text: string): IData[];
-				isRadio: boolean;
-			};
-		},
-		'SelectView'
-	>;
+	navigation: StackNavigationProp<ChatsStackParamList, 'SelectListView'>;
+	route: RouteProp<ChatsStackParamList, 'SelectListView'>;
 	theme: string;
 	isMasterDetail: boolean;
 }
@@ -73,9 +53,9 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 
 	private isSearch: boolean;
 
-	private onSearch: (text: string) => IData[];
+	private onSearch: (text: string) => Partial<IRoom[]>;
 
-	private isRadio: boolean;
+	private isRadio?: boolean;
 
 	constructor(props: ISelectListViewProps) {
 		super(props);
@@ -142,7 +122,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 	search = async (text: string) => {
 		try {
 			this.setState({ isSearching: true });
-			const result = await this.onSearch(text);
+			const result = (await this.onSearch(text)) as IRoom[];
 			this.setState({ dataFiltered: result });
 		} catch (e) {
 			log(e);
@@ -170,19 +150,19 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 		}
 	};
 
-	renderItem = ({ item }: { item: IData }) => {
+	renderItem = ({ item }: { item: Partial<IRoom> }) => {
 		const { theme } = this.props;
 		const { selected } = this.state;
 
 		const channelIcon = item.t === 'p' ? 'channel-private' : 'channel-public';
 		const teamIcon = item.t === 'p' ? 'teams-private' : 'teams';
 		const icon = item.teamMain ? teamIcon : channelIcon;
-		const checked = this.isChecked(item.rid) ? 'check' : null;
+		const checked = this.isChecked(item.rid!) ? 'check' : '';
 
 		const showRadio = () => (
 			<RadioButton
 				testID={selected ? `radio-button-selected-${item.name}` : `radio-button-unselected-${item.name}`}
-				selected={selected.includes(item.rid)}
+				selected={selected.includes(item.rid!)}
 				color={themes[theme].actionTintColor}
 				size={ICON_SIZE}
 			/>
@@ -202,7 +182,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 					title={item.name}
 					translateTitle={false}
 					testID={`select-list-view-item-${item.name}`}
-					onPress={() => (item.alert ? this.showAlert() : this.toggleItem(item.rid))}
+					onPress={() => (item.alert ? this.showAlert() : this.toggleItem(item.rid!))}
 					alert={item.alert}
 					left={() => <List.Icon name={icon} color={themes[theme].controlText} />}
 					right={() => (this.isRadio ? showRadio() : showCheck())}
diff --git a/app/views/SelectServerView.tsx b/app/views/SelectServerView.tsx
index e26645d9b..ac1f329d1 100644
--- a/app/views/SelectServerView.tsx
+++ b/app/views/SelectServerView.tsx
@@ -11,14 +11,15 @@ import RocketChat from '../lib/rocketchat';
 import database from '../lib/database';
 import SafeAreaView from '../containers/SafeAreaView';
 import * as List from '../containers/List';
+import { ShareInsideStackParamList } from '../definitions/navigationTypes';
 
 const getItemLayout = (data: any, index: number) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index });
 const keyExtractor = (item: IServer) => item.id;
 
 interface IServer extends Model {
 	id: string;
-	iconURL?: string;
-	name?: string;
+	iconURL: string;
+	name: string;
 }
 
 interface ISelectServerViewState {
@@ -26,7 +27,7 @@ interface ISelectServerViewState {
 }
 
 interface ISelectServerViewProps {
-	navigation: StackNavigationProp<any, 'SelectServerView'>;
+	navigation: StackNavigationProp<ShareInsideStackParamList, 'SelectServerView'>;
 	server: string;
 }
 
@@ -40,7 +41,7 @@ class SelectServerView extends React.Component<ISelectServerViewProps, ISelectSe
 	async componentDidMount() {
 		const serversDB = database.servers;
 		const serversCollection = serversDB.get('servers');
-		const servers: IServer[] = await serversCollection.query(Q.where('rooms_updated_at', Q.notEq(null))).fetch();
+		const servers = (await serversCollection.query(Q.where('rooms_updated_at', Q.notEq(null))).fetch()) as IServer[];
 		this.setState({ servers });
 	}
 
diff --git a/app/views/SelectedUsersView.tsx b/app/views/SelectedUsersView.tsx
index 8d4a19fc4..85311154e 100644
--- a/app/views/SelectedUsersView.tsx
+++ b/app/views/SelectedUsersView.tsx
@@ -1,56 +1,43 @@
+import { Q } from '@nozbe/watermelondb';
+import orderBy from 'lodash/orderBy';
 import React from 'react';
-import { StackNavigationProp } from '@react-navigation/stack';
-import { RouteProp } from '@react-navigation/native';
 import { FlatList, View } from 'react-native';
 import { connect } from 'react-redux';
-import orderBy from 'lodash/orderBy';
-import { Q } from '@nozbe/watermelondb';
 import { Subscription } from 'rxjs';
 
+import { addUser, removeUser, reset } from '../actions/selectedUsers';
+import { themes } from '../constants/colors';
+import * as HeaderButton from '../containers/HeaderButton';
 import * as List from '../containers/List';
+import Loading from '../containers/Loading';
+import SafeAreaView from '../containers/SafeAreaView';
+import SearchBox from '../containers/SearchBox';
+import StatusBar from '../containers/StatusBar';
+import { IApplicationState, IBaseScreen } from '../definitions';
+import I18n from '../i18n';
 import database from '../lib/database';
 import RocketChat from '../lib/rocketchat';
 import UserItem from '../presentation/UserItem';
-import Loading from '../containers/Loading';
-import I18n from '../i18n';
-import log, { events, logEvent } from '../utils/log';
-import SearchBox from '../containers/SearchBox';
-import * as HeaderButton from '../containers/HeaderButton';
-import StatusBar from '../containers/StatusBar';
-import { themes } from '../constants/colors';
-import { withTheme } from '../theme';
+import { ISelectedUser } from '../reducers/selectedUsers';
 import { getUserSelector } from '../selectors/login';
-import { addUser as addUserAction, removeUser as removeUserAction, reset as resetAction } from '../actions/selectedUsers';
-import { showErrorAlert } from '../utils/info';
-import SafeAreaView from '../containers/SafeAreaView';
-import sharedStyles from './Styles';
 import { ChatsStackParamList } from '../stacks/types';
+import { withTheme } from '../theme';
+import { showErrorAlert } from '../utils/info';
+import log, { events, logEvent } from '../utils/log';
+import sharedStyles from './Styles';
 
 const ITEM_WIDTH = 250;
 const getItemLayout = (_: any, index: number) => ({ length: ITEM_WIDTH, offset: ITEM_WIDTH * index, index });
 
-interface IUser {
-	_id: string;
-	name: string;
-	fname: string;
-	search?: boolean;
-	// username is used when is from searching
-	username?: string;
-}
 interface ISelectedUsersViewState {
 	maxUsers?: number;
-	search: IUser[];
-	chats: IUser[];
+	search: ISelectedUser[];
+	chats: ISelectedUser[];
 }
 
-interface ISelectedUsersViewProps {
-	navigation: StackNavigationProp<ChatsStackParamList, 'SelectedUsersView'>;
-	route: RouteProp<ChatsStackParamList, 'SelectedUsersView'>;
-	baseUrl: string;
-	addUser(user: IUser): void;
-	removeUser(user: IUser): void;
-	reset(): void;
-	users: IUser[];
+interface ISelectedUsersViewProps extends IBaseScreen<ChatsStackParamList, 'SelectedUsersView'> {
+	// REDUX STATE
+	users: ISelectedUser[];
 	loading: boolean;
 	user: {
 		id: string;
@@ -58,7 +45,7 @@ interface ISelectedUsersViewProps {
 		username: string;
 		name: string;
 	};
-	theme: string;
+	baseUrl: string;
 }
 
 class SelectedUsersView extends React.Component<ISelectedUsersViewProps, ISelectedUsersViewState> {
@@ -75,9 +62,9 @@ class SelectedUsersView extends React.Component<ISelectedUsersViewProps, ISelect
 			search: [],
 			chats: []
 		};
-		const { user } = this.props;
+		const { user, dispatch } = this.props;
 		if (this.isGroupChat()) {
-			props.addUser({ _id: user.id, name: user.username, fname: user.name });
+			dispatch(addUser({ _id: user.id, name: user.username, fname: user.name }));
 		}
 		this.setHeader(props.route.params?.showButton);
 	}
@@ -92,8 +79,8 @@ class SelectedUsersView extends React.Component<ISelectedUsersViewProps, ISelect
 	}
 
 	componentWillUnmount() {
-		const { reset } = this.props;
-		reset();
+		const { dispatch } = this.props;
+		dispatch(reset());
 		if (this.querySubscription && this.querySubscription.unsubscribe) {
 			this.querySubscription.unsubscribe();
 		}
@@ -158,11 +145,10 @@ class SelectedUsersView extends React.Component<ISelectedUsersViewProps, ISelect
 		return users.findIndex(el => el.name === username) !== -1;
 	};
 
-	toggleUser = (user: IUser) => {
+	toggleUser = (user: ISelectedUser) => {
 		const { maxUsers } = this.state;
 		const {
-			addUser,
-			removeUser,
+			dispatch,
 			users,
 			user: { username }
 		} = this.props;
@@ -177,14 +163,14 @@ class SelectedUsersView extends React.Component<ISelectedUsersViewProps, ISelect
 				return showErrorAlert(I18n.t('Max_number_of_users_allowed_is_number', { maxUsers }), I18n.t('Oops'));
 			}
 			logEvent(events.SELECTED_USERS_ADD_USER);
-			addUser(user);
+			dispatch(addUser(user));
 		} else {
 			logEvent(events.SELECTED_USERS_REMOVE_USER);
-			removeUser(user);
+			dispatch(removeUser(user));
 		}
 	};
 
-	_onPressItem = (id: string, item = {} as IUser) => {
+	_onPressItem = (id: string, item = {} as ISelectedUser) => {
 		if (item.search) {
 			this.toggleUser({ _id: item._id, name: item.username!, fname: item.name });
 		} else {
@@ -192,7 +178,7 @@ class SelectedUsersView extends React.Component<ISelectedUsersViewProps, ISelect
 		}
 	};
 
-	_onPressSelectedItem = (item: IUser) => this.toggleUser(item);
+	_onPressSelectedItem = (item: ISelectedUser) => this.toggleUser(item);
 
 	renderHeader = () => {
 		const { theme } = this.props;
@@ -231,7 +217,7 @@ class SelectedUsersView extends React.Component<ISelectedUsersViewProps, ISelect
 		);
 	};
 
-	renderSelectedItem = ({ item }: { item: IUser }) => {
+	renderSelectedItem = ({ item }: { item: ISelectedUser }) => {
 		const { theme } = this.props;
 		return (
 			<UserItem
@@ -245,7 +231,7 @@ class SelectedUsersView extends React.Component<ISelectedUsersViewProps, ISelect
 		);
 	};
 
-	renderItem = ({ item, index }: { item: IUser; index: number }) => {
+	renderItem = ({ item, index }: { item: ISelectedUser; index: number }) => {
 		const { search, chats } = this.state;
 		const { theme } = this.props;
 
@@ -308,17 +294,11 @@ class SelectedUsersView extends React.Component<ISelectedUsersViewProps, ISelect
 	};
 }
 
-const mapStateToProps = (state: any) => ({
+const mapStateToProps = (state: IApplicationState) => ({
 	baseUrl: state.server.server,
 	users: state.selectedUsers.users,
 	loading: state.selectedUsers.loading,
 	user: getUserSelector(state)
 });
 
-const mapDispatchToProps = (dispatch: any) => ({
-	addUser: (user: any) => dispatch(addUserAction(user)),
-	removeUser: (user: any) => dispatch(removeUserAction(user)),
-	reset: () => dispatch(resetAction())
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(withTheme(SelectedUsersView));
+export default connect(mapStateToProps)(withTheme(SelectedUsersView));
diff --git a/app/views/SettingsView/index.tsx b/app/views/SettingsView/index.tsx
index edad2822e..e77474c4a 100644
--- a/app/views/SettingsView/index.tsx
+++ b/app/views/SettingsView/index.tsx
@@ -3,7 +3,7 @@ import { Clipboard, Linking, Share } from 'react-native';
 import { connect } from 'react-redux';
 import FastImage from '@rocket.chat/react-native-fast-image';
 import CookieManager from '@react-native-cookies/cookies';
-import { StackNavigationProp } from '@react-navigation/stack';
+import { StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
 
 import { SettingsStackParamList } from '../../stacks/types';
 import { logout as logoutAction } from '../../actions/login';
@@ -48,7 +48,7 @@ interface ISettingsViewProps {
 }
 
 class SettingsView extends React.Component<ISettingsViewProps, any> {
-	static navigationOptions = ({ navigation, isMasterDetail }: ISettingsViewProps) => ({
+	static navigationOptions = ({ navigation, isMasterDetail }: ISettingsViewProps): StackNavigationOptions => ({
 		headerLeft: () =>
 			isMasterDetail ? (
 				<HeaderButton.CloseModal navigation={navigation} testID='settings-view-close' />
@@ -88,7 +88,6 @@ class SettingsView extends React.Component<ISettingsViewProps, any> {
 
 	handleLogout = () => {
 		logEvent(events.SE_LOG_OUT);
-		// @ts-ignore
 		showConfirmationAlert({
 			message: I18n.t('You_will_be_logged_out_of_this_application'),
 			confirmationText: I18n.t('Logout'),
@@ -98,7 +97,6 @@ class SettingsView extends React.Component<ISettingsViewProps, any> {
 
 	handleClearCache = () => {
 		logEvent(events.SE_CLEAR_LOCAL_SERVER_CACHE);
-		/* @ts-ignore */
 		showConfirmationAlert({
 			message: I18n.t('This_will_clear_all_your_offline_data'),
 			confirmationText: I18n.t('Clear'),
@@ -183,7 +181,7 @@ class SettingsView extends React.Component<ISettingsViewProps, any> {
 		return (
 			<SafeAreaView testID='settings-view'>
 				<StatusBar />
-				<List.Container testID='settings-view-list'>
+				<List.Container>
 					{isMasterDetail ? (
 						<>
 							<List.Section>
diff --git a/app/views/ShareListView/index.tsx b/app/views/ShareListView/index.tsx
index 1c9f0e415..ced0badd5 100644
--- a/app/views/ShareListView/index.tsx
+++ b/app/views/ShareListView/index.tsx
@@ -25,12 +25,12 @@ import { sanitizeLikeString } from '../../lib/database/utils';
 import styles from './styles';
 import ShareListHeader from './Header';
 
-interface IFile {
+interface IDataFromShare {
 	value: string;
 	type: string;
 }
 
-interface IAttachment {
+interface IFileToShare {
 	filename: string;
 	description: string;
 	size: number;
@@ -53,6 +53,9 @@ interface IChat {
 }
 
 interface IServerInfo {
+	id: string;
+	iconURL: string;
+	name: string;
 	useRealName: boolean;
 }
 interface IState {
@@ -61,7 +64,7 @@ interface IState {
 	searchResults: IChat[];
 	chats: IChat[];
 	serversCount: number;
-	attachments: IAttachment[];
+	attachments: IFileToShare[];
 	text: string;
 	loading: boolean;
 	serverInfo: IServerInfo;
@@ -121,7 +124,7 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
 	async componentDidMount() {
 		const { server } = this.props;
 		try {
-			const data = (await ShareExtension.data()) as IFile[];
+			const data = (await ShareExtension.data()) as IDataFromShare[];
 			if (isAndroid) {
 				await this.askForPermission(data);
 			}
@@ -136,7 +139,7 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
 				size: file.size,
 				mime: mime.lookup(file.uri),
 				path: file.uri
-			})) as IAttachment[];
+			})) as IFileToShare[];
 			const text = data.filter(item => item.type === 'text').reduce((acc, item) => `${item.value}\n${acc}`, '');
 			this.setState({
 				text,
@@ -294,7 +297,7 @@ class ShareListView extends React.Component<IShareListViewProps, IState> {
 		}
 	};
 
-	askForPermission = async (data: IFile[]) => {
+	askForPermission = async (data: IDataFromShare[]) => {
 		const mediaIndex = data.findIndex(item => item.type === 'media');
 		if (mediaIndex !== -1) {
 			const result = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE, permission);
diff --git a/app/views/ShareView/Header.tsx b/app/views/ShareView/Header.tsx
index 41e5339e1..604eb9356 100644
--- a/app/views/ShareView/Header.tsx
+++ b/app/views/ShareView/Header.tsx
@@ -5,7 +5,7 @@ import I18n from '../../i18n';
 import { CustomIcon } from '../../lib/Icons';
 import RocketChat from '../../lib/rocketchat';
 import { themes } from '../../constants/colors';
-import { withTheme } from '../../theme';
+import { useTheme } from '../../theme';
 import { isAndroid, isTablet } from '../../utils/deviceInfo';
 import sharedStyles from '../Styles';
 import { makeThreadName } from '../../utils/room';
@@ -37,10 +37,10 @@ const styles = StyleSheet.create({
 interface IHeader {
 	room: { prid?: string; t?: string };
 	thread: { id?: string };
-	theme: string;
 }
 
-const Header = React.memo(({ room, thread, theme }: IHeader) => {
+const Header = React.memo(({ room, thread }: IHeader) => {
+	const { theme } = useTheme();
 	let type;
 	if (thread?.id) {
 		type = 'thread';
@@ -94,4 +94,4 @@ const Header = React.memo(({ room, thread, theme }: IHeader) => {
 	);
 });
 
-export default withTheme(Header);
+export default Header;
diff --git a/app/views/ShareView/index.tsx b/app/views/ShareView/index.tsx
index a3ad287aa..af8b75b27 100644
--- a/app/views/ShareView/index.tsx
+++ b/app/views/ShareView/index.tsx
@@ -28,7 +28,7 @@ import Preview from './Preview';
 import Header from './Header';
 import styles from './styles';
 import { IAttachment } from './interfaces';
-import { IRoom } from '../../definitions/IRoom';
+import { ISubscription } from '../../definitions/ISubscription';
 
 interface IShareViewState {
 	selected: IAttachment;
@@ -36,10 +36,10 @@ interface IShareViewState {
 	readOnly: boolean;
 	attachments: IAttachment[];
 	text: string;
-	room: IRoom;
+	room: ISubscription;
 	thread: any; // change
 	maxFileSize: number;
-	mediaAllowList: number;
+	mediaAllowList: string;
 }
 
 interface IShareViewProps {
@@ -52,7 +52,7 @@ interface IShareViewProps {
 		token: string;
 	};
 	server: string;
-	FileUpload_MediaTypeWhiteList?: number;
+	FileUpload_MediaTypeWhiteList?: string;
 	FileUpload_MaxFileSize?: number;
 }
 
@@ -116,11 +116,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 		if (!attachments.length && !readOnly) {
 			options.headerRight = () => (
 				<HeaderButton.Container>
-					<HeaderButton.Item
-						title={I18n.t('Send')}
-						onPress={this.send}
-						buttonStyle={[styles.send, { color: themes[theme].previewTintColor }]}
-					/>
+					<HeaderButton.Item title={I18n.t('Send')} onPress={this.send} />
 				</HeaderButton.Container>
 			);
 		}
@@ -364,7 +360,7 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }}>
 				<StatusBar barStyle='light-content' backgroundColor={themes[theme].previewBackground} />
 				{this.renderContent()}
-				<Loading visible={loading} />
+				<Loading visible={loading} theme={theme} />
 			</SafeAreaView>
 		);
 	}
diff --git a/app/views/SidebarView/SidebarItem.tsx b/app/views/SidebarView/SidebarItem.tsx
index bfbf2d2db..6843732f1 100644
--- a/app/views/SidebarView/SidebarItem.tsx
+++ b/app/views/SidebarView/SidebarItem.tsx
@@ -8,9 +8,9 @@ import styles from './styles';
 
 interface SidebarItemProps {
 	left: JSX.Element;
-	right: JSX.Element;
+	right?: JSX.Element;
 	text: string;
-	current: boolean;
+	current?: boolean;
 	onPress(): void;
 	testID: string;
 	theme: string;
diff --git a/app/views/SidebarView/index.tsx b/app/views/SidebarView/index.tsx
index c410f63df..f406e3261 100644
--- a/app/views/SidebarView/index.tsx
+++ b/app/views/SidebarView/index.tsx
@@ -45,7 +45,7 @@ interface ISidebarProps {
 		name: string;
 		roles: string[];
 	};
-	theme: string;
+	theme?: string;
 	loadingServer: boolean;
 	useRealName: boolean;
 	allowStatusMessage: boolean;
@@ -177,12 +177,13 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 		const routeName = isMasterDetail ? 'AdminPanelView' : 'AdminPanelStackNavigator';
 		return (
 			<>
-				<Separator theme={theme} />
+				<Separator theme={theme!} />
 				<SidebarItem
 					text={I18n.t('Admin_Panel')}
-					left={<CustomIcon name='settings' size={20} color={themes[theme].titleText} />}
+					left={<CustomIcon name='settings' size={20} color={themes[theme!].titleText} />}
 					onPress={() => this.sidebarNavigate(routeName)}
 					testID='sidebar-admin'
+					theme={theme!}
 					current={this.currentItemKey === routeName}
 				/>
 			</>
@@ -195,30 +196,34 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 			<>
 				<SidebarItem
 					text={I18n.t('Chats')}
-					left={<CustomIcon name='message' size={20} color={themes[theme].titleText} />}
+					left={<CustomIcon name='message' size={20} color={themes[theme!].titleText} />}
 					onPress={() => this.sidebarNavigate('ChatsStackNavigator')}
 					testID='sidebar-chats'
+					theme={theme!}
 					current={this.currentItemKey === 'ChatsStackNavigator'}
 				/>
 				<SidebarItem
 					text={I18n.t('Profile')}
-					left={<CustomIcon name='user' size={20} color={themes[theme].titleText} />}
+					left={<CustomIcon name='user' size={20} color={themes[theme!].titleText} />}
 					onPress={() => this.sidebarNavigate('ProfileStackNavigator')}
 					testID='sidebar-profile'
+					theme={theme!}
 					current={this.currentItemKey === 'ProfileStackNavigator'}
 				/>
 				<SidebarItem
 					text={I18n.t('Display')}
-					left={<CustomIcon name='sort' size={20} color={themes[theme].titleText} />}
+					left={<CustomIcon name='sort' size={20} color={themes[theme!].titleText} />}
 					onPress={() => this.sidebarNavigate('DisplayPrefStackNavigator')}
 					testID='sidebar-display'
+					theme={theme!}
 					current={this.currentItemKey === 'DisplayPrefStackNavigator'}
 				/>
 				<SidebarItem
 					text={I18n.t('Settings')}
-					left={<CustomIcon name='administration' size={20} color={themes[theme].titleText} />}
+					left={<CustomIcon name='administration' size={20} color={themes[theme!].titleText} />}
 					onPress={() => this.sidebarNavigate('SettingsStackNavigator')}
 					testID='sidebar-settings'
+					theme={theme!}
 					current={this.currentItemKey === 'SettingsStackNavigator'}
 				/>
 				{this.renderAdmin()}
@@ -232,7 +237,8 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 			<SidebarItem
 				text={user.statusText || I18n.t('Edit_Status')}
 				left={<Status size={24} status={user?.status} />}
-				right={<CustomIcon name='edit' size={20} color={themes[theme].titleText} />}
+				theme={theme!}
+				right={<CustomIcon name='edit' size={20} color={themes[theme!].titleText} />}
 				onPress={() => this.sidebarNavigate('StatusView')}
 				testID='sidebar-custom-status'
 			/>
@@ -246,12 +252,12 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 			return null;
 		}
 		return (
-			<SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme].focusedBackground }} vertical={isMasterDetail}>
+			<SafeAreaView testID='sidebar-view' style={{ backgroundColor: themes[theme!].focusedBackground }} vertical={isMasterDetail}>
 				<ScrollView
 					style={[
 						styles.container,
 						{
-							backgroundColor: isMasterDetail ? themes[theme].backgroundColor : themes[theme].focusedBackground
+							backgroundColor: isMasterDetail ? themes[theme!].backgroundColor : themes[theme!].focusedBackground
 						}
 					]}
 					{...scrollPersistTaps}>
@@ -260,12 +266,12 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 							<Avatar text={user.username} style={styles.avatar} size={30} />
 							<View style={styles.headerTextContainer}>
 								<View style={styles.headerUsername}>
-									<Text numberOfLines={1} style={[styles.username, { color: themes[theme].titleText }]}>
+									<Text numberOfLines={1} style={[styles.username, { color: themes[theme!].titleText }]}>
 										{useRealName ? user.name : user.username}
 									</Text>
 								</View>
 								<Text
-									style={[styles.currentServerText, { color: themes[theme].titleText }]}
+									style={[styles.currentServerText, { color: themes[theme!].titleText }]}
 									numberOfLines={1}
 									accessibilityLabel={`Connected to ${baseUrl}`}>
 									{Site_Name}
@@ -274,14 +280,14 @@ class Sidebar extends Component<ISidebarProps, ISidebarState> {
 						</View>
 					</TouchableWithoutFeedback>
 
-					<Separator theme={theme} />
+					<Separator theme={theme!} />
 
 					{allowStatusMessage ? this.renderCustomStatus() : null}
 					{!isMasterDetail ? (
 						<>
-							<Separator theme={theme} />
+							<Separator theme={theme!} />
 							{this.renderNavigation()}
-							<Separator theme={theme} />
+							<Separator theme={theme!} />
 						</>
 					) : (
 						<>{this.renderAdmin()}</>
diff --git a/app/views/StatusView.tsx b/app/views/StatusView.tsx
index f369780b8..23fc619df 100644
--- a/app/views/StatusView.tsx
+++ b/app/views/StatusView.tsx
@@ -55,9 +55,9 @@ const styles = StyleSheet.create({
 });
 
 interface IUser {
-	id: string;
-	status: string;
-	statusText: string;
+	id?: string;
+	status?: string;
+	statusText?: string;
 }
 
 interface IStatusViewState {
@@ -70,7 +70,7 @@ interface IStatusViewProps {
 	user: IUser;
 	theme: string;
 	isMasterDetail: boolean;
-	setUser: (user: Partial<IUser>) => void;
+	setUser: (user: IUser) => void;
 	Accounts_AllowInvisibleStatusOption: boolean;
 }
 
@@ -144,7 +144,7 @@ class StatusView extends React.Component<IStatusViewProps, IStatusViewState> {
 					value={statusText}
 					containerStyle={styles.inputContainer}
 					onChangeText={text => this.setState({ statusText: text })}
-					left={<Status testID={`status-view-current-${user.status}`} style={styles.inputLeft} status={user.status} size={24} />}
+					left={<Status testID={`status-view-current-${user.status}`} style={styles.inputLeft} status={user.status!} size={24} />}
 					inputStyle={styles.inputStyle}
 					placeholder={I18n.t('What_are_you_doing_right_now')}
 					testID='status-view-input'
diff --git a/app/views/ThemeView.tsx b/app/views/ThemeView.tsx
index 8ab9010c4..b73e7b9be 100644
--- a/app/views/ThemeView.tsx
+++ b/app/views/ThemeView.tsx
@@ -11,17 +11,18 @@ import { supportSystemTheme } from '../utils/deviceInfo';
 import SafeAreaView from '../containers/SafeAreaView';
 import UserPreferences from '../lib/userPreferences';
 import { events, logEvent } from '../utils/log';
+import { IThemePreference, TThemeMode, TDarkLevel } from '../definitions/ITheme';
 
 const THEME_GROUP = 'THEME_GROUP';
 const DARK_GROUP = 'DARK_GROUP';
 
-const SYSTEM_THEME = {
+const SYSTEM_THEME: ITheme = {
 	label: 'Automatic',
 	value: 'automatic',
 	group: THEME_GROUP
 };
 
-const THEMES = [
+const THEMES: ITheme[] = [
 	{
 		label: 'Light',
 		value: 'light',
@@ -53,15 +54,10 @@ const darkGroup = THEMES.filter(item => item.group === DARK_GROUP);
 
 interface ITheme {
 	label: string;
-	value: string;
+	value: TThemeMode | TDarkLevel;
 	group: string;
 }
 
-interface IThemePreference {
-	currentTheme?: string;
-	darkLevel?: string;
-}
-
 interface IThemeViewProps {
 	theme: string;
 	themePreferences: IThemePreference;
@@ -89,19 +85,19 @@ class ThemeView extends React.Component<IThemeViewProps> {
 		const { themePreferences } = this.props;
 		const { darkLevel, currentTheme } = themePreferences;
 		const { value, group } = item;
-		let changes: IThemePreference = {};
+		let changes: Partial<IThemePreference> = {};
 		if (group === THEME_GROUP && currentTheme !== value) {
 			logEvent(events.THEME_SET_THEME_GROUP, { theme_group: value });
-			changes = { currentTheme: value };
+			changes = { currentTheme: value as TThemeMode };
 		}
 		if (group === DARK_GROUP && darkLevel !== value) {
 			logEvent(events.THEME_SET_DARK_LEVEL, { dark_level: value });
-			changes = { darkLevel: value };
+			changes = { darkLevel: value as TDarkLevel };
 		}
 		this.setTheme(changes);
 	};
 
-	setTheme = async (theme: IThemePreference) => {
+	setTheme = async (theme: Partial<IThemePreference>) => {
 		const { setTheme, themePreferences } = this.props;
 		const newTheme = { ...themePreferences, ...theme };
 		setTheme(newTheme);
@@ -121,7 +117,7 @@ class ThemeView extends React.Component<IThemeViewProps> {
 					title={label}
 					onPress={() => this.onClick(item)}
 					testID={`theme-view-${value}`}
-					right={this.isSelected(item) ? this.renderIcon : null}
+					right={() => (this.isSelected(item) ? this.renderIcon() : null)}
 				/>
 				<List.Separator />
 			</>
diff --git a/app/views/ThreadMessagesView/Dropdown/DropdownItem.js b/app/views/ThreadMessagesView/Dropdown/DropdownItem.tsx
similarity index 65%
rename from app/views/ThreadMessagesView/Dropdown/DropdownItem.js
rename to app/views/ThreadMessagesView/Dropdown/DropdownItem.tsx
index c5d69ba7c..c2bbd4960 100644
--- a/app/views/ThreadMessagesView/Dropdown/DropdownItem.js
+++ b/app/views/ThreadMessagesView/Dropdown/DropdownItem.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { themes } from '../../../constants/colors';
@@ -23,20 +22,20 @@ const styles = StyleSheet.create({
 	}
 });
 
-const DropdownItem = React.memo(({ theme, onPress, iconName, text }) => (
-	<Touch theme={theme} onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }}>
+interface IDropdownItem {
+	text: string;
+	iconName: string | null;
+	theme?: string;
+	onPress: () => void;
+}
+
+const DropdownItem = React.memo(({ theme, onPress, iconName, text }: IDropdownItem) => (
+	<Touch theme={theme!} onPress={onPress} style={{ backgroundColor: themes[theme!].backgroundColor }}>
 		<View style={styles.container}>
-			<Text style={[styles.text, { color: themes[theme].auxiliaryText }]}>{text}</Text>
-			{iconName ? <CustomIcon name={iconName} size={22} color={themes[theme].auxiliaryText} /> : null}
+			<Text style={[styles.text, { color: themes[theme!].auxiliaryText }]}>{text}</Text>
+			{iconName ? <CustomIcon name={iconName} size={22} color={themes[theme!].auxiliaryText} /> : null}
 		</View>
 	</Touch>
 ));
 
-DropdownItem.propTypes = {
-	text: PropTypes.string,
-	iconName: PropTypes.string,
-	theme: PropTypes.string,
-	onPress: PropTypes.func
-};
-
 export default withTheme(DropdownItem);
diff --git a/app/views/ThreadMessagesView/Dropdown/DropdownItemFilter.js b/app/views/ThreadMessagesView/Dropdown/DropdownItemFilter.tsx
similarity index 51%
rename from app/views/ThreadMessagesView/Dropdown/DropdownItemFilter.js
rename to app/views/ThreadMessagesView/Dropdown/DropdownItemFilter.tsx
index 7ff7b691f..6beaa2e77 100644
--- a/app/views/ThreadMessagesView/Dropdown/DropdownItemFilter.js
+++ b/app/views/ThreadMessagesView/Dropdown/DropdownItemFilter.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import I18n from '../../../i18n';
+import { Filter } from '../filters';
 import DropdownItem from './DropdownItem';
 
-const DropdownItemFilter = ({ currentFilter, value, onPress }) => (
+interface IDropdownItemFilter {
+	currentFilter: string;
+	value: Filter;
+	onPress: (value: Filter) => void;
+}
+
+const DropdownItemFilter = ({ currentFilter, value, onPress }: IDropdownItemFilter): JSX.Element => (
 	<DropdownItem text={I18n.t(value)} iconName={currentFilter === value ? 'check' : null} onPress={() => onPress(value)} />
 );
 
-DropdownItemFilter.propTypes = {
-	currentFilter: PropTypes.string,
-	value: PropTypes.string,
-	onPress: PropTypes.func
-};
-
 export default DropdownItemFilter;
diff --git a/app/views/ThreadMessagesView/Dropdown/DropdownItemHeader.js b/app/views/ThreadMessagesView/Dropdown/DropdownItemHeader.tsx
similarity index 61%
rename from app/views/ThreadMessagesView/Dropdown/DropdownItemHeader.js
rename to app/views/ThreadMessagesView/Dropdown/DropdownItemHeader.tsx
index d1ee227de..9ffe4c89e 100644
--- a/app/views/ThreadMessagesView/Dropdown/DropdownItemHeader.js
+++ b/app/views/ThreadMessagesView/Dropdown/DropdownItemHeader.tsx
@@ -1,17 +1,21 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
-import { FILTER } from '../filters';
+import { Filter } from '../filters';
 import I18n from '../../../i18n';
 import DropdownItem from './DropdownItem';
 
-const DropdownItemHeader = ({ currentFilter, onPress }) => {
+interface IDropdownItemHeader {
+	currentFilter: Filter;
+	onPress: () => void;
+}
+
+const DropdownItemHeader = ({ currentFilter, onPress }: IDropdownItemHeader): JSX.Element => {
 	let text;
 	switch (currentFilter) {
-		case FILTER.FOLLOWING:
+		case Filter.Following:
 			text = I18n.t('Threads_displaying_following');
 			break;
-		case FILTER.UNREAD:
+		case Filter.Unread:
 			text = I18n.t('Threads_displaying_unread');
 			break;
 		default:
@@ -21,9 +25,4 @@ const DropdownItemHeader = ({ currentFilter, onPress }) => {
 	return <DropdownItem text={text} iconName='filter' onPress={onPress} />;
 };
 
-DropdownItemHeader.propTypes = {
-	currentFilter: PropTypes.string,
-	onPress: PropTypes.func
-};
-
 export default DropdownItemHeader;
diff --git a/app/views/ThreadMessagesView/Dropdown/index.js b/app/views/ThreadMessagesView/Dropdown/index.tsx
similarity index 67%
rename from app/views/ThreadMessagesView/Dropdown/index.js
rename to app/views/ThreadMessagesView/Dropdown/index.tsx
index ac33cd89b..d21a78fc5 100644
--- a/app/views/ThreadMessagesView/Dropdown/index.js
+++ b/app/views/ThreadMessagesView/Dropdown/index.tsx
@@ -1,30 +1,31 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Animated, Easing, TouchableWithoutFeedback } from 'react-native';
-import { withSafeAreaInsets } from 'react-native-safe-area-context';
+import { EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context';
 
 import styles from '../styles';
 import { themes } from '../../../constants/colors';
 import { withTheme } from '../../../theme';
 import { headerHeight } from '../../../containers/Header';
 import * as List from '../../../containers/List';
-import { FILTER } from '../filters';
+import { Filter } from '../filters';
 import DropdownItemFilter from './DropdownItemFilter';
 import DropdownItemHeader from './DropdownItemHeader';
 
 const ANIMATION_DURATION = 200;
 
-class Dropdown extends React.Component {
-	static propTypes = {
-		isMasterDetail: PropTypes.bool,
-		theme: PropTypes.string,
-		insets: PropTypes.object,
-		currentFilter: PropTypes.string,
-		onClose: PropTypes.func,
-		onFilterSelected: PropTypes.func
-	};
+interface IDropdownProps {
+	isMasterDetail?: boolean;
+	theme?: string;
+	insets?: EdgeInsets;
+	currentFilter: Filter;
+	onClose: () => void;
+	onFilterSelected: (value: Filter) => void;
+}
 
-	constructor(props) {
+class Dropdown extends React.Component<IDropdownProps> {
+	private animatedValue: Animated.Value;
+
+	constructor(props: IDropdownProps) {
 		super(props);
 		this.animatedValue = new Animated.Value(0);
 	}
@@ -58,7 +59,7 @@ class Dropdown extends React.Component {
 		});
 		const backdropOpacity = this.animatedValue.interpolate({
 			inputRange: [0, 1],
-			outputRange: [0, themes[theme].backdropOpacity]
+			outputRange: [0, themes[theme!].backdropOpacity]
 		});
 		return (
 			<>
@@ -67,7 +68,7 @@ class Dropdown extends React.Component {
 						style={[
 							styles.backdrop,
 							{
-								backgroundColor: themes[theme].backdropColor,
+								backgroundColor: themes[theme!].backdropColor,
 								opacity: backdropOpacity,
 								top: heightDestination
 							}
@@ -79,15 +80,15 @@ class Dropdown extends React.Component {
 						styles.dropdownContainer,
 						{
 							transform: [{ translateY }],
-							backgroundColor: themes[theme].backgroundColor,
-							borderColor: themes[theme].separatorColor
+							backgroundColor: themes[theme!].backgroundColor,
+							borderColor: themes[theme!].separatorColor
 						}
 					]}>
 					<DropdownItemHeader currentFilter={currentFilter} onPress={this.close} />
 					<List.Separator />
-					<DropdownItemFilter currentFilter={currentFilter} value={FILTER.ALL} onPress={onFilterSelected} />
-					<DropdownItemFilter currentFilter={currentFilter} value={FILTER.FOLLOWING} onPress={onFilterSelected} />
-					<DropdownItemFilter currentFilter={currentFilter} value={FILTER.UNREAD} onPress={onFilterSelected} />
+					<DropdownItemFilter currentFilter={currentFilter} value={Filter.All} onPress={onFilterSelected} />
+					<DropdownItemFilter currentFilter={currentFilter} value={Filter.Following} onPress={onFilterSelected} />
+					<DropdownItemFilter currentFilter={currentFilter} value={Filter.Unread} onPress={onFilterSelected} />
 				</Animated.View>
 			</>
 		);
diff --git a/app/views/ThreadMessagesView/Item.js b/app/views/ThreadMessagesView/Item.tsx
similarity index 72%
rename from app/views/ThreadMessagesView/Item.js
rename to app/views/ThreadMessagesView/Item.tsx
index 1caef2c27..688e95229 100644
--- a/app/views/ThreadMessagesView/Item.js
+++ b/app/views/ThreadMessagesView/Item.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { StyleSheet, Text, View } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 
@@ -10,6 +9,7 @@ import { themes } from '../../constants/colors';
 import Markdown from '../../containers/markdown';
 import { formatDateThreads, makeThreadName } from '../../utils/room';
 import ThreadDetails from '../../containers/ThreadDetails';
+import { TThreadModel } from '../../definitions/IThread';
 
 const styles = StyleSheet.create({
 	container: {
@@ -56,7 +56,18 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Item = ({ item, baseUrl, theme, useRealName, user, badgeColor, onPress, toggleFollowThread }) => {
+interface IItem {
+	item: TThreadModel;
+	baseUrl: string;
+	theme?: string;
+	useRealName: boolean;
+	user: any;
+	badgeColor?: string;
+	onPress: (item: TThreadModel) => void;
+	toggleFollowThread: (isFollowing: boolean, id: string) => void;
+}
+
+const Item = ({ item, baseUrl, theme, useRealName, user, badgeColor, onPress, toggleFollowThread }: IItem) => {
 	const username = (useRealName && item?.u?.name) || item?.u?.username;
 	let time;
 	if (item?.ts) {
@@ -67,31 +78,23 @@ const Item = ({ item, baseUrl, theme, useRealName, user, badgeColor, onPress, to
 		<Touchable
 			onPress={() => onPress(item)}
 			testID={`thread-messages-view-${item.msg}`}
-			style={{ backgroundColor: themes[theme].backgroundColor }}>
+			style={{ backgroundColor: themes[theme!].backgroundColor }}>
 			<View style={styles.container}>
-				<Avatar
-					style={styles.avatar}
-					text={item?.u?.username}
-					size={36}
-					borderRadius={4}
-					baseUrl={baseUrl}
-					userId={user?.id}
-					token={user?.token}
-					theme={theme}
-				/>
+				<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} theme={theme} />
 				<View style={styles.contentContainer}>
 					<View style={styles.titleContainer}>
-						<Text style={[styles.title, { color: themes[theme].titleText }]} numberOfLines={1}>
+						<Text style={[styles.title, { color: themes[theme!].titleText }]} numberOfLines={1}>
 							{username}
 						</Text>
-						<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
+						<Text style={[styles.time, { color: themes[theme!].auxiliaryText }]}>{time}</Text>
 					</View>
 					<View style={styles.messageContainer}>
 						<Markdown
+							// @ts-ignore
 							msg={makeThreadName(item)}
 							baseUrl={baseUrl}
-							username={username}
-							theme={theme}
+							username={username!}
+							theme={theme!}
 							numberOfLines={2}
 							style={[styles.markdown]}
 							preview
@@ -105,15 +108,4 @@ const Item = ({ item, baseUrl, theme, useRealName, user, badgeColor, onPress, to
 	);
 };
 
-Item.propTypes = {
-	item: PropTypes.object,
-	baseUrl: PropTypes.string,
-	theme: PropTypes.string,
-	useRealName: PropTypes.bool,
-	user: PropTypes.object,
-	badgeColor: PropTypes.string,
-	onPress: PropTypes.func,
-	toggleFollowThread: PropTypes.func
-};
-
 export default withTheme(Item);
diff --git a/app/views/ThreadMessagesView/filters.js b/app/views/ThreadMessagesView/filters.js
deleted file mode 100644
index 388f28f2a..000000000
--- a/app/views/ThreadMessagesView/filters.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export const FILTER = {
-	ALL: 'All',
-	FOLLOWING: 'Following',
-	UNREAD: 'Unread'
-};
diff --git a/app/views/ThreadMessagesView/filters.ts b/app/views/ThreadMessagesView/filters.ts
new file mode 100644
index 000000000..69b104e4d
--- /dev/null
+++ b/app/views/ThreadMessagesView/filters.ts
@@ -0,0 +1,5 @@
+export enum Filter {
+	All = 'All',
+	Following = 'Following',
+	Unread = 'Unread'
+}
diff --git a/app/views/ThreadMessagesView/index.js b/app/views/ThreadMessagesView/index.tsx
similarity index 74%
rename from app/views/ThreadMessagesView/index.js
rename to app/views/ThreadMessagesView/index.tsx
index 5c6556efb..2b53159bf 100644
--- a/app/views/ThreadMessagesView/index.js
+++ b/app/views/ThreadMessagesView/index.tsx
@@ -1,11 +1,14 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { FlatList } from 'react-native';
 import { connect } from 'react-redux';
 import { Q } from '@nozbe/watermelondb';
 import { sanitizedRaw } from '@nozbe/watermelondb/RawRecord';
-import { withSafeAreaInsets } from 'react-native-safe-area-context';
-import { HeaderBackButton } from '@react-navigation/stack';
+import { EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context';
+import { HeaderBackButton, StackNavigationOptions, StackNavigationProp } from '@react-navigation/stack';
+import { RouteProp } from '@react-navigation/native';
+import { Observable, Subscription } from 'rxjs';
+import Model from '@nozbe/watermelondb/Model';
+import Database from '@nozbe/watermelondb/Database';
 
 import ActivityIndicator from '../../containers/ActivityIndicator';
 import I18n from '../../i18n';
@@ -30,27 +33,62 @@ import { getHeaderTitlePosition } from '../../containers/Header';
 import EventEmitter from '../../utils/events';
 import { LISTENER } from '../../containers/Toast';
 import SearchHeader from '../../containers/SearchHeader';
-import { FILTER } from './filters';
+import { ChatsStackParamList } from '../../stacks/types';
+import { IThreadResult, TThreadModel } from '../../definitions/IThread';
+import { Filter } from './filters';
 import DropdownItemHeader from './Dropdown/DropdownItemHeader';
 import Dropdown from './Dropdown';
 import Item from './Item';
 import styles from './styles';
+import { SubscriptionType, TSubscriptionModel } from '../../definitions/ISubscription';
 
 const API_FETCH_COUNT = 50;
 
-class ThreadMessagesView extends React.Component {
-	static propTypes = {
-		user: PropTypes.object,
-		navigation: PropTypes.object,
-		route: PropTypes.object,
-		baseUrl: PropTypes.string,
-		useRealName: PropTypes.bool,
-		theme: PropTypes.string,
-		isMasterDetail: PropTypes.bool,
-		insets: PropTypes.object
-	};
+interface IResultFetch {
+	threads: IThreadResult[];
+	count: number;
+	offset: number;
+	total: number;
+	success: boolean;
+}
 
-	constructor(props) {
+interface IThreadMessagesViewState {
+	loading: boolean;
+	end: boolean;
+	messages: any[];
+	displayingThreads: TThreadModel[];
+	subscription: TSubscriptionModel;
+	showFilterDropdown: boolean;
+	currentFilter: Filter;
+	isSearching: boolean;
+	searchText: string;
+}
+
+interface IThreadMessagesViewProps {
+	navigation: StackNavigationProp<ChatsStackParamList, 'ThreadMessagesView'>;
+	route: RouteProp<ChatsStackParamList, 'ThreadMessagesView'>;
+	user: any;
+	baseUrl: string;
+	useRealName: boolean;
+	theme: string;
+	isMasterDetail: boolean;
+	insets: EdgeInsets;
+}
+
+class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThreadMessagesViewState> {
+	private mounted: boolean;
+
+	private rid: string;
+
+	private t: string;
+
+	private subSubscription: any;
+
+	private messagesSubscription?: Subscription;
+
+	private messagesObservable!: Observable<Model>;
+
+	constructor(props: IThreadMessagesViewProps) {
 		super(props);
 		this.mounted = false;
 		this.rid = props.route.params?.rid;
@@ -60,9 +98,9 @@ class ThreadMessagesView extends React.Component {
 			end: false,
 			messages: [],
 			displayingThreads: [],
-			subscription: {},
+			subscription: {} as TSubscriptionModel,
 			showFilterDropdown: false,
-			currentFilter: FILTER.ALL,
+			currentFilter: Filter.All,
 			isSearching: false,
 			searchText: ''
 		};
@@ -76,7 +114,7 @@ class ThreadMessagesView extends React.Component {
 		this.init();
 	}
 
-	componentDidUpdate(prevProps) {
+	componentDidUpdate(prevProps: IThreadMessagesViewProps) {
 		const { insets } = this.props;
 		if (insets.left !== prevProps.insets.left || insets.right !== prevProps.insets.right) {
 			this.setHeader();
@@ -93,7 +131,7 @@ class ThreadMessagesView extends React.Component {
 		}
 	}
 
-	getHeader = () => {
+	getHeader = (): StackNavigationOptions => {
 		const { isSearching } = this.state;
 		const { navigation, isMasterDetail, insets, theme } = this.props;
 
@@ -115,7 +153,7 @@ class ThreadMessagesView extends React.Component {
 			};
 		}
 
-		const options = {
+		const options: StackNavigationOptions = {
 			headerLeft: () => (
 				<HeaderBackButton labelVisible={false} onPress={() => navigation.pop()} tintColor={themes[theme].headerTintColor} />
 			),
@@ -150,7 +188,7 @@ class ThreadMessagesView extends React.Component {
 			const db = database.active;
 
 			// subscription query
-			const subscription = await db.collections.get('subscriptions').find(this.rid);
+			const subscription = (await db.collections.get('subscriptions').find(this.rid)) as TSubscriptionModel;
 			const observable = subscription.observe();
 			this.subSubscription = observable.subscribe(data => {
 				this.setState({ subscription: data });
@@ -162,7 +200,7 @@ class ThreadMessagesView extends React.Component {
 		}
 	};
 
-	subscribeMessages = (subscription, searchText) => {
+	subscribeMessages = (subscription?: TSubscriptionModel, searchText?: string) => {
 		try {
 			const db = database.active;
 
@@ -180,13 +218,17 @@ class ThreadMessagesView extends React.Component {
 				.get('threads')
 				.query(...whereClause)
 				.observeWithColumns(['updated_at']);
-			this.messagesSubscription = this.messagesObservable.subscribe(messages => {
+
+			// TODO: Refactor when migrate messages
+			this.messagesSubscription = this.messagesObservable.subscribe((messages: any) => {
 				const { currentFilter } = this.state;
-				const displayingThreads = this.getFilteredThreads(messages, subscription, currentFilter);
+				const displayingThreads = this.getFilteredThreads(messages, subscription!, currentFilter);
 				if (this.mounted) {
 					this.setState({ messages, displayingThreads });
 				} else {
+					// @ts-ignore
 					this.state.messages = messages;
+					// @ts-ignore
 					this.state.displayingThreads = displayingThreads;
 				}
 			});
@@ -212,7 +254,15 @@ class ThreadMessagesView extends React.Component {
 		}
 	};
 
-	updateThreads = async ({ update, remove, lastThreadSync }) => {
+	updateThreads = async ({
+		update,
+		remove,
+		lastThreadSync
+	}: {
+		update: IThreadResult[];
+		remove?: IThreadResult[];
+		lastThreadSync: Date;
+	}) => {
 		const { subscription } = this.state;
 		// if there's no subscription, manage data on this.state.messages
 		// note: sync will never be called without subscription
@@ -222,21 +272,23 @@ class ThreadMessagesView extends React.Component {
 		}
 
 		try {
-			const db = database.active;
+			const db: Database = database.active;
 			const threadsCollection = db.get('threads');
-			const allThreadsRecords = await subscription.threads.fetch();
-			let threadsToCreate = [];
-			let threadsToUpdate = [];
-			let threadsToDelete = [];
+			// TODO: Refactor when migrate room
+			// @ts-ignore
+			const allThreadsRecords = (await subscription.threads.fetch()) as TThreadModel[];
+			let threadsToCreate: any[] = [];
+			let threadsToUpdate: any[] = [];
+			let threadsToDelete: any[] = [];
 
 			if (update && update.length) {
 				update = update.map(m => buildMessage(m));
 				// filter threads
-				threadsToCreate = update.filter(i1 => !allThreadsRecords.find(i2 => i1._id === i2.id));
-				threadsToUpdate = allThreadsRecords.filter(i1 => update.find(i2 => i1.id === i2._id));
+				threadsToCreate = update.filter(i1 => !allThreadsRecords.find((i2: { id: string }) => i1._id === i2.id));
+				threadsToUpdate = allThreadsRecords.filter((i1: { id: string }) => update.find(i2 => i1.id === i2._id));
 				threadsToCreate = threadsToCreate.map(thread =>
 					threadsCollection.prepareCreate(
-						protectedFunction(t => {
+						protectedFunction((t: any) => {
 							t._raw = sanitizedRaw({ id: thread._id }, threadsCollection.schema);
 							t.subscription.set(subscription);
 							Object.assign(t, thread);
@@ -246,7 +298,7 @@ class ThreadMessagesView extends React.Component {
 				threadsToUpdate = threadsToUpdate.map(thread => {
 					const newThread = update.find(t => t._id === thread.id);
 					return thread.prepareUpdate(
-						protectedFunction(t => {
+						protectedFunction((t: any) => {
 							Object.assign(t, newThread);
 						})
 					);
@@ -254,16 +306,16 @@ class ThreadMessagesView extends React.Component {
 			}
 
 			if (remove && remove.length) {
-				threadsToDelete = allThreadsRecords.filter(i1 => remove.find(i2 => i1.id === i2._id));
+				threadsToDelete = allThreadsRecords.filter((i1: { id: string }) => remove.find(i2 => i1.id === i2._id));
 				threadsToDelete = threadsToDelete.map(t => t.prepareDestroyPermanently());
 			}
 
-			await db.action(async () => {
+			await db.write(async () => {
 				await db.batch(
 					...threadsToCreate,
 					...threadsToUpdate,
 					...threadsToDelete,
-					subscription.prepareUpdate(s => {
+					subscription.prepareUpdate((s: any) => {
 						s.lastThreadSync = lastThreadSync;
 					})
 				);
@@ -274,7 +326,7 @@ class ThreadMessagesView extends React.Component {
 	};
 
 	// eslint-disable-next-line react/sort-comp
-	load = debounce(async lastThreadSync => {
+	load = debounce(async (lastThreadSync: Date) => {
 		const { loading, end, messages, searchText } = this.state;
 		if (end || loading || !this.mounted) {
 			return;
@@ -283,7 +335,7 @@ class ThreadMessagesView extends React.Component {
 		this.setState({ loading: true });
 
 		try {
-			const result = await RocketChat.getThreadsList({
+			const result: IResultFetch = await RocketChat.getThreadsList({
 				rid: this.rid,
 				count: API_FETCH_COUNT,
 				offset: messages.length,
@@ -303,7 +355,7 @@ class ThreadMessagesView extends React.Component {
 	}, 300);
 
 	// eslint-disable-next-line react/sort-comp
-	sync = async updatedSince => {
+	sync = async (updatedSince: Date) => {
 		this.setState({ loading: true });
 
 		try {
@@ -336,13 +388,13 @@ class ThreadMessagesView extends React.Component {
 		});
 	};
 
-	onSearchChangeText = debounce(searchText => {
+	onSearchChangeText = debounce((searchText: string) => {
 		const { subscription } = this.state;
 		this.setState({ searchText }, () => this.subscribeMessages(subscription, searchText));
 	}, 300);
 
 	onThreadPress = debounce(
-		item => {
+		(item: any) => {
 			const { subscription } = this.state;
 			const { navigation, isMasterDetail } = this.props;
 			if (isMasterDetail) {
@@ -352,7 +404,7 @@ class ThreadMessagesView extends React.Component {
 				rid: item.subscription.id,
 				tmid: item.id,
 				name: makeThreadName(item),
-				t: 'thread',
+				t: SubscriptionType.THREAD,
 				roomUserId: RocketChat.getUidDirectMessage(subscription)
 			});
 		},
@@ -360,20 +412,21 @@ class ThreadMessagesView extends React.Component {
 		true
 	);
 
-	getBadgeColor = item => {
+	getBadgeColor = (item: TThreadModel) => {
 		const { subscription } = this.state;
 		const { theme } = this.props;
 		return getBadgeColor({ subscription, theme, messageId: item?.id });
 	};
 
 	// helper to query threads
-	getFilteredThreads = (messages, subscription, currentFilter) => {
+	getFilteredThreads = (messages: any, subscription: TSubscriptionModel, currentFilter?: Filter): TThreadModel[] => {
 		// const { currentFilter } = this.state;
 		const { user } = this.props;
-		if (currentFilter === FILTER.FOLLOWING) {
-			return messages?.filter(item => item?.replies?.find(u => u === user.id));
-		} else if (currentFilter === FILTER.UNREAD) {
-			return messages?.filter(item => subscription?.tunread?.includes(item?.id));
+		if (currentFilter === Filter.Following) {
+			return messages?.filter((item: { replies: any[] }) => item?.replies?.find(u => u === user.id));
+		}
+		if (currentFilter === Filter.Unread) {
+			return messages?.filter((item: { id: string }) => subscription?.tunread?.includes(item?.id));
 		}
 		return messages;
 	};
@@ -389,13 +442,13 @@ class ThreadMessagesView extends React.Component {
 
 	closeFilterDropdown = () => this.setState({ showFilterDropdown: false });
 
-	onFilterSelected = filter => {
+	onFilterSelected = (filter: Filter) => {
 		const { messages, subscription } = this.state;
 		const displayingThreads = this.getFilteredThreads(messages, subscription, filter);
 		this.setState({ currentFilter: filter, displayingThreads });
 	};
 
-	toggleFollowThread = async (isFollowingThread, tmid) => {
+	toggleFollowThread = async (isFollowingThread: boolean, tmid: string) => {
 		try {
 			await RocketChat.toggleFollowMessage(tmid, !isFollowingThread);
 			EventEmitter.emit(LISTENER, { message: isFollowingThread ? I18n.t('Unfollowed_thread') : I18n.t('Following_thread') });
@@ -404,7 +457,7 @@ class ThreadMessagesView extends React.Component {
 		}
 	};
 
-	renderItem = ({ item }) => {
+	renderItem = ({ item }: { item: TThreadModel }) => {
 		const { user, navigation, baseUrl, useRealName } = this.props;
 		const badgeColor = this.getBadgeColor(item);
 		return (
@@ -442,9 +495,9 @@ class ThreadMessagesView extends React.Component {
 		const { theme } = this.props;
 		if (!messages?.length || !displayingThreads?.length) {
 			let text;
-			if (currentFilter === FILTER.FOLLOWING) {
+			if (currentFilter === Filter.Following) {
 				text = I18n.t('No_threads_following');
-			} else if (currentFilter === FILTER.UNREAD) {
+			} else if (currentFilter === Filter.Unread) {
 				text = I18n.t('No_threads_unread');
 			} else {
 				text = I18n.t('No_threads');
@@ -494,7 +547,7 @@ class ThreadMessagesView extends React.Component {
 	}
 }
 
-const mapStateToProps = state => ({
+const mapStateToProps = (state: any) => ({
 	baseUrl: state.server.server,
 	user: getUserSelector(state),
 	useRealName: state.settings.UI_Use_Real_Name,
diff --git a/app/views/ThreadMessagesView/styles.js b/app/views/ThreadMessagesView/styles.ts
similarity index 93%
rename from app/views/ThreadMessagesView/styles.js
rename to app/views/ThreadMessagesView/styles.ts
index ec24da209..a6b30bbac 100644
--- a/app/views/ThreadMessagesView/styles.js
+++ b/app/views/ThreadMessagesView/styles.ts
@@ -25,6 +25,6 @@ export default StyleSheet.create({
 		borderBottomWidth: StyleSheet.hairlineWidth
 	},
 	backdrop: {
-		...StyleSheet.absoluteFill
+		...StyleSheet.absoluteFillObject
 	}
 });
diff --git a/app/views/UserPreferencesView/index.tsx b/app/views/UserPreferencesView/index.tsx
index 59f0f9f3a..5cb9a2aa5 100644
--- a/app/views/UserPreferencesView/index.tsx
+++ b/app/views/UserPreferencesView/index.tsx
@@ -1,8 +1,9 @@
 import { StackNavigationProp } from '@react-navigation/stack';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { Switch } from 'react-native';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
+import { setUser } from '../../actions/login';
 import I18n from '../../i18n';
 import log, { logEvent, events } from '../../utils/log';
 import SafeAreaView from '../../containers/SafeAreaView';
@@ -18,8 +19,8 @@ interface IUserPreferencesViewProps {
 }
 
 const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Element => {
-	const user = useSelector(state => getUserSelector(state));
-	const [enableParser, setEnableParser] = useState(user.enableMessageParserEarlyAdoption);
+	const { enableMessageParserEarlyAdoption, id } = useSelector(state => getUserSelector(state));
+	const dispatch = useDispatch();
 
 	useEffect(() => {
 		navigation.setOptions({
@@ -34,15 +35,15 @@ const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Ele
 
 	const toggleMessageParser = async (value: boolean) => {
 		try {
-			await RocketChat.saveUserPreferences({ id: user.id, enableMessageParserEarlyAdoption: value });
-			setEnableParser(value);
+			dispatch(setUser({ enableMessageParserEarlyAdoption: value }));
+			await RocketChat.saveUserPreferences({ id, enableMessageParserEarlyAdoption: value });
 		} catch (e) {
 			log(e);
 		}
 	};
 
-	const renderMessageParserSwitch = () => (
-		<Switch value={enableParser} trackColor={SWITCH_TRACK_COLOR} onValueChange={toggleMessageParser} />
+	const renderMessageParserSwitch = (value: boolean) => (
+		<Switch value={value} trackColor={SWITCH_TRACK_COLOR} onValueChange={toggleMessageParser} />
 	);
 
 	return (
@@ -64,7 +65,7 @@ const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Ele
 					<List.Item
 						title='Enable_Message_Parser'
 						testID='preferences-view-enable-message-parser'
-						right={() => renderMessageParserSwitch()}
+						right={() => renderMessageParserSwitch(enableMessageParserEarlyAdoption)}
 					/>
 					<List.Separator />
 				</List.Section>
diff --git a/app/views/WorkspaceView/index.tsx b/app/views/WorkspaceView/index.tsx
index 827d6a44e..5eb6e34dd 100644
--- a/app/views/WorkspaceView/index.tsx
+++ b/app/views/WorkspaceView/index.tsx
@@ -35,9 +35,9 @@ interface IWorkSpaceProp {
 }
 
 class WorkspaceView extends React.Component<IWorkSpaceProp, any> {
-	static navigationOptions: StackNavigationOptions = {
+	static navigationOptions = (): StackNavigationOptions => ({
 		title: I18n.t('Your_workspace')
-	};
+	});
 
 	get showRegistrationButton() {
 		const { registrationForm, inviteLinkToken, Accounts_iframe_enabled } = this.props;
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 8ebb04855..08c8e3c0d 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -514,7 +514,7 @@ PODS:
     - React-Core
   - RNDateTimePicker (3.5.2):
     - React-Core
-  - RNDeviceInfo (8.1.3):
+  - RNDeviceInfo (8.4.8):
     - React-Core
   - RNFastImage (8.2.0):
     - React
@@ -950,7 +950,7 @@ SPEC CHECKSUMS:
   EXVideoThumbnails: 442c3abadb51a81551a3b53705b7560de390e6f7
   EXWebBrowser: 76783ba5dcb8699237746ecf41a9643d428a4cc5
   FBLazyVector: e686045572151edef46010a6f819ade377dfeb4b
-  FBReactNativeSpec: 686ac17e193dcf7d5df4d772b224504dd2f3ad81
+  FBReactNativeSpec: 8a1012a62d7a3d667376b413656d780b8e4680ce
   Firebase: 919186c8e119dd9372a45fd1dd17a8a942bc1892
   FirebaseAnalytics: 5fa308e1b13f838d0f6dc74719ac2a72e8c5afc4
   FirebaseCore: 8cd4f8ea22075e0ee582849b1cf79d8816506085
@@ -1028,7 +1028,7 @@ SPEC CHECKSUMS:
   RNConfigReader: 396da6a6444182a76e8ae0930b9436c7575045cb
   RNCPicker: 914b557e20b3b8317b084aca9ff4b4edb95f61e4
   RNDateTimePicker: 7658208086d86d09e1627b5c34ba0cf237c60140
-  RNDeviceInfo: 8d3a29207835f972bce883723882980143270d55
+  RNDeviceInfo: 0400a6d0c94186d1120c3cbd97b23abc022187a9
   RNFastImage: f40d202ea2367239f71bc7cf11315f4bebab85b4
   RNFBAnalytics: dae6d7b280ba61c96e1bbdd34aca3154388f025e
   RNFBApp: 6fd8a7e757135d4168bf033a8812c241af7363a0
@@ -1055,4 +1055,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 9fd323641c96f6bf98b309066332c3ff95b9cf15
 
-COCOAPODS: 1.10.1
+COCOAPODS: 1.11.2
diff --git a/ios/RocketChatRN.xcodeproj/project.pbxproj b/ios/RocketChatRN.xcodeproj/project.pbxproj
index f1ac13c9f..6499adfa2 100644
--- a/ios/RocketChatRN.xcodeproj/project.pbxproj
+++ b/ios/RocketChatRN.xcodeproj/project.pbxproj
@@ -1682,7 +1682,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.23.0;
+				MARKETING_VERSION = 4.24.0;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = chat.rocket.reactnative.NotificationService;
@@ -1719,7 +1719,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.23.0;
+				MARKETING_VERSION = 4.24.0;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = chat.rocket.reactnative.NotificationService;
 				PRODUCT_NAME = "$(TARGET_NAME)";
diff --git a/ios/RocketChatRN/Info.plist b/ios/RocketChatRN/Info.plist
index 93504495a..5d0e7266d 100644
--- a/ios/RocketChatRN/Info.plist
+++ b/ios/RocketChatRN/Info.plist
@@ -26,7 +26,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>4.23.0</string>
+	<string>4.24.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
diff --git a/ios/ShareRocketChatRN/Info.plist b/ios/ShareRocketChatRN/Info.plist
index c363596be..dc3380bef 100644
--- a/ios/ShareRocketChatRN/Info.plist
+++ b/ios/ShareRocketChatRN/Info.plist
@@ -26,7 +26,7 @@
 	<key>CFBundlePackageType</key>
 	<string>XPC!</string>
 	<key>CFBundleShortVersionString</key>
-	<string>4.23.0</string>
+	<string>4.24.0</string>
 	<key>CFBundleVersion</key>
 	<string>1</string>
 	<key>KeychainGroup</key>
diff --git a/package.json b/package.json
index f807f6166..e8ebd4a24 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "rocket-chat-reactnative",
-	"version": "4.23.0",
+	"version": "4.24.0",
 	"private": true,
 	"scripts": {
 		"start": "react-native start",
@@ -51,7 +51,6 @@
 		"@rocket.chat/react-native-fast-image": "^8.2.0",
 		"@rocket.chat/sdk": "RocketChat/Rocket.Chat.js.SDK#mobile",
 		"@rocket.chat/ui-kit": "0.13.0",
-		"@types/url-parse": "^1.4.4",
 		"bytebuffer": "^5.0.1",
 		"color2k": "1.2.4",
 		"commonmark": "git+https://github.com/RocketChat/commonmark.js.git",
@@ -83,7 +82,7 @@
 		"react-native-bootsplash": "3.2.4",
 		"react-native-config-reader": "^4.1.1",
 		"react-native-console-time-polyfill": "1.2.3",
-		"react-native-device-info": "8.1.3",
+		"react-native-device-info": "8.4.8",
 		"react-native-document-picker": "5.2.0",
 		"react-native-easy-grid": "^0.2.2",
 		"react-native-easy-toast": "^1.2.0",
@@ -144,6 +143,7 @@
 		"@rocket.chat/eslint-config": "^0.4.0",
 		"@storybook/addon-storyshots": "5.3.21",
 		"@storybook/react-native": "5.3.25",
+		"@types/ejson": "^2.1.3",
 		"@types/jest": "^26.0.24",
 		"@types/lodash": "^4.14.171",
 		"@types/react": "^17.0.14",
@@ -154,6 +154,7 @@
 		"@types/react-native-scrollable-tab-view": "^0.10.2",
 		"@types/react-redux": "^7.1.18",
 		"@types/react-test-renderer": "^17.0.1",
+		"@types/url-parse": "^1.4.6",
 		"@typescript-eslint/eslint-plugin": "^4.28.3",
 		"@typescript-eslint/parser": "^4.28.5",
 		"axios": "0.21.1",
@@ -164,6 +165,7 @@
 		"eslint": "^7.31.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-import": "2.22.0",
+		"eslint-plugin-jest": "24.7.0",
 		"eslint-plugin-jsx-a11y": "6.3.1",
 		"eslint-plugin-react": "7.20.3",
 		"eslint-plugin-react-native": "3.8.1",
diff --git a/patches/react-native-device-info+8.1.3.patch b/patches/react-native-device-info+8.4.8.patch
similarity index 98%
rename from patches/react-native-device-info+8.1.3.patch
rename to patches/react-native-device-info+8.4.8.patch
index 1a9bf25d8..07b421f6d 100644
--- a/patches/react-native-device-info+8.1.3.patch
+++ b/patches/react-native-device-info+8.4.8.patch
@@ -1,5 +1,5 @@
 diff --git a/node_modules/react-native-device-info/android/build.gradle b/node_modules/react-native-device-info/android/build.gradle
-index 952667b..03cf7fd 100644
+index de22598..eafedfe 100644
 --- a/node_modules/react-native-device-info/android/build.gradle
 +++ b/node_modules/react-native-device-info/android/build.gradle
 @@ -51,16 +51,19 @@ repositories {
diff --git a/storybook/stories/RoomItem.js b/storybook/stories/RoomItem.js
index 1538c118a..e6ae40e7b 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}
 		/>
 	</>
diff --git a/yarn.lock b/yarn.lock
index b4ca2beb5..923363782 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4198,6 +4198,11 @@
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
+"@types/ejson@^2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@types/ejson/-/ejson-2.1.3.tgz#29a0028db4180b589b62eb2b6b9367c65b0c1864"
+  integrity sha512-Sd+XISmDWOypfDcsKeQkhykSMgYVAWJxhf7f0ySvfy2tYo+im26M/6FfqjCEiPSDAEugiuZKtA+wWeANKueWIg==
+
 "@types/events@*":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7"
@@ -4511,10 +4516,10 @@
   dependencies:
     source-map "^0.6.1"
 
-"@types/url-parse@^1.4.4":
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/@types/url-parse/-/url-parse-1.4.4.tgz#ebeb0ec8b581318739cf73e9f9b186f610764255"
-  integrity sha512-KtQLad12+4T/NfSxpoDhmr22+fig3T7/08QCgmutYA6QSznSRmEtuL95GrhVV40/0otTEdFc+etRcCTqhh1q5Q==
+"@types/url-parse@^1.4.6":
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/@types/url-parse/-/url-parse-1.4.6.tgz#46b044f24ee5200c3b1ef6a98214d1d451f4dab8"
+  integrity sha512-Xo6pU78oG9NNk5UJaumUXzrwu9hPiVN2N83mcdXQ1C3/R037fMPlVCh+LqP/2BELXMnlQH0sKec0u33ZnktqHQ==
 
 "@types/webpack-env@^1.15.0":
   version "1.15.2"
@@ -4593,6 +4598,18 @@
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
+"@typescript-eslint/experimental-utils@^4.0.1":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.33.0.tgz#6f2a786a4209fa2222989e9380b5331b2810f7fd"
+  integrity sha512-zeQjOoES5JFjTnAhI5QY7ZviczMzDptls15GFsI6jyUOq0kOf9+WonkhtlIhh0RgHRnqj5gdNxW5j1EvAyYg6Q==
+  dependencies:
+    "@types/json-schema" "^7.0.7"
+    "@typescript-eslint/scope-manager" "4.33.0"
+    "@typescript-eslint/types" "4.33.0"
+    "@typescript-eslint/typescript-estree" "4.33.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^3.0.0"
+
 "@typescript-eslint/parser@^4.28.5":
   version "4.31.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.31.0.tgz#87b7cd16b24b9170c77595d8b1363f8047121e05"
@@ -4611,11 +4628,24 @@
     "@typescript-eslint/types" "4.31.0"
     "@typescript-eslint/visitor-keys" "4.31.0"
 
+"@typescript-eslint/scope-manager@4.33.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.33.0.tgz#d38e49280d983e8772e29121cf8c6e9221f280a3"
+  integrity sha512-5IfJHpgTsTZuONKbODctL4kKuQje/bzBRkwHE8UOZ4f89Zeddg+EGZs8PD8NcN4LdM3ygHWYB3ukPAYjvl/qbQ==
+  dependencies:
+    "@typescript-eslint/types" "4.33.0"
+    "@typescript-eslint/visitor-keys" "4.33.0"
+
 "@typescript-eslint/types@4.31.0":
   version "4.31.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.31.0.tgz#9a7c86fcc1620189567dc4e46cad7efa07ee8dce"
   integrity sha512-9XR5q9mk7DCXgXLS7REIVs+BaAswfdHhx91XqlJklmqWpTALGjygWVIb/UnLh4NWhfwhR5wNe1yTyCInxVhLqQ==
 
+"@typescript-eslint/types@4.33.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.33.0.tgz#a1e59036a3b53ae8430ceebf2a919dc7f9af6d72"
+  integrity sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ==
+
 "@typescript-eslint/typescript-estree@4.31.0":
   version "4.31.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.31.0.tgz#4da4cb6274a7ef3b21d53f9e7147cc76f278a078"
@@ -4629,6 +4659,19 @@
     semver "^7.3.5"
     tsutils "^3.21.0"
 
+"@typescript-eslint/typescript-estree@4.33.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.33.0.tgz#0dfb51c2908f68c5c08d82aefeaf166a17c24609"
+  integrity sha512-rkWRY1MPFzjwnEVHsxGemDzqqddw2QbTJlICPD9p9I9LfsO8fdmfQPOX3uKfUaGRDFJbfrtm/sXhVXN4E+bzCA==
+  dependencies:
+    "@typescript-eslint/types" "4.33.0"
+    "@typescript-eslint/visitor-keys" "4.33.0"
+    debug "^4.3.1"
+    globby "^11.0.3"
+    is-glob "^4.0.1"
+    semver "^7.3.5"
+    tsutils "^3.21.0"
+
 "@typescript-eslint/visitor-keys@4.31.0":
   version "4.31.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.31.0.tgz#4e87b7761cb4e0e627dc2047021aa693fc76ea2b"
@@ -4637,6 +4680,14 @@
     "@typescript-eslint/types" "4.31.0"
     eslint-visitor-keys "^2.0.0"
 
+"@typescript-eslint/visitor-keys@4.33.0":
+  version "4.33.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz#2a22f77a41604289b7a186586e9ec48ca92ef1dd"
+  integrity sha512-uqi/2aSz9g2ftcHWf8uLPJA70rUv6yuMW5Bohw+bwcuzaxQIHaKFZCKGoGXIrc9vkTJ3+0txM73K0Hq3d5wgIg==
+  dependencies:
+    "@typescript-eslint/types" "4.33.0"
+    eslint-visitor-keys "^2.0.0"
+
 "@ungap/promise-all-settled@1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz#aa58042711d6e3275dd37dc597e5d31e8c290a44"
@@ -8145,6 +8196,13 @@ eslint-plugin-import@^2.17.2:
     resolve "^1.20.0"
     tsconfig-paths "^3.11.0"
 
+eslint-plugin-jest@24.7.0:
+  version "24.7.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-24.7.0.tgz#206ac0833841e59e375170b15f8d0955219c4889"
+  integrity sha512-wUxdF2bAZiYSKBclsUMrYHH6WxiBreNjyDxbRv345TIvPeoCEgPNEn3Sa+ZrSqsf1Dl9SqqSREXMHExlMMu1DA==
+  dependencies:
+    "@typescript-eslint/experimental-utils" "^4.0.1"
+
 eslint-plugin-jsx-a11y@6.3.1:
   version "6.3.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.3.1.tgz#99ef7e97f567cc6a5b8dd5ab95a94a67058a2660"
@@ -14235,10 +14293,10 @@ react-native-console-time-polyfill@1.2.3:
   resolved "https://registry.yarnpkg.com/react-native-console-time-polyfill/-/react-native-console-time-polyfill-1.2.3.tgz#1039dab1bb9e2d8040f5e19de68e0da781dc9b60"
   integrity sha512-C7CUb1c6GsCssqvjtRuqVqnGwlfEHXxXDvCUuGNbq/gpZZt+9YbZD3ODmXBDxis3tDQA0k1lbT1VMTqWQw9rDg==
 
-react-native-device-info@8.1.3:
-  version "8.1.3"
-  resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-8.1.3.tgz#022fc01372632bf80c0a6d201aab53344efc715f"
-  integrity sha512-73e3wiGFL8DvIXEd8x4Aq+mO8mZvHARwfYorIEu+X0trLHY92bP5Ict8DJHDjCQ0+HtAvpA4Wda2VoUVN1zh6Q==
+react-native-device-info@8.4.8:
+  version "8.4.8"
+  resolved "https://registry.yarnpkg.com/react-native-device-info/-/react-native-device-info-8.4.8.tgz#fc92ae423e47db6cfbf30c30012e09cee63727fa"
+  integrity sha512-92676ZWHZHsPM/EW1ulgb2MuVfjYfMWRTWMbLcrCsipkcMaZ9Traz5mpsnCS7KZpsOksnvUinzDIjsct2XGc6Q==
 
 react-native-document-picker@5.2.0:
   version "5.2.0"