From 36b37eb74712e766a36e7c25a42e2d5558ebb756 Mon Sep 17 00:00:00 2001 From: Ezequiel de Oliveira Date: Wed, 17 Jun 2020 14:35:58 -0300 Subject: [PATCH] [CHORE] Create DimensionsContext (#2098) Signed-off-by: Ezequiel De Oliveira Co-authored-by: Diego Mello --- app/containers/ActionSheet/ActionSheet.js | 18 +++---- app/containers/EmojiPicker/EmojiCategory.js | 4 +- .../InAppNotification/NotifierComponent.js | 6 +-- app/containers/MessageActions/Header.js | 5 +- app/containers/MessageBox/UploadModal.js | 12 ++--- app/containers/message/Audio.js | 14 ++++-- app/dimensions.js | 26 ++++++++++ app/index.js | 49 ++++++++++++++----- app/presentation/ImageViewer/index.android.js | 22 ++++----- app/views/RoomView/Header/index.js | 27 ++++++---- app/views/RoomView/ReactionPicker.js | 14 +++--- app/views/RoomView/UploadProgress.js | 9 ++-- app/views/RoomView/index.js | 13 +++-- app/views/RoomsListView/index.js | 24 ++++----- package.json | 1 - yarn.lock | 7 --- 16 files changed, 148 insertions(+), 103 deletions(-) create mode 100644 app/dimensions.js diff --git a/app/containers/ActionSheet/ActionSheet.js b/app/containers/ActionSheet/ActionSheet.js index c450e0419..f7c009368 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 diff --git a/app/containers/EmojiPicker/EmojiCategory.js b/app/containers/EmojiPicker/EmojiCategory.js index 22382f1e3..8e1a124ff 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 { responsive } from 'react-native-responsive-ui'; 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,4 +71,4 @@ class EmojiCategory extends React.Component { } } -export default responsive(EmojiCategory); +export default EmojiCategory; diff --git a/app/containers/InAppNotification/NotifierComponent.js b/app/containers/InAppNotification/NotifierComponent.js index 9ad6163a8..084c2fc0c 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 ( { 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 d39d9b71c..dd248e6ac 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 { responsive } from 'react-native-responsive-ui'; import equal from 'deep-equal'; import TextInput from '../TextInput'; @@ -15,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: { @@ -88,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, isMasterDetail: PropTypes.bool } @@ -112,7 +112,7 @@ class UploadModal extends Component { shouldComponentUpdate(nextProps, nextState) { const { name, description, file } = this.state; - const { window, isVisible, theme } = this.props; + const { width, isVisible, theme } = this.props; if (nextState.name !== name) { return true; @@ -126,7 +126,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)) { @@ -204,7 +204,7 @@ class UploadModal extends Component { render() { const { - window: { width }, isVisible, close, isMasterDetail, theme + width, isVisible, close, isMasterDetail, theme } = this.props; const { name, description } = this.state; return ( @@ -246,4 +246,4 @@ class UploadModal extends Component { } } -export default responsive(withTheme(UploadModal)); +export default withDimensions(withTheme(UploadModal)); diff --git a/app/containers/message/Audio.js b/app/containers/message/Audio.js index 63e990b94..27a6d08ee 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'; @@ -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, @@ -97,7 +98,8 @@ class MessageAudio extends React.Component { static propTypes = { file: PropTypes.object.isRequired, theme: PropTypes.string, - getCustomEmoji: PropTypes.func + getCustomEmoji: PropTypes.func, + scale: PropTypes.number } constructor(props) { @@ -243,7 +245,9 @@ class MessageAudio extends React.Component { const { loading, paused, currentTime, duration } = this.state; - const { file, getCustomEmoji, theme } = this.props; + const { + file, getCustomEmoji, theme, scale + } = this.props; const { description } = file; const { baseUrl, user } = this.context; @@ -271,7 +275,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 }} /> {this.duration} @@ -281,4 +285,4 @@ class MessageAudio extends React.Component { } } -export default MessageAudio; +export default withDimensions(MessageAudio); diff --git a/app/dimensions.js b/app/dimensions.js new file mode 100644 index 000000000..50f5c7b9a --- /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 => ( + + {contexts => } + + ); + 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 a7167e692..220f50839 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 { @@ -34,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(); @@ -57,12 +59,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,9 +124,11 @@ export default class Root extends React.Component { store.dispatch(setMasterDetailAction(isMasterDetail)); }; - onDimensionsChange = ({ window: { width } }) => { + // Dimensions update fires twice + onDimensionsChange = debounce(({ window: { width, height, scale } }) => { + this.setDimensions({ width, height, scale }); this.setMasterDetail(width); - } + }) setTheme = (newTheme = {}) => { // change theme state @@ -131,8 +139,12 @@ export default class Root extends React.Component { }); } + setDimensions = ({ width, height, scale }) => { + this.setState({ width, height, scale }); + } + initTablet = () => { - const { width } = Dimensions.get('window'); + const { width } = this.state; this.setMasterDetail(width); this.onKeyCommands = KeyCommandsEmitter.addListener( 'onKeyCommand', @@ -154,7 +166,9 @@ export default class Root extends React.Component { } render() { - const { themePreferences, theme } = this.state; + const { + themePreferences, theme, width, height, scale + } = this.state; return ( @@ -166,14 +180,23 @@ export default class Root extends React.Component { setTheme: this.setTheme }} > - - - - - - - - + + + + + + + + + + diff --git a/app/presentation/ImageViewer/index.android.js b/app/presentation/ImageViewer/index.android.js index 86af0ecd5..1897da729 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 { withDimensions } from '../../dimensions'; 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, + width: PropTypes.number } constructor(props) { @@ -382,9 +379,12 @@ class ImageViewer extends ResponsiveComponent { ); } + pinchRef = React.createRef(); + + panRef = React.createRef(); + render() { - const { uri, ...props } = this.props; - const { width } = this.state.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 @@ -439,4 +439,4 @@ class ImageViewer extends ResponsiveComponent { } } -export default ImageViewer; +export default withDimensions(ImageViewer); diff --git a/app/views/RoomView/Header/index.js b/app/views/RoomView/Header/index.js index 8b1bec52f..8d208b24b 100644 --- a/app/views/RoomView/Header/index.js +++ b/app/views/RoomView/Header/index.js @@ -1,13 +1,13 @@ 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'; import RightButtons from './RightButtons'; import { withTheme } from '../../../theme'; import RoomHeaderLeft from './RoomHeaderLeft'; +import { withDimensions } from '../../../dimensions'; class RoomHeaderView extends Component { static propTypes = { @@ -17,19 +17,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; @@ -52,10 +53,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)) { @@ -64,12 +65,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 ( @@ -80,8 +87,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} @@ -114,6 +121,6 @@ const mapStateToProps = (state, ownProps) => { }; }; -export default responsive(connect(mapStateToProps)(withTheme(RoomHeaderView))); +export default connect(mapStateToProps)(withDimensions(withTheme(RoomHeaderView))); export { RightButtons, RoomHeaderLeft }; diff --git a/app/views/RoomView/ReactionPicker.js b/app/views/RoomView/ReactionPicker.js index bc83353fa..556d18256 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'; @@ -15,17 +14,18 @@ const maxSize = 400; class ReactionPicker extends React.Component { static propTypes = { baseUrl: PropTypes.string.isRequired, - window: PropTypes.any, message: PropTypes.object, show: PropTypes.bool, isMasterDetail: PropTypes.bool, reactionClose: PropTypes.func, - onEmojiSelected: PropTypes.func + onEmojiSelected: PropTypes.func, + width: PropTypes.number, + height: PropTypes.number }; shouldComponentUpdate(nextProps) { - const { show, window } = this.props; - return nextProps.show !== show || window.width !== nextProps.window.width; + const { show, width, height } = this.props; + return nextProps.show !== show || width !== nextProps.width || height !== nextProps.height; } onEmojiSelected = (emoji, shortname) => { @@ -38,7 +38,7 @@ class ReactionPicker extends React.Component { render() { const { - window: { width, height }, show, baseUrl, reactionClose, isMasterDetail + width, height, show, baseUrl, reactionClose, isMasterDetail } = this.props; let widthStyle = width - margin; @@ -87,4 +87,4 @@ const mapStateToProps = state => ({ isMasterDetail: state.app.isMasterDetail }); -export default responsive(connect(mapStateToProps)(ReactionPicker)); +export default connect(mapStateToProps)(ReactionPicker); diff --git a/app/views/RoomView/UploadProgress.js b/app/views/RoomView/UploadProgress.js index 5f23906d6..4a170c3fb 100644 --- a/app/views/RoomView/UploadProgress.js +++ b/app/views/RoomView/UploadProgress.js @@ -3,7 +3,6 @@ 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 database from '../../lib/database'; @@ -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 { this.cancelUpload(item)} /> , - + ] ); } @@ -228,4 +227,4 @@ class UploadProgress extends Component { } } -export default responsive(withTheme(UploadProgress)); +export default withTheme(UploadProgress); diff --git a/app/views/RoomView/index.js b/app/views/RoomView/index.js index 941ad5e5d..38f8e807f 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', @@ -88,7 +89,9 @@ class RoomView extends React.Component { customEmojis: PropTypes.object, isMasterDetail: PropTypes.bool, theme: PropTypes.string, - replyBroadcast: PropTypes.func + replyBroadcast: PropTypes.func, + width: PropTypes.number, + height: PropTypes.number }; constructor(props) { @@ -963,7 +966,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 @@ -1004,8 +1007,10 @@ class RoomView extends React.Component { message={selectedMessage} onEmojiSelected={this.onReactionPress} reactionClose={this.onReactionClose} + width={width} + height={height} /> - + ({ 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 e8a62c1cf..f97e67c3e 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'; @@ -61,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; @@ -128,7 +128,8 @@ class RoomsListView extends React.Component { useRealName: PropTypes.bool, connected: PropTypes.bool, isMasterDetail: PropTypes.bool, - rooms: PropTypes.array + rooms: PropTypes.array, + width: PropTypes.number }; constructor(props) { @@ -138,14 +139,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, item: {} }; this.setHeader(); @@ -157,7 +156,6 @@ class RoomsListView extends React.Component { if (isTablet) { EventEmitter.addEventListener(KEY_COMMAND, this.handleCommands); } - Dimensions.addEventListener('change', this.onDimensionsChange); this.unsubscribeFocus = navigation.addListener('focus', () => { Orientation.unlockAllOrientations(); this.animated = true; @@ -228,14 +226,13 @@ class RoomsListView extends React.Component { const { loading, - width, search } = this.state; - const { rooms } = this.props; + const { rooms, width } = this.props; if (nextState.loading !== loading) { return true; } - if (nextState.width !== width) { + if (nextProps.width !== width) { return true; } if (!isEqual(nextState.search, search)) { @@ -302,7 +299,6 @@ 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`); } @@ -352,9 +348,6 @@ class RoomsListView extends React.Component { navigation.setOptions(options); } - // eslint-disable-next-line react/sort-comp - onDimensionsChange = ({ window: { width } }) => this.setState({ width }); - internalSetState = (...args) => { if (this.animated) { animateNextTransition(); @@ -783,7 +776,7 @@ class RoomsListView extends React.Component { return this.renderSectionHeader(item.rid); } - const { width, item: currentItem } = this.state; + const { item: currentItem } = this.state; const { user: { id: userId, @@ -794,7 +787,8 @@ class RoomsListView extends React.Component { StoreLastMessage, useRealName, theme, - isMasterDetail + isMasterDetail, + width } = this.props; const id = this.getUidDirectMessage(item); const isGroupChat = RocketChat.isGroupChat(item); @@ -945,4 +939,4 @@ const mapDispatchToProps = dispatch => ({ closeServerDropdown: () => dispatch(closeServerDropdownAction()) }); -export default connect(mapStateToProps, mapDispatchToProps)(withTheme(RoomsListView)); +export default connect(mapStateToProps, mapDispatchToProps)(withDimensions(withTheme(RoomsListView))); diff --git a/package.json b/package.json index f258cb27b..0abbc3565 100644 --- a/package.json +++ b/package.json @@ -91,7 +91,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-safe-area-context": "^3.0.2", "react-native-screens": "^2.7.0", "react-native-scroll-bottom-sheet": "0.6.1", diff --git a/yarn.lock b/yarn.lock index c69d4569f..4d1efac3f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11944,13 +11944,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-context@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-3.0.2.tgz#95dd7e56bc89bcc4f3f7bb5fada30c98420328b2"