Message box issues (#218)

android/app/src/main/AndroidManifest.xml

@@ -15,7 +15,6 @@
    	android:name="${applicationId}.permission.C2D_MESSAGE"
    	android:protectionLevel="signature" />
 		<uses-permission android:name="${applicationId}.permission.C2D_MESSAGE" />
-		<uses-permission android:name="android.permission.VIBRATE" />
 
     <uses-sdk
         android:minSdkVersion="16"

app/containers/MessageBox/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, TextInput, SafeAreaView, Platform, FlatList, Text, TouchableOpacity, Keyboard } from 'react-native';
+import { View, TextInput, SafeAreaView, FlatList, Text, TouchableOpacity, Keyboard } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import ImagePicker from 'react-native-image-picker';
 import { connect } from 'react-redux';
@@ -50,7 +50,6 @@ export default class MessageBox extends React.PureComponent {
 	constructor(props) {
 		super(props);
 		this.state = {
-			height: 20,
 			messageboxHeight: 0,
 			text: '',
 			mentions: [],
@@ -71,17 +70,19 @@ export default class MessageBox extends React.PureComponent {
 		}
 	}
 
-	onChange() {
+	onChangeText(text) {
+		this.setState({ text });
+
 		requestAnimationFrame(() => {
 			const { start, end } = this.component._lastNativeSelection;
 
 			const cursor = Math.max(start, end);
 
-			const text = this.component._lastNativeText;
+			const lastNativeText = this.component._lastNativeText;
 
 			const regexp = /(#|@)([a-z._-]+)$/im;
 
-			const result = text.substr(0, cursor).match(regexp);
+			const result = lastNativeText.substr(0, cursor).match(regexp);
 
 			if (!result) {
 				return this.stopTrackingMention();
@@ -92,11 +93,6 @@ export default class MessageBox extends React.PureComponent {
 		});
 	}
 
-
-	onChangeText(text) {
-		this.setState({ text });
-	}
-
 	get leftButtons() {
 		const { editing } = this.props;
 		if (editing) {
@@ -147,10 +143,6 @@ export default class MessageBox extends React.PureComponent {
 		return icons;
 	}
 
-	updateSize = (height) => {
-		this.setState({ height: height + (Platform.OS === 'ios' ? 0 : 0) });
-	}
-
 	addFile = () => {
 		const options = {
 			maxHeight: 1960,
@@ -407,7 +399,6 @@ export default class MessageBox extends React.PureComponent {
 		return <AnimatedContainer visible={showMentionsContainer} subview={usersList} messageboxHeight={messageboxHeight} />;
 	}
 	render() {
-		const { height } = this.state;
 		return (
 			<View>
 				<SafeAreaView
@@ -418,18 +409,16 @@ export default class MessageBox extends React.PureComponent {
 						{this.leftButtons}
 						<TextInput
 							ref={component => this.component = component}
-							style={[styles.textBoxInput, { height }]}
+							style={styles.textBoxInput}
 							returnKeyType='default'
 							blurOnSubmit={false}
 							placeholder='New Message'
 							onChangeText={text => this.onChangeText(text)}
-							onChange={event => this.onChange(event)}
 							value={this.state.text}
 							underlineColorAndroid='transparent'
 							defaultValue=''
 							multiline
 							placeholderTextColor='#9EA2A8'
-							onContentSizeChange={e => this.updateSize(e.nativeEvent.contentSize.height)}
 						/>
 						{this.rightButtons}
 					</View>

app/containers/MessageBox/style.js

@@ -9,8 +9,6 @@ export default StyleSheet.create({
 		alignItems: 'center',
 		borderTopWidth: 1,
 		borderTopColor: '#D8D8D8',
-		paddingHorizontal: 15,
-		paddingVertical: 15,
 		zIndex: 2
 	},
 	safeAreaView: {
@@ -23,14 +21,13 @@ export default StyleSheet.create({
 		flexGrow: 0
 	},
 	textBoxInput: {
-		paddingVertical: 0,
+		paddingHorizontal: 5,
-		paddingHorizontal: 10,
+		textAlignVertical: 'center',
-		textAlignVertical: 'top',
 		maxHeight: 120,
 		flexGrow: 1,
 		width: 1,
-		paddingTop: 0,
+		paddingTop: 15,
-		paddingBottom: 0
+		paddingBottom: 15
 	},
 	editing: {
 		backgroundColor: '#fff5df'
@@ -39,7 +36,7 @@ export default StyleSheet.create({
 		color: '#2F343D',
 		fontSize: 20,
 		textAlign: 'center',
-		paddingHorizontal: 5,
+		padding: 15,
 		flex: 0
 	},
 	actionRow: {

app/views/RoomView/index.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Text, View, Button, SafeAreaView } from 'react-native';
+import { Text, View, Button, SafeAreaView, Platform } from 'react-native';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import equal from 'deep-equal';
+import KeyboardSpacer from 'react-native-keyboard-spacer';
 
 import { ListView } from './ListView';
 import * as actions from '../../actions';
@@ -16,14 +17,12 @@ import MessageActions from '../../containers/MessageActions';
 import MessageErrorActions from '../../containers/MessageErrorActions';
 import MessageBox from '../../containers/MessageBox';
 import Typing from '../../containers/Typing';
-import KeyboardView from '../../presentation/KeyboardView';
 import Header from '../../containers/Header';
 import RoomsHeader from './Header';
 import Banner from './banner';
 import styles from './styles';
 
 import debounce from '../../utils/debounce';
-import scrollPersistTaps from '../../utils/scrollPersistTaps';
 
 const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1._id !== r2._id });
 
@@ -196,8 +195,7 @@ export default class RoomView extends React.Component {
 	}
 	render() {
 		return (
-			<KeyboardView contentContainerStyle={styles.container} keyboardVerticalOffset={64}>
+			<View style={styles.container}>
-
 				<Banner />
 				<SafeAreaView style={styles.safeAreaView}>
 					<ListView
@@ -210,13 +208,15 @@ export default class RoomView extends React.Component {
 						dataSource={this.state.dataSource}
 						renderRow={item => this.renderItem(item)}
 						initialListSize={10}
-						{...scrollPersistTaps}
+						keyboardShouldPersistTaps='always'
+						keyboardDismissMode='on-drag'
 					/>
 				</SafeAreaView>
 				{this.renderFooter()}
 				<MessageActions room={this.room} />
 				<MessageErrorActions />
-			</KeyboardView>
+				{Platform.OS === 'ios' ? <KeyboardSpacer /> : null}
+			</View>
 		);
 	}
 }

package-lock.json

@@ -12542,6 +12542,11 @@
         "react-native-iphone-x-helper": "1.0.1"
       }
     },
+    "react-native-keyboard-spacer": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/react-native-keyboard-spacer/-/react-native-keyboard-spacer-0.4.1.tgz",
+      "integrity": "sha1-RvGKMgQyCYol6p+on1FD3SVNMy0="
+    },
     "react-native-loading-spinner-overlay": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/react-native-loading-spinner-overlay/-/react-native-loading-spinner-overlay-0.5.2.tgz",

package.json

@@ -45,6 +45,7 @@
     "react-native-image-picker": "^0.26.7",
     "react-native-img-cache": "^1.5.2",
     "react-native-keyboard-aware-scroll-view": "^0.4.1",
+    "react-native-keyboard-spacer": "^0.4.1",
     "react-native-loading-spinner-overlay": "^0.5.2",
     "react-native-meteor": "^1.2.0",
     "react-native-modal": "^4.1.1",