feat: Remove landscape support from smartphones (#5203)

app/containers/InAppNotification/IncomingCallNotification/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Text, View, useWindowDimensions } from 'react-native';
+import { Text, View } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useDispatch } from 'react-redux';
@@ -37,21 +37,16 @@ const IncomingCallHeader = React.memo(
 		const [mic, setMic] = useState(true);
 		const [cam, setCam] = useState(false);
 		const dispatch = useDispatch();
-
 		const isMasterDetail = useAppSelector(state => state.app.isMasterDetail);
 		const styles = useStyle();
-
 		const insets = useSafeAreaInsets();
-		const { height, width } = useWindowDimensions();
-		const isLandscape = width > height;
-
 		const { colors } = useTheme();
 
 		return (
 			<View
 				style={[
 					styles.container,
-					(isMasterDetail || isLandscape) && styles.small,
+					isMasterDetail && styles.small,
 					{
 						marginTop: insets.top
 					}

app/containers/InAppNotification/NotifierComponent.tsx

@@ -11,7 +11,6 @@ import { themes } from '../../lib/constants';
 import { useTheme } from '../../theme';
 import { ROW_HEIGHT } from '../RoomItem';
 import { goRoom } from '../../lib/methods/helpers/goRoom';
-import { useOrientation } from '../../dimensions';
 import { IApplicationState, ISubscription, SubscriptionType } from '../../definitions';
 import { hideNotification } from '../../lib/methods/helpers/notifications';
 
@@ -76,8 +75,6 @@ const styles = StyleSheet.create({
 const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifierComponent) => {
 	const { theme } = useTheme();
 	const insets = useSafeAreaInsets();
-	const { isLandscape } = useOrientation();
-
 	const { text, payload } = notification;
 	const { type, rid } = payload;
 	const name = type === 'd' ? payload.sender.username : payload.name;
@@ -104,7 +101,7 @@ const NotifierComponent = React.memo(({ notification, isMasterDetail }: INotifie
 		<View
 			style={[
 				styles.container,
-				(isMasterDetail || isLandscape) && styles.small,
+				isMasterDetail && styles.small,
 				{
 					backgroundColor: themes[theme].focusedBackground,
 					borderColor: themes[theme].separatorColor,

app/containers/MessageActions/Header.tsx

@@ -84,11 +84,10 @@ const HeaderFooter = ({ onReaction, theme }: THeaderFooter) => (
 );
 
 const Header = React.memo(({ handleReaction, message, isMasterDetail }: IHeader) => {
-	const { width, height } = useWindowDimensions();
+	const { width } = useWindowDimensions();
 	const { theme } = useTheme();
 	const { frequentlyUsed, loaded } = useFrequentlyUsedEmoji(true);
-	const isLandscape = width > height;
+	const size = (isMasterDetail ? width / 2 : width) - CONTAINER_MARGIN * 2;
-	const size = (isLandscape || isMasterDetail ? width / 2 : width) - CONTAINER_MARGIN * 2;
 	const quantity = Math.trunc(size / (ITEM_SIZE + ITEM_MARGIN * 2) - 1);
 
 	const onReaction: TOnReaction = ({ emoji }) => {

app/containers/Passcode/Base/index.tsx

@@ -1,10 +1,9 @@
-import React, { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { Col, Grid, Row } from 'react-native-easy-grid';
 import range from 'lodash/range';
 import { View } from 'react-native';
 import * as Animatable from 'react-native-animatable';
 import * as Haptics from 'expo-haptics';
-import Orientation from 'react-native-orientation-locker';
 
 import styles from './styles';
 import Button from './Button';
@@ -16,7 +15,6 @@ import LockIcon from './LockIcon';
 import Title from './Title';
 import Subtitle from './Subtitle';
 import { useDimensions } from '../../../dimensions';
-import { isTablet } from '../../../lib/methods/helpers';
 
 interface IPasscodeBase {
 	type: string;
@@ -37,18 +35,6 @@ export interface IBase {
 
 const Base = forwardRef<IBase, IPasscodeBase>(
 	({ type, onEndProcess, previousPasscode, title, subtitle, onError, showBiometry, onBiometryPress }, ref) => {
-		useLayoutEffect(() => {
-			if (!isTablet) {
-				Orientation.lockToPortrait();
-			}
-
-			return () => {
-				if (!isTablet) {
-					Orientation.unlockAllOrientations();
-				}
-			};
-		}, []);
-
 		const { theme } = useTheme();
 		const { height } = useDimensions();
 

app/containers/ReactionsList/ReactionsTabBar.tsx

@@ -7,7 +7,7 @@ import { IReaction } from '../../definitions';
 import { TGetCustomEmoji } from '../../definitions/IEmoji';
 import I18n from '../../i18n';
 import styles, { MIN_TAB_WIDTH } from './styles';
-import { useDimensions, useOrientation } from '../../dimensions';
+import { useDimensions } from '../../dimensions';
 
 interface ITabBarItem {
 	getCustomEmoji: TGetCustomEmoji;
@@ -55,10 +55,8 @@ const TabBarItem = ({ tab, index, goToPage, getCustomEmoji }: ITabBarItem) => {
 };
 
 const ReactionsTabBar = ({ tabs, activeTab, goToPage, getCustomEmoji }: IReactionsTabBar): React.ReactElement => {
-	const { isLandscape } = useOrientation();
 	const { width } = useDimensions();
-	const reactionsListWidth = isLandscape ? width / 2 : width;
+	const tabWidth = tabs && Math.max(width / tabs.length, MIN_TAB_WIDTH);
-	const tabWidth = tabs && Math.max(reactionsListWidth / tabs.length, MIN_TAB_WIDTH);
 	const { colors } = useTheme();
 	return (
 		<View testID='reactionsTabBar'>

app/containers/RoomHeader/RoomHeader.stories.tsx

@@ -66,14 +66,6 @@ export const Typing = () => (
 	</>
 );
 
-export const Landscape = () => (
-	<>
-		<HeaderExample title={() => <RoomHeader width={height} height={width} />} />
-		<HeaderExample title={() => <RoomHeader width={height} height={width} subtitle='subtitle' />} />
-		<HeaderExample title={() => <RoomHeader width={height} height={width} title={longText} subtitle={longText} />} />
-	</>
-);
-
 export const Thread = () => (
 	<>
 		<HeaderExample title={() => <RoomHeader tmid='123' parentTitle='parent title' />} />

app/containers/SearchHeader.tsx

@@ -6,8 +6,6 @@ import { useTheme } from '../theme';
 import sharedStyles from '../views/Styles';
 import { themes } from '../lib/constants';
 import { TextInput } from './TextInput';
-import { isIOS, isTablet } from '../lib/methods/helpers';
-import { useOrientation } from '../dimensions';
 
 const styles = StyleSheet.create({
 	container: {
@@ -16,7 +14,8 @@ const styles = StyleSheet.create({
 		marginLeft: 0
 	},
 	title: {
-		...sharedStyles.textSemibold
+		...sharedStyles.textSemibold,
+		fontSize: 16
 	}
 });
 
@@ -28,15 +27,12 @@ interface ISearchHeaderProps {
 const SearchHeader = ({ onSearchChangeText, testID }: ISearchHeaderProps): JSX.Element => {
 	const { theme } = useTheme();
 	const isLight = theme === 'light';
-	const { isLandscape } = useOrientation();
-	const scale = isIOS && isLandscape && !isTablet ? 0.8 : 1;
-	const titleFontSize = 16 * scale;
 
 	return (
 		<View style={styles.container}>
 			<TextInput
 				autoFocus
-				style={[styles.title, isLight && { color: themes[theme].headerTitleColor }, { fontSize: titleFontSize }]}
+				style={[styles.title, isLight && { color: themes[theme].headerTitleColor }]}
 				placeholder={I18n.t('Search')}
 				onChangeText={onSearchChangeText}
 				testID={testID}

app/index.tsx

@@ -5,6 +5,7 @@ import { initialWindowMetrics, SafeAreaProvider } from 'react-native-safe-area-c
 import RNScreens from 'react-native-screens';
 import { Provider } from 'react-redux';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import Orientation from 'react-native-orientation-locker';
 
 import { appInit, appInitLocalSettings, setMasterDetail as setMasterDetailAction } from './actions/app';
 import { deepLinkingOpen } from './actions/deepLinking';
@@ -104,6 +105,9 @@ export default class Root extends React.Component<{}, IState> {
 		};
 		if (isTablet) {
 			this.initTablet();
+			Orientation.unlockAllOrientations();
+		} else {
+			Orientation.lockToPortrait();
 		}
 		setNativeTheme(theme);
 	}

app/views/ChangePasscodeView.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { StyleSheet } from 'react-native';
-import Orientation from 'react-native-orientation-locker';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 import isEmpty from 'lodash/isEmpty';
 import Modal from 'react-native-modal';
 import Touchable from 'react-native-platform-touchable';
 
 import { useTheme } from '../theme';
-import { hasNotch, isTablet } from '../lib/methods/helpers';
+import { hasNotch } from '../lib/methods/helpers';
 import { PasscodeChoose } from '../containers/Passcode';
 import EventEmitter from '../lib/methods/helpers/events';
 import { CustomIcon } from '../containers/CustomIcon';
@@ -65,14 +64,8 @@ const ChangePasscodeView = React.memo(() => {
 	};
 
 	useEffect(() => {
-		if (!isTablet) {
-			Orientation.lockToPortrait();
-		}
 		const listener = EventEmitter.addEventListener(CHANGE_PASSCODE_EMITTER, showChangePasscode);
 		return () => {
-			if (!isTablet) {
-				Orientation.unlockAllOrientations();
-			}
 			EventEmitter.removeListener(CHANGE_PASSCODE_EMITTER, listener);
 		};
 	}, []);

app/views/NewServerView/index.tsx

@@ -3,7 +3,6 @@ import { Base64 } from 'js-base64';
 import React from 'react';
 import { BackHandler, Image, Keyboard, StyleSheet, Text, View } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
-import Orientation from 'react-native-orientation-locker';
 import { connect } from 'react-redux';
 import parse from 'url-parse';
 
@@ -88,9 +87,6 @@ interface ISubmitParams {
 class NewServerView extends React.Component<INewServerViewProps, INewServerViewState> {
 	constructor(props: INewServerViewProps) {
 		super(props);
-		if (!isTablet) {
-			Orientation.lockToPortrait();
-		}
 		this.setHeader();
 
 		this.state = {

app/views/RoomsListView/Header/Header.tsx

@@ -4,8 +4,6 @@ import { StyleSheet, Text, TextInputProps, TouchableOpacity, TouchableOpacityPro
 import I18n from '../../../i18n';
 import sharedStyles from '../../Styles';
 import { CustomIcon } from '../../../containers/CustomIcon';
-import { isIOS, isTablet } from '../../../lib/methods/helpers';
-import { useOrientation } from '../../../dimensions';
 import { useTheme } from '../../../theme';
 import SearchHeader from '../../../containers/SearchHeader';
 
@@ -20,9 +18,11 @@ const styles = StyleSheet.create({
 	},
 	title: {
 		flexShrink: 1,
+		fontSize: 16,
 		...sharedStyles.textSemibold
 	},
 	subtitle: {
+		fontSize: 14,
 		...sharedStyles.textRegular
 	},
 	upsideDown: {
@@ -55,10 +55,6 @@ const Header = React.memo(
 		onPress
 	}: IRoomHeader) => {
 		const { colors } = useTheme();
-		const { isLandscape } = useOrientation();
-		const scale = isIOS && isLandscape && !isTablet ? 0.8 : 1;
-		const titleFontSize = 16 * scale;
-		const subTitleFontSize = 14 * scale;
 
 		if (showSearchHeader) {
 			return <SearchHeader onSearchChangeText={onSearchChangeText} testID='rooms-list-view-search-input' />;
@@ -77,7 +73,7 @@ const Header = React.memo(
 			<View style={styles.container}>
 				<TouchableOpacity onPress={onPress} testID='rooms-list-header-server-dropdown-button'>
 					<View style={styles.button}>
-						<Text style={[styles.title, { fontSize: titleFontSize, color: colors.headerTitleColor }]} numberOfLines={1}>
+						<Text style={[styles.title, { color: colors.headerTitleColor }]} numberOfLines={1}>
 							{serverName}
 						</Text>
 						<CustomIcon
@@ -90,7 +86,7 @@ const Header = React.memo(
 					{subtitle ? (
 						<Text
 							testID='rooms-list-header-server-subtitle'
-							style={[styles.subtitle, { color: colors.auxiliaryText, fontSize: subTitleFontSize }]}
+							style={[styles.subtitle, { color: colors.auxiliaryText }]}
 							numberOfLines={1}
 						>
 							{subtitle}

app/views/RoomsListView/index.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { BackHandler, FlatList, Keyboard, NativeEventSubscription, RefreshControl, Text, View } from 'react-native';
 import { batch, connect } from 'react-redux';
 import { dequal } from 'dequal';
-import Orientation from 'react-native-orientation-locker';
 import { Q } from '@nozbe/watermelondb';
 import { withSafeAreaInsets } from 'react-native-safe-area-context';
 import { Subscription } from 'rxjs';
@@ -217,7 +216,6 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
 			EventEmitter.addEventListener(KEY_COMMAND, this.handleCommands);
 		}
 		this.unsubscribeFocus = navigation.addListener('focus', () => {
-			Orientation.unlockAllOrientations();
 			this.animated = true;
 			// Check if there were changes with sort preference, then call getSubscription to remount the list
 			if (this.sortPreferencesChanged) {

app/views/ScreenLockedView.tsx

@@ -2,7 +2,6 @@ import isEmpty from 'lodash/isEmpty';
 import React, { useEffect, useState } from 'react';
 import { StyleSheet } from 'react-native';
 import Modal from 'react-native-modal';
-import Orientation from 'react-native-orientation-locker';
 import Touchable from 'react-native-platform-touchable';
 import useDeepCompareEffect from 'use-deep-compare-effect';
 
@@ -10,7 +9,7 @@ import { PasscodeEnter } from '../containers/Passcode';
 import { LOCAL_AUTHENTICATE_EMITTER } from '../lib/constants';
 import { CustomIcon } from '../containers/CustomIcon';
 import { useTheme } from '../theme';
-import { hasNotch, isTablet } from '../lib/methods/helpers';
+import { hasNotch } from '../lib/methods/helpers';
 import EventEmitter from '../lib/methods/helpers/events';
 
 interface IData {
@@ -46,14 +45,8 @@ const ScreenLockedView = (): JSX.Element => {
 	};
 
 	useEffect(() => {
-		if (!isTablet) {
-			Orientation.lockToPortrait();
-		}
 		const listener = EventEmitter.addEventListener(LOCAL_AUTHENTICATE_EMITTER, showScreenLock);
 		return () => {
-			if (!isTablet) {
-				Orientation.unlockAllOrientations();
-			}
 			EventEmitter.removeListener(LOCAL_AUTHENTICATE_EMITTER, listener);
 		};
 	}, []);

app/views/SetUsernameView.tsx

@@ -2,7 +2,6 @@ import { useNavigation } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import React, { useEffect, useLayoutEffect, useState } from 'react';
 import { ScrollView, StyleSheet, Text } from 'react-native';
-import Orientation from 'react-native-orientation-locker';
 import { useDispatch } from 'react-redux';
 import { useForm } from 'react-hook-form';
 import * as yup from 'yup';
@@ -18,7 +17,7 @@ import I18n from '../i18n';
 import KeyboardView from '../containers/KeyboardView';
 import { getUserSelector } from '../selectors/login';
 import { useTheme } from '../theme';
-import { isTablet, showErrorAlert } from '../lib/methods/helpers';
+import { showErrorAlert } from '../lib/methods/helpers';
 import scrollPersistTaps from '../lib/methods/helpers/scrollPersistTaps';
 import sharedStyles from './Styles';
 import { Services } from '../lib/services';
@@ -56,9 +55,6 @@ const SetUsernameView = () => {
 
 	useLayoutEffect(() => {
 		navigation.setOptions({ title: server });
-		if (!isTablet) {
-			Orientation.lockToPortrait();
-		}
 	}, [navigation, server]);
 
 	useEffect(() => {

app/views/Styles.ts

@@ -122,9 +122,5 @@ export default StyleSheet.create({
 	},
 	inputLastChild: {
 		marginBottom: 15
-	},
-	notchLandscapeContainer: {
-		marginTop: -34,
-		paddingHorizontal: 30
 	}
 });