From adfd80067c0034512897bda12c6dcc4aac709100 Mon Sep 17 00:00:00 2001
From: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>
Date: Sat, 9 May 2020 02:17:08 -0300
Subject: [PATCH 01/10] Create middleware and action and reduce

Signed-off-by: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>
---
 app/actions/actionsTypes.js     |  1 +
 app/actions/dimensions.js       | 15 ++++++++++++++
 app/lib/dimensionsMiddleware.js | 35 +++++++++++++++++++++++++++++++++
 app/reducers/dimensions.js      | 23 ++++++++++++++++++++++
 4 files changed, 74 insertions(+)
 create mode 100644 app/actions/dimensions.js
 create mode 100644 app/lib/dimensionsMiddleware.js
 create mode 100644 app/reducers/dimensions.js

diff --git a/app/actions/actionsTypes.js b/app/actions/actionsTypes.js
index 69b3f916edb..0afba49f5c0 100644
--- a/app/actions/actionsTypes.js
+++ b/app/actions/actionsTypes.js
@@ -65,3 +65,4 @@ export const INVITE_LINKS = createRequestTypes('INVITE_LINKS', [
 ]);
 export const SETTINGS = createRequestTypes('SETTINGS', ['CLEAR', 'ADD']);
 export const APP_STATE = createRequestTypes('APP_STATE', ['FOREGROUND', 'BACKGROUND']);
+export const DIMENSIONS = createRequestTypes('DIMENSIONS', ['WINDOW', 'SCREEN']);
diff --git a/app/actions/dimensions.js b/app/actions/dimensions.js
new file mode 100644
index 00000000000..22358257c74
--- /dev/null
+++ b/app/actions/dimensions.js
@@ -0,0 +1,15 @@
+import * as types from './actionsTypes';
+
+export function dimensionsWindow(window) {
+	return {
+		type: types.DIMENSIONS.WINDOW,
+		window
+	};
+}
+
+export function dimensionsScreen(screen) {
+	return {
+		type: types.DIMENSIONS.SCREEN,
+		screen
+	};
+}
diff --git a/app/lib/dimensionsMiddleware.js b/app/lib/dimensionsMiddleware.js
new file mode 100644
index 00000000000..9e56a037adc
--- /dev/null
+++ b/app/lib/dimensionsMiddleware.js
@@ -0,0 +1,35 @@
+import { Dimensions } from 'react-native';
+
+import { DIMENSIONS } from '../actions/actionsTypes';
+
+export default () => createStore => (...args) => {
+	const store = createStore(...args);
+
+	let currentState = '';
+	let payload = '';
+
+	const handleDimensionsChange = (nextDimensionState) => {
+		if (currentState !== nextDimensionState) {
+			let type;
+			if (nextDimensionState === 'window') {
+				type = DIMENSIONS.WINDOW;
+				payload = Dimensions.get('window');
+			} else if (nextDimensionState === 'screen') {
+				type = DIMENSIONS.SCREEN;
+				payload = Dimensions.get('screen');
+			}
+			if (type) {
+				store.dispatch({
+					type,
+					payload
+				});
+			}
+		}
+		currentState = nextDimensionState;
+	};
+
+	Dimensions.addEventListener('change', handleDimensionsChange);
+
+	setTimeout(() => handleDimensionsChange(Dimensions.currentState));
+	return store;
+};
diff --git a/app/reducers/dimensions.js b/app/reducers/dimensions.js
new file mode 100644
index 00000000000..c88206757c7
--- /dev/null
+++ b/app/reducers/dimensions.js
@@ -0,0 +1,23 @@
+import { DIMENSIONS } from '../actions/actionsTypes';
+
+const initialState = {
+	window: null,
+	screen: null
+};
+
+export default function(state = initialState, action) {
+	switch (action.type) {
+		case DIMENSIONS.WINDOW:
+			return {
+				...state,
+				window: action.window
+			};
+		case DIMENSIONS.SCREEN:
+			return {
+				...state,
+				screen: action.screen
+			};
+		default:
+			return state;
+	}
+}

From acefdd9aaf8ee6e23b008f27f934b10b23704176 Mon Sep 17 00:00:00 2001
From: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>
Date: Sat, 9 May 2020 16:24:44 -0300
Subject: [PATCH 02/10] Apply middleware

Signed-off-by: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>
---
 app/lib/createStore.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/lib/createStore.js b/app/lib/createStore.js
index da52de600e0..f1aec38d22e 100644
--- a/app/lib/createStore.js
+++ b/app/lib/createStore.js
@@ -4,6 +4,7 @@ import createSagaMiddleware from 'redux-saga';
 import reducers from '../reducers';
 import sagas from '../sagas';
 import applyAppStateMiddleware from './appStateMiddleware';
+import applyDimensionsMiddleware from './dimensionsMiddleware';
 
 let sagaMiddleware;
 let enhancers;
@@ -19,6 +20,7 @@ if (__DEV__) {
 		applyAppStateMiddleware(),
 		applyMiddleware(reduxImmutableStateInvariant),
 		applyMiddleware(sagaMiddleware),
+		applyMiddleware(applyDimensionsMiddleware),
 		Reactotron.createEnhancer()
 	);
 } else {

From a43385b97a35f9727b83830ba155f8c7f969e4c3 Mon Sep 17 00:00:00 2001
From: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>
Date: Mon, 11 May 2020 14:54:07 -0300
Subject: [PATCH 03/10] Save dimensions in store

Signed-off-by: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>
---
 app/actions/dimensions.js                   |  6 ++---
 app/containers/EmojiPicker/EmojiCategory.js |  8 +++++--
 app/lib/createStore.js                      |  3 ++-
 app/lib/dimensionsMiddleware.js             | 26 ++++++---------------
 app/reducers/dimensions.js                  |  4 ++--
 app/reducers/index.js                       |  4 +++-
 6 files changed, 23 insertions(+), 28 deletions(-)

diff --git a/app/actions/dimensions.js b/app/actions/dimensions.js
index 22358257c74..a6fafcac532 100644
--- a/app/actions/dimensions.js
+++ b/app/actions/dimensions.js
@@ -1,15 +1,15 @@
-import * as types from './actionsTypes';
+import { DIMENSIONS } from './actionsTypes';
 
 export function dimensionsWindow(window) {
 	return {
-		type: types.DIMENSIONS.WINDOW,
+		type: DIMENSIONS.WINDOW,
 		window
 	};
 }
 
 export function dimensionsScreen(screen) {
 	return {
-		type: types.DIMENSIONS.SCREEN,
+		type: DIMENSIONS.SCREEN,
 		screen
 	};
 }
diff --git a/app/containers/EmojiPicker/EmojiCategory.js b/app/containers/EmojiPicker/EmojiCategory.js
index 22382f1e30b..26061add482 100644
--- a/app/containers/EmojiPicker/EmojiCategory.js
+++ b/app/containers/EmojiPicker/EmojiCategory.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text, TouchableOpacity, FlatList } from 'react-native';
-import { responsive } from 'react-native-responsive-ui';
+import { connect } from 'react-redux';
 
 import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import styles from './styles';
@@ -73,4 +73,8 @@ class EmojiCategory extends React.Component {
 	}
 }
 
-export default responsive(EmojiCategory);
+const mapStateToProps = state => ({
+	window: state.dimensions.window
+});
+
+export default connect(mapStateToProps)(EmojiCategory);
diff --git a/app/lib/createStore.js b/app/lib/createStore.js
index f1aec38d22e..b1e745d5afc 100644
--- a/app/lib/createStore.js
+++ b/app/lib/createStore.js
@@ -18,15 +18,16 @@ if (__DEV__) {
 
 	enhancers = compose(
 		applyAppStateMiddleware(),
+		applyDimensionsMiddleware(),
 		applyMiddleware(reduxImmutableStateInvariant),
 		applyMiddleware(sagaMiddleware),
-		applyMiddleware(applyDimensionsMiddleware),
 		Reactotron.createEnhancer()
 	);
 } else {
 	sagaMiddleware = createSagaMiddleware();
 	enhancers = compose(
 		applyAppStateMiddleware(),
+		applyDimensionsMiddleware(),
 		applyMiddleware(sagaMiddleware)
 	);
 }
diff --git a/app/lib/dimensionsMiddleware.js b/app/lib/dimensionsMiddleware.js
index 9e56a037adc..64db5c23046 100644
--- a/app/lib/dimensionsMiddleware.js
+++ b/app/lib/dimensionsMiddleware.js
@@ -1,35 +1,23 @@
 import { Dimensions } from 'react-native';
 
-import { DIMENSIONS } from '../actions/actionsTypes';
+import { dimensionsWindow, dimensionsScreen } from '../actions/dimensions';
 
 export default () => createStore => (...args) => {
 	const store = createStore(...args);
 
-	let currentState = '';
-	let payload = '';
-
 	const handleDimensionsChange = (nextDimensionState) => {
-		if (currentState !== nextDimensionState) {
-			let type;
-			if (nextDimensionState === 'window') {
-				type = DIMENSIONS.WINDOW;
-				payload = Dimensions.get('window');
-			} else if (nextDimensionState === 'screen') {
-				type = DIMENSIONS.SCREEN;
-				payload = Dimensions.get('screen');
+		if (nextDimensionState) {
+			if (nextDimensionState.window) {
+				store.dispatch(dimensionsWindow(nextDimensionState.window));
 			}
-			if (type) {
-				store.dispatch({
-					type,
-					payload
-				});
+			if (nextDimensionState.screen) {
+				store.dispatch(dimensionsScreen(nextDimensionState.screen));
 			}
 		}
-		currentState = nextDimensionState;
 	};
 
 	Dimensions.addEventListener('change', handleDimensionsChange);
 
-	setTimeout(() => handleDimensionsChange(Dimensions.currentState));
+	setTimeout(() => handleDimensionsChange({ ...Dimensions.get('window'), ...Dimensions.get('screen') }));
 	return store;
 };
diff --git a/app/reducers/dimensions.js b/app/reducers/dimensions.js
index c88206757c7..c03bd39132a 100644
--- a/app/reducers/dimensions.js
+++ b/app/reducers/dimensions.js
@@ -1,8 +1,8 @@
 import { DIMENSIONS } from '../actions/actionsTypes';
 
 const initialState = {
-	window: null,
-	screen: null
+	window: {},
+	screen: {}
 };
 
 export default function(state = initialState, action) {
diff --git a/app/reducers/index.js b/app/reducers/index.js
index dead110fbfd..494ebaf939d 100644
--- a/app/reducers/index.js
+++ b/app/reducers/index.js
@@ -17,6 +17,7 @@ import activeUsers from './activeUsers';
 import usersTyping from './usersTyping';
 import inviteLinks from './inviteLinks';
 import createDiscussion from './createDiscussion';
+import dimensions from './dimensions';
 
 export default combineReducers({
 	settings,
@@ -36,5 +37,6 @@ export default combineReducers({
 	activeUsers,
 	usersTyping,
 	inviteLinks,
-	createDiscussion
+	createDiscussion,
+	dimensions
 });

From 89bc1643abcd6f1af401d9985c3bc708822dfc8b Mon Sep 17 00:00:00 2001
From: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>
Date: Tue, 12 May 2020 00:19:16 -0300
Subject: [PATCH 04/10] Change lib for props

Signed-off-by: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>
---
 app/containers/MessageBox/UploadModal.js      |  8 ++++--
 app/notifications/inApp/index.js              |  6 ++---
 app/presentation/ImageViewer/index.android.js | 27 +++++++++++--------
 app/views/RoomView/Header/index.js            |  6 ++---
 app/views/RoomView/ReactionPicker.js          |  6 ++---
 app/views/RoomView/UploadProgress.js          |  8 ++++--
 6 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/app/containers/MessageBox/UploadModal.js b/app/containers/MessageBox/UploadModal.js
index 87734785419..33de96911e0 100644
--- a/app/containers/MessageBox/UploadModal.js
+++ b/app/containers/MessageBox/UploadModal.js
@@ -4,7 +4,7 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 import Modal from 'react-native-modal';
-import { responsive } from 'react-native-responsive-ui';
+import { connect } from 'react-redux';
 import equal from 'deep-equal';
 
 import TextInput from '../TextInput';
@@ -252,4 +252,8 @@ class UploadModal extends Component {
 	}
 }
 
-export default responsive(withTheme(withSplit(UploadModal)));
+const mapStateToProps = state => ({
+	window: state.dimensions.window
+});
+
+export default connect(mapStateToProps)(withTheme(withSplit(UploadModal)));
diff --git a/app/notifications/inApp/index.js b/app/notifications/inApp/index.js
index 3862846a058..9bab87d0f12 100644
--- a/app/notifications/inApp/index.js
+++ b/app/notifications/inApp/index.js
@@ -5,7 +5,6 @@ import {
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import equal from 'deep-equal';
-import { responsive } from 'react-native-responsive-ui';
 import Touchable from 'react-native-platform-touchable';
 
 import { hasNotch, isIOS, isTablet } from '../../utils/deviceInfo';
@@ -234,11 +233,12 @@ class NotificationBadge extends React.Component {
 const mapStateToProps = state => ({
 	user: getUserSelector(state),
 	baseUrl: state.server.server,
-	notification: state.notification
+	notification: state.notification,
+	window: state.dimensions.window
 });
 
 const mapDispatchToProps = dispatch => ({
 	removeNotification: () => dispatch(removeNotificationAction())
 });
 
-export default responsive(connect(mapStateToProps, mapDispatchToProps)(withTheme(NotificationBadge)));
+export default connect(mapStateToProps, mapDispatchToProps)(withTheme(NotificationBadge));
diff --git a/app/presentation/ImageViewer/index.android.js b/app/presentation/ImageViewer/index.android.js
index 86af0ecd568..1ba2a328db3 100644
--- a/app/presentation/ImageViewer/index.android.js
+++ b/app/presentation/ImageViewer/index.android.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { StyleSheet, View } from 'react-native';
 import PropTypes from 'prop-types';
 import {
@@ -8,7 +8,7 @@ import {
 } from 'react-native-gesture-handler';
 import FastImage from 'react-native-fast-image';
 import Animated, { Easing } from 'react-native-reanimated';
-import { ResponsiveComponent } from 'react-native-responsive-ui';
+import { connect } from 'react-redux';
 
 const AnimatedFastImage = Animated.createAnimatedComponent(FastImage);
 
@@ -264,13 +264,10 @@ const HEIGHT = 300;
 
 // it was picked from https://github.com/software-mansion/react-native-reanimated/tree/master/Example/imageViewer
 // and changed to use FastImage animated component
-class ImageViewer extends ResponsiveComponent {
-	pinchRef = React.createRef();
-
-	panRef = React.createRef();
-
+class ImageViewer extends Component {
 	static propTypes = {
-		uri: PropTypes.string
+		uri: PropTypes.string,
+		window: PropTypes.object
 	}
 
 	constructor(props) {
@@ -382,9 +379,13 @@ class ImageViewer extends ResponsiveComponent {
 		);
 	}
 
+	pinchRef = React.createRef();
+
+	panRef = React.createRef();
+
 	render() {
-		const { uri, ...props } = this.props;
-		const { width } = this.state.window;
+		const { uri, window, ...props } = this.props;
+		const { width } = window;
 
 		// The below two animated values makes it so that scale appears to be done
 		// from the top left corner of the image view instead of its center. This
@@ -439,4 +440,8 @@ class ImageViewer extends ResponsiveComponent {
 	}
 }
 
-export default ImageViewer;
+const mapStateToProps = state => ({
+	window: state.dimensions.window
+});
+
+export default connect(mapStateToProps)(ImageViewer);
diff --git a/app/views/RoomView/Header/index.js b/app/views/RoomView/Header/index.js
index 8b1bec52f1c..9f124c87ef1 100644
--- a/app/views/RoomView/Header/index.js
+++ b/app/views/RoomView/Header/index.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { responsive } from 'react-native-responsive-ui';
 import equal from 'deep-equal';
 
 import Header from './Header';
@@ -110,10 +109,11 @@ const mapStateToProps = (state, ownProps) => {
 		connecting: state.meteor.connecting,
 		usersTyping: state.usersTyping,
 		status,
-		statusText
+		statusText,
+		window: state.dimensions.window
 	};
 };
 
-export default responsive(connect(mapStateToProps)(withTheme(RoomHeaderView)));
+export default connect(mapStateToProps)(withTheme(RoomHeaderView));
 
 export { RightButtons, RoomHeaderLeft };
diff --git a/app/views/RoomView/ReactionPicker.js b/app/views/RoomView/ReactionPicker.js
index 3a10b3fcb67..4470d0cbed6 100644
--- a/app/views/RoomView/ReactionPicker.js
+++ b/app/views/RoomView/ReactionPicker.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { View } from 'react-native';
 import { connect } from 'react-redux';
 import Modal from 'react-native-modal';
-import { responsive } from 'react-native-responsive-ui';
 
 import EmojiPicker from '../../containers/EmojiPicker';
 import styles from './styles';
@@ -83,7 +82,8 @@ class ReactionPicker extends React.Component {
 }
 
 const mapStateToProps = state => ({
-	baseUrl: state.server.server
+	baseUrl: state.server.server,
+	window: state.dimensions.window
 });
 
-export default responsive(connect(mapStateToProps)(withSplit(ReactionPicker)));
+export default connect(mapStateToProps)(withSplit(ReactionPicker));
diff --git a/app/views/RoomView/UploadProgress.js b/app/views/RoomView/UploadProgress.js
index ae0ca9dc913..208a8b0b38d 100644
--- a/app/views/RoomView/UploadProgress.js
+++ b/app/views/RoomView/UploadProgress.js
@@ -3,8 +3,8 @@ import {
 	View, Text, StyleSheet, TouchableOpacity, ScrollView
 } from 'react-native';
 import PropTypes from 'prop-types';
-import { responsive } from 'react-native-responsive-ui';
 import { Q } from '@nozbe/watermelondb';
+import { connect } from 'react-redux';
 
 import database from '../../lib/database';
 import RocketChat from '../../lib/rocketchat';
@@ -228,4 +228,8 @@ class UploadProgress extends Component {
 	}
 }
 
-export default responsive(withTheme(UploadProgress));
+const mapStateToProps = state => ({
+	window: state.dimensions.window
+});
+
+export default connect(mapStateToProps)(withTheme(UploadProgress));

From 4f2f2064a74416cabdc739b5899a14dc7b3df033 Mon Sep 17 00:00:00 2001
From: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>
Date: Tue, 12 May 2020 00:24:44 -0300
Subject: [PATCH 05/10] react-native-responsive-ui removed

Signed-off-by: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>
---
 package.json | 5 ++---
 yarn.lock    | 7 -------
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 6a9d1d050ea..1faf43b32d9 100644
--- a/package.json
+++ b/package.json
@@ -41,8 +41,8 @@
     "expo-av": "^8.1.0",
     "expo-file-system": "^8.1.0",
     "expo-haptics": "^8.1.0",
-    "expo-local-authentication": "9.0.0",
     "expo-keep-awake": "^8.1.0",
+    "expo-local-authentication": "9.0.0",
     "expo-web-browser": "8.2.1",
     "hoist-non-react-statics": "3.3.2",
     "i18n-js": "3.5.1",
@@ -54,7 +54,7 @@
     "react": "16.11.0",
     "react-native": "0.62.2",
     "react-native-action-sheet": "^2.2.0",
-    "react-native-animatable": "^1.3.3",    
+    "react-native-animatable": "^1.3.3",
     "react-native-appearance": "0.3.4",
     "react-native-audio": "^4.3.0",
     "react-native-background-timer": "2.2.0",
@@ -86,7 +86,6 @@
     "react-native-progress": "4.1.2",
     "react-native-prompt-android": "^1.1.0",
     "react-native-reanimated": "1.8.0",
-    "react-native-responsive-ui": "^1.1.1",
     "react-native-screens": "2.7.0",
     "react-native-scrollable-tab-view": "^1.0.0",
     "react-native-slowlog": "^1.0.2",
diff --git a/yarn.lock b/yarn.lock
index bafa6064549..5961e2c4d50 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13479,13 +13479,6 @@ react-native-reanimated@1.8.0:
   dependencies:
     fbjs "^1.0.0"
 
-react-native-responsive-ui@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/react-native-responsive-ui/-/react-native-responsive-ui-1.1.1.tgz#eb41839d4f3951ff025660185c36a9a9ce33759f"
-  integrity sha1-60GDnU85Uf8CVmAYXDapqc4zdZ8=
-  dependencies:
-    lodash "^4.17.4"
-
 react-native-safe-area-view@^0.14.6:
   version "0.14.8"
   resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.14.8.tgz#ef33c46ff8164ae77acad48c3039ec9c34873e5b"

From a43180623ec52d2ae1ea9dee9513d76db83fecc6 Mon Sep 17 00:00:00 2001
From: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>
Date: Wed, 27 May 2020 02:15:41 -0300
Subject: [PATCH 06/10] Using dimensions middleware instead of directly
 Dimensions.get

Signed-off-by: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>
---
 app/actions/dimensions.js                     |  7 -----
 app/containers/EmojiPicker/EmojiCategory.js   |  8 +-----
 app/containers/MessageBox/UploadModal.js      | 15 ++++-------
 app/containers/MessageBox/index.js            | 11 +++++---
 app/containers/message/Attachments.js         |  7 ++---
 app/containers/message/Audio.js               | 16 ++++++++----
 app/containers/message/Message.js             |  3 ++-
 app/containers/message/index.js               | 13 +++++++---
 app/lib/dimensionsMiddleware.js               | 20 ++++++++------
 app/notifications/inApp/index.js              | 16 +++++++-----
 app/presentation/ImageViewer/index.android.js |  7 +++--
 app/reducers/dimensions.js                    | 16 +++++-------
 app/views/RoomView/Header/index.js            | 26 ++++++++++++-------
 app/views/RoomView/ReactionPicker.js          | 16 +++++++-----
 app/views/RoomView/UploadProgress.js          | 13 +++-------
 app/views/RoomView/index.js                   | 14 +++++++---
 app/views/RoomsListView/index.js              | 24 +++++++----------
 17 files changed, 121 insertions(+), 111 deletions(-)

diff --git a/app/actions/dimensions.js b/app/actions/dimensions.js
index a6fafcac532..7d8b71a6a93 100644
--- a/app/actions/dimensions.js
+++ b/app/actions/dimensions.js
@@ -6,10 +6,3 @@ export function dimensionsWindow(window) {
 		window
 	};
 }
-
-export function dimensionsScreen(screen) {
-	return {
-		type: DIMENSIONS.SCREEN,
-		screen
-	};
-}
diff --git a/app/containers/EmojiPicker/EmojiCategory.js b/app/containers/EmojiPicker/EmojiCategory.js
index 26061add482..8e1a124ffaf 100644
--- a/app/containers/EmojiPicker/EmojiCategory.js
+++ b/app/containers/EmojiPicker/EmojiCategory.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text, TouchableOpacity, FlatList } from 'react-native';
-import { connect } from 'react-redux';
 
 import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import styles from './styles';
@@ -25,7 +24,6 @@ class EmojiCategory extends React.Component {
 	static propTypes = {
 		baseUrl: PropTypes.string.isRequired,
 		emojis: PropTypes.any,
-		window: PropTypes.any,
 		onEmojiSelected: PropTypes.func,
 		emojisPerRow: PropTypes.number,
 		width: PropTypes.number
@@ -73,8 +71,4 @@ class EmojiCategory extends React.Component {
 	}
 }
 
-const mapStateToProps = state => ({
-	window: state.dimensions.window
-});
-
-export default connect(mapStateToProps)(EmojiCategory);
+export default EmojiCategory;
diff --git a/app/containers/MessageBox/UploadModal.js b/app/containers/MessageBox/UploadModal.js
index 33de96911e0..1f8d703b55a 100644
--- a/app/containers/MessageBox/UploadModal.js
+++ b/app/containers/MessageBox/UploadModal.js
@@ -4,7 +4,6 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 import Modal from 'react-native-modal';
-import { connect } from 'react-redux';
 import equal from 'deep-equal';
 
 import TextInput from '../TextInput';
@@ -89,7 +88,7 @@ class UploadModal extends Component {
 		file: PropTypes.object,
 		close: PropTypes.func,
 		submit: PropTypes.func,
-		window: PropTypes.object,
+		width: PropTypes.number,
 		theme: PropTypes.string,
 		split: PropTypes.bool
 	}
@@ -114,7 +113,7 @@ class UploadModal extends Component {
 	shouldComponentUpdate(nextProps, nextState) {
 		const { name, description, file } = this.state;
 		const {
-			window, isVisible, split, theme
+			width, isVisible, split, theme
 		} = this.props;
 
 		if (nextState.name !== name) {
@@ -132,7 +131,7 @@ class UploadModal extends Component {
 		if (nextProps.isVisible !== isVisible) {
 			return true;
 		}
-		if (nextProps.window.width !== window.width) {
+		if (nextProps.width !== width) {
 			return true;
 		}
 		if (!equal(nextState.file, file)) {
@@ -210,7 +209,7 @@ class UploadModal extends Component {
 
 	render() {
 		const {
-			window: { width }, isVisible, close, split, theme
+			width, isVisible, close, split, theme
 		} = this.props;
 		const { name, description } = this.state;
 		return (
@@ -252,8 +251,4 @@ class UploadModal extends Component {
 	}
 }
 
-const mapStateToProps = state => ({
-	window: state.dimensions.window
-});
-
-export default connect(mapStateToProps)(withTheme(withSplit(UploadModal)));
+export default withTheme(withSplit(UploadModal));
diff --git a/app/containers/MessageBox/index.js b/app/containers/MessageBox/index.js
index 39e29dbc7b6..6f0ad7de8c4 100644
--- a/app/containers/MessageBox/index.js
+++ b/app/containers/MessageBox/index.js
@@ -95,7 +95,8 @@ class MessageBox extends Component {
 		typing: PropTypes.func,
 		theme: PropTypes.string,
 		replyCancel: PropTypes.func,
-		navigation: PropTypes.object
+		navigation: PropTypes.object,
+		width: PropTypes.number
 	}
 
 	constructor(props) {
@@ -875,7 +876,9 @@ class MessageBox extends Component {
 	render() {
 		console.count(`${ this.constructor.name }.render calls`);
 		const { showEmojiKeyboard, file } = this.state;
-		const { user, baseUrl, theme } = this.props;
+		const {
+			user, baseUrl, theme, width
+		} = this.props;
 		return (
 			<MessageboxContext.Provider
 				value={{
@@ -903,6 +906,7 @@ class MessageBox extends Component {
 					file={file}
 					close={() => this.setState({ file: {} })}
 					submit={this.sendMediaMessage}
+					width={width}
 				/>
 			</MessageboxContext.Provider>
 		);
@@ -915,7 +919,8 @@ const mapStateToProps = state => ({
 	user: getUserSelector(state),
 	FileUpload_MediaTypeWhiteList: state.settings.FileUpload_MediaTypeWhiteList,
 	FileUpload_MaxFileSize: state.settings.FileUpload_MaxFileSize,
-	Message_AudioRecorderEnabled: state.settings.Message_AudioRecorderEnabled
+	Message_AudioRecorderEnabled: state.settings.Message_AudioRecorderEnabled,
+	width: state.dimensions.width
 });
 
 const dispatchToProps = ({
diff --git a/app/containers/message/Attachments.js b/app/containers/message/Attachments.js
index 3d4ff48b4bf..fb42cb91bcf 100644
--- a/app/containers/message/Attachments.js
+++ b/app/containers/message/Attachments.js
@@ -8,7 +8,7 @@ import Video from './Video';
 import Reply from './Reply';
 
 const Attachments = React.memo(({
-	attachments, timeFormat, showAttachment, getCustomEmoji, theme
+	attachments, timeFormat, showAttachment, getCustomEmoji, theme, scale
 }) => {
 	if (!attachments || attachments.length === 0) {
 		return null;
@@ -19,7 +19,7 @@ const Attachments = React.memo(({
 			return <Image key={file.image_url} file={file} showAttachment={showAttachment} getCustomEmoji={getCustomEmoji} theme={theme} />;
 		}
 		if (file.audio_url) {
-			return <Audio key={file.audio_url} file={file} getCustomEmoji={getCustomEmoji} theme={theme} />;
+			return <Audio key={file.audio_url} file={file} getCustomEmoji={getCustomEmoji} theme={theme} scale={scale} />;
 		}
 		if (file.video_url) {
 			return <Video key={file.video_url} file={file} showAttachment={showAttachment} getCustomEmoji={getCustomEmoji} theme={theme} />;
@@ -35,7 +35,8 @@ Attachments.propTypes = {
 	timeFormat: PropTypes.string,
 	showAttachment: PropTypes.func,
 	getCustomEmoji: PropTypes.func,
-	theme: PropTypes.string
+	theme: PropTypes.string,
+	scale: PropTypes.number
 };
 Attachments.displayName = 'MessageAttachments';
 
diff --git a/app/containers/message/Audio.js b/app/containers/message/Audio.js
index 5621a8d071d..41f57b570fc 100644
--- a/app/containers/message/Audio.js
+++ b/app/containers/message/Audio.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-	View, StyleSheet, Text, Easing, Dimensions
+	View, StyleSheet, Text, Easing
 } from 'react-native';
 import { Audio } from 'expo-av';
 import Slider from '@react-native-community/slider';
@@ -99,7 +99,8 @@ class MessageAudio extends React.Component {
 		file: PropTypes.object.isRequired,
 		theme: PropTypes.string,
 		split: PropTypes.bool,
-		getCustomEmoji: PropTypes.func
+		getCustomEmoji: PropTypes.func,
+		scale: PropTypes.number
 	}
 
 	constructor(props) {
@@ -138,10 +139,15 @@ class MessageAudio extends React.Component {
 		const {
 			currentTime, duration, paused, loading
 		} = this.state;
-		const { file, split, theme } = this.props;
+		const {
+			file, split, theme, scale
+		} = this.props;
 		if (nextProps.theme !== theme) {
 			return true;
 		}
+		if (nextProps.scale !== scale) {
+			return true;
+		}
 		if (nextState.currentTime !== currentTime) {
 			return true;
 		}
@@ -249,7 +255,7 @@ class MessageAudio extends React.Component {
 			loading, paused, currentTime, duration
 		} = this.state;
 		const {
-			file, getCustomEmoji, split, theme
+			file, getCustomEmoji, split, theme, scale
 		} = this.props;
 		const { description } = file;
 		const { baseUrl, user } = this.context;
@@ -279,7 +285,7 @@ class MessageAudio extends React.Component {
 						minimumTrackTintColor={themes[theme].tintColor}
 						maximumTrackTintColor={themes[theme].auxiliaryText}
 						onValueChange={this.onValueChange}
-						thumbImage={isIOS && { uri: 'audio_thumb', scale: Dimensions.get('window').scale }}
+						thumbImage={isIOS && { uri: 'audio_thumb', scale }}
 					/>
 					<Text style={[styles.duration, { color: themes[theme].auxiliaryText }]}>{this.duration}</Text>
 				</View>
diff --git a/app/containers/message/Message.js b/app/containers/message/Message.js
index ef356c231fe..b5c7335658b 100644
--- a/app/containers/message/Message.js
+++ b/app/containers/message/Message.js
@@ -151,7 +151,8 @@ Message.propTypes = {
 
 MessageInner.propTypes = {
 	type: PropTypes.string,
-	blocks: PropTypes.array
+	blocks: PropTypes.array,
+	scale: PropTypes.number
 };
 
 export default MessageTouchable;
diff --git a/app/containers/message/index.js b/app/containers/message/index.js
index 207e5e70cf4..a4a5a7f6cc1 100644
--- a/app/containers/message/index.js
+++ b/app/containers/message/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { KeyboardUtils } from 'react-native-keyboard-input';
+import { connect } from 'react-redux';
 
 import Message from './Message';
 import MessageContext from './Context';
@@ -46,7 +47,8 @@ class MessageContainer extends React.Component {
 		navToRoomInfo: PropTypes.func,
 		callJitsi: PropTypes.func,
 		blockAction: PropTypes.func,
-		theme: PropTypes.string
+		theme: PropTypes.string,
+		scale: PropTypes.number
 	}
 
 	static defaultProps = {
@@ -227,7 +229,7 @@ class MessageContainer extends React.Component {
 
 	render() {
 		const {
-			item, user, style, archived, baseUrl, useRealName, broadcast, fetchThreadName, customThreadTimeFormat, showAttachment, timeFormat, isReadReceiptEnabled, autoTranslateRoom, autoTranslateLanguage, navToRoomInfo, getCustomEmoji, isThreadRoom, callJitsi, blockAction, rid, theme
+			item, user, style, archived, baseUrl, useRealName, broadcast, fetchThreadName, customThreadTimeFormat, showAttachment, timeFormat, isReadReceiptEnabled, autoTranslateRoom, autoTranslateLanguage, navToRoomInfo, getCustomEmoji, isThreadRoom, callJitsi, blockAction, rid, theme, scale
 		} = this.props;
 		const {
 			id, msg, ts, attachments, urls, reactions, t, avatar, emoji, u, alias, editedBy, role, drid, dcount, dlm, tmid, tcount, tlm, tmsg, mentions, channels, unread, blocks, autoTranslate: autoTranslateMessage
@@ -302,10 +304,15 @@ class MessageContainer extends React.Component {
 					callJitsi={callJitsi}
 					blockAction={blockAction}
 					theme={theme}
+					scale={scale}
 				/>
 			</MessageContext.Provider>
 		);
 	}
 }
 
-export default withTheme(MessageContainer);
+const mapStateToProps = state => ({
+	scale: state.dimensions.scale
+});
+
+export default connect(mapStateToProps)(withTheme(MessageContainer));
diff --git a/app/lib/dimensionsMiddleware.js b/app/lib/dimensionsMiddleware.js
index 64db5c23046..2f0ca358bbe 100644
--- a/app/lib/dimensionsMiddleware.js
+++ b/app/lib/dimensionsMiddleware.js
@@ -1,23 +1,27 @@
 import { Dimensions } from 'react-native';
+import { isEqual } from 'lodash';
 
-import { dimensionsWindow, dimensionsScreen } from '../actions/dimensions';
+
+import { dimensionsWindow } from '../actions/dimensions';
 
 export default () => createStore => (...args) => {
 	const store = createStore(...args);
 
+	let currentDimensions = '';
+
 	const handleDimensionsChange = (nextDimensionState) => {
-		if (nextDimensionState) {
-			if (nextDimensionState.window) {
-				store.dispatch(dimensionsWindow(nextDimensionState.window));
-			}
-			if (nextDimensionState.screen) {
-				store.dispatch(dimensionsScreen(nextDimensionState.screen));
+		if (!isEqual(currentDimensions, nextDimensionState)) {
+			if (nextDimensionState) {
+				if (nextDimensionState.window) {
+					store.dispatch(dimensionsWindow(nextDimensionState.window));
+				}
 			}
+			currentDimensions = nextDimensionState;
 		}
 	};
 
 	Dimensions.addEventListener('change', handleDimensionsChange);
 
-	setTimeout(() => handleDimensionsChange({ ...Dimensions.get('window'), ...Dimensions.get('screen') }));
+	setTimeout(() => handleDimensionsChange(Dimensions.get('window')));
 	return store;
 };
diff --git a/app/notifications/inApp/index.js b/app/notifications/inApp/index.js
index 9bab87d0f12..1ccf0cd4992 100644
--- a/app/notifications/inApp/index.js
+++ b/app/notifications/inApp/index.js
@@ -74,9 +74,10 @@ class NotificationBadge extends React.Component {
 		baseUrl: PropTypes.string,
 		user: PropTypes.object,
 		notification: PropTypes.object,
-		window: PropTypes.object,
 		removeNotification: PropTypes.func,
-		theme: PropTypes.string
+		theme: PropTypes.string,
+		width: PropTypes.number,
+		height: PropTypes.number
 	}
 
 	constructor(props) {
@@ -87,7 +88,7 @@ class NotificationBadge extends React.Component {
 	shouldComponentUpdate(nextProps) {
 		const { notification: nextNotification } = nextProps;
 		const {
-			notification: { payload }, window, theme
+			notification: { payload }, width, theme
 		} = this.props;
 		if (nextProps.theme !== theme) {
 			return true;
@@ -95,7 +96,7 @@ class NotificationBadge extends React.Component {
 		if (!equal(nextNotification.payload, payload)) {
 			return true;
 		}
-		if (nextProps.window.width !== window.width) {
+		if (nextProps.width !== width) {
 			return true;
 		}
 		return false;
@@ -175,7 +176,7 @@ class NotificationBadge extends React.Component {
 
 	render() {
 		const {
-			baseUrl, user: { id: userId, token }, notification, window, theme
+			baseUrl, user: { id: userId, token }, notification, width, height, theme
 		} = this.props;
 		const { message, payload } = notification;
 		const { type } = payload;
@@ -185,7 +186,7 @@ class NotificationBadge extends React.Component {
 
 		let top = 0;
 		if (isIOS) {
-			const portrait = window.height > window.width;
+			const portrait = height > width;
 			if (portrait) {
 				top = hasNotch ? 45 : 20;
 			} else {
@@ -234,7 +235,8 @@ const mapStateToProps = state => ({
 	user: getUserSelector(state),
 	baseUrl: state.server.server,
 	notification: state.notification,
-	window: state.dimensions.window
+	width: state.dimensions.width,
+	height: state.dimensions.height
 });
 
 const mapDispatchToProps = dispatch => ({
diff --git a/app/presentation/ImageViewer/index.android.js b/app/presentation/ImageViewer/index.android.js
index 1ba2a328db3..50ae390c3c8 100644
--- a/app/presentation/ImageViewer/index.android.js
+++ b/app/presentation/ImageViewer/index.android.js
@@ -267,7 +267,7 @@ const HEIGHT = 300;
 class ImageViewer extends Component {
 	static propTypes = {
 		uri: PropTypes.string,
-		window: PropTypes.object
+		width: PropTypes.number
 	}
 
 	constructor(props) {
@@ -384,8 +384,7 @@ class ImageViewer extends Component {
 	panRef = React.createRef();
 
 	render() {
-		const { uri, window, ...props } = this.props;
-		const { width } = window;
+		const { uri, width, ...props } = this.props;
 
 		// The below two animated values makes it so that scale appears to be done
 		// from the top left corner of the image view instead of its center. This
@@ -441,7 +440,7 @@ class ImageViewer extends Component {
 }
 
 const mapStateToProps = state => ({
-	window: state.dimensions.window
+	width: state.dimensions.width
 });
 
 export default connect(mapStateToProps)(ImageViewer);
diff --git a/app/reducers/dimensions.js b/app/reducers/dimensions.js
index c03bd39132a..a9d1ac9a17f 100644
--- a/app/reducers/dimensions.js
+++ b/app/reducers/dimensions.js
@@ -1,21 +1,17 @@
+import { Dimensions } from 'react-native';
 import { DIMENSIONS } from '../actions/actionsTypes';
 
-const initialState = {
-	window: {},
-	screen: {}
-};
+const initialState = Dimensions.get('window');
 
 export default function(state = initialState, action) {
 	switch (action.type) {
 		case DIMENSIONS.WINDOW:
 			return {
 				...state,
-				window: action.window
-			};
-		case DIMENSIONS.SCREEN:
-			return {
-				...state,
-				screen: action.screen
+				scale: action.window.scale,
+				width: action.window.width,
+				height: action.window.height,
+				fontScale: action.window.fontScale
 			};
 		default:
 			return state;
diff --git a/app/views/RoomView/Header/index.js b/app/views/RoomView/Header/index.js
index 9f124c87ef1..4311eccf2a3 100644
--- a/app/views/RoomView/Header/index.js
+++ b/app/views/RoomView/Header/index.js
@@ -16,19 +16,20 @@ class RoomHeaderView extends Component {
 		prid: PropTypes.string,
 		tmid: PropTypes.string,
 		usersTyping: PropTypes.string,
-		window: PropTypes.object,
 		status: PropTypes.string,
 		statusText: PropTypes.string,
 		connecting: PropTypes.bool,
 		theme: PropTypes.string,
 		roomUserId: PropTypes.string,
 		widthOffset: PropTypes.number,
-		goRoomActionsView: PropTypes.func
+		goRoomActionsView: PropTypes.func,
+		width: PropTypes.number,
+		height: PropTypes.number
 	};
 
 	shouldComponentUpdate(nextProps) {
 		const {
-			type, title, subtitle, status, statusText, window, connecting, goRoomActionsView, usersTyping, theme
+			type, title, subtitle, status, statusText, connecting, goRoomActionsView, usersTyping, theme, width, height
 		} = this.props;
 		if (nextProps.theme !== theme) {
 			return true;
@@ -51,10 +52,10 @@ class RoomHeaderView extends Component {
 		if (nextProps.connecting !== connecting) {
 			return true;
 		}
-		if (nextProps.window.width !== window.width) {
+		if (nextProps.width !== width) {
 			return true;
 		}
-		if (nextProps.window.height !== window.height) {
+		if (nextProps.height !== height) {
 			return true;
 		}
 		if (!equal(nextProps.usersTyping, usersTyping)) {
@@ -63,12 +64,18 @@ class RoomHeaderView extends Component {
 		if (nextProps.goRoomActionsView !== goRoomActionsView) {
 			return true;
 		}
+		if (nextProps.width !== width) {
+			return true;
+		}
+		if (nextProps.height !== height) {
+			return true;
+		}
 		return false;
 	}
 
 	render() {
 		const {
-			window, title, subtitle, type, prid, tmid, widthOffset, status = 'offline', statusText, connecting, usersTyping, goRoomActionsView, roomUserId, theme
+			title, subtitle, type, prid, tmid, widthOffset, status = 'offline', statusText, connecting, usersTyping, goRoomActionsView, roomUserId, theme, width, height
 		} = this.props;
 
 		return (
@@ -79,8 +86,8 @@ class RoomHeaderView extends Component {
 				subtitle={type === 'd' ? statusText : subtitle}
 				type={type}
 				status={status}
-				width={window.width}
-				height={window.height}
+				width={width}
+				height={height}
 				theme={theme}
 				usersTyping={usersTyping}
 				widthOffset={widthOffset}
@@ -110,7 +117,8 @@ const mapStateToProps = (state, ownProps) => {
 		usersTyping: state.usersTyping,
 		status,
 		statusText,
-		window: state.dimensions.window
+		width: state.dimensions.width,
+		height: state.dimensions.height
 	};
 };
 
diff --git a/app/views/RoomView/ReactionPicker.js b/app/views/RoomView/ReactionPicker.js
index 4470d0cbed6..d1632e830fa 100644
--- a/app/views/RoomView/ReactionPicker.js
+++ b/app/views/RoomView/ReactionPicker.js
@@ -15,17 +15,20 @@ const maxSize = 400;
 class ReactionPicker extends React.Component {
 	static propTypes = {
 		baseUrl: PropTypes.string.isRequired,
-		window: PropTypes.any,
 		message: PropTypes.object,
 		show: PropTypes.bool,
 		reactionClose: PropTypes.func,
 		onEmojiSelected: PropTypes.func,
-		split: PropTypes.bool
+		split: PropTypes.bool,
+		width: PropTypes.number,
+		height: PropTypes.number
 	};
 
 	shouldComponentUpdate(nextProps) {
-		const { show, window, split } = this.props;
-		return nextProps.show !== show || window.width !== nextProps.window.width || nextProps.split !== split;
+		const {
+			show, width, height, split
+		} = this.props;
+		return nextProps.show !== show || width !== nextProps.width || height !== nextProps.height || nextProps.split !== split;
 	}
 
 	onEmojiSelected = (emoji, shortname) => {
@@ -38,7 +41,7 @@ class ReactionPicker extends React.Component {
 
 	render() {
 		const {
-			window: { width, height }, show, baseUrl, reactionClose, split
+			width, height, show, baseUrl, reactionClose, split
 		} = this.props;
 
 		let widthStyle = width - margin;
@@ -82,8 +85,7 @@ class ReactionPicker extends React.Component {
 }
 
 const mapStateToProps = state => ({
-	baseUrl: state.server.server,
-	window: state.dimensions.window
+	baseUrl: state.server.server
 });
 
 export default connect(mapStateToProps)(withSplit(ReactionPicker));
diff --git a/app/views/RoomView/UploadProgress.js b/app/views/RoomView/UploadProgress.js
index 208a8b0b38d..0ed64ab676f 100644
--- a/app/views/RoomView/UploadProgress.js
+++ b/app/views/RoomView/UploadProgress.js
@@ -4,7 +4,6 @@ import {
 } from 'react-native';
 import PropTypes from 'prop-types';
 import { Q } from '@nozbe/watermelondb';
-import { connect } from 'react-redux';
 
 import database from '../../lib/database';
 import RocketChat from '../../lib/rocketchat';
@@ -56,7 +55,7 @@ const styles = StyleSheet.create({
 
 class UploadProgress extends Component {
 	static propTypes = {
-		window: PropTypes.object,
+		width: PropTypes.number,
 		rid: PropTypes.string,
 		theme: PropTypes.string,
 		user: PropTypes.shape({
@@ -167,7 +166,7 @@ class UploadProgress extends Component {
 	}
 
 	renderItemContent = (item) => {
-		const { window, theme } = this.props;
+		const { width, theme } = this.props;
 
 		if (!item.error) {
 			return (
@@ -179,7 +178,7 @@ class UploadProgress extends Component {
 						</Text>
 						<CustomIcon name='cross' size={20} color={themes[theme].auxiliaryText} onPress={() => this.cancelUpload(item)} />
 					</View>,
-					<View key='progress' style={[styles.progress, { width: (window.width * item.progress) / 100, backgroundColor: themes[theme].tintColor }]} />
+					<View key='progress' style={[styles.progress, { width: (width * item.progress) / 100, backgroundColor: themes[theme].tintColor }]} />
 				]
 			);
 		}
@@ -228,8 +227,4 @@ class UploadProgress extends Component {
 	}
 }
 
-const mapStateToProps = state => ({
-	window: state.dimensions.window
-});
-
-export default connect(mapStateToProps)(withTheme(UploadProgress));
+export default withTheme(UploadProgress);
diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js
index 5dba91af79f..d3d3cf60d46 100644
--- a/app/views/RoomView/index.js
+++ b/app/views/RoomView/index.js
@@ -154,7 +154,9 @@ class RoomView extends React.Component {
 		customEmojis: PropTypes.object,
 		screenProps: PropTypes.object,
 		theme: PropTypes.string,
-		replyBroadcast: PropTypes.func
+		replyBroadcast: PropTypes.func,
+		width: PropTypes.number,
+		height: PropTypes.number
 	};
 
 	constructor(props) {
@@ -1008,7 +1010,7 @@ class RoomView extends React.Component {
 			room, reactionsModalVisible, selectedMessage, loading, reacting
 		} = this.state;
 		const {
-			user, baseUrl, theme, navigation, Hide_System_Messages
+			user, baseUrl, theme, navigation, Hide_System_Messages, width, height
 		} = this.props;
 		const {
 			rid, t, sysMes, bannerClosed, announcement
@@ -1052,8 +1054,10 @@ class RoomView extends React.Component {
 					message={selectedMessage}
 					onEmojiSelected={this.onReactionPress}
 					reactionClose={this.onReactionClose}
+					width={width}
+					height={height}
 				/>
-				<UploadProgress rid={this.rid} user={user} baseUrl={baseUrl} />
+				<UploadProgress rid={this.rid} user={user} baseUrl={baseUrl} width={width} />
 				<ReactionsModal
 					message={selectedMessage}
 					isVisible={reactionsModalVisible}
@@ -1077,7 +1081,9 @@ const mapStateToProps = state => ({
 	customEmojis: state.customEmojis,
 	baseUrl: state.server.server,
 	Message_Read_Receipt_Enabled: state.settings.Message_Read_Receipt_Enabled,
-	Hide_System_Messages: state.settings.Hide_System_Messages
+	Hide_System_Messages: state.settings.Hide_System_Messages,
+	width: state.dimensions.width,
+	height: state.dimensions.height
 });
 
 const mapDispatchToProps = dispatch => ({
diff --git a/app/views/RoomsListView/index.js b/app/views/RoomsListView/index.js
index 15d00d1aa3f..071f59e3664 100644
--- a/app/views/RoomsListView/index.js
+++ b/app/views/RoomsListView/index.js
@@ -6,7 +6,6 @@ import {
 	BackHandler,
 	Text,
 	Keyboard,
-	Dimensions,
 	RefreshControl
 } from 'react-native';
 import { connect } from 'react-redux';
@@ -173,7 +172,8 @@ class RoomsListView extends React.Component {
 		closeServerDropdown: PropTypes.func,
 		useRealName: PropTypes.bool,
 		connected: PropTypes.bool,
-		split: PropTypes.bool
+		split: PropTypes.bool,
+		width: PropTypes.number
 	};
 
 	constructor(props) {
@@ -183,14 +183,12 @@ class RoomsListView extends React.Component {
 
 		this.gotSubscriptions = false;
 		this.animated = false;
-		const { width } = Dimensions.get('window');
 		this.state = {
 			searching: false,
 			search: [],
 			loading: true,
 			allChats: [],
-			chats: [],
-			width
+			chats: []
 		};
 	}
 
@@ -204,7 +202,6 @@ class RoomsListView extends React.Component {
 		if (isTablet) {
 			EventEmitter.addEventListener(KEY_COMMAND, this.handleCommands);
 		}
-		Dimensions.addEventListener('change', this.onDimensionsChange);
 		this.willFocusListener = navigation.addListener('willFocus', () => {
 			// Check if there were changes while not focused (it's set on sCU)
 			if (this.shouldUpdate) {
@@ -277,13 +274,15 @@ class RoomsListView extends React.Component {
 
 		const {
 			loading,
-			width,
 			search
 		} = this.state;
+		const {
+			width
+		} = this.props;
 		if (nextState.loading !== loading) {
 			return true;
 		}
-		if (nextState.width !== width) {
+		if (nextProps.width !== width) {
 			return true;
 		}
 		if (!isEqual(nextState.search, search)) {
@@ -342,13 +341,9 @@ class RoomsListView extends React.Component {
 		if (isTablet) {
 			EventEmitter.removeListener(KEY_COMMAND, this.handleCommands);
 		}
-		Dimensions.removeEventListener('change', this.onDimensionsChange);
 		console.countReset(`${ this.constructor.name }.render calls`);
 	}
 
-	// eslint-disable-next-line react/sort-comp
-	onDimensionsChange = ({ window: { width } }) => this.setState({ width });
-
 	internalSetState = (...args) => {
 		if (this.animated) {
 			animateNextTransition();
@@ -734,7 +729,7 @@ class RoomsListView extends React.Component {
 			return this.renderSectionHeader(item.rid);
 		}
 
-		const { width } = this.state;
+		const { width } = this.props;
 		const {
 			user: {
 				id: userId,
@@ -882,7 +877,8 @@ const mapStateToProps = state => ({
 	showUnread: state.sortPreferences.showUnread,
 	useRealName: state.settings.UI_Use_Real_Name,
 	appState: state.app.ready && state.app.foreground ? 'foreground' : 'background',
-	StoreLastMessage: state.settings.Store_Last_Message
+	StoreLastMessage: state.settings.Store_Last_Message,
+	width: state.dimensions.width
 });
 
 const mapDispatchToProps = dispatch => ({

From 94c115af3976d356ac01091dacb795769e094779 Mon Sep 17 00:00:00 2001
From: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>
Date: Wed, 27 May 2020 12:18:54 -0300
Subject: [PATCH 07/10] Removing setTimeout in the Dimensions middleware

Signed-off-by: Ezequiel De Oliveira <ezequiel1de1oliveira@gmail.com>
---
 app/lib/dimensionsMiddleware.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/lib/dimensionsMiddleware.js b/app/lib/dimensionsMiddleware.js
index 2f0ca358bbe..14b552f0d12 100644
--- a/app/lib/dimensionsMiddleware.js
+++ b/app/lib/dimensionsMiddleware.js
@@ -22,6 +22,5 @@ export default () => createStore => (...args) => {
 
 	Dimensions.addEventListener('change', handleDimensionsChange);
 
-	setTimeout(() => handleDimensionsChange(Dimensions.get('window')));
 	return store;
 };

From e0bd6bc999d26e52be17ab7f65be7b65d53300cb Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Wed, 17 Jun 2020 11:55:06 -0300
Subject: [PATCH 08/10] useDimensions and useOrientation

---
 .../InAppNotification/NotifierComponent.js    |  6 +--
 app/dimensions.js                             | 26 +++++++++++
 app/index.js                                  | 43 ++++++++++++++-----
 3 files changed, 61 insertions(+), 14 deletions(-)
 create mode 100644 app/dimensions.js

diff --git a/app/containers/InAppNotification/NotifierComponent.js b/app/containers/InAppNotification/NotifierComponent.js
index 9ad6163a813..084c2fc0ca0 100644
--- a/app/containers/InAppNotification/NotifierComponent.js
+++ b/app/containers/InAppNotification/NotifierComponent.js
@@ -5,7 +5,6 @@ import Touchable from 'react-native-platform-touchable';
 import { connect } from 'react-redux';
 import { Notifier } from 'react-native-notifier';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useDeviceOrientation } from '@react-native-community/hooks';
 
 import Avatar from '../Avatar';
 import { CustomIcon } from '../../lib/Icons';
@@ -16,6 +15,7 @@ import { getUserSelector } from '../../selectors/login';
 import { ROW_HEIGHT } from '../../presentation/RoomItem';
 import { goRoom } from '../../utils/goRoom';
 import Navigation from '../../lib/Navigation';
+import { useOrientation } from '../../dimensions';
 
 const AVATAR_SIZE = 48;
 const BUTTON_HIT_SLOP = {
@@ -70,7 +70,7 @@ const NotifierComponent = React.memo(({
 }) => {
 	const { theme } = useTheme();
 	const insets = useSafeAreaInsets();
-	const { landscape } = useDeviceOrientation();
+	const { isLandscape } = useOrientation();
 
 	const { id: userId, token } = user;
 	const { text, payload } = notification;
@@ -98,7 +98,7 @@ const NotifierComponent = React.memo(({
 	return (
 		<View style={[
 			styles.container,
-			(isMasterDetail || landscape) && styles.small,
+			(isMasterDetail || isLandscape) && styles.small,
 			{
 				backgroundColor: themes[theme].focusedBackground,
 				borderColor: themes[theme].separatorColor,
diff --git a/app/dimensions.js b/app/dimensions.js
new file mode 100644
index 00000000000..50f5c7b9af1
--- /dev/null
+++ b/app/dimensions.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Dimensions } from 'react-native';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+
+export const DimensionsContext = React.createContext(Dimensions.get('window'));
+
+export function withDimensions(Component) {
+	const DimensionsComponent = props => (
+		<DimensionsContext.Consumer>
+			{contexts => <Component {...props} {...contexts} />}
+		</DimensionsContext.Consumer>
+	);
+	hoistNonReactStatics(DimensionsComponent, Component);
+	return DimensionsComponent;
+}
+
+export const useDimensions = () => React.useContext(DimensionsContext);
+
+export const useOrientation = () => {
+	const { width, height } = React.useContext(DimensionsContext);
+	const isPortrait = height > width;
+	return {
+		isPortrait,
+		isLandscape: !isPortrait
+	};
+};
diff --git a/app/index.js b/app/index.js
index a7167e6921c..2042c6fc8a8 100644
--- a/app/index.js
+++ b/app/index.js
@@ -21,6 +21,7 @@ import { initializePushNotifications, onNotification } from './notifications/pus
 import store from './lib/createStore';
 import { loggerConfig, analytics } from './utils/log';
 import { ThemeContext } from './theme';
+import { DimensionsContext } from './dimensions';
 import RocketChat, { THEME_PREFERENCES_KEY } from './lib/rocketchat';
 import { MIN_WIDTH_MASTER_DETAIL_LAYOUT } from './constants/tablet';
 import {
@@ -57,12 +58,16 @@ export default class Root extends React.Component {
 		super(props);
 		this.init();
 		this.initCrashReport();
+		const { width, height, scale } = Dimensions.get('window');
 		this.state = {
 			theme: defaultTheme(),
 			themePreferences: {
 				currentTheme: supportSystemTheme() ? 'automatic' : 'light',
 				darkLevel: 'dark'
-			}
+			},
+			width,
+			height,
+			scale
 		};
 		if (isTablet) {
 			this.initTablet();
@@ -118,7 +123,8 @@ export default class Root extends React.Component {
 		store.dispatch(setMasterDetailAction(isMasterDetail));
 	};
 
-	onDimensionsChange = ({ window: { width } }) => {
+	onDimensionsChange = ({ window: { width, height, scale } }) => {
+		this.setDimensions({ width, height, scale });
 		this.setMasterDetail(width);
 	}
 
@@ -131,6 +137,10 @@ export default class Root extends React.Component {
 		});
 	}
 
+	setDimensions = ({ width, height, scale }) => {
+		this.setState({ width, height, scale });
+	}
+
 	initTablet = () => {
 		const { width } = Dimensions.get('window');
 		this.setMasterDetail(width);
@@ -154,7 +164,9 @@ export default class Root extends React.Component {
 	}
 
 	render() {
-		const { themePreferences, theme } = this.state;
+		const {
+			themePreferences, theme, width, height, scale
+		} = this.state;
 		return (
 			<SafeAreaProvider initialMetrics={initialWindowMetrics}>
 				<AppearanceProvider>
@@ -166,14 +178,23 @@ export default class Root extends React.Component {
 								setTheme: this.setTheme
 							}}
 						>
-							<ActionSheetProvider>
-								<AppContainer />
-								<TwoFactor />
-								<ScreenLockedView />
-								<ChangePasscodeView />
-								<InAppNotification />
-								<Toast />
-							</ActionSheetProvider>
+							<DimensionsContext.Provider
+								value={{
+									width,
+									height,
+									scale,
+									setDimensions: this.setDimensions
+								}}
+							>
+								<ActionSheetProvider>
+									<AppContainer />
+									<TwoFactor />
+									<ScreenLockedView />
+									<ChangePasscodeView />
+									<InAppNotification />
+									<Toast />
+								</ActionSheetProvider>
+							</DimensionsContext.Provider>
 						</ThemeContext.Provider>
 					</Provider>
 				</AppearanceProvider>

From cb105fe8045a05be69a67fe9ae9bdc57da0660bc Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Wed, 17 Jun 2020 14:28:52 -0300
Subject: [PATCH 09/10] DimensionsContext

---
 app/actions/actionsTypes.js                   |  1 -
 app/actions/dimensions.js                     |  8 ------
 app/containers/MessageActions/Header.js       |  5 ++--
 app/containers/MessageBox/UploadModal.js      |  3 ++-
 app/containers/MessageBox/index.js            |  7 ++---
 app/containers/message/Attachments.js         |  7 +++--
 app/containers/message/Audio.js               |  8 +++---
 app/containers/message/Message.js             |  3 +--
 app/containers/message/index.js               | 13 +++-------
 app/index.js                                  |  8 +++---
 app/lib/createStore.js                        |  3 ---
 app/lib/dimensionsMiddleware.js               | 26 -------------------
 app/presentation/ImageViewer/index.android.js |  8 ++----
 app/reducers/dimensions.js                    | 19 --------------
 app/reducers/index.js                         |  4 +--
 app/views/RoomView/Header/index.js            |  7 +++--
 app/views/RoomView/index.js                   |  7 +++--
 app/views/RoomsListView/index.js              |  4 +--
 18 files changed, 33 insertions(+), 108 deletions(-)
 delete mode 100644 app/actions/dimensions.js
 delete mode 100644 app/lib/dimensionsMiddleware.js
 delete mode 100644 app/reducers/dimensions.js

diff --git a/app/actions/actionsTypes.js b/app/actions/actionsTypes.js
index 8426e1fb0b1..65c39d9c640 100644
--- a/app/actions/actionsTypes.js
+++ b/app/actions/actionsTypes.js
@@ -65,4 +65,3 @@ export const INVITE_LINKS = createRequestTypes('INVITE_LINKS', [
 ]);
 export const SETTINGS = createRequestTypes('SETTINGS', ['CLEAR', 'ADD']);
 export const APP_STATE = createRequestTypes('APP_STATE', ['FOREGROUND', 'BACKGROUND']);
-export const DIMENSIONS = createRequestTypes('DIMENSIONS', ['WINDOW', 'SCREEN']);
diff --git a/app/actions/dimensions.js b/app/actions/dimensions.js
deleted file mode 100644
index 7d8b71a6a93..00000000000
--- a/app/actions/dimensions.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { DIMENSIONS } from './actionsTypes';
-
-export function dimensionsWindow(window) {
-	return {
-		type: DIMENSIONS.WINDOW,
-		window
-	};
-}
diff --git a/app/containers/MessageActions/Header.js b/app/containers/MessageActions/Header.js
index 04041390612..5db34acec9a 100644
--- a/app/containers/MessageActions/Header.js
+++ b/app/containers/MessageActions/Header.js
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import {
-	View, Text, FlatList, StyleSheet, Dimensions
+	View, Text, FlatList, StyleSheet
 } from 'react-native';
 
 import { withTheme } from '../../theme';
@@ -11,6 +11,7 @@ import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
 import database from '../../lib/database';
 import { Button } from '../ActionSheet';
+import { useDimensions } from '../../dimensions';
 
 export const HEADER_HEIGHT = 36;
 
@@ -86,6 +87,7 @@ const Header = React.memo(({
 	handleReaction, server, message, theme
 }) => {
 	const [items, setItems] = useState([]);
+	const { width, height } = useDimensions();
 
 	const setEmojis = async() => {
 		try {
@@ -93,7 +95,6 @@ const Header = React.memo(({
 			const freqEmojiCollection = db.collections.get('frequently_used_emojis');
 			let freqEmojis = await freqEmojiCollection.query().fetch();
 
-			const { width, height } = Dimensions.get('window');
 			const isLandscape = width > height;
 			const size = isLandscape ? width / 2 : width;
 			const quantity = (size / 50) - 1;
diff --git a/app/containers/MessageBox/UploadModal.js b/app/containers/MessageBox/UploadModal.js
index ab794e6c726..dd248e6ac1d 100644
--- a/app/containers/MessageBox/UploadModal.js
+++ b/app/containers/MessageBox/UploadModal.js
@@ -14,6 +14,7 @@ import { isIOS } from '../../utils/deviceInfo';
 import { themes } from '../../constants/colors';
 import { CustomIcon } from '../../lib/Icons';
 import { withTheme } from '../../theme';
+import { withDimensions } from '../../dimensions';
 
 const styles = StyleSheet.create({
 	modal: {
@@ -245,4 +246,4 @@ class UploadModal extends Component {
 	}
 }
 
-export default withTheme(UploadModal);
+export default withDimensions(withTheme(UploadModal));
diff --git a/app/containers/MessageBox/index.js b/app/containers/MessageBox/index.js
index 0bbf8fa75cc..6f8d5681442 100644
--- a/app/containers/MessageBox/index.js
+++ b/app/containers/MessageBox/index.js
@@ -89,7 +89,6 @@ class MessageBox extends Component {
 		theme: PropTypes.string,
 		replyCancel: PropTypes.func,
 		isMasterDetail: PropTypes.bool,
-		width: PropTypes.number,
 		navigation: PropTypes.object,
 		showActionSheet: PropTypes.func
 	}
@@ -884,7 +883,7 @@ class MessageBox extends Component {
 		console.count(`${ this.constructor.name }.render calls`);
 		const { showEmojiKeyboard, file } = this.state;
 		const {
-			user, baseUrl, theme, width, isMasterDetail
+			user, baseUrl, theme, isMasterDetail
 		} = this.props;
 		return (
 			<MessageboxContext.Provider
@@ -913,7 +912,6 @@ class MessageBox extends Component {
 					file={file}
 					close={() => this.setState({ file: {} })}
 					submit={this.sendMediaMessage}
-					width={width}
 					isMasterDetail={isMasterDetail}
 				/>
 			</MessageboxContext.Provider>
@@ -928,8 +926,7 @@ const mapStateToProps = state => ({
 	user: getUserSelector(state),
 	FileUpload_MediaTypeWhiteList: state.settings.FileUpload_MediaTypeWhiteList,
 	FileUpload_MaxFileSize: state.settings.FileUpload_MaxFileSize,
-	Message_AudioRecorderEnabled: state.settings.Message_AudioRecorderEnabled,
-	width: state.dimensions.width
+	Message_AudioRecorderEnabled: state.settings.Message_AudioRecorderEnabled
 });
 
 const dispatchToProps = ({
diff --git a/app/containers/message/Attachments.js b/app/containers/message/Attachments.js
index fb42cb91bcf..3d4ff48b4bf 100644
--- a/app/containers/message/Attachments.js
+++ b/app/containers/message/Attachments.js
@@ -8,7 +8,7 @@ import Video from './Video';
 import Reply from './Reply';
 
 const Attachments = React.memo(({
-	attachments, timeFormat, showAttachment, getCustomEmoji, theme, scale
+	attachments, timeFormat, showAttachment, getCustomEmoji, theme
 }) => {
 	if (!attachments || attachments.length === 0) {
 		return null;
@@ -19,7 +19,7 @@ const Attachments = React.memo(({
 			return <Image key={file.image_url} file={file} showAttachment={showAttachment} getCustomEmoji={getCustomEmoji} theme={theme} />;
 		}
 		if (file.audio_url) {
-			return <Audio key={file.audio_url} file={file} getCustomEmoji={getCustomEmoji} theme={theme} scale={scale} />;
+			return <Audio key={file.audio_url} file={file} getCustomEmoji={getCustomEmoji} theme={theme} />;
 		}
 		if (file.video_url) {
 			return <Video key={file.video_url} file={file} showAttachment={showAttachment} getCustomEmoji={getCustomEmoji} theme={theme} />;
@@ -35,8 +35,7 @@ Attachments.propTypes = {
 	timeFormat: PropTypes.string,
 	showAttachment: PropTypes.func,
 	getCustomEmoji: PropTypes.func,
-	theme: PropTypes.string,
-	scale: PropTypes.number
+	theme: PropTypes.string
 };
 Attachments.displayName = 'MessageAttachments';
 
diff --git a/app/containers/message/Audio.js b/app/containers/message/Audio.js
index 36389f42fc1..27a6d08eee4 100644
--- a/app/containers/message/Audio.js
+++ b/app/containers/message/Audio.js
@@ -17,6 +17,7 @@ import { themes } from '../../constants/colors';
 import { isAndroid, isIOS } from '../../utils/deviceInfo';
 import MessageContext from './Context';
 import ActivityIndicator from '../ActivityIndicator';
+import { withDimensions } from '../../dimensions';
 
 const mode = {
 	allowsRecordingIOS: false,
@@ -137,13 +138,10 @@ class MessageAudio extends React.Component {
 		const {
 			currentTime, duration, paused, loading
 		} = this.state;
-		const { file, theme, scale } = this.props;
+		const { file, theme } = this.props;
 		if (nextProps.theme !== theme) {
 			return true;
 		}
-		if (nextProps.scale !== scale) {
-			return true;
-		}
 		if (nextState.currentTime !== currentTime) {
 			return true;
 		}
@@ -287,4 +285,4 @@ class MessageAudio extends React.Component {
 	}
 }
 
-export default MessageAudio;
+export default withDimensions(MessageAudio);
diff --git a/app/containers/message/Message.js b/app/containers/message/Message.js
index b5c7335658b..ef356c231fe 100644
--- a/app/containers/message/Message.js
+++ b/app/containers/message/Message.js
@@ -151,8 +151,7 @@ Message.propTypes = {
 
 MessageInner.propTypes = {
 	type: PropTypes.string,
-	blocks: PropTypes.array,
-	scale: PropTypes.number
+	blocks: PropTypes.array
 };
 
 export default MessageTouchable;
diff --git a/app/containers/message/index.js b/app/containers/message/index.js
index a4a5a7f6cc1..207e5e70cf4 100644
--- a/app/containers/message/index.js
+++ b/app/containers/message/index.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { KeyboardUtils } from 'react-native-keyboard-input';
-import { connect } from 'react-redux';
 
 import Message from './Message';
 import MessageContext from './Context';
@@ -47,8 +46,7 @@ class MessageContainer extends React.Component {
 		navToRoomInfo: PropTypes.func,
 		callJitsi: PropTypes.func,
 		blockAction: PropTypes.func,
-		theme: PropTypes.string,
-		scale: PropTypes.number
+		theme: PropTypes.string
 	}
 
 	static defaultProps = {
@@ -229,7 +227,7 @@ class MessageContainer extends React.Component {
 
 	render() {
 		const {
-			item, user, style, archived, baseUrl, useRealName, broadcast, fetchThreadName, customThreadTimeFormat, showAttachment, timeFormat, isReadReceiptEnabled, autoTranslateRoom, autoTranslateLanguage, navToRoomInfo, getCustomEmoji, isThreadRoom, callJitsi, blockAction, rid, theme, scale
+			item, user, style, archived, baseUrl, useRealName, broadcast, fetchThreadName, customThreadTimeFormat, showAttachment, timeFormat, isReadReceiptEnabled, autoTranslateRoom, autoTranslateLanguage, navToRoomInfo, getCustomEmoji, isThreadRoom, callJitsi, blockAction, rid, theme
 		} = this.props;
 		const {
 			id, msg, ts, attachments, urls, reactions, t, avatar, emoji, u, alias, editedBy, role, drid, dcount, dlm, tmid, tcount, tlm, tmsg, mentions, channels, unread, blocks, autoTranslate: autoTranslateMessage
@@ -304,15 +302,10 @@ class MessageContainer extends React.Component {
 					callJitsi={callJitsi}
 					blockAction={blockAction}
 					theme={theme}
-					scale={scale}
 				/>
 			</MessageContext.Provider>
 		);
 	}
 }
 
-const mapStateToProps = state => ({
-	scale: state.dimensions.scale
-});
-
-export default connect(mapStateToProps)(withTheme(MessageContainer));
+export default withTheme(MessageContainer);
diff --git a/app/index.js b/app/index.js
index 2042c6fc8a8..220f5083995 100644
--- a/app/index.js
+++ b/app/index.js
@@ -35,6 +35,7 @@ import ChangePasscodeView from './views/ChangePasscodeView';
 import Toast from './containers/Toast';
 import InAppNotification from './containers/InAppNotification';
 import { ActionSheetProvider } from './containers/ActionSheet';
+import debounce from './utils/debounce';
 
 
 RNScreens.enableScreens();
@@ -123,10 +124,11 @@ export default class Root extends React.Component {
 		store.dispatch(setMasterDetailAction(isMasterDetail));
 	};
 
-	onDimensionsChange = ({ window: { width, height, scale } }) => {
+	// Dimensions update fires twice
+	onDimensionsChange = debounce(({ window: { width, height, scale } }) => {
 		this.setDimensions({ width, height, scale });
 		this.setMasterDetail(width);
-	}
+	})
 
 	setTheme = (newTheme = {}) => {
 		// change theme state
@@ -142,7 +144,7 @@ export default class Root extends React.Component {
 	}
 
 	initTablet = () => {
-		const { width } = Dimensions.get('window');
+		const { width } = this.state;
 		this.setMasterDetail(width);
 		this.onKeyCommands = KeyCommandsEmitter.addListener(
 			'onKeyCommand',
diff --git a/app/lib/createStore.js b/app/lib/createStore.js
index b1e745d5afc..da52de600e0 100644
--- a/app/lib/createStore.js
+++ b/app/lib/createStore.js
@@ -4,7 +4,6 @@ import createSagaMiddleware from 'redux-saga';
 import reducers from '../reducers';
 import sagas from '../sagas';
 import applyAppStateMiddleware from './appStateMiddleware';
-import applyDimensionsMiddleware from './dimensionsMiddleware';
 
 let sagaMiddleware;
 let enhancers;
@@ -18,7 +17,6 @@ if (__DEV__) {
 
 	enhancers = compose(
 		applyAppStateMiddleware(),
-		applyDimensionsMiddleware(),
 		applyMiddleware(reduxImmutableStateInvariant),
 		applyMiddleware(sagaMiddleware),
 		Reactotron.createEnhancer()
@@ -27,7 +25,6 @@ if (__DEV__) {
 	sagaMiddleware = createSagaMiddleware();
 	enhancers = compose(
 		applyAppStateMiddleware(),
-		applyDimensionsMiddleware(),
 		applyMiddleware(sagaMiddleware)
 	);
 }
diff --git a/app/lib/dimensionsMiddleware.js b/app/lib/dimensionsMiddleware.js
deleted file mode 100644
index 14b552f0d12..00000000000
--- a/app/lib/dimensionsMiddleware.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Dimensions } from 'react-native';
-import { isEqual } from 'lodash';
-
-
-import { dimensionsWindow } from '../actions/dimensions';
-
-export default () => createStore => (...args) => {
-	const store = createStore(...args);
-
-	let currentDimensions = '';
-
-	const handleDimensionsChange = (nextDimensionState) => {
-		if (!isEqual(currentDimensions, nextDimensionState)) {
-			if (nextDimensionState) {
-				if (nextDimensionState.window) {
-					store.dispatch(dimensionsWindow(nextDimensionState.window));
-				}
-			}
-			currentDimensions = nextDimensionState;
-		}
-	};
-
-	Dimensions.addEventListener('change', handleDimensionsChange);
-
-	return store;
-};
diff --git a/app/presentation/ImageViewer/index.android.js b/app/presentation/ImageViewer/index.android.js
index 50ae390c3c8..1897da72958 100644
--- a/app/presentation/ImageViewer/index.android.js
+++ b/app/presentation/ImageViewer/index.android.js
@@ -8,7 +8,7 @@ import {
 } from 'react-native-gesture-handler';
 import FastImage from 'react-native-fast-image';
 import Animated, { Easing } from 'react-native-reanimated';
-import { connect } from 'react-redux';
+import { withDimensions } from '../../dimensions';
 
 const AnimatedFastImage = Animated.createAnimatedComponent(FastImage);
 
@@ -439,8 +439,4 @@ class ImageViewer extends Component {
 	}
 }
 
-const mapStateToProps = state => ({
-	width: state.dimensions.width
-});
-
-export default connect(mapStateToProps)(ImageViewer);
+export default withDimensions(ImageViewer);
diff --git a/app/reducers/dimensions.js b/app/reducers/dimensions.js
deleted file mode 100644
index a9d1ac9a17f..00000000000
--- a/app/reducers/dimensions.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Dimensions } from 'react-native';
-import { DIMENSIONS } from '../actions/actionsTypes';
-
-const initialState = Dimensions.get('window');
-
-export default function(state = initialState, action) {
-	switch (action.type) {
-		case DIMENSIONS.WINDOW:
-			return {
-				...state,
-				scale: action.window.scale,
-				width: action.window.width,
-				height: action.window.height,
-				fontScale: action.window.fontScale
-			};
-		default:
-			return state;
-	}
-}
diff --git a/app/reducers/index.js b/app/reducers/index.js
index be31167a12f..1ac810c334b 100644
--- a/app/reducers/index.js
+++ b/app/reducers/index.js
@@ -16,7 +16,6 @@ import activeUsers from './activeUsers';
 import usersTyping from './usersTyping';
 import inviteLinks from './inviteLinks';
 import createDiscussion from './createDiscussion';
-import dimensions from './dimensions';
 
 export default combineReducers({
 	settings,
@@ -35,6 +34,5 @@ export default combineReducers({
 	activeUsers,
 	usersTyping,
 	inviteLinks,
-	createDiscussion,
-	dimensions
+	createDiscussion
 });
diff --git a/app/views/RoomView/Header/index.js b/app/views/RoomView/Header/index.js
index 4311eccf2a3..8d208b24b7b 100644
--- a/app/views/RoomView/Header/index.js
+++ b/app/views/RoomView/Header/index.js
@@ -7,6 +7,7 @@ import Header from './Header';
 import RightButtons from './RightButtons';
 import { withTheme } from '../../../theme';
 import RoomHeaderLeft from './RoomHeaderLeft';
+import { withDimensions } from '../../../dimensions';
 
 class RoomHeaderView extends Component {
 	static propTypes = {
@@ -116,12 +117,10 @@ const mapStateToProps = (state, ownProps) => {
 		connecting: state.meteor.connecting,
 		usersTyping: state.usersTyping,
 		status,
-		statusText,
-		width: state.dimensions.width,
-		height: state.dimensions.height
+		statusText
 	};
 };
 
-export default connect(mapStateToProps)(withTheme(RoomHeaderView));
+export default connect(mapStateToProps)(withDimensions(withTheme(RoomHeaderView)));
 
 export { RightButtons, RoomHeaderLeft };
diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js
index 9b77e38448c..38f8e807f23 100644
--- a/app/views/RoomView/index.js
+++ b/app/views/RoomView/index.js
@@ -52,6 +52,7 @@ import { CONTAINER_TYPES } from '../../lib/methods/actions';
 import Banner from './Banner';
 import Navigation from '../../lib/Navigation';
 import SafeAreaView from '../../containers/SafeAreaView';
+import { withDimensions } from '../../dimensions';
 
 const stateAttrsUpdate = [
 	'joined',
@@ -1034,13 +1035,11 @@ const mapStateToProps = state => ({
 	customEmojis: state.customEmojis,
 	baseUrl: state.server.server,
 	Message_Read_Receipt_Enabled: state.settings.Message_Read_Receipt_Enabled,
-	Hide_System_Messages: state.settings.Hide_System_Messages,
-	width: state.dimensions.width,
-	height: state.dimensions.height
+	Hide_System_Messages: state.settings.Hide_System_Messages
 });
 
 const mapDispatchToProps = dispatch => ({
 	replyBroadcast: message => dispatch(replyBroadcastAction(message))
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(withTheme(RoomView));
+export default connect(mapStateToProps, mapDispatchToProps)(withDimensions(withTheme(RoomView)));
diff --git a/app/views/RoomsListView/index.js b/app/views/RoomsListView/index.js
index 019e3dda456..f97e67c3e6a 100644
--- a/app/views/RoomsListView/index.js
+++ b/app/views/RoomsListView/index.js
@@ -60,6 +60,7 @@ import { getUserSelector } from '../../selectors/login';
 import { goRoom } from '../../utils/goRoom';
 import SafeAreaView from '../../containers/SafeAreaView';
 import Header from '../../containers/Header';
+import { withDimensions } from '../../dimensions';
 
 const SCROLL_OFFSET = 56;
 const INITIAL_NUM_TO_RENDER = isTablet ? 20 : 12;
@@ -925,7 +926,6 @@ const mapStateToProps = state => ({
 	useRealName: state.settings.UI_Use_Real_Name,
 	appState: state.app.ready && state.app.foreground ? 'foreground' : 'background',
 	StoreLastMessage: state.settings.Store_Last_Message,
-	width: state.dimensions.width,
 	rooms: state.room.rooms
 });
 
@@ -939,4 +939,4 @@ const mapDispatchToProps = dispatch => ({
 	closeServerDropdown: () => dispatch(closeServerDropdownAction())
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(withTheme(RoomsListView));
+export default connect(mapStateToProps, mapDispatchToProps)(withDimensions(withTheme(RoomsListView)));

From 3ac6c2fb3ccdde20a151e542ffaeabcefe204f4a Mon Sep 17 00:00:00 2001
From: Diego Mello <diegolmello@gmail.com>
Date: Wed, 17 Jun 2020 14:34:16 -0300
Subject: [PATCH 10/10] ActionSheet

---
 app/containers/ActionSheet/ActionSheet.js | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/app/containers/ActionSheet/ActionSheet.js b/app/containers/ActionSheet/ActionSheet.js
index c450e0419f1..f7c00936856 100644
--- a/app/containers/ActionSheet/ActionSheet.js
+++ b/app/containers/ActionSheet/ActionSheet.js
@@ -19,11 +19,7 @@ import Animated, {
 	Easing
 } from 'react-native-reanimated';
 import * as Haptics from 'expo-haptics';
-import {
-	useDimensions,
-	useBackHandler,
-	useDeviceOrientation
-} from '@react-native-community/hooks';
+import { useBackHandler } from '@react-native-community/hooks';
 
 import { Item } from './Item';
 import { Handle } from './Handle';
@@ -33,6 +29,7 @@ import styles, { ITEM_HEIGHT } from './styles';
 import { isTablet, isIOS } from '../../utils/deviceInfo';
 import Separator from '../Separator';
 import I18n from '../../i18n';
+import { useOrientation, useDimensions } from '../../dimensions';
 
 const getItemLayout = (data, index) => ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index });
 
@@ -52,10 +49,9 @@ const ActionSheet = React.memo(forwardRef(({ children, theme }, ref) => {
 	const bottomSheetRef = useRef();
 	const [data, setData] = useState({});
 	const [isVisible, setVisible] = useState(false);
-	const orientation = useDeviceOrientation();
-	const { height } = useDimensions().window;
+	const { height } = useDimensions();
+	const { isLandscape } = useOrientation();
 	const insets = useSafeAreaInsets();
-	const { landscape } = orientation;
 
 	const maxSnap = Math.max(
 		(
@@ -81,7 +77,7 @@ const ActionSheet = React.memo(forwardRef(({ children, theme }, ref) => {
 	 * we'll provide more one snap
 	 * that point 50% of the whole screen
 	*/
-	const snaps = (height - maxSnap > height * 0.6) && !landscape ? [maxSnap, height * 0.5, height] : [maxSnap, height];
+	const snaps = (height - maxSnap > height * 0.6) && !isLandscape ? [maxSnap, height * 0.5, height] : [maxSnap, height];
 	const openedSnapIndex = snaps.length > 2 ? 1 : 0;
 	const closedSnapIndex = snaps.length - 1;
 
@@ -120,7 +116,7 @@ const ActionSheet = React.memo(forwardRef(({ children, theme }, ref) => {
 	// Hides action sheet when orientation changes
 	useEffect(() => {
 		setVisible(false);
-	}, [orientation.landscape]);
+	}, [isLandscape]);
 
 	useImperativeHandle(ref, () => ({
 		showActionSheet: show,
@@ -186,7 +182,7 @@ const ActionSheet = React.memo(forwardRef(({ children, theme }, ref) => {
 						containerStyle={[
 							styles.container,
 							{ backgroundColor: themes[theme].focusedBackground },
-							(landscape || isTablet) && styles.bottomSheet
+							(isLandscape || isTablet) && styles.bottomSheet
 						]}
 						animationConfig={ANIMATION_CONFIG}
 						// FlatList props