Keyboard dismiss (#219)

* Fix keyboard scroll

* * Input resize
* Touchable input

* keyboard dismiss

* Remove unnecessary emoji picker when it's not in use

app/containers/MessageBox/AnimatedContainer.js

@@ -12,6 +12,7 @@ export default class MessageBox extends React.PureComponent {
 	constructor(props) {
 		super(props);
 		this.animatedBottom = new Animated.Value(0);
+		this.state = { render: false };
 	}
 
 	componentWillReceiveProps(nextProps) {
@@ -25,6 +26,7 @@ export default class MessageBox extends React.PureComponent {
 	}
 
 	show() {
+		this.setState({ render: true });
 		this.animatedBottom.setValue(0);
 		Animated.timing(this.animatedBottom, {
 			toValue: 1,
@@ -39,6 +41,9 @@ export default class MessageBox extends React.PureComponent {
 			duration: 300,
 			useNativeDriver: true
 		}).start();
+		setTimeout(() => {
+			this.setState({ render: false });
+		}, 300);
 	}
 
 	render() {
@@ -47,6 +52,10 @@ export default class MessageBox extends React.PureComponent {
 			outputRange: [0, -this.props.messageboxHeight - 200]
 		});
 
+		if (!this.state.render) {
+			return null;
+		}
+
 		return (
 			<Animated.View
 				style={{

app/containers/Typing.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import PropTypes from 'prop-types';
-import { StyleSheet, Text } from 'react-native';
+import { StyleSheet, Text, Keyboard } from 'react-native';
 import { connect } from 'react-redux';
 
 const styles = StyleSheet.create({
@@ -23,12 +23,15 @@ export default class Typing extends React.Component {
 	shouldComponentUpdate(nextProps) {
 		return this.props.usersTyping.join() !== nextProps.usersTyping.join();
 	}
+	onPress = () => {
+		Keyboard.dismiss();
+	}
 	get usersTyping() {
 		const users = this.props.usersTyping.filter(_username => this.props.username !== _username);
 		return users.length ? `${ users.join(' ,') } ${ users.length > 1 ? 'are' : 'is' } typing` : '';
 	}
 	render() {
-		return (<Text style={styles.typing}>{this.usersTyping}</Text>);
+		return (<Text style={styles.typing} onPress={() => this.onPress()}>{this.usersTyping}</Text>);
 	}
 }
 

app/containers/message/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { View, TouchableHighlight, Text, TouchableOpacity, Animated } from 'react-native';
+import { View, TouchableHighlight, Text, TouchableOpacity, Animated, Keyboard } from 'react-native';
 import { connect } from 'react-redux';
 import Icon from 'react-native-vector-icons/MaterialIcons';
 import moment from 'moment';
@@ -64,6 +64,10 @@ export default class Message extends React.Component {
 		return this.props.item._updatedAt.toGMTString() !== nextProps.item._updatedAt.toGMTString() || this.props.item.status !== nextProps.item.status;
 	}
 
+	onPress = () => {
+		Keyboard.dismiss();
+	}
+
 	onLongPress() {
 		const { item } = this.props;
 		this.props.actionsShow(JSON.parse(JSON.stringify(item)));
@@ -181,6 +185,7 @@ export default class Message extends React.Component {
 
 		return (
 			<TouchableHighlight
+				onPress={() => this.onPress()}
 				onLongPress={() => this.onLongPress()}
 				disabled={this.isDeleted() || this.hasError()}
 				underlayColor='#FFFFFF'

app/views/RoomView/index.js

@@ -209,7 +209,7 @@ export default class RoomView extends React.Component {
 						renderRow={item => this.renderItem(item)}
 						initialListSize={10}
 						keyboardShouldPersistTaps='always'
-						keyboardDismissMode='on-drag'
+						keyboardDismissMode='none'
 					/>
 				</SafeAreaView>
 				{this.renderFooter()}