[NEW] Scroll down floating button (#735)

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;
+		const { loadingMore, loading, end, showScollToBottomButton } = this.state;
-		return end !== nextState.end || loadingMore !== nextState.loadingMore || loading !== nextState.loading;
+		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,12 +114,33 @@ 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 (
+			<React.Fragment>
 				<ListView
 					enableEmptySections
+					ref={ref => this.listView = ref}
 					style={styles.list}
 					data={this.data}
 					keyExtractor={item => item._id}
@@ -115,16 +151,23 @@ export class List extends React.Component {
 					renderRow={(item, previousItem) => renderRow(item, previousItem)}
 					initialListSize={1}
 					pageSize={20}
+					onScroll={this.handleScroll}
 					testID='room-view-messages'
 					{...scrollPersistTaps}
 				/>
+				{showScollToBottomButton ? (
+					<TouchableOpacity activeOpacity={0.5} style={scrollButtonStyle} onPress={this.scrollToBottom}>
+						<CustomIcon name='arrow-down' color='white' size={30} />
+					</TouchableOpacity>
+				) : null}
+			</React.Fragment>
 		);
 	}
 }
 
 @connect(state => ({
 	lastOpen: state.room.lastOpen
-}))
+}), null, null, { forwardRef: true })
 export class ListView extends OldList2 {
 	constructor(props) {
 		super(props);