diff --git a/app/views/RoomView/ListView.js b/app/views/RoomView/ListView.js index 28935f5ab..962cc07f6 100644 --- a/app/views/RoomView/ListView.js +++ b/app/views/RoomView/ListView.js @@ -1,7 +1,7 @@ import { ListView as OldList } from 'realm/react-native'; import React from 'react'; import { - ScrollView, ListView as OldList2, ImageBackground, ActivityIndicator + TouchableOpacity, ScrollView, ListView as OldList2, ImageBackground, ActivityIndicator } from 'react-native'; import moment from 'moment'; import { connect } from 'react-redux'; @@ -14,6 +14,8 @@ import scrollPersistTaps from '../../utils/scrollPersistTaps'; import debounce from '../../utils/debounce'; import RocketChat from '../../lib/rocketchat'; import log from '../../utils/log'; +import { CustomIcon } from '../../lib/Icons'; +import { isIOS, isNotch } from '../../utils/deviceInfo'; const DEFAULT_SCROLL_CALLBACK_THROTTLE = 100; @@ -47,7 +49,8 @@ export class List extends React.Component { this.state = { loading: true, loadingMore: false, - end: false + end: false, + showScollToBottomButton: false }; this.dataSource = ds.cloneWithRows(this.data); } @@ -58,8 +61,8 @@ export class List extends React.Component { } shouldComponentUpdate(nextProps, nextState) { - const { loadingMore, loading, end } = this.state; - return end !== nextState.end || loadingMore !== nextState.loadingMore || loading !== nextState.loading; + const { loadingMore, loading, end, showScollToBottomButton } = this.state; + return end !== nextState.end || loadingMore !== nextState.loadingMore || loading !== nextState.loading || showScollToBottomButton !== nextState.showScollToBottomButton; } componentWillUnmount() { @@ -91,6 +94,18 @@ export class List extends React.Component { } } + scrollToBottom = () => { + this.listView.scrollTo({ x: 0, y: 0, animated: true }); + } + + handleScroll= (event) => { + if (event.nativeEvent.contentOffset.y > 0) { + this.setState({ showScollToBottomButton: true }); + } else { + this.setState({ showScollToBottomButton: false }); + } + } + renderFooter = () => { const { loadingMore, loading } = this.state; if (loadingMore || loading) { @@ -99,32 +114,60 @@ export class List extends React.Component { return null; } + getScrollButtonStyle = () => { + let right = 30; + if (isIOS) { + right = isNotch ? 45 : 30; + } + return ({ + position: 'absolute', + width: 42, + height: 42, + alignItems: 'center', + justifyContent: 'center', + right, + bottom: 70, + backgroundColor: '#EAF2FE', + borderRadius: 20 + }) + } + render() { const { renderRow } = this.props; - + const { showScollToBottomButton } = this.state; + const scrollButtonStyle = this.getScrollButtonStyle(); return ( - item._id} - onEndReachedThreshold={100} - renderFooter={this.renderFooter} - onEndReached={this.onEndReached} - dataSource={this.dataSource} - renderRow={(item, previousItem) => renderRow(item, previousItem)} - initialListSize={1} - pageSize={20} - testID='room-view-messages' - {...scrollPersistTaps} - /> + + this.listView = ref} + style={styles.list} + data={this.data} + keyExtractor={item => item._id} + onEndReachedThreshold={100} + renderFooter={this.renderFooter} + onEndReached={this.onEndReached} + dataSource={this.dataSource} + renderRow={(item, previousItem) => renderRow(item, previousItem)} + initialListSize={1} + pageSize={20} + onScroll={this.handleScroll} + testID='room-view-messages' + {...scrollPersistTaps} + /> + {showScollToBottomButton ? ( + + + + ) : null} + ); } } @connect(state => ({ lastOpen: state.room.lastOpen -})) +}), null, null, { forwardRef: true }) export class ListView extends OldList2 { constructor(props) { super(props);