Create structure

app/views/RoomView/RightButtons.tsx

@@ -20,7 +20,7 @@ import { onHoldLivechat, returnLivechat } from '../../lib/services/restApi';
 import { getUserSelector } from '../../selectors/login';
 import { TNavigation } from '../../stacks/stackType';
 import { ChatsStackParamList } from '../../stacks/types';
-import HeaderCallButton from './components/HeaderCallButton';
+import { HeaderCallButton } from './components';
 
 interface IRightButtonsProps extends Pick<ISubscription, 't'> {
 	userId?: string;

app/views/RoomView/components/EncryptedRoom.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+export const EncryptedRoom = () => (
+	<View>
+		<Text>This room is encrypted</Text>
+	</View>
+);

app/views/RoomView/components/HeaderCallButton.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import * as HeaderButton from '../../../containers/HeaderButton';
 import { useVideoConf } from '../../../lib/hooks/useVideoConf';
 
-export default function HeaderCallButton({ rid }: { rid: string }): React.ReactElement | null {
+export const HeaderCallButton = ({ rid }: { rid: string }): React.ReactElement | null => {
 	const { showInitCallActionSheet, callEnabled, disabledTooltip } = useVideoConf(rid);
 
 	if (callEnabled)
@@ -16,4 +16,4 @@ export default function HeaderCallButton({ rid }: { rid: string }): React.ReactE
 			/>
 		);
 	return null;
-}
+};

app/views/RoomView/components/MissingRoomE2EEKey.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+
+export const MissingRoomE2EEKey = () => (
+	<View>
+		<Text>Check back in a few moments</Text>
+	</View>
+);

app/views/RoomView/components/index.ts

@@ -0,0 +1,3 @@
+export * from './EncryptedRoom';
+export * from './HeaderCallButton';
+export * from './MissingRoomE2EEKey';

app/views/RoomView/definitions.ts

@@ -23,6 +23,7 @@ export interface IRoomViewProps extends IActionSheetProvider, IBaseScreen<ChatsS
 	viewCannedResponsesPermission?: string[]; // TODO: Check if its the correct type
 	livechatAllowManualOnHold?: boolean;
 	inAppFeedback?: { [key: string]: string };
+	encryptionEnabled: boolean;
 }
 
 export type TStateAttrsUpdate = keyof IRoomViewState;

app/views/RoomView/index.tsx

@@ -102,6 +102,7 @@ import { clearInAppFeedback, removeInAppFeedback } from '../../actions/inAppFeed
 import UserPreferences from '../../lib/methods/userPreferences';
 import { IRoomViewProps, IRoomViewState } from './definitions';
 import { roomAttrsUpdate, stateAttrsUpdate } from './constants';
+import { EncryptedRoom, MissingRoomE2EEKey } from './components';
 
 class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 	private rid?: string;
@@ -1441,14 +1442,24 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 	render() {
 		console.count(`${this.constructor.name}.render calls`);
 		const { room, loading, action, selectedMessages } = this.state;
-		const { user, baseUrl, theme, width, serverVersion } = this.props;
+		const { user, baseUrl, theme, width, serverVersion, encryptionEnabled } = this.props;
 		const { rid, t } = room;
 		let bannerClosed;
 		let announcement;
 		if ('id' in room) {
 			({ bannerClosed, announcement } = room);
 		}
 
+		// Missing room encryption key
+		if (encryptionEnabled && 'encrypted' in room && room.encrypted && 'E2EKey' in room && !room.E2EKey) {
+			return <MissingRoomE2EEKey />;
+		}
+
+		// Encrypted room, but user session is not encrypted
+		if (!encryptionEnabled && 'encrypted' in room && room.encrypted) {
+			return <EncryptedRoom />;
+		}
+
 		return (
 			<RoomContext.Provider
 				value={{
@@ -1505,7 +1516,8 @@ const mapStateToProps = (state: IApplicationState) => ({
 	transferLivechatGuestPermission: state.permissions['transfer-livechat-guest'],
 	viewCannedResponsesPermission: state.permissions['view-canned-responses'],
 	livechatAllowManualOnHold: state.settings.Livechat_allow_manual_on_hold as boolean,
-	inAppFeedback: state.inAppFeedback
+	inAppFeedback: state.inAppFeedback,
+	encryptionEnabled: state.encryption.enabled
 });
 
 export default connect(mapStateToProps)(withDimensions(withTheme(withSafeAreaInsets(withActionSheet(RoomView)))));