Message button (#660)

* Remove touchable opacity when scrolling messages
* Tap on disable messages closes keyboard
* Unify vibration
* Vibrate only on Android

app/containers/MessageActions.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-	Alert, Clipboard, Vibration, Share
-} from 'react-native';
+import { Alert, Clipboard, Share } from 'react-native';
 import { connect } from 'react-redux';
 import ActionSheet from 'react-native-action-sheet';
 import * as moment from 'moment';
@@ -17,6 +15,7 @@ import {
 	toggleStarRequest as toggleStarRequestAction
 } from '../actions/messages';
 import { showToast } from '../utils/info';
+import { vibrate } from '../utils/vibration';
 import RocketChat from '../lib/rocketchat';
 import I18n from '../i18n';
 
@@ -126,7 +125,7 @@ export default class MessageActions extends React.Component {
 		}
 		setTimeout(() => {
 			this.showActionSheet();
-			Vibration.vibrate(50);
+			vibrate();
 		});
 	}
 

app/containers/message/Message.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import {
-	View, Text, ViewPropTypes, Image as ImageRN
+	View, Text, ViewPropTypes, Image as ImageRN, TouchableWithoutFeedback
 } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import moment from 'moment';
@@ -199,7 +199,7 @@ export default class Message extends PureComponent {
 		if (header) {
 			return (
 				<User
-					onPress={this._onPress}
+					onPress={this.onPress}
 					timeFormat={timeFormat}
 					username={(useRealName && author.name) || author.username}
 					alias={alias}
@@ -348,59 +348,53 @@ export default class Message extends PureComponent {
 			editing, style, header, archived, onLongPress, reactionsModal, closeReactions, msg, ts, reactions, author, user, timeFormat, customEmojis, baseUrl
 		} = this.props;
 		const accessibilityLabel = I18n.t('Message_accessibility', { user: author.username, time: moment(ts).format(timeFormat), message: msg });
+		const disabled = this.isInfoMessage() || this.hasError() || archived;
 
 		return (
 			<View style={styles.root}>
 				{this.renderError()}
-				<LongPressGestureHandler
-					onHandlerStateChange={({ nativeEvent }) => nativeEvent.state === State.ACTIVE && onLongPress()}
+				<TouchableWithoutFeedback
+					onLongPress={!disabled && onLongPress}
+					onPress={this.onPress}
 				>
-					<RectButton
-						enabled={!(this.isInfoMessage() || this.hasError() || archived)}
-						style={[styles.container, header && styles.marginBottom]}
-						onPress={this.onPress}
-						activeOpacity={0.8}
-						underlayColor='#e1e5e8'
+					<View
+						style={[styles.container, header && styles.marginBottom, editing && styles.editing, style]}
+						accessibilityLabel={accessibilityLabel}
 					>
-						<View
-							style={[styles.message, editing && styles.editing, style]}
-							accessibilityLabel={accessibilityLabel}
-						>
-							<View style={styles.flex}>
-								{this.renderAvatar()}
-								<View
-									style={[
-										styles.messageContent,
-										header && styles.messageContentWithHeader,
-										this.hasError() && header && styles.messageContentWithHeader,
-										this.hasError() && !header && styles.messageContentWithError,
-										this.isTemp() && styles.temp
-									]}
-								>
-									{this.renderUsername()}
-									{this.renderContent()}
-									{this.renderAttachment()}
-									{this.renderUrl()}
-									{this.renderReactions()}
-									{this.renderBroadcastReply()}
-								</View>
+						<View style={styles.flex}>
+							{this.renderAvatar()}
+							<View
+								style={[
+									styles.messageContent,
+									header && styles.messageContentWithHeader,
+									this.hasError() && header && styles.messageContentWithHeader,
+									this.hasError() && !header && styles.messageContentWithError,
+									this.isTemp() && styles.temp
+								]}
+							>
+								{this.renderUsername()}
+								{this.renderContent()}
+								{this.renderAttachment()}
+								{this.renderUrl()}
+								{this.renderReactions()}
+								{this.renderBroadcastReply()}
 							</View>
-							{reactionsModal
-								? (
-									<ReactionsModal
-										isVisible={reactionsModal}
-										reactions={reactions}
-										user={user}
-										customEmojis={customEmojis}
-										baseUrl={baseUrl}
-										close={closeReactions}
-									/>
-								)
-								: null
-							}
 						</View>
-					</RectButton>
-				</LongPressGestureHandler>
+						{reactionsModal
+							? (
+								<ReactionsModal
+									isVisible={reactionsModal}
+									reactions={reactions}
+									user={user}
+									customEmojis={customEmojis}
+									baseUrl={baseUrl}
+									close={closeReactions}
+								/>
+							)
+							: null
+						}
+					</View>
+				</TouchableWithoutFeedback>
 			</View>
 		);
 	}

app/containers/message/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Vibration, ViewPropTypes } from 'react-native';
+import { ViewPropTypes } from 'react-native';
 import { connect } from 'react-redux';
 import equal from 'deep-equal';
 
@@ -10,6 +10,7 @@ import {
 	toggleReactionPicker as toggleReactionPickerAction,
 	replyBroadcast as replyBroadcastAction
 } from '../../actions/messages';
+import { vibrate } from '../../utils/vibration';
 
 @connect(state => ({
 	baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
@@ -119,7 +120,7 @@ export default class MessageContainer extends React.Component {
 
 	onReactionLongPress = () => {
 		this.setState({ reactionsModal: true });
-		Vibration.vibrate(50);
+		vibrate();
 	}
 
 	get timeFormat() {

app/containers/message/styles.js

@@ -6,8 +6,12 @@ export default StyleSheet.create({
 	},
 	container: {
 		paddingVertical: 5,
-		flexDirection: 'row',
-		width: '100%'
+		width: '100%',
+		paddingLeft: 10,
+		paddingRight: 15,
+		flexDirection: 'column',
+		transform: [{ scaleY: -1 }],
+		flex: 1
 	},
 	messageContent: {
 		flex: 1,
@@ -23,13 +27,6 @@ export default StyleSheet.create({
 		flexDirection: 'row',
 		flex: 1
 	},
-	message: {
-		paddingLeft: 10,
-		paddingRight: 15,
-		flexDirection: 'column',
-		transform: [{ scaleY: -1 }],
-		flex: 1
-	},
 	textInfo: {
 		fontStyle: 'italic',
 		color: '#a0a0a0',

app/utils/vibration.js

@@ -0,0 +1,11 @@
+import { Vibration } from 'react-native';
+
+import { isAndroid } from './deviceInfo';
+
+const vibrate = () => {
+	if (isAndroid) {
+		Vibration.vibrate(30);
+	}
+};
+
+export { vibrate };

app/views/RoomMembersView/index.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-	FlatList, View, Vibration
-} from 'react-native';
+import { FlatList, View } from 'react-native';
 import ActionSheet from 'react-native-action-sheet';
 import { connect } from 'react-redux';
 import SafeAreaView from 'react-native-safe-area-view';
@@ -18,6 +16,7 @@ import database from '../../lib/realm';
 import { showToast } from '../../utils/info';
 import log from '../../utils/log';
 import { isAndroid } from '../../utils/deviceInfo';
+import { vibrate } from '../../utils/vibration';
 import I18n from '../../i18n';
 import SearchBox from '../../containers/SearchBox';
 import protectedFunction from '../../lib/methods/helpers/protectedFunction';
@@ -184,7 +183,7 @@ export default class RoomMembersView extends LoggedView {
 			this.actionSheetOptions.push(I18n.t('Mute'));
 		}
 		this.setState({ userLongPressed: user });
-		Vibration.vibrate(50);
+		vibrate();
 		this.showActionSheet();
 	}