diff --git a/app/definitions/index.ts b/app/definitions/index.ts
index a5bc02b8f..540d5fc67 100644
--- a/app/definitions/index.ts
+++ b/app/definitions/index.ts
@@ -37,7 +37,7 @@ export interface IBaseScreen<T extends Record<string, object | undefined>, S ext
 	dispatch: Dispatch;
 	isMasterDetail: boolean;
 	// TODO: remove after migrating all Class components
-	theme: TSupportedThemes;
+	theme?: TSupportedThemes;
 	colors: TColors;
 }
 
diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx
index 2d8b2c6ae..565f6efff 100644
--- a/app/stacks/InsideStack.tsx
+++ b/app/stacks/InsideStack.tsx
@@ -95,8 +95,10 @@ const ChatsStackNavigator = () => {
 			<ChatsStack.Screen name='RoomActionsView' component={RoomActionsView} options={RoomActionsView.navigationOptions} />
 			<ChatsStack.Screen name='SelectListView' component={SelectListView} options={SelectListView.navigationOptions} />
 			<ChatsStack.Screen name='RoomInfoView' component={RoomInfoView} options={RoomInfoView.navigationOptions} />
+			{/* @ts-ignore */}
 			<ChatsStack.Screen name='RoomInfoEditView' component={RoomInfoEditView} options={RoomInfoEditView.navigationOptions} />
 			<ChatsStack.Screen name='RoomMembersView' component={RoomMembersView} />
+			{/* @ts-ignore */}
 			<ChatsStack.Screen name='DiscussionsView' component={DiscussionsView} />
 			<ChatsStack.Screen
 				name='SearchMessagesView'
@@ -104,18 +106,25 @@ const ChatsStackNavigator = () => {
 				options={SearchMessagesView.navigationOptions}
 			/>
 			<ChatsStack.Screen name='SelectedUsersView' component={SelectedUsersView} />
+			{/* @ts-ignore */}
 			<ChatsStack.Screen name='InviteUsersView' component={InviteUsersView} />
 			<ChatsStack.Screen name='InviteUsersEditView' component={InviteUsersEditView} />
 			<ChatsStack.Screen name='MessagesView' component={MessagesView} />
+			{/* @ts-ignore */}
 			<ChatsStack.Screen name='AutoTranslateView' component={AutoTranslateView} options={AutoTranslateView.navigationOptions} />
 			<ChatsStack.Screen name='DirectoryView' component={DirectoryView} options={DirectoryView.navigationOptions} />
 			<ChatsStack.Screen name='NotificationPrefView' component={NotificationPrefView} />
+			{/* @ts-ignore */}
 			<ChatsStack.Screen name='ForwardLivechatView' component={ForwardLivechatView} />
+			{/* @ts-ignore */}
 			<ChatsStack.Screen name='CloseLivechatView' component={CloseLivechatView} />
+			{/* @ts-ignore */}
 			<ChatsStack.Screen name='LivechatEditView' component={LivechatEditView} options={LivechatEditView.navigationOptions} />
+			{/* @ts-ignore */}
 			<ChatsStack.Screen name='PickerView' component={PickerView} options={PickerView.navigationOptions} />
 			<ChatsStack.Screen
 				name='ThreadMessagesView'
+				// @ts-ignore
 				component={ThreadMessagesView}
 				options={ThreadMessagesView.navigationOptions}
 			/>
@@ -127,7 +136,9 @@ const ChatsStackNavigator = () => {
 				component={AddExistingChannelView}
 				options={AddExistingChannelView.navigationOptions}
 			/>
+			{/* @ts-ignore */}
 			<ChatsStack.Screen name='MarkdownTableView' component={MarkdownTableView} />
+			{/* @ts-ignore */}
 			<ChatsStack.Screen name='ReadReceiptsView' component={ReadReceiptsView} options={ReadReceiptsView.navigationOptions} />
 			<ChatsStack.Screen name='QueueListView' component={QueueListView} />
 			<ChatsStack.Screen name='CannedResponsesListView' component={CannedResponsesListView} />
@@ -152,6 +163,7 @@ const ProfileStackNavigator = () => {
 			<ProfileStack.Screen name='ProfileView' component={ProfileView} options={ProfileView.navigationOptions} />
 			<ProfileStack.Screen name='UserPreferencesView' component={UserPreferencesView} />
 			<ProfileStack.Screen name='UserNotificationPrefView' component={UserNotificationPrefView} />
+			{/* @ts-ignore */}
 			<ProfileStack.Screen name='PickerView' component={PickerView} options={PickerView.navigationOptions} />
 		</ProfileStack.Navigator>
 	);
@@ -170,6 +182,7 @@ const SettingsStackNavigator = () => {
 			<SettingsStack.Screen name='SecurityPrivacyView' component={SecurityPrivacyView} />
 			<SettingsStack.Screen
 				name='E2EEncryptionSecurityView'
+				// @ts-ignore
 				component={E2EEncryptionSecurityView}
 				options={E2EEncryptionSecurityView.navigationOptions}
 			/>
@@ -252,6 +265,7 @@ const NewMessageStackNavigator = () => {
 			<NewMessageStack.Screen name='NewMessageView' component={NewMessageView} />
 			<NewMessageStack.Screen name='SelectedUsersViewCreateChannel' component={SelectedUsersView} />
 			<NewMessageStack.Screen name='CreateChannelView' component={CreateChannelView} />
+			{/* @ts-ignore */}
 			<NewMessageStack.Screen name='CreateDiscussionView' component={CreateDiscussionView} />
 		</NewMessageStack.Navigator>
 	);
@@ -310,6 +324,7 @@ const InsideStackNavigator = () => {
 			<InsideStack.Screen name='AttachmentView' component={AttachmentView} />
 			<InsideStack.Screen name='StatusView' component={StatusView} />
 			<InsideStack.Screen name='ShareView' component={ShareView} />
+			{/* @ts-ignore */}
 			<InsideStack.Screen name='ModalBlockView' component={ModalBlockView} options={ModalBlockView.navigationOptions} />
 		</InsideStack.Navigator>
 	);
diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx
index dd7cc4d1a..84bd788b0 100644
--- a/app/stacks/MasterDetailStack/index.tsx
+++ b/app/stacks/MasterDetailStack/index.tsx
@@ -125,8 +125,11 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 				screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}
 			>
 				<ModalStack.Screen name='RoomActionsView' component={RoomActionsView} />
+				{/* @ts-ignore */}
 				<ModalStack.Screen name='RoomInfoView' component={RoomInfoView} options={RoomInfoView.navigationOptions} />
+				{/* @ts-ignore */}
 				<ModalStack.Screen name='SelectListView' component={SelectListView} />
+				{/* @ts-ignore */}
 				<ModalStack.Screen name='RoomInfoEditView' component={RoomInfoEditView} options={RoomInfoEditView.navigationOptions} />
 				<ModalStack.Screen name='RoomMembersView' component={RoomMembersView} />
 				<ModalStack.Screen
@@ -135,15 +138,18 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 					options={SearchMessagesView.navigationOptions}
 				/>
 				<ModalStack.Screen name='SelectedUsersView' component={SelectedUsersView} />
+				{/* @ts-ignore */}
 				<ModalStack.Screen name='InviteUsersView' component={InviteUsersView} />
 				<ModalStack.Screen name='AddChannelTeamView' component={AddChannelTeamView} />
 				<ModalStack.Screen
 					name='AddExistingChannelView'
+					// @ts-ignore
 					component={AddExistingChannelView}
 					options={AddExistingChannelView.navigationOptions}
 				/>
 				<ModalStack.Screen name='InviteUsersEditView' component={InviteUsersEditView} />
 				<ModalStack.Screen name='MessagesView' component={MessagesView} />
+				{/* @ts-ignore */}
 				<ModalStack.Screen name='AutoTranslateView' component={AutoTranslateView} options={AutoTranslateView.navigationOptions} />
 				<ModalStack.Screen
 					name='DirectoryView'
@@ -152,18 +158,27 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 				/>
 				<ModalStack.Screen name='QueueListView' component={QueueListView} />
 				<ModalStack.Screen name='NotificationPrefView' component={NotificationPrefView} />
+				{/* @ts-ignore */}
 				<ModalStack.Screen name='ForwardLivechatView' component={ForwardLivechatView} />
+				{/* @ts-ignore */}
 				<ModalStack.Screen name='CloseLivechatView' component={CloseLivechatView} />
 				<ModalStack.Screen name='CannedResponsesListView' component={CannedResponsesListView} />
+				{/* @ts-ignore */}
 				<ModalStack.Screen name='CannedResponseDetail' component={CannedResponseDetail} />
+				{/* @ts-ignore */}
 				<ModalStack.Screen name='LivechatEditView' component={LivechatEditView} options={LivechatEditView.navigationOptions} />
+				{/* @ts-ignore */}
 				<ModalStack.Screen name='PickerView' component={PickerView} options={PickerView.navigationOptions} />
+				{/* @ts-ignore */}
 				<ModalStack.Screen name='ThreadMessagesView' component={ThreadMessagesView} />
+				{/* @ts-ignore */}
 				<ModalStack.Screen name='DiscussionsView' component={DiscussionsView} />
 				<ModalStack.Screen name='TeamChannelsView' component={TeamChannelsView} options={TeamChannelsView.navigationOptions} />
+				{/* @ts-ignore */}
 				<ModalStack.Screen name='MarkdownTableView' component={MarkdownTableView} />
 				<ModalStack.Screen
 					name='ReadReceiptsView'
+					// @ts-ignore
 					component={ReadReceiptsView}
 					options={props => ReadReceiptsView.navigationOptions!({ ...props, isMasterDetail: true })}
 				/>
@@ -183,6 +198,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 				<ModalStack.Screen name='NewMessageView' component={NewMessageView} />
 				<ModalStack.Screen name='SelectedUsersViewCreateChannel' component={SelectedUsersView} />
 				<ModalStack.Screen name='CreateChannelView' component={CreateChannelView} />
+				{/* @ts-ignore */}
 				<ModalStack.Screen name='CreateDiscussionView' component={CreateDiscussionView} />
 				<ModalStack.Screen name='E2ESaveYourPasswordView' component={E2ESaveYourPasswordView} />
 				<ModalStack.Screen name='E2EHowItWorksView' component={E2EHowItWorksView} />
@@ -192,6 +208,7 @@ const ModalStackNavigator = React.memo(({ navigation }: INavigation) => {
 				<ModalStack.Screen name='SecurityPrivacyView' component={SecurityPrivacyView} />
 				<ModalStack.Screen
 					name='E2EEncryptionSecurityView'
+					// @ts-ignore
 					component={E2EEncryptionSecurityView}
 					options={E2EEncryptionSecurityView.navigationOptions}
 				/>
@@ -218,6 +235,7 @@ const InsideStackNavigator = React.memo(() => {
 			<InsideStack.Screen name='DrawerNavigator' component={DrawerNavigator} options={{ headerShown: false }} />
 			<InsideStack.Screen name='ModalStackNavigator' component={ModalStackNavigator} options={{ headerShown: false }} />
 			<InsideStack.Screen name='AttachmentView' component={AttachmentView} />
+			{/* @ts-ignore */}
 			<InsideStack.Screen name='ModalBlockView' component={ModalBlockView} options={ModalBlockView.navigationOptions} />
 			<InsideStack.Screen
 				name='JitsiMeetView'
diff --git a/app/stacks/MasterDetailStack/types.ts b/app/stacks/MasterDetailStack/types.ts
index 298d9d343..4bfd13d6b 100644
--- a/app/stacks/MasterDetailStack/types.ts
+++ b/app/stacks/MasterDetailStack/types.ts
@@ -210,6 +210,7 @@ export type MasterDetailInsideStackParamList = {
 		rid: string;
 		url: string;
 		onlyAudio?: boolean;
+		videoConf?: boolean;
 	};
 	ShareView: {
 		attachments: IAttachment[];
diff --git a/app/stacks/OutsideStack.tsx b/app/stacks/OutsideStack.tsx
index 8ffc8ae85..97c9a6d44 100644
--- a/app/stacks/OutsideStack.tsx
+++ b/app/stacks/OutsideStack.tsx
@@ -22,12 +22,17 @@ const _OutsideStack = () => {
 
 	return (
 		<Outside.Navigator screenOptions={{ ...defaultHeader, ...themedHeader(theme), ...StackAnimation } as StackNavigationOptions}>
+			{/* @ts-ignore */}
 			<Outside.Screen name='NewServerView' component={NewServerView} options={NewServerView.navigationOptions} />
 			<Outside.Screen name='WorkspaceView' component={WorkspaceView} options={WorkspaceView.navigationOptions} />
+			{/* @ts-ignore */}
 			<Outside.Screen name='LoginView' component={LoginView} options={LoginView.navigationOptions} />
 			<Outside.Screen name='ForgotPasswordView' component={ForgotPasswordView} />
+			{/* @ts-ignore */}
 			<Outside.Screen name='SendEmailConfirmationView' component={SendEmailConfirmationView} />
+			{/* @ts-ignore */}
 			<Outside.Screen name='RegisterView' component={RegisterView} options={RegisterView.navigationOptions} />
+			{/* @ts-ignore */}
 			<Outside.Screen name='LegalView' component={LegalView} />
 		</Outside.Navigator>
 	);
diff --git a/app/stacks/types.ts b/app/stacks/types.ts
index 3e422afa1..d73b40f6e 100644
--- a/app/stacks/types.ts
+++ b/app/stacks/types.ts
@@ -142,7 +142,7 @@ export type ChatsStackParamList = {
 	};
 	LivechatEditView: {
 		room: ISubscription;
-		roomUser: any; // TODO: Change
+		roomUser?: any; // TODO: Change
 	};
 	PickerView: {
 		title: string;
@@ -267,7 +267,7 @@ export type E2ESaveYourPasswordStackParamList = {
 };
 
 export type E2EEnterYourPasswordStackParamList = {
-	E2EEnterYourPasswordView: undefined;
+	E2EEnterYourPasswordView?: undefined;
 };
 
 export type InsideStackParamList = {
diff --git a/app/views/AddExistingChannelView.tsx b/app/views/AddExistingChannelView.tsx
index 88aa83f15..6c4366ea8 100644
--- a/app/views/AddExistingChannelView.tsx
+++ b/app/views/AddExistingChannelView.tsx
@@ -32,7 +32,7 @@ interface IAddExistingChannelViewState {
 interface IAddExistingChannelViewProps {
 	navigation: StackNavigationProp<ChatsStackParamList, 'AddExistingChannelView'>;
 	route: RouteProp<ChatsStackParamList, 'AddExistingChannelView'>;
-	theme: TSupportedThemes;
+	theme?: TSupportedThemes;
 	isMasterDetail: boolean;
 	addTeamChannelPermission?: string[];
 }
@@ -193,7 +193,7 @@ class AddExistingChannelView extends React.Component<IAddExistingChannelViewProp
 				ListHeaderComponent={this.renderHeader}
 				renderItem={this.renderItem}
 				ItemSeparatorComponent={List.Separator}
-				contentContainerStyle={{ backgroundColor: themes[theme].backgroundColor }}
+				contentContainerStyle={{ backgroundColor: themes[theme!].backgroundColor }}
 				keyboardShouldPersistTaps='always'
 			/>
 		);
diff --git a/app/views/AttachmentView.tsx b/app/views/AttachmentView.tsx
index b70e7ab5a..36cf43c14 100644
--- a/app/views/AttachmentView.tsx
+++ b/app/views/AttachmentView.tsx
@@ -40,11 +40,11 @@ interface IAttachmentViewState {
 interface IAttachmentViewProps {
 	navigation: StackNavigationProp<InsideStackParamList, 'AttachmentView'>;
 	route: RouteProp<InsideStackParamList, 'AttachmentView'>;
-	theme: TSupportedThemes;
+	theme?: TSupportedThemes;
 	baseUrl: string;
-	width: number;
-	height: number;
-	insets: { left: number; bottom: number; right: number; top: number };
+	width?: number;
+	height?: number;
+	insets?: { left: number; bottom: number; right: number; top: number };
 	user: IUser;
 	Allow_Save_Media_to_Gallery: boolean;
 }
@@ -89,20 +89,20 @@ class AttachmentView extends React.Component<IAttachmentViewProps, IAttachmentVi
 		const options: StackNavigationOptions = {
 			title: title || '',
 			headerTitleAlign: 'center',
-			headerTitleStyle: { color: themes[theme].previewTintColor },
-			headerTintColor: themes[theme].previewTintColor,
+			headerTitleStyle: { color: themes[theme!].previewTintColor },
+			headerTintColor: themes[theme!].previewTintColor,
 			headerTitleContainerStyle: { flex: 1, maxWidth: undefined },
 			headerLeftContainerStyle: { flexGrow: undefined, flexBasis: undefined },
 			headerRightContainerStyle: { flexGrow: undefined, flexBasis: undefined },
 			headerLeft: () => (
-				<HeaderButton.CloseModal testID='close-attachment-view' navigation={navigation} color={themes[theme].previewTintColor} />
+				<HeaderButton.CloseModal testID='close-attachment-view' navigation={navigation} color={themes[theme!].previewTintColor} />
 			),
 			headerRight: () =>
 				Allow_Save_Media_to_Gallery ? (
-					<HeaderButton.Download testID='save-image' onPress={this.handleSave} color={themes[theme].previewTintColor} />
+					<HeaderButton.Download testID='save-image' onPress={this.handleSave} color={themes[theme!].previewTintColor} />
 				) : null,
 			headerBackground: () => (
-				<HeaderBackground style={{ backgroundColor: themes[theme].previewBackground, shadowOpacity: 0, elevation: 0 }} />
+				<HeaderBackground style={{ backgroundColor: themes[theme!].previewBackground, shadowOpacity: 0, elevation: 0 }} />
 			)
 		};
 		navigation.setOptions(options);
@@ -160,8 +160,8 @@ class AttachmentView extends React.Component<IAttachmentViewProps, IAttachmentVi
 					<ImageViewer
 						uri={uri}
 						onLoadEnd={() => this.setState({ loading: false })}
-						width={width}
-						height={height - insets.top - insets.bottom - (headerHeight || 0)}
+						width={width!}
+						height={height! - insets!.top - insets!.bottom - (headerHeight || 0)}
 					/>
 				)}
 			</HeaderHeightContext.Consumer>
@@ -199,8 +199,8 @@ class AttachmentView extends React.Component<IAttachmentViewProps, IAttachmentVi
 		}
 
 		return (
-			<View style={[styles.container, { backgroundColor: themes[theme].backgroundColor }]}>
-				<StatusBar barStyle='light-content' backgroundColor={themes[theme].previewBackground} />
+			<View style={[styles.container, { backgroundColor: themes[theme!].backgroundColor }]}>
+				<StatusBar barStyle='light-content' backgroundColor={themes[theme!].previewBackground} />
 				{content}
 				{loading ? <RCActivityIndicator absolute size='large' /> : null}
 			</View>
diff --git a/app/views/AuthenticationWebView.tsx b/app/views/AuthenticationWebView.tsx
index 340f291a6..30b8ff190 100644
--- a/app/views/AuthenticationWebView.tsx
+++ b/app/views/AuthenticationWebView.tsx
@@ -9,7 +9,6 @@ import { RouteProp } from '@react-navigation/core';
 import { OutsideModalParamList } from '../stacks/types';
 import StatusBar from '../containers/StatusBar';
 import ActivityIndicator from '../containers/ActivityIndicator';
-import { TSupportedThemes, withTheme } from '../theme';
 import { debounce, isIOS } from '../lib/methods/helpers';
 import * as HeaderButton from '../containers/HeaderButton';
 import { Services } from '../lib/services';
@@ -52,7 +51,6 @@ interface IAuthenticationWebView extends INavigationOption {
 	server: string;
 	Accounts_Iframe_api_url: string;
 	Accounts_Iframe_api_method: string;
-	theme: TSupportedThemes;
 }
 
 interface IState {
@@ -203,9 +201,9 @@ class AuthenticationWebView extends React.PureComponent<IAuthenticationWebView,
 }
 
 const mapStateToProps = (state: IApplicationState) => ({
-	server: state.server.server,
+	server: state.server.server as string,
 	Accounts_Iframe_api_url: state.settings.Accounts_Iframe_api_url as string,
 	Accounts_Iframe_api_method: state.settings.Accounts_Iframe_api_method as string
 });
 
-export default connect(mapStateToProps)(withTheme(AuthenticationWebView));
+export default connect(mapStateToProps)(AuthenticationWebView);
diff --git a/app/views/AutoTranslateView/index.tsx b/app/views/AutoTranslateView/index.tsx
index 523c63da5..daa0f40da 100644
--- a/app/views/AutoTranslateView/index.tsx
+++ b/app/views/AutoTranslateView/index.tsx
@@ -108,7 +108,7 @@ class AutoTranslateView extends React.Component<TAutoTranslateViewProps, any> {
 
 	renderIcon = () => {
 		const { theme } = this.props;
-		return <List.Icon name='check' color={themes[theme].tintColor} />;
+		return <List.Icon name='check' color={themes[theme!].tintColor} />;
 	};
 
 	renderSwitch = () => {
diff --git a/app/views/CreateDiscussionView/index.tsx b/app/views/CreateDiscussionView/index.tsx
index 9ce8e1fbe..84bfc9e4f 100644
--- a/app/views/CreateDiscussionView/index.tsx
+++ b/app/views/CreateDiscussionView/index.tsx
@@ -144,14 +144,14 @@ class CreateChannelView extends React.Component<ICreateChannelViewProps, ICreate
 		const { server, user, blockUnauthenticatedAccess, theme, serverVersion } = this.props;
 		return (
 			<KeyboardView
-				style={{ backgroundColor: themes[theme].auxiliaryBackground }}
+				style={{ backgroundColor: themes[theme!].auxiliaryBackground }}
 				contentContainerStyle={styles.container}
 				keyboardVerticalOffset={128}
 			>
 				<StatusBar />
 				<SafeAreaView testID='create-discussion-view' style={styles.container}>
 					<ScrollView {...scrollPersistTaps}>
-						<Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{I18n.t('Discussion_Desc')}</Text>
+						<Text style={[styles.description, { color: themes[theme!].auxiliaryText }]}>{I18n.t('Discussion_Desc')}</Text>
 						<SelectChannel
 							server={server}
 							userId={user.id}
@@ -180,7 +180,7 @@ class CreateChannelView extends React.Component<ICreateChannelViewProps, ICreate
 						/>
 						{this.isEncryptionEnabled ? (
 							<>
-								<Text style={[styles.label, { color: themes[theme].titleText }]}>{I18n.t('Encrypted')}</Text>
+								<Text style={[styles.label, { color: themes[theme!].titleText }]}>{I18n.t('Encrypted')}</Text>
 								<Switch value={encrypted} onValueChange={this.onEncryptedChange} trackColor={SWITCH_TRACK_COLOR} />
 							</>
 						) : null}
diff --git a/app/views/DirectoryView/index.tsx b/app/views/DirectoryView/index.tsx
index 6d4ce59d4..4f7d542d1 100644
--- a/app/views/DirectoryView/index.tsx
+++ b/app/views/DirectoryView/index.tsx
@@ -36,7 +36,7 @@ interface IDirectoryViewProps {
 	baseUrl: string;
 	isFederationEnabled: boolean;
 	user: IUser;
-	theme: TSupportedThemes;
+	theme?: TSupportedThemes;
 	directoryDefaultView: string;
 	isMasterDetail: boolean;
 }
@@ -210,15 +210,15 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 						style={[
 							sharedStyles.separatorVertical,
 							styles.toggleDropdownContainer,
-							{ borderColor: themes[theme].separatorColor }
+							{ borderColor: themes[theme!].separatorColor }
 						]}
 					>
-						<CustomIcon name={icon} size={20} color={themes[theme].tintColor} style={styles.toggleDropdownIcon} />
-						<Text style={[styles.toggleDropdownText, { color: themes[theme].tintColor }]}>{I18n.t(text)}</Text>
+						<CustomIcon name={icon} size={20} color={themes[theme!].tintColor} style={styles.toggleDropdownIcon} />
+						<Text style={[styles.toggleDropdownText, { color: themes[theme!].tintColor }]}>{I18n.t(text)}</Text>
 						<CustomIcon
 							name='chevron-down'
 							size={20}
-							color={themes[theme].auxiliaryTintColor}
+							color={themes[theme!].auxiliaryTintColor}
 							style={styles.toggleDropdownArrow}
 						/>
 					</View>
@@ -235,7 +235,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 		if (index === data.length - 1) {
 			style = {
 				...sharedStyles.separatorBottom,
-				borderColor: themes[theme].separatorColor
+				borderColor: themes[theme!].separatorColor
 			};
 		}
 
@@ -289,7 +289,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 		const { data, loading, showOptionsDropdown, type, globalUsers } = this.state;
 		const { isFederationEnabled, theme } = this.props;
 		return (
-			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='directory-view'>
+			<SafeAreaView style={{ backgroundColor: themes[theme!].backgroundColor }} testID='directory-view'>
 				<StatusBar />
 				<FlatList
 					data={data}
@@ -306,7 +306,7 @@ class DirectoryView extends React.Component<IDirectoryViewProps, IDirectoryViewS
 				/>
 				{showOptionsDropdown ? (
 					<Options
-						theme={theme}
+						theme={theme!}
 						type={type}
 						globalUsers={globalUsers}
 						close={this.toggleDropdown}
diff --git a/app/views/E2EEncryptionSecurityView.tsx b/app/views/E2EEncryptionSecurityView.tsx
index ea8405416..6383a2e07 100644
--- a/app/views/E2EEncryptionSecurityView.tsx
+++ b/app/views/E2EEncryptionSecurityView.tsx
@@ -128,10 +128,10 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
 		return (
 			<>
 				<List.Section>
-					<Text style={[styles.title, { color: themes[theme].headerTitleColor }]}>
+					<Text style={[styles.title, { color: themes[theme!].headerTitleColor }]}>
 						{I18n.t('E2E_encryption_change_password_title')}
 					</Text>
-					<Text style={[styles.description, { color: themes[theme].bodyText }]}>
+					<Text style={[styles.description, { color: themes[theme!].bodyText }]}>
 						{I18n.t('E2E_encryption_change_password_description')}
 					</Text>
 					<FormTextInput
@@ -159,24 +159,24 @@ class E2EEncryptionSecurityView extends React.Component<IE2EEncryptionSecurityVi
 	render() {
 		const { theme } = this.props;
 		return (
-			<SafeAreaView testID='e2e-encryption-security-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
+			<SafeAreaView testID='e2e-encryption-security-view' style={{ backgroundColor: themes[theme!].backgroundColor }}>
 				<StatusBar />
 				<List.Container>
 					<View style={styles.container}>
 						{this.renderChangePassword()}
 
 						<List.Section>
-							<Text style={[styles.title, { color: themes[theme].headerTitleColor }]}>
+							<Text style={[styles.title, { color: themes[theme!].headerTitleColor }]}>
 								{I18n.t('E2E_encryption_reset_title')}
 							</Text>
-							<Text style={[styles.description, { color: themes[theme].bodyText }]}>
+							<Text style={[styles.description, { color: themes[theme!].bodyText }]}>
 								{I18n.t('E2E_encryption_reset_description')}
 							</Text>
 							<Button
 								onPress={this.resetOwnKey}
 								title={I18n.t('E2E_encryption_reset_button')}
 								type='secondary'
-								backgroundColor={themes[theme].chatComponentBackground}
+								backgroundColor={themes[theme!].chatComponentBackground}
 								testID='e2e-encryption-security-view-reset-key'
 							/>
 						</List.Section>
diff --git a/app/views/LivechatEditView.tsx b/app/views/LivechatEditView.tsx
index 50299c348..f06c7eca3 100644
--- a/app/views/LivechatEditView.tsx
+++ b/app/views/LivechatEditView.tsx
@@ -47,13 +47,13 @@ interface ILivechatEditViewProps {
 	user: IUser;
 	navigation: StackNavigationProp<ChatsStackParamList, 'LivechatEditView'>;
 	route: RouteProp<ChatsStackParamList, 'LivechatEditView'>;
-	theme: TSupportedThemes;
+	theme?: TSupportedThemes;
 	editOmnichannelContact: string[] | undefined;
 	editLivechatRoomCustomfields: string[] | undefined;
 }
 
 const Title = ({ title, theme }: ITitle) =>
-	title ? <Text style={[styles.title, { color: themes[theme].titleText }]}>{title}</Text> : null;
+	title ? <Text style={[styles.title, { color: themes[theme!].titleText }]}>{title}</Text> : null;
 
 const LivechatEditView = ({ user, navigation, route, theme }: ILivechatEditViewProps) => {
 	const [customFields, setCustomFields] = useState<ICustomFields>({});
@@ -178,13 +178,13 @@ const LivechatEditView = ({ user, navigation, route, theme }: ILivechatEditViewP
 
 	return (
 		<KeyboardView
-			style={{ backgroundColor: themes[theme].auxiliaryBackground }}
+			style={{ backgroundColor: themes[theme!].auxiliaryBackground }}
 			contentContainerStyle={sharedStyles.container}
 			keyboardVerticalOffset={128}
 		>
 			<ScrollView {...scrollPersistTaps} style={styles.container}>
 				<SafeAreaView>
-					<Title title={visitor?.username} theme={theme} />
+					<Title title={visitor?.username} theme={theme!} />
 					<FormTextInput
 						label={I18n.t('Name')}
 						defaultValue={visitor?.name}
@@ -241,7 +241,7 @@ const LivechatEditView = ({ user, navigation, route, theme }: ILivechatEditViewP
 							editable={!!editOmnichannelContactPermission}
 						/>
 					))}
-					<Title title={I18n.t('Conversation')} theme={theme} />
+					<Title title={I18n.t('Conversation')} theme={theme!} />
 					<FormTextInput
 						label={I18n.t('Topic')}
 						inputRef={e => {
@@ -252,7 +252,7 @@ const LivechatEditView = ({ user, navigation, route, theme }: ILivechatEditViewP
 						editable={!!editLivechatRoomCustomFieldsPermission}
 					/>
 
-					<Text style={[styles.label, { color: themes[theme].titleText }]}>{I18n.t('Tags')}</Text>
+					<Text style={[styles.label, { color: themes[theme!].titleText }]}>{I18n.t('Tags')}</Text>
 					<MultiSelect
 						options={tagParam.map((tag: string) => ({ text: { text: tag }, value: tag }))}
 						onChange={({ value }: { value: string[] }) => {
diff --git a/app/views/LoginView.tsx b/app/views/LoginView.tsx
index b43830f73..5c24b4c1c 100644
--- a/app/views/LoginView.tsx
+++ b/app/views/LoginView.tsx
@@ -159,7 +159,7 @@ class LoginView extends React.Component<ILoginViewProps, ILoginViewState> {
 
 		return (
 			<>
-				<Text style={[styles.title, sharedStyles.textBold, { color: themes[theme].titleText }]}>{I18n.t('Login')}</Text>
+				<Text style={[styles.title, sharedStyles.textBold, { color: themes[theme!].titleText }]}>{I18n.t('Login')}</Text>
 				<FormTextInput
 					label={I18n.t('Username_or_email')}
 					containerStyle={styles.inputContainer}
@@ -205,17 +205,17 @@ class LoginView extends React.Component<ILoginViewProps, ILoginViewState> {
 						type='secondary'
 						onPress={this.forgotPassword}
 						testID='login-view-forgot-password'
-						color={themes[theme].auxiliaryText}
+						color={themes[theme!].auxiliaryText}
 						fontSize={14}
 					/>
 				)}
 				{this.showRegistrationButton ? (
 					<View style={styles.bottomContainer}>
-						<Text style={[styles.bottomContainerText, { color: themes[theme].auxiliaryText }]}>
+						<Text style={[styles.bottomContainerText, { color: themes[theme!].auxiliaryText }]}>
 							{I18n.t('Dont_Have_An_Account')}
 						</Text>
 						<Text
-							style={[styles.bottomContainerTextBold, { color: themes[theme].actionTintColor }]}
+							style={[styles.bottomContainerTextBold, { color: themes[theme!].actionTintColor }]}
 							onPress={this.register}
 							testID='login-view-register'
 						>
@@ -223,7 +223,7 @@ class LoginView extends React.Component<ILoginViewProps, ILoginViewState> {
 						</Text>
 					</View>
 				) : (
-					<Text style={[styles.registerDisabled, { color: themes[theme].auxiliaryText }]}>
+					<Text style={[styles.registerDisabled, { color: themes[theme!].auxiliaryText }]}>
 						{Accounts_RegistrationForm_LinkReplacementText}
 					</Text>
 				)}
diff --git a/app/views/ModalBlockView.tsx b/app/views/ModalBlockView.tsx
index eedc0a5e6..220a80ee8 100644
--- a/app/views/ModalBlockView.tsx
+++ b/app/views/ModalBlockView.tsx
@@ -16,6 +16,7 @@ import Navigation from '../lib/navigation/appNavigation';
 import { MasterDetailInsideStackParamList } from '../stacks/MasterDetailStack/types';
 import { ContainerTypes, ModalActions } from '../containers/UIKit/interfaces';
 import { triggerBlockAction, triggerCancel, triggerSubmitView } from '../lib/methods';
+import { IApplicationState } from '../definitions';
 
 const styles = StyleSheet.create({
 	container: {
@@ -53,7 +54,7 @@ interface IModalBlockViewState {
 interface IModalBlockViewProps {
 	navigation: StackNavigationProp<MasterDetailInsideStackParamList, 'ModalBlockView'>;
 	route: RouteProp<MasterDetailInsideStackParamList, 'ModalBlockView'>;
-	theme: TSupportedThemes;
+	theme?: TSupportedThemes;
 	language: string;
 	user: {
 		id: string;
@@ -255,7 +256,7 @@ class ModalBlockView extends React.Component<IModalBlockViewProps, IModalBlockVi
 
 		return (
 			<KeyboardAwareScrollView
-				style={[styles.container, { backgroundColor: themes[theme].auxiliaryBackground }]}
+				style={[styles.container, { backgroundColor: themes[theme!].auxiliaryBackground }]}
 				keyboardShouldPersistTaps='always'
 			>
 				<View style={styles.content}>
@@ -279,8 +280,8 @@ class ModalBlockView extends React.Component<IModalBlockViewProps, IModalBlockVi
 	}
 }
 
-const mapStateToProps = (state: any) => ({
-	language: state.login.user && state.login.user.language
+const mapStateToProps = (state: IApplicationState) => ({
+	language: state.login.user.language as string
 });
 
 export default connect(mapStateToProps)(withTheme(ModalBlockView));
diff --git a/app/views/NewServerView/index.tsx b/app/views/NewServerView/index.tsx
index e9a654445..4c5551789 100644
--- a/app/views/NewServerView/index.tsx
+++ b/app/views/NewServerView/index.tsx
@@ -21,7 +21,7 @@ import database from '../../lib/database';
 import { sanitizeLikeString } from '../../lib/database/utils';
 import UserPreferences from '../../lib/methods/userPreferences';
 import { OutsideParamList } from '../../stacks/types';
-import { withTheme } from '../../theme';
+import { TSupportedThemes, withTheme } from '../../theme';
 import { isTablet } from '../../lib/methods/helpers';
 import EventEmitter from '../../lib/methods/helpers/events';
 import { BASIC_AUTH_KEY, setBasicAuth } from '../../lib/methods/helpers/fetch';
@@ -67,10 +67,11 @@ const styles = StyleSheet.create({
 });
 
 interface INewServerViewProps extends IBaseScreen<OutsideParamList, 'NewServerView'> {
-	connecting: boolean;
-	previousServer: string | null;
-	width: number;
-	height: number;
+	connecting?: boolean;
+	previousServer?: string | null;
+	width?: number;
+	height?: number;
+	theme?: TSupportedThemes;
 }
 
 interface INewServerViewState {
@@ -303,14 +304,14 @@ class NewServerView extends React.Component<INewServerViewProps, INewServerViewS
 				style={[
 					styles.certificatePicker,
 					{
-						marginBottom: verticalScale({ size: previousServer && !isTablet ? 10 : 30, height })
+						marginBottom: verticalScale({ size: previousServer && !isTablet ? 10 : 30, height: height! })
 					}
 				]}
 			>
 				<Text
 					style={[
 						styles.chooseCertificateTitle,
-						{ color: themes[theme].auxiliaryText, fontSize: moderateScale({ size: 13, width }) }
+						{ color: themes[theme!].auxiliaryText, fontSize: moderateScale({ size: 13, width: width! }) }
 					]}
 				>
 					{certificate ? I18n.t('Your_certificate') : I18n.t('Do_you_have_a_certificate')}
@@ -320,7 +321,10 @@ class NewServerView extends React.Component<INewServerViewProps, INewServerViewS
 					testID='new-server-choose-certificate'
 				>
 					<Text
-						style={[styles.chooseCertificate, { color: themes[theme].tintColor, fontSize: moderateScale({ size: 13, width }) }]}
+						style={[
+							styles.chooseCertificate,
+							{ color: themes[theme!].tintColor, fontSize: moderateScale({ size: 13, width: width! }) }
+						]}
 					>
 						{certificate ?? I18n.t('Apply_Your_Certificate')}
 					</Text>
@@ -334,6 +338,10 @@ class NewServerView extends React.Component<INewServerViewProps, INewServerViewS
 		const { text, connectingOpen, serversHistory } = this.state;
 		const marginTop = previousServer ? 0 : 35;
 
+		if (!height || !width) {
+			return null;
+		}
+
 		return (
 			<FormContainer testID='new-server-view' keyboardShouldPersistTaps='never'>
 				<FormContainerInner>
@@ -354,7 +362,7 @@ class NewServerView extends React.Component<INewServerViewProps, INewServerViewS
 						style={[
 							styles.title,
 							{
-								color: themes[theme].titleText,
+								color: themes[theme!].titleText,
 								fontSize: moderateScale({ size: 22, width }),
 								marginBottom: verticalScale({ size: 8, height })
 							}
@@ -366,7 +374,7 @@ class NewServerView extends React.Component<INewServerViewProps, INewServerViewS
 						style={[
 							styles.subtitle,
 							{
-								color: themes[theme].controlText,
+								color: themes[theme!].controlText,
 								fontSize: moderateScale({ size: 16, width }),
 								marginBottom: verticalScale({ size: 30, height })
 							}
@@ -376,7 +384,7 @@ class NewServerView extends React.Component<INewServerViewProps, INewServerViewS
 					</Text>
 					<ServerInput
 						text={text}
-						theme={theme}
+						theme={theme!}
 						serversHistory={serversHistory}
 						onChangeText={this.onChangeText}
 						onSubmit={this.submit}
@@ -392,12 +400,12 @@ class NewServerView extends React.Component<INewServerViewProps, INewServerViewS
 						style={[styles.connectButton, { marginTop: verticalScale({ size: 16, height }) }]}
 						testID='new-server-view-button'
 					/>
-					<OrSeparator theme={theme} />
+					<OrSeparator theme={theme!} />
 					<Text
 						style={[
 							styles.description,
 							{
-								color: themes[theme].auxiliaryText,
+								color: themes[theme!].auxiliaryText,
 								fontSize: moderateScale({ size: 14, width }),
 								marginBottom: verticalScale({ size: 16, height })
 							}
@@ -408,7 +416,7 @@ class NewServerView extends React.Component<INewServerViewProps, INewServerViewS
 					<Button
 						title={I18n.t('Join_our_open_workspace')}
 						type='secondary'
-						backgroundColor={themes[theme].chatComponentBackground}
+						backgroundColor={themes[theme!].chatComponentBackground}
 						onPress={this.connectOpen}
 						disabled={connecting}
 						loading={connectingOpen && connecting}
diff --git a/app/views/PickerView.tsx b/app/views/PickerView.tsx
index 7608704dd..8e8e93cf5 100644
--- a/app/views/PickerView.tsx
+++ b/app/views/PickerView.tsx
@@ -29,7 +29,7 @@ interface IItem {
 	item: IOptionsField;
 	selected: boolean;
 	onItemPress: () => void;
-	theme: TSupportedThemes;
+	theme?: TSupportedThemes;
 }
 
 interface IRenderSearch {
@@ -49,7 +49,7 @@ type IPickerViewProps = IBaseScreen<ChatsStackParamList, 'PickerView'>;
 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} /> : null)}
+		right={() => (selected ? <List.Icon name='check' color={themes[theme!].tintColor} /> : null)}
 		onPress={onItemPress}
 		translateTitle={false}
 	/>
@@ -137,7 +137,7 @@ class PickerView extends React.PureComponent<IPickerViewProps, IPickerViewState>
 					ListHeaderComponent={<RenderSearch hasSearch={!!this.onSearch} onChangeText={this.onChangeText} />}
 					ListFooterComponent={List.Separator}
 					ListEmptyComponent={() => (
-						<Text style={[styles.noResult, { color: themes[theme].titleText }]}>{I18n.t('No_results_found')}</Text>
+						<Text style={[styles.noResult, { color: themes[theme!].titleText }]}>{I18n.t('No_results_found')}</Text>
 					)}
 				/>
 			</SafeAreaView>
diff --git a/app/views/ReadReceiptView/index.tsx b/app/views/ReadReceiptView/index.tsx
index 99b2b9bb1..bccc7e498 100644
--- a/app/views/ReadReceiptView/index.tsx
+++ b/app/views/ReadReceiptView/index.tsx
@@ -32,7 +32,7 @@ interface INavigationOption {
 
 interface IReadReceiptViewProps extends INavigationOption {
 	Message_TimeAndDateFormat: string;
-	theme: TSupportedThemes;
+	theme?: TSupportedThemes;
 }
 
 class ReadReceiptView extends React.Component<IReadReceiptViewProps, IReadReceiptViewState> {
@@ -106,10 +106,10 @@ class ReadReceiptView extends React.Component<IReadReceiptViewProps, IReadReceip
 		}
 		return (
 			<View
-				style={[styles.listEmptyContainer, { backgroundColor: themes[theme].chatComponentBackground }]}
+				style={[styles.listEmptyContainer, { backgroundColor: themes[theme!].chatComponentBackground }]}
 				testID='read-receipt-view'
 			>
-				<Text style={[styles.emptyText, { color: themes[theme].auxiliaryTintColor }]}>{I18n.t('No_Read_Receipts')}</Text>
+				<Text style={[styles.emptyText, { color: themes[theme!].auxiliaryTintColor }]}>{I18n.t('No_Read_Receipts')}</Text>
 			</View>
 		);
 	};
@@ -121,18 +121,18 @@ class ReadReceiptView extends React.Component<IReadReceiptViewProps, IReadReceip
 			return null;
 		}
 		return (
-			<View style={[styles.itemContainer, { backgroundColor: themes[theme].backgroundColor }]}>
+			<View style={[styles.itemContainer, { backgroundColor: themes[theme!].backgroundColor }]}>
 				<Avatar text={item.user.username} size={40} />
 				<View style={styles.infoContainer}>
 					<View style={styles.item}>
-						<Text style={[styles.name, { color: themes[theme].titleText }]}>{item?.user?.name}</Text>
-						<Text style={[styles.time, { color: themes[theme].auxiliaryText }]}>{time}</Text>
+						<Text style={[styles.name, { color: themes[theme!].titleText }]}>{item?.user?.name}</Text>
+						<Text style={[styles.time, { color: themes[theme!].auxiliaryText }]}>{time}</Text>
 					</View>
 					<Text
 						style={[
 							styles.username,
 							{
-								color: themes[theme].auxiliaryText
+								color: themes[theme!].auxiliaryText
 							}
 						]}
 					>{`@${item.user.username}`}</Text>
@@ -157,11 +157,11 @@ class ReadReceiptView extends React.Component<IReadReceiptViewProps, IReadReceip
 					style={[
 						styles.list,
 						{
-							backgroundColor: themes[theme].chatComponentBackground,
-							borderColor: themes[theme].separatorColor
+							backgroundColor: themes[theme!].chatComponentBackground,
+							borderColor: themes[theme!].separatorColor
 						}
 					]}
-					refreshControl={<RefreshControl refreshing={loading} onRefresh={this.load} tintColor={themes[theme].auxiliaryText} />}
+					refreshControl={<RefreshControl refreshing={loading} onRefresh={this.load} tintColor={themes[theme!].auxiliaryText} />}
 					keyExtractor={item => item._id}
 				/>
 			</SafeAreaView>
diff --git a/app/views/RegisterView.tsx b/app/views/RegisterView.tsx
index 83789f84d..6841c58a5 100644
--- a/app/views/RegisterView.tsx
+++ b/app/views/RegisterView.tsx
@@ -231,7 +231,7 @@ class RegisterView extends React.Component<IProps, any> {
 			<FormContainer testID='register-view'>
 				<FormContainerInner>
 					<LoginServices separator />
-					<Text style={[styles.title, sharedStyles.textBold, { color: themes[theme].titleText }]}>{I18n.t('Sign_Up')}</Text>
+					<Text style={[styles.title, sharedStyles.textBold, { color: themes[theme!].titleText }]}>{I18n.t('Sign_Up')}</Text>
 					<FormTextInput
 						label={I18n.t('Name')}
 						containerStyle={styles.inputContainer}
@@ -310,10 +310,10 @@ class RegisterView extends React.Component<IProps, any> {
 
 					{showLoginButton ? (
 						<View style={styles.bottomContainer}>
-							<Text style={[styles.bottomContainerText, { color: themes[theme].auxiliaryText }]}>
+							<Text style={[styles.bottomContainerText, { color: themes[theme!].auxiliaryText }]}>
 								{I18n.t('Do_you_have_an_account')}
 							</Text>
-							<Text style={[styles.bottomContainerTextBold, { color: themes[theme].actionTintColor }]} onPress={this.login}>
+							<Text style={[styles.bottomContainerTextBold, { color: themes[theme!].actionTintColor }]} onPress={this.login}>
 								{I18n.t('Login')}
 							</Text>
 						</View>
diff --git a/app/views/RoomActionsView/index.tsx b/app/views/RoomActionsView/index.tsx
index 8e0a409b6..4075a811f 100644
--- a/app/views/RoomActionsView/index.tsx
+++ b/app/views/RoomActionsView/index.tsx
@@ -244,6 +244,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 			// @ts-ignore
 			logEvent(events[`RA_GO_${route.replace('View', '').toUpperCase()}${params.name ? params.name.toUpperCase() : ''}`]);
 			const { navigation } = this.props;
+			// @ts-ignore
 			navigation.navigate(route, params);
 		}
 		if (event) {
@@ -755,7 +756,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 							}
 						})
 					}
-					style={{ backgroundColor: themes[theme].backgroundColor }}
+					style={{ backgroundColor: themes[theme!].backgroundColor }}
 					accessibilityLabel={I18n.t('Room_Info')}
 					enabled={!isGroupChatHandler}
 					testID='room-actions-info'
@@ -763,14 +764,14 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 					<View style={[styles.roomInfoContainer, { height: 72 * fontScale }]}>
 						<Avatar text={avatar} style={styles.avatar} size={50 * fontScale} type={t} rid={rid}>
 							{t === 'd' && member._id ? (
-								<View style={[sharedStyles.status, { backgroundColor: themes[theme].backgroundColor }]}>
+								<View style={[sharedStyles.status, { backgroundColor: themes[theme!].backgroundColor }]}>
 									<Status size={16} id={member._id} />
 								</View>
 							) : undefined}
 						</Avatar>
 						<View style={styles.roomTitleContainer}>
 							{room.t === 'd' ? (
-								<Text style={[styles.roomTitle, { color: themes[theme].titleText }]} numberOfLines={1}>
+								<Text style={[styles.roomTitle, { color: themes[theme!].titleText }]} numberOfLines={1}>
 									{room.fname}
 								</Text>
 							) : (
@@ -781,19 +782,19 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 										status={room.visitor?.status}
 										sourceType={source}
 									/>
-									<Text style={[styles.roomTitle, { color: themes[theme].titleText }]} numberOfLines={1}>
+									<Text style={[styles.roomTitle, { color: themes[theme!].titleText }]} numberOfLines={1}>
 										{getRoomTitle(room)}
 									</Text>
 								</View>
 							)}
 							<MarkdownPreview
 								msg={t === 'd' ? `@${name}` : topic}
-								style={[styles.roomDescription, { color: themes[theme].auxiliaryText }]}
+								style={[styles.roomDescription, { color: themes[theme!].auxiliaryText }]}
 							/>
 							{room.t === 'd' && (
 								<MarkdownPreview
 									msg={member.statusText}
-									style={[styles.roomDescription, { color: themes[theme].auxiliaryText }]}
+									style={[styles.roomDescription, { color: themes[theme!].auxiliaryText }]}
 								/>
 							)}
 						</View>
@@ -849,9 +850,9 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 							})
 						}
 						testID='room-actions-block-user'
-						left={() => <List.Icon name='ignore' color={themes[theme].dangerColor} />}
+						left={() => <List.Icon name='ignore' color={themes[theme!].dangerColor} />}
 						showActionIndicator
-						color={themes[theme].dangerColor}
+						color={themes[theme!].dangerColor}
 					/>
 					<List.Separator />
 				</List.Section>
@@ -871,9 +872,9 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 							})
 						}
 						testID='room-actions-leave-channel'
-						left={() => <List.Icon name='logout' color={themes[theme].dangerColor} />}
+						left={() => <List.Icon name='logout' color={themes[theme!].dangerColor} />}
 						showActionIndicator
-						color={themes[theme].dangerColor}
+						color={themes[theme!].dangerColor}
 					/>
 					<List.Separator />
 				</List.Section>
@@ -974,7 +975,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 									params: { rid }
 								})
 							}
-							left={() => <List.Icon name='chat-forward' color={themes[theme].titleText} />}
+							left={() => <List.Icon name='chat-forward' color={themes[theme!].titleText} />}
 							showActionIndicator
 						/>
 						<List.Separator />
@@ -990,7 +991,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 									event: this.placeOnHoldLivechat
 								})
 							}
-							left={() => <List.Icon name='pause' color={themes[theme].titleText} />}
+							left={() => <List.Icon name='pause' color={themes[theme!].titleText} />}
 							showActionIndicator
 						/>
 						<List.Separator />
@@ -1006,7 +1007,7 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 									event: this.returnLivechat
 								})
 							}
-							left={() => <List.Icon name='move-to-the-queue' color={themes[theme].titleText} />}
+							left={() => <List.Icon name='move-to-the-queue' color={themes[theme!].titleText} />}
 							showActionIndicator
 						/>
 						<List.Separator />
@@ -1016,13 +1017,13 @@ class RoomActionsView extends React.Component<IRoomActionsViewProps, IRoomAction
 				<>
 					<List.Item
 						title='Close'
-						color={themes[theme].dangerColor}
+						color={themes[theme!].dangerColor}
 						onPress={() =>
 							this.onPressTouchable({
 								event: this.closeLivechat
 							})
 						}
-						left={() => <List.Icon name='chat-close' color={themes[theme].dangerColor} />}
+						left={() => <List.Icon name='chat-close' color={themes[theme!].dangerColor} />}
 						showActionIndicator
 					/>
 					<List.Separator />
diff --git a/app/views/RoomInfoEditView/index.tsx b/app/views/RoomInfoEditView/index.tsx
index 48f023e44..24513be92 100644
--- a/app/views/RoomInfoEditView/index.tsx
+++ b/app/views/RoomInfoEditView/index.tsx
@@ -553,16 +553,16 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 			avatar
 		} = this.state;
 		const { serverVersion, encryptionEnabled, theme } = this.props;
-		const { dangerColor } = themes[theme];
+		const { dangerColor } = themes[theme!];
 
 		return (
 			<KeyboardView
-				style={{ backgroundColor: themes[theme].backgroundColor }}
+				style={{ backgroundColor: themes[theme!].backgroundColor }}
 				contentContainerStyle={sharedStyles.container}
 				keyboardVerticalOffset={128}
 			>
 				<StatusBar />
-				<SafeAreaView testID='room-info-edit-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
+				<SafeAreaView testID='room-info-edit-view' style={{ backgroundColor: themes[theme!].backgroundColor }}>
 					<ScrollView
 						contentContainerStyle={sharedStyles.containerScrollView}
 						testID='room-info-edit-view-list'
@@ -583,10 +583,10 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 							>
 								{serverVersion && compareServerVersion(serverVersion, 'lowerThan', '3.6.0') ? undefined : (
 									<TouchableOpacity
-										style={[styles.resetButton, { backgroundColor: themes[theme].dangerColor }]}
+										style={[styles.resetButton, { backgroundColor: themes[theme!].dangerColor }]}
 										onPress={this.resetAvatar}
 									>
-										<CustomIcon name='delete' color={themes[theme].backgroundColor} size={24} />
+										<CustomIcon name='delete' color={themes[theme!].backgroundColor} size={24} />
 									</TouchableOpacity>
 								)}
 							</Avatar>
@@ -671,7 +671,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 									: I18n.t('Just_invited_people_can_access_this_channel')
 							}
 							onValueChange={this.toggleRoomType}
-							theme={theme}
+							theme={theme!}
 							testID='room-info-edit-view-t'
 						/>
 						<SwitchContainer
@@ -686,7 +686,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 							rightLabelSecondary={I18n.t('Only_authorized_users_can_write_new_messages')}
 							onValueChange={this.toggleReadOnly}
 							disabled={!permissions['set-readonly'] || room.broadcast}
-							theme={theme}
+							theme={theme!}
 							testID='room-info-edit-view-ro'
 						/>
 						{ro && !room.broadcast ? (
@@ -698,14 +698,14 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 								rightLabelSecondary={I18n.t('Reactions_are_enabled')}
 								onValueChange={this.toggleReactions}
 								disabled={!permissions['set-react-when-readonly']}
-								theme={theme}
+								theme={theme!}
 								testID='room-info-edit-view-react-when-ro'
 							/>
 						) : null}
 						{room.broadcast
 							? [
 									<Text style={styles.broadcast}>{I18n.t('Broadcast')}</Text>,
-									<View style={[styles.divider, { borderColor: themes[theme].separatorColor }]} />
+									<View style={[styles.divider, { borderColor: themes[theme!].separatorColor }]} />
 							  ]
 							: null}
 						{serverVersion && !compareServerVersion(serverVersion, 'lowerThan', '3.0.0') ? (
@@ -717,7 +717,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 										? I18n.t('Overwrites_the_server_configuration_and_use_room_config')
 										: I18n.t('Uses_server_configuration')
 								}
-								theme={theme}
+								theme={theme!}
 								testID='room-info-edit-switch-system-messages'
 								onValueChange={this.toggleHideSystemMessages}
 								labelContainerStyle={styles.hideSystemMessages}
@@ -732,7 +732,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 								disabled={!t}
 								leftLabelPrimary={I18n.t('Encrypted')}
 								leftLabelSecondary={I18n.t('End_to_end_encrypted_room')}
-								theme={theme}
+								theme={theme!}
 								testID='room-info-edit-switch-encrypted'
 								onValueChange={this.toggleEncrypted}
 								labelContainerStyle={styles.hideSystemMessages}
@@ -742,14 +742,14 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 						<TouchableOpacity
 							style={[
 								styles.buttonContainer,
-								{ backgroundColor: themes[theme].buttonBackground },
+								{ backgroundColor: themes[theme!].buttonBackground },
 								!this.formIsChanged() && styles.buttonContainerDisabled
 							]}
 							onPress={this.submit}
 							disabled={!this.formIsChanged()}
 							testID='room-info-edit-view-submit'
 						>
-							<Text style={[styles.button, { color: themes[theme].buttonText }]} accessibilityRole='button'>
+							<Text style={[styles.button, { color: themes[theme!].buttonText }]} accessibilityRole='button'>
 								{I18n.t('SAVE')}
 							</Text>
 						</TouchableOpacity>
@@ -758,7 +758,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 								style={[
 									styles.buttonContainer_inverted,
 									styles.buttonInverted,
-									{ flex: 1, borderColor: themes[theme].auxiliaryText },
+									{ flex: 1, borderColor: themes[theme!].auxiliaryText },
 									!this.formIsChanged() && styles.buttonContainerDisabled
 								]}
 								onPress={this.reset}
@@ -766,7 +766,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 								testID='room-info-edit-view-reset'
 							>
 								<Text
-									style={[styles.button, styles.button_inverted, { color: themes[theme].bodyText }]}
+									style={[styles.button, styles.button_inverted, { color: themes[theme!].bodyText }]}
 									accessibilityRole='button'
 								>
 									{I18n.t('RESET')}
@@ -790,7 +790,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 								</Text>
 							</TouchableOpacity>
 						</View>
-						<View style={[styles.divider, { borderColor: themes[theme].separatorColor }]} />
+						<View style={[styles.divider, { borderColor: themes[theme!].separatorColor }]} />
 						<TouchableOpacity
 							style={[
 								styles.buttonContainer_inverted,
@@ -816,7 +816,7 @@ class RoomInfoEditView extends React.Component<IRoomInfoEditViewProps, IRoomInfo
 
 const mapStateToProps = (state: IApplicationState) => ({
 	serverVersion: state.server.version as string,
-	encryptionEnabled: state.encryption.enabled,
+	encryptionEnabled: state.encryption.enabled as boolean,
 	setReadOnlyPermission: state.permissions['set-readonly'] as string[],
 	setReactWhenReadOnlyPermission: state.permissions['set-react-when-readonly'] as string[],
 	archiveRoomPermission: state.permissions['archive-room'] as string[],
@@ -824,7 +824,7 @@ const mapStateToProps = (state: IApplicationState) => ({
 	deleteCPermission: state.permissions['delete-c'] as string[],
 	deletePPermission: state.permissions['delete-p'] as string[],
 	deleteTeamPermission: state.permissions['delete-team'] as string[],
-	isMasterDetail: state.app.isMasterDetail
+	isMasterDetail: state.app.isMasterDetail as boolean
 });
 
 export default connect(mapStateToProps)(withTheme(RoomInfoEditView));
diff --git a/app/views/RoomInfoView/index.tsx b/app/views/RoomInfoView/index.tsx
index d57a23bae..1dce2fd27 100644
--- a/app/views/RoomInfoView/index.tsx
+++ b/app/views/RoomInfoView/index.tsx
@@ -51,18 +51,18 @@ interface IGetRoomTitle {
 const renderRoomTitle = ({ room, type, name, username, statusText, theme }: IGetRoomTitle) =>
 	type === SubscriptionType.DIRECT ? (
 		<>
-			<Text testID='room-info-view-name' style={[styles.roomTitle, { color: themes[theme].titleText }]}>
+			<Text testID='room-info-view-name' style={[styles.roomTitle, { color: themes[theme!].titleText }]}>
 				{name}
 			</Text>
 			{username && (
 				<Text
 					testID='room-info-view-username'
-					style={[styles.roomUsername, { color: themes[theme].auxiliaryText }]}
+					style={[styles.roomUsername, { color: themes[theme!].auxiliaryText }]}
 				>{`@${username}`}</Text>
 			)}
 			{!!statusText && (
 				<View testID='room-info-view-custom-status'>
-					<MarkdownPreview msg={statusText} style={[styles.roomUsername, { color: themes[theme].auxiliaryText }]} />
+					<MarkdownPreview msg={statusText} style={[styles.roomUsername, { color: themes[theme!].auxiliaryText }]} />
 				</View>
 			)}
 		</>
@@ -75,7 +75,7 @@ const renderRoomTitle = ({ room, type, name, username, statusText, theme }: IGet
 				status={room.visitor?.status}
 				sourceType={room.source}
 			/>
-			<Text testID='room-info-view-name' style={[styles.roomTitle, { color: themes[theme].titleText }]} key='room-info-name'>
+			<Text testID='room-info-view-name' style={[styles.roomTitle, { color: themes[theme!].titleText }]} key='room-info-name'>
 				{getRoomTitle(room)}
 			</Text>
 		</View>
@@ -88,7 +88,7 @@ interface IRoomInfoViewProps {
 	>;
 	route: RouteProp<ChatsStackParamList, 'RoomInfoView'>;
 	subscribedRoom: string;
-	theme: TSupportedThemes;
+	theme?: TSupportedThemes;
 	isMasterDetail: boolean;
 	jitsiEnabled: boolean;
 	editRoomPermission?: string[];
@@ -189,6 +189,7 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 								onPress={() => {
 									const isLivechat = t === SubscriptionType.OMNICHANNEL;
 									logEvent(events[`RI_GO_${isLivechat ? 'LIVECHAT' : 'RI'}_EDIT`]);
+									// @ts-ignore
 									navigation.navigate(isLivechat ? 'LivechatEditView' : 'RoomInfoEditView', { rid, room, roomUser });
 								}}
 								testID='room-info-view-edit-button'
@@ -400,7 +401,7 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 		return (
 			<Avatar text={room.name || roomUser.username} style={styles.avatar} type={this.t} size={100} rid={room?.rid}>
 				{this.t === SubscriptionType.DIRECT && roomUser._id ? (
-					<View style={[sharedStyles.status, { backgroundColor: themes[theme].auxiliaryBackground }]}>
+					<View style={[sharedStyles.status, { backgroundColor: themes[theme!].auxiliaryBackground }]}>
 						<Status size={20} id={roomUser._id} />
 					</View>
 				) : null}
@@ -410,7 +411,7 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 
 	renderButton = (onPress: () => void, iconName: TIconsName, text: string, danger?: boolean) => {
 		const { theme } = this.props;
-		const color = danger ? themes[theme].dangerColor : themes[theme].actionTintColor;
+		const color = danger ? themes[theme!].dangerColor : themes[theme!].actionTintColor;
 		return (
 			<BorderlessButton testID={`room-info-view-${iconName}`} onPress={onPress} style={styles.roomButton}>
 				<CustomIcon name={iconName} size={30} color={color} />
@@ -476,10 +477,10 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 		const roomUserParsed = roomUser as IUserParsed;
 
 		return (
-			<ScrollView style={[styles.scroll, { backgroundColor: themes[theme].backgroundColor }]}>
+			<ScrollView style={[styles.scroll, { backgroundColor: themes[theme!].backgroundColor }]}>
 				<StatusBar />
-				<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='room-info-view'>
-					<View style={[styles.avatarContainer, { backgroundColor: themes[theme].auxiliaryBackground }]}>
+				<SafeAreaView style={{ backgroundColor: themes[theme!].backgroundColor }} testID='room-info-view'>
+					<View style={[styles.avatarContainer, { backgroundColor: themes[theme!].auxiliaryBackground }]}>
 						{this.renderAvatar(room, roomUserParsed)}
 						<View style={styles.roomTitleContainer}>
 							{renderRoomTitle({
@@ -488,7 +489,7 @@ class RoomInfoView extends React.Component<IRoomInfoViewProps, IRoomInfoViewStat
 								name: roomUserParsed?.name,
 								username: roomUserParsed?.username,
 								statusText: roomUserParsed?.statusText,
-								theme
+								theme: theme!
 							})}
 						</View>
 						{this.renderButtons()}
diff --git a/app/views/RoomMembersView/components/ActionsSection.tsx b/app/views/RoomMembersView/components/ActionsSection.tsx
index 7dcf34a0a..174e51c7c 100644
--- a/app/views/RoomMembersView/components/ActionsSection.tsx
+++ b/app/views/RoomMembersView/components/ActionsSection.tsx
@@ -46,6 +46,7 @@ export default function ActionsSection({ rid, t, joined }: IActionsSection): Rea
 		route: keyof ChatsStackParamList;
 		params: ChatsStackParamList[keyof ChatsStackParamList];
 	}) => {
+		// @ts-ignore
 		navigate(route, params);
 		// @ts-ignore
 		logEvent(events[`RM_GO_${route.replace('View', '').toUpperCase()}`]);
diff --git a/app/views/RoomView/index.tsx b/app/views/RoomView/index.tsx
index a3ad8b025..2f65ad147 100644
--- a/app/views/RoomView/index.tsx
+++ b/app/views/RoomView/index.tsx
@@ -596,7 +596,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 					userId={userId}
 					token={token}
 					title={avatar}
-					theme={theme}
+					theme={theme!}
 					t={t}
 					goRoomActionsView={this.goRoomActionsView}
 					isMasterDetail={isMasterDetail}
@@ -1148,7 +1148,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 	getBadgeColor = (messageId: string) => {
 		const { room } = this.state;
 		const { theme } = this.props;
-		return getBadgeColor({ subscription: room, theme, messageId });
+		return getBadgeColor({ subscription: room, theme: theme!, messageId });
 	};
 
 	navToRoomInfo = (navParam: any) => {
@@ -1394,7 +1394,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 					toggleFollowThread={this.toggleFollowThread}
 					jumpToMessage={this.jumpToMessageByUrl}
 					highlighted={highlightedMessage === item.id}
-					theme={theme}
+					theme={theme!}
 					closeEmojiAndAction={this.handleCloseEmoji}
 				/>
 			);
@@ -1425,15 +1425,15 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		if ('onHold' in room && room.onHold) {
 			return (
 				<View style={styles.joinRoomContainer} key='room-view-chat-on-hold' testID='room-view-chat-on-hold'>
-					<Text accessibilityLabel={I18n.t('Chat_is_on_hold')} style={[styles.previewMode, { color: themes[theme].titleText }]}>
+					<Text accessibilityLabel={I18n.t('Chat_is_on_hold')} style={[styles.previewMode, { color: themes[theme!].titleText }]}>
 						{I18n.t('Chat_is_on_hold')}
 					</Text>
 					<Touch
 						onPress={this.resumeRoom}
-						style={[styles.joinRoomButton, { backgroundColor: themes[theme].actionTintColor }]}
+						style={[styles.joinRoomButton, { backgroundColor: themes[theme!].actionTintColor }]}
 						enabled={!loading}
 					>
-						<Text style={[styles.joinRoomText, { color: themes[theme].buttonText }]} testID='room-view-chat-on-hold-button'>
+						<Text style={[styles.joinRoomText, { color: themes[theme!].buttonText }]} testID='room-view-chat-on-hold-button'>
 							{I18n.t('Resume')}
 						</Text>
 					</Touch>
@@ -1445,16 +1445,16 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 				<View style={styles.joinRoomContainer} key='room-view-join' testID='room-view-join'>
 					<Text
 						accessibilityLabel={I18n.t('You_are_in_preview_mode')}
-						style={[styles.previewMode, { color: themes[theme].titleText }]}
+						style={[styles.previewMode, { color: themes[theme!].titleText }]}
 					>
 						{I18n.t('You_are_in_preview_mode')}
 					</Text>
 					<Touch
 						onPress={this.joinRoom}
-						style={[styles.joinRoomButton, { backgroundColor: themes[theme].actionTintColor }]}
+						style={[styles.joinRoomButton, { backgroundColor: themes[theme!].actionTintColor }]}
 						enabled={!loading}
 					>
-						<Text style={[styles.joinRoomText, { color: themes[theme].buttonText }]} testID='room-view-join-button'>
+						<Text style={[styles.joinRoomText, { color: themes[theme!].buttonText }]} testID='room-view-join-button'>
 							{I18n.t(this.isOmnichannel ? 'Take_it' : 'Join')}
 						</Text>
 					</Touch>
@@ -1465,7 +1465,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 			return (
 				<View style={styles.readOnly}>
 					<Text
-						style={[styles.previewMode, { color: themes[theme].titleText }]}
+						style={[styles.previewMode, { color: themes[theme!].titleText }]}
 						accessibilityLabel={I18n.t('This_room_is_read_only')}
 					>
 						{I18n.t('This_room_is_read_only')}
@@ -1476,7 +1476,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		if ('id' in room && isBlocked(room)) {
 			return (
 				<View style={styles.readOnly}>
-					<Text style={[styles.previewMode, { color: themes[theme].titleText }]}>{I18n.t('This_room_is_blocked')}</Text>
+					<Text style={[styles.previewMode, { color: themes[theme!].titleText }]}>{I18n.t('This_room_is_blocked')}</Text>
 				</View>
 			);
 		}
@@ -1490,7 +1490,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 				joined={joined}
 				roomType={room.t}
 				isFocused={navigation.isFocused}
-				theme={theme}
+				theme={theme!}
 				message={selectedMessage}
 				editing={editing}
 				editRequest={this.onEditRequest}
@@ -1544,7 +1544,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		}
 
 		return (
-			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='room-view'>
+			<SafeAreaView style={{ backgroundColor: themes[theme!].backgroundColor }} testID='room-view'>
 				<StatusBar />
 				<Banner title={I18n.t('Announcement')} text={announcement} bannerClosed={bannerClosed} closeBanner={this.closeBanner} />
 				<List
@@ -1564,7 +1564,7 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 				{this.renderFooter()}
 				{this.renderActions()}
 				<UploadProgress rid={rid} user={user} baseUrl={baseUrl} width={width} />
-				<JoinCode ref={this.joinCode} onJoin={this.onJoin} rid={rid} t={t} theme={theme} />
+				<JoinCode ref={this.joinCode} onJoin={this.onJoin} rid={rid} t={t} theme={theme!} />
 			</SafeAreaView>
 		);
 	}
diff --git a/app/views/RoomsListView/ServerDropdown.tsx b/app/views/RoomsListView/ServerDropdown.tsx
index 8292f7477..573d20048 100644
--- a/app/views/RoomsListView/ServerDropdown.tsx
+++ b/app/views/RoomsListView/ServerDropdown.tsx
@@ -205,7 +205,7 @@ class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownStat
 		});
 		const backdropOpacity = this.animatedValue.interpolate({
 			inputRange: [0, 1],
-			outputRange: [0, themes[theme].backdropOpacity]
+			outputRange: [0, themes[theme!].backdropOpacity]
 		});
 		return (
 			<>
@@ -214,7 +214,7 @@ class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownStat
 						style={[
 							styles.backdrop,
 							{
-								backgroundColor: themes[theme].backdropColor,
+								backgroundColor: themes[theme!].backdropColor,
 								opacity: backdropOpacity,
 								top: heightDestination
 							}
@@ -226,16 +226,16 @@ class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownStat
 						styles.dropdownContainer,
 						{
 							transform: [{ translateY }],
-							backgroundColor: themes[theme].backgroundColor,
-							borderColor: themes[theme].separatorColor
+							backgroundColor: themes[theme!].backgroundColor,
+							borderColor: themes[theme!].separatorColor
 						}
 					]}
 					testID='rooms-list-header-server-dropdown'
 				>
-					<View style={[styles.dropdownContainerHeader, styles.serverHeader, { borderColor: themes[theme].separatorColor }]}>
-						<Text style={[styles.serverHeaderText, { color: themes[theme].auxiliaryText }]}>{I18n.t('Server')}</Text>
+					<View style={[styles.dropdownContainerHeader, styles.serverHeader, { borderColor: themes[theme!].separatorColor }]}>
+						<Text style={[styles.serverHeaderText, { color: themes[theme!].auxiliaryText }]}>{I18n.t('Server')}</Text>
 						<TouchableOpacity onPress={this.addServer} testID='rooms-list-header-server-add'>
-							<Text style={[styles.serverHeaderAdd, { color: themes[theme].tintColor }]}>{I18n.t('Add_Server')}</Text>
+							<Text style={[styles.serverHeaderAdd, { color: themes[theme!].tintColor }]}>{I18n.t('Add_Server')}</Text>
 						</TouchableOpacity>
 					</View>
 					<FlatList
@@ -253,7 +253,7 @@ class ServerDropdown extends Component<IServerDropdownProps, IServerDropdownStat
 						onPress={this.createWorkspace}
 						testID='rooms-list-header-create-workspace-button'
 						style={styles.buttonCreateWorkspace}
-						color={themes[theme].tintColor}
+						color={themes[theme!].tintColor}
 						styleText={[styles.serverHeaderAdd, { textAlign: 'center' }]}
 					/>
 				</Animated.View>
diff --git a/app/views/ScreenLockConfigView.tsx b/app/views/ScreenLockConfigView.tsx
index 08ce03a45..3bfd75091 100644
--- a/app/views/ScreenLockConfigView.tsx
+++ b/app/views/ScreenLockConfigView.tsx
@@ -25,7 +25,7 @@ interface IItem {
 }
 
 interface IScreenLockConfigViewProps {
-	theme: TSupportedThemes;
+	theme?: TSupportedThemes;
 	server: string;
 	Force_Screen_Lock: boolean;
 	Force_Screen_Lock_After: number;
@@ -172,7 +172,7 @@ class ScreenLockConfigView extends React.Component<IScreenLockConfigViewProps, I
 
 	renderIcon = () => {
 		const { theme } = this.props;
-		return <List.Icon name='check' color={themes[theme].tintColor} />;
+		return <List.Icon name='check' color={themes[theme!].tintColor} />;
 	};
 
 	renderItem = ({ item }: { item: IItem }) => {
diff --git a/app/views/SearchMessagesView/index.tsx b/app/views/SearchMessagesView/index.tsx
index b83d07779..6e7d9dae8 100644
--- a/app/views/SearchMessagesView/index.tsx
+++ b/app/views/SearchMessagesView/index.tsx
@@ -71,7 +71,7 @@ interface ISearchMessagesViewProps extends INavigationOption {
 	customEmojis: {
 		[key: string]: ICustomEmoji;
 	};
-	theme: TSupportedThemes;
+	theme?: TSupportedThemes;
 	useRealName: boolean;
 }
 class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISearchMessagesViewState> {
@@ -271,8 +271,8 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 	renderEmpty = () => {
 		const { theme } = this.props;
 		return (
-			<View style={[styles.listEmptyContainer, { backgroundColor: themes[theme].backgroundColor }]}>
-				<Text style={[styles.noDataFound, { color: themes[theme].titleText }]}>{I18n.t('No_results_found')}</Text>
+			<View style={[styles.listEmptyContainer, { backgroundColor: themes[theme!].backgroundColor }]}>
+				<Text style={[styles.noDataFound, { color: themes[theme!].titleText }]}>{I18n.t('No_results_found')}</Text>
 			</View>
 		);
 	};
@@ -291,7 +291,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 				getCustomEmoji={this.getCustomEmoji}
 				navToRoomInfo={this.navToRoomInfo}
 				useRealName={useRealName}
-				theme={theme}
+				theme={theme!}
 				onPress={() => this.jumpToMessage({ item })}
 				jumpToMessage={() => this.jumpToMessage({ item })}
 				rid={message.rid}
@@ -311,7 +311,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 			<FlatList
 				data={messages}
 				renderItem={this.renderItem}
-				style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
+				style={[styles.list, { backgroundColor: themes[theme!].backgroundColor }]}
 				keyExtractor={item => item._id}
 				onEndReached={this.onEndReached}
 				ListFooterComponent={loading ? <ActivityIndicator /> : null}
@@ -325,7 +325,7 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 	render() {
 		const { theme } = this.props;
 		return (
-			<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='search-messages-view'>
+			<SafeAreaView style={{ backgroundColor: themes[theme!].backgroundColor }} testID='search-messages-view'>
 				<StatusBar />
 				<View style={styles.searchContainer}>
 					<FormTextInput
@@ -335,8 +335,8 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
 						placeholder={I18n.t('Search_Messages')}
 						testID='search-message-view-input'
 					/>
-					<Markdown msg={I18n.t('You_can_search_using_RegExp_eg')} theme={theme} />
-					<View style={[styles.divider, { backgroundColor: themes[theme].separatorColor }]} />
+					<Markdown msg={I18n.t('You_can_search_using_RegExp_eg')} theme={theme!} />
+					<View style={[styles.divider, { backgroundColor: themes[theme!].separatorColor }]} />
 				</View>
 				{this.renderList()}
 			</SafeAreaView>
diff --git a/app/views/SelectListView.tsx b/app/views/SelectListView.tsx
index 1a8d2fb98..ea6c7e266 100644
--- a/app/views/SelectListView.tsx
+++ b/app/views/SelectListView.tsx
@@ -39,7 +39,7 @@ interface ISelectListViewState {
 interface ISelectListViewProps {
 	navigation: StackNavigationProp<ChatsStackParamList, 'SelectListView'>;
 	route: RouteProp<ChatsStackParamList, 'SelectListView'>;
-	theme: TSupportedThemes;
+	theme?: TSupportedThemes;
 	isMasterDetail: boolean;
 }
 
@@ -101,8 +101,8 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 	renderInfoText = () => {
 		const { theme } = this.props;
 		return (
-			<View style={{ backgroundColor: themes[theme].backgroundColor }}>
-				<Text style={[styles.buttonText, { color: themes[theme].bodyText }]}>{I18n.t(this.infoText)}</Text>
+			<View style={{ backgroundColor: themes[theme!].backgroundColor }}>
+				<Text style={[styles.buttonText, { color: themes[theme!].bodyText }]}>{I18n.t(this.infoText)}</Text>
 			</View>
 		);
 	};
@@ -153,7 +153,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 			<RadioButton
 				testID={selected ? `radio-button-selected-${item.name}` : `radio-button-unselected-${item.name}`}
 				selected={selected.includes(item.rid)}
-				color={themes[theme].actionTintColor}
+				color={themes[theme!].actionTintColor}
 				size={ICON_SIZE}
 			/>
 		);
@@ -162,7 +162,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 				<List.Icon
 					testID={checked ? `${item.name}-checked` : `${item.name}-unchecked`}
 					name={checked}
-					color={themes[theme].actionTintColor}
+					color={themes[theme!].actionTintColor}
 				/>
 			) : null;
 
@@ -175,7 +175,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 					testID={`select-list-view-item-${item.name}`}
 					onPress={() => (item.alert ? this.showAlert() : this.toggleItem(item.rid))}
 					alert={item.alert}
-					left={() => <List.Icon name={icon} color={themes[theme].controlText} />}
+					left={() => <List.Icon name={icon} color={themes[theme!].controlText} />}
 					right={() => (this.isRadio ? showRadio() : showCheck())}
 				/>
 			</>
@@ -194,7 +194,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 					keyExtractor={item => item.rid}
 					renderItem={this.renderItem}
 					ListHeaderComponent={this.isSearch ? this.renderSearch : this.renderInfoText}
-					contentContainerStyle={{ backgroundColor: themes[theme].backgroundColor }}
+					contentContainerStyle={{ backgroundColor: themes[theme!].backgroundColor }}
 					keyboardShouldPersistTaps='always'
 				/>
 			</SafeAreaView>
@@ -203,7 +203,7 @@ class SelectListView extends React.Component<ISelectListViewProps, ISelectListVi
 }
 
 const mapStateToProps = (state: IApplicationState) => ({
-	isMasterDetail: state.app.isMasterDetail
+	isMasterDetail: state.app.isMasterDetail as boolean
 });
 
 export default connect(mapStateToProps)(withTheme(SelectListView));
diff --git a/app/views/SelectServerView.tsx b/app/views/SelectServerView.tsx
index ceddb088f..bf9cd4fa4 100644
--- a/app/views/SelectServerView.tsx
+++ b/app/views/SelectServerView.tsx
@@ -11,9 +11,9 @@ import { shareExtensionInit } from '../lib/methods/shareExtension';
 import database from '../lib/database';
 import SafeAreaView from '../containers/SafeAreaView';
 import * as List from '../containers/List';
-import { ShareInsideStackParamList } from '../definitions/navigationTypes';
 import { TServerModel } from '../definitions';
 import { useAppSelector } from '../lib/hooks';
+import { ShareInsideStackParamList } from '../stacks/ShareExtensionStack/types';
 
 const getItemLayout = (data: any, index: number) => ({ length: ROW_HEIGHT, offset: ROW_HEIGHT * index, index });
 const keyExtractor = (item: TServerModel) => item.id;
diff --git a/app/views/SetUsernameView.tsx b/app/views/SetUsernameView.tsx
index b500ecd18..b61be8761 100644
--- a/app/views/SetUsernameView.tsx
+++ b/app/views/SetUsernameView.tsx
@@ -13,7 +13,6 @@ import Button from '../containers/Button';
 import SafeAreaView from '../containers/SafeAreaView';
 import StatusBar from '../containers/StatusBar';
 import { ControlledFormTextInput } from '../containers/TextInput';
-import { SetUsernameStackParamList } from '../definitions/navigationTypes';
 import I18n from '../i18n';
 import KeyboardView from '../containers/KeyboardView';
 import { getUserSelector } from '../selectors/login';
@@ -23,6 +22,7 @@ import scrollPersistTaps from '../lib/methods/helpers/scrollPersistTaps';
 import sharedStyles from './Styles';
 import { Services } from '../lib/services';
 import { useAppSelector } from '../lib/hooks';
+import { SetUsernameStackParamList } from '../stacks/types';
 
 const styles = StyleSheet.create({
 	loginTitle: {
diff --git a/app/views/TeamChannelsView.tsx b/app/views/TeamChannelsView.tsx
index a6bc411f4..bce566cb6 100644
--- a/app/views/TeamChannelsView.tsx
+++ b/app/views/TeamChannelsView.tsx
@@ -221,7 +221,7 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
 				<HeaderBackButton
 					labelVisible={false}
 					onPress={() => navigation.pop()}
-					tintColor={themes[theme].headerTintColor}
+					tintColor={themes[theme!].headerTintColor}
 					testID='header-back'
 				/>
 			),
@@ -436,7 +436,7 @@ class TeamChannelsView extends React.Component<ITeamChannelsViewProps, ITeamChan
 		} = this.props;
 		const isAutoJoinChecked = item.teamDefault;
 		const autoJoinIcon = isAutoJoinChecked ? 'checkbox-checked' : 'checkbox-unchecked';
-		const autoJoinIconColor = isAutoJoinChecked ? themes[theme].tintActive : themes[theme].auxiliaryTintColor;
+		const autoJoinIconColor = isAutoJoinChecked ? themes[theme!].tintActive : themes[theme!].auxiliaryTintColor;
 
 		const options: TActionSheetOptionsItem[] = [];
 
diff --git a/app/views/ThreadMessagesView/index.tsx b/app/views/ThreadMessagesView/index.tsx
index 2769b3302..bb7e4a69f 100644
--- a/app/views/ThreadMessagesView/index.tsx
+++ b/app/views/ThreadMessagesView/index.tsx
@@ -54,7 +54,7 @@ interface IThreadMessagesViewProps extends IBaseScreen<ChatsStackParamList, 'Thr
 	user: { id: string };
 	baseUrl: string;
 	useRealName: boolean;
-	theme: TSupportedThemes;
+	theme?: TSupportedThemes;
 	isMasterDetail: boolean;
 }
 
@@ -136,7 +136,7 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
 				<HeaderBackButton
 					labelVisible={false}
 					onPress={() => navigation.pop()}
-					tintColor={themes[theme].headerTintColor}
+					tintColor={themes[theme!].headerTintColor}
 					testID='header-back'
 				/>
 			),
@@ -395,7 +395,7 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
 	getBadgeColor = (item: TThreadModel) => {
 		const { subscription } = this.state;
 		const { theme } = this.props;
-		return getBadgeColor({ subscription, theme, messageId: item?.id });
+		return getBadgeColor({ subscription, theme: theme!, messageId: item?.id });
 	};
 
 	// helper to query threads
@@ -493,7 +493,7 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
 				data={displayingThreads}
 				extraData={this.state}
 				renderItem={this.renderItem}
-				style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
+				style={[styles.list, { backgroundColor: themes[theme!].backgroundColor }]}
 				contentContainerStyle={styles.contentContainer}
 				onEndReached={this.load}
 				onEndReachedThreshold={0.5}
@@ -523,7 +523,7 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
 						currentFilter={currentFilter}
 						onFilterSelected={this.onFilterSelected}
 						onClose={this.closeFilterDropdown}
-						theme={theme}
+						theme={theme!}
 					/>
 				) : null}
 			</SafeAreaView>
diff --git a/app/views/UserPreferencesView/index.tsx b/app/views/UserPreferencesView/index.tsx
index 748e38d21..9dd4a662a 100644
--- a/app/views/UserPreferencesView/index.tsx
+++ b/app/views/UserPreferencesView/index.tsx
@@ -32,9 +32,9 @@ const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Ele
 		});
 	}, [navigation]);
 
-	const navigateToScreen = (screen: keyof ProfileStackParamList) => {
+	const navigateToScreen = () => {
 		logEvent(events.UP_GO_USER_NOTIFICATION_PREF);
-		navigation.navigate(screen);
+		navigation.navigate('UserNotificationPrefView');
 	};
 
 	const toggleMessageParser = async (value: boolean) => {
@@ -68,7 +68,7 @@ const UserPreferencesView = ({ navigation }: IUserPreferencesViewProps): JSX.Ele
 					<List.Separator />
 					<List.Item
 						title='Notifications'
-						onPress={() => navigateToScreen('UserNotificationPrefView')}
+						onPress={() => navigateToScreen()}
 						showActionIndicator
 						testID='preferences-view-notifications'
 					/>
diff --git a/app/views/WorkspaceView/index.tsx b/app/views/WorkspaceView/index.tsx
index 799c6d747..9958e9032 100644
--- a/app/views/WorkspaceView/index.tsx
+++ b/app/views/WorkspaceView/index.tsx
@@ -21,7 +21,7 @@ interface IWorkSpaceProp {
 		StackNavigationProp<OutsideParamList, 'WorkspaceView'>,
 		StackNavigationProp<OutsideModalParamList>
 	>;
-	theme: TSupportedThemes;
+	theme?: TSupportedThemes;
 	Site_Name: string;
 	Site_Url: string;
 	server: string;
@@ -66,7 +66,7 @@ class WorkspaceView extends React.Component<IWorkSpaceProp, any> {
 			return null;
 		}
 
-		return <Text style={[styles.registrationText, { color: themes[theme].auxiliaryText }]}>{registrationText}</Text>;
+		return <Text style={[styles.registrationText, { color: themes[theme!].auxiliaryText }]}>{registrationText}</Text>;
 	};
 
 	render() {
@@ -76,9 +76,9 @@ class WorkspaceView extends React.Component<IWorkSpaceProp, any> {
 			<FormContainer testID='workspace-view'>
 				<FormContainerInner>
 					<View style={styles.alignItemsCenter}>
-						<ServerAvatar theme={theme} url={server} image={Assets_favicon_512?.url ?? Assets_favicon_512?.defaultUrl} />
-						<Text style={[styles.serverName, { color: themes[theme].titleText }]}>{Site_Name}</Text>
-						<Text style={[styles.serverUrl, { color: themes[theme].auxiliaryText }]}>{Site_Url}</Text>
+						<ServerAvatar theme={theme!} url={server} image={Assets_favicon_512?.url ?? Assets_favicon_512?.defaultUrl} />
+						<Text style={[styles.serverName, { color: themes[theme!].titleText }]}>{Site_Name}</Text>
+						<Text style={[styles.serverUrl, { color: themes[theme!].auxiliaryText }]}>{Site_Url}</Text>
 					</View>
 					{showLoginButton ? (
 						<Button title={I18n.t('Login')} type='primary' onPress={this.login} testID='workspace-view-login' />
@@ -87,7 +87,7 @@ class WorkspaceView extends React.Component<IWorkSpaceProp, any> {
 						<Button
 							title={I18n.t('Create_account')}
 							type='secondary'
-							backgroundColor={themes[theme].chatComponentBackground}
+							backgroundColor={themes[theme!].chatComponentBackground}
 							onPress={this.register}
 							testID='workspace-view-register'
 						/>