diff --git a/app/containers/MessageBox.js b/app/containers/MessageBox.js index 95de126b..7b81d186 100644 --- a/app/containers/MessageBox.js +++ b/app/containers/MessageBox.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { View, TextInput, StyleSheet, SafeAreaView } from 'react-native'; +import { View, TextInput, StyleSheet, SafeAreaView, Platform } from 'react-native'; import Icon from 'react-native-vector-icons/MaterialIcons'; import ImagePicker from 'react-native-image-picker'; import { connect } from 'react-redux'; @@ -22,14 +22,19 @@ const styles = StyleSheet.create({ }, textBoxInput: { height: 40, - alignSelf: 'stretch', - flexGrow: 1 + minHeight: 40, + maxHeight: 120, + flexGrow: 1, + paddingHorizontal: 10, + paddingTop: 12 }, actionButtons: { color: '#aaa', paddingTop: 10, paddingBottom: 10, - fontSize: 20 + paddingHorizontal: 8, + fontSize: 20, + alignSelf: 'flex-end' }, editing: { backgroundColor: '#fff5df' @@ -57,6 +62,13 @@ export default class MessageBox extends React.Component { clearInput: PropTypes.func } + constructor(props) { + super(props); + this.state = { + height: 40 + }; + } + componentWillReceiveProps(nextProps) { if (this.props.message !== nextProps.message && nextProps.message) { this.component.setNativeProps({ text: nextProps.message.msg }); @@ -111,6 +123,10 @@ export default class MessageBox extends React.Component { }); } + updateSize = (height) => { + this.setState({ height: height + (Platform.OS === 'ios' ? 20 : 0) }); + } + editCancel() { this.props.editCancel(); this.component.setNativeProps({ text: '' }); @@ -125,20 +141,27 @@ export default class MessageBox extends React.Component { } render() { + const { height } = this.state; return ( {this.renderLeftButton()} this.component = component} - style={styles.textBoxInput} - returnKeyType='send' - onSubmitEditing={event => this.submit(event.nativeEvent.text)} + style={[styles.textBoxInput, { height }]} + returnKeyType='default' blurOnSubmit={false} placeholder='New message' onChangeText={text => this.props.typing(text.length > 0)} underlineColorAndroid='transparent' defaultValue='' + multiline + onContentSizeChange={e => this.updateSize(e.nativeEvent.contentSize.height)} + /> + this.submit(this.component._lastNativeText)} />