[CHORE] Create DimensionsContext

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']);

app/actions/dimensions.js

@@ -0,0 +1,15 @@
+import { DIMENSIONS } from './actionsTypes';
+
+export function dimensionsWindow(window) {
+	return {
+		type: DIMENSIONS.WINDOW,
+		window
+	};
+}
+
+export function dimensionsScreen(screen) {
+	return {
+		type: DIMENSIONS.SCREEN,
+		screen
+	};
+}

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);

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)));

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;
@@ -17,6 +18,7 @@ if (__DEV__) {
 
 	enhancers = compose(
 		applyAppStateMiddleware(),
+		applyDimensionsMiddleware(),
 		applyMiddleware(reduxImmutableStateInvariant),
 		applyMiddleware(sagaMiddleware),
 		Reactotron.createEnhancer()
@@ -25,6 +27,7 @@ if (__DEV__) {
 	sagaMiddleware = createSagaMiddleware();
 	enhancers = compose(
 		applyAppStateMiddleware(),
+		applyDimensionsMiddleware(),
 		applyMiddleware(sagaMiddleware)
 	);
 }

app/lib/dimensionsMiddleware.js

@@ -0,0 +1,23 @@
+import { Dimensions } from 'react-native';
+
+import { dimensionsWindow, dimensionsScreen } from '../actions/dimensions';
+
+export default () => createStore => (...args) => {
+	const store = createStore(...args);
+
+	const handleDimensionsChange = (nextDimensionState) => {
+		if (nextDimensionState) {
+			if (nextDimensionState.window) {
+				store.dispatch(dimensionsWindow(nextDimensionState.window));
+			}
+			if (nextDimensionState.screen) {
+				store.dispatch(dimensionsScreen(nextDimensionState.screen));
+			}
+		}
+	};
+
+	Dimensions.addEventListener('change', handleDimensionsChange);
+
+	setTimeout(() => handleDimensionsChange({ ...Dimensions.get('window'), ...Dimensions.get('screen') }));
+	return store;
+};

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));

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);

app/reducers/dimensions.js

@@ -0,0 +1,23 @@
+import { DIMENSIONS } from '../actions/actionsTypes';
+
+const initialState = {
+	window: {},
+	screen: {}
+};
+
+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;
+	}
+}

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
 });

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 };

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));

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));

package.json

@@ -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",

yarn.lock

@@ -13537,13 +13537,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"