fixed problem with messages overflow, fixed problem with send render

Author: Jan Romaniak

example/src/App.js

@@ -9,7 +9,7 @@ messages.push(generateMessage(`Idylla 2`, 3,  {image:'https://www.wykop.pl/cdn/c
 messages.push(generateMessage(`Goood 1`, 2, {image:'http://img2.dmty.pl//uploads/201010/1286036107_by_julia2332_600.jpg'}));
 messages.push(generateMessage(`This is a great example of system message`, 2, {system: true}));
 
-for (let i = 0; i < 20; i++) {
+for (let i = 0; i < 30; i++) {
   messages.push(generateMessage(loremIpsum.substring(0,(Math.random() * 100000)%loremIpsum.length), i))
 }
 
@@ -67,20 +67,23 @@ class App extends Component {
 }
 const styles = {
   container: {
-    display:'flex',
-    flexDirection: 'row',
-    height: '100vh'
+    flex: 1,
+    display: "flex",
+    flexDirection: "row",
+    height: "100vh",
   },
   conversationList: {
     display:'flex',
     flex: 1,
   },
   chat: {
-    display:'flex',
+    display: "flex",
     flex: 3,
-    borderWidth: '1px',
-    borderColor: '#ccc',
-    borderStyle: 'solid'
+    flexDirection: "column",
+    borderWidth: "1px",
+    borderColor: "#ccc",
+    borderRightStyle: "solid",
+    borderLeftStyle: "solid",
   },
   converationDetails: {
     display:'flex',

src/Composer.js

@@ -8,17 +8,16 @@ import { MIN_COMPOSER_HEIGHT, DEFAULT_PLACEHOLDER } from './Constant';
 import Color from './Color';
 
 export default class Composer extends React.Component {
-
   onContentSizeChange(e) {
     const { contentSize } = e.nativeEvent;
 
     // Support earlier versions of React Native on Android.
     if (!contentSize) return;
 
     if (
-      !this.contentSize ||
-      this.contentSize.width !== contentSize.width ||
-      this.contentSize.height !== contentSize.height
+      !this.contentSize
+      || this.contentSize.width !== contentSize.width
+      || this.contentSize.height !== contentSize.height
     ) {
       this.contentSize = contentSize;
       this.props.onInputSizeChanged(this.contentSize);
@@ -38,10 +37,10 @@ export default class Composer extends React.Component {
         placeholder={this.props.placeholder}
         placeholderTextColor={this.props.placeholderTextColor}
         multiline={this.props.multiline}
-        onChange={(e) => this.onContentSizeChange(e)}
-        onContentSizeChange={(e) => this.onContentSizeChange(e)}
-        onChangeText={(text) => this.onChangeText(text)}
-        style={[styles.textInput, this.props.textInputStyle, { height: this.props.composerHeight }]}
+        onChange={e => this.onContentSizeChange(e)}
+        onContentSizeChange={e => this.onContentSizeChange(e)}
+        onChangeText={text => this.onChangeText(text)}
+        style={[styles.textInput, this.props.textInputStyle, { height: this.props.composerHeight - 1 }]}
         autoFocus={this.props.textInputAutoFocus}
         value={this.props.text}
         enablesReturnKeyAutomatically
@@ -51,18 +50,16 @@ export default class Composer extends React.Component {
       />
     );
   }
-
 }
 
 const styles = StyleSheet.create({
   textInput: {
     flex: 1,
-    minHeight: 40,
     marginLeft: 10,
     fontSize: 16,
     lineHeight: 16,
-    marginTop: 3,
-    marginBottom: 3,
+    paddingTop: 3,
+    paddingBottom: 3,
     outline: 'none',
   },
 });

src/Constant.js

@@ -1,5 +1,5 @@
 export const MIN_COMPOSER_HEIGHT = 41;
-export const MAX_COMPOSER_HEIGHT = 100;
+export const MAX_COMPOSER_HEIGHT = 41;
 export const DEFAULT_PLACEHOLDER = 'Type a message...';
 export const DATE_FORMAT = 'll';
 export const TIME_FORMAT = 'LT';

src/GiftedChat.js

@@ -39,7 +39,6 @@ import {
 } from './Constant';
 
 class GiftedChat extends React.Component {
-
   constructor(props) {
     super(props);
 
@@ -54,15 +53,10 @@ class GiftedChat extends React.Component {
 
     this.state = {
       isInitialized: false, // initialization will calculate maxHeight before rendering the chat
-      composerHeight: this.props.minComposerHeight,
-      messagesContainerHeight: null,
+      composerHeight: 40,
       typingDisabled: false,
     };
 
-    this.onKeyboardWillShow = this.onKeyboardWillShow.bind(this);
-    this.onKeyboardWillHide = this.onKeyboardWillHide.bind(this);
-    this.onKeyboardDidShow = this.onKeyboardDidShow.bind(this);
-    this.onKeyboardDidHide = this.onKeyboardDidHide.bind(this);
     this.onSend = this.onSend.bind(this);
     this.getLocale = this.getLocale.bind(this);
     this.onInputSizeChanged = this.onInputSizeChanged.bind(this);
@@ -72,11 +66,6 @@ class GiftedChat extends React.Component {
 
     this.invertibleScrollViewProps = {
       inverted: this.props.inverted,
-      keyboardShouldPersistTaps: this.props.keyboardShouldPersistTaps,
-      onKeyboardWillShow: this.onKeyboardWillShow,
-      onKeyboardWillHide: this.onKeyboardWillHide,
-      onKeyboardDidShow: this.onKeyboardDidShow,
-      onKeyboardDidHide: this.onKeyboardDidHide,
     };
   }
 
@@ -156,23 +145,6 @@ class GiftedChat extends React.Component {
     return this._messages;
   }
 
-  setMaxHeight(height) {
-    this._maxHeight = height;
-  }
-
-  getMaxHeight() {
-    return this._maxHeight;
-  }
-
-  setKeyboardHeight(height) {
-    this._keyboardHeight = 0;
-  }
-
-  getKeyboardHeight() {
-    return 0;
-  }
-
-
   setBottomOffset(value) {
     this._bottomOffset = value;
   }
@@ -207,82 +179,9 @@ class GiftedChat extends React.Component {
     return this._isMounted;
   }
 
-  // TODO: setMinInputToolbarHeight
-  getMinInputToolbarHeight() {
-    return this.props.renderAccessory
-      ? this.props.minInputToolbarHeight * 2
-      : this.props.minInputToolbarHeight;
-  }
-  calculateInputToolbarHeight(composerHeight) {
-    return composerHeight + (this.getMinInputToolbarHeight() - this.props.minComposerHeight);
-  }
-
-  /**
-   * Returns the height, based on current window size, without taking the keyboard into account.
-   */
-  getBasicMessagesContainerHeight(composerHeight = this.state.composerHeight) {
-    return this.getMaxHeight() - this.calculateInputToolbarHeight(composerHeight);
-  }
-
-  /**
-   * Returns the height, based on current window size, taking the keyboard into account.
-   */
-  getMessagesContainerHeightWithKeyboard(composerHeight = this.state.composerHeight) {
-    return this.getBasicMessagesContainerHeight(composerHeight) - this.getKeyboardHeight() + this.getBottomOffset();
-  }
-
-  prepareMessagesContainerHeight(value) {
-    if (this.props.isAnimated === true) {
-      return new Animated.Value(value);
-    }
-    return value;
-  }
-
-  onKeyboardWillShow(e) {
-    this.setIsTypingDisabled(true);
-    this.setKeyboardHeight(e.endCoordinates ? e.endCoordinates.height : e.end.height);
-    this.setBottomOffset(this.props.bottomOffset);
-    const newMessagesContainerHeight = this.getMessagesContainerHeightWithKeyboard();
-    if (this.props.isAnimated === true) {
-      Animated.timing(this.state.messagesContainerHeight, {
-        toValue: newMessagesContainerHeight,
-        duration: 210,
-      }).start();
-    } else {
-      this.setState({
-        messagesContainerHeight: newMessagesContainerHeight,
-      });
-    }
-  }
-
-  onKeyboardWillHide() {
-    this.setIsTypingDisabled(true);
-    this.setKeyboardHeight(0);
-    this.setBottomOffset(0);
-    const newMessagesContainerHeight = this.getBasicMessagesContainerHeight();
-    if (this.props.isAnimated === true) {
-      Animated.timing(this.state.messagesContainerHeight, {
-        toValue: newMessagesContainerHeight,
-        duration: 210,
-      }).start();
-    } else {
-      this.setState({
-        messagesContainerHeight: newMessagesContainerHeight,
-      });
-    }
-  }
-
-  onKeyboardDidShow(e) {
-    this.setIsTypingDisabled(false);
-  }
-
-  onKeyboardDidHide(e) {
-    this.setIsTypingDisabled(false);
-  }
-
   scrollToBottom(animated = true) {
     if (this._messageContainerRef === null) {
-      return
+      return;
     }
     this._messageContainerRef.scrollTo({
       y: 0,
@@ -294,9 +193,10 @@ class GiftedChat extends React.Component {
   renderMessages() {
     return (
       <div style={{
-        height: this.state.messagesContainerHeight,
-        display: 'flex'
-      }}>
+        height: `calc(100% - ${this.state.composerHeight}px)`,
+        display: 'flex',
+      }}
+      >
         <MessageContainer
           {...this.props}
           invertibleScrollViewProps={this.invertibleScrollViewProps}
@@ -312,14 +212,12 @@ class GiftedChat extends React.Component {
     if (!Array.isArray(messages)) {
       messages = [messages];
     }
-    messages = messages.map((message) => {
-      return {
-        ...message,
-        user: this.props.user,
-        createdAt: new Date(),
-        id: this.props.messageIdGenerator(),
-      };
-    });
+    messages = messages.map(message => ({
+      ...message,
+      user: this.props.user,
+      createdAt: new Date(),
+      id: this.props.messageIdGenerator(),
+    }));
 
     if (shouldResetInputToolbar === true) {
       this.setIsTypingDisabled(true);
@@ -343,12 +241,8 @@ class GiftedChat extends React.Component {
       this.textInput.clear();
     }
     this.notifyInputTextReset();
-    const newComposerHeight = this.props.minComposerHeight;
-    const newMessagesContainerHeight = this.getMessagesContainerHeightWithKeyboard(newComposerHeight);
     this.setState({
       text: this.getTextFromProp(''),
-      composerHeight: newComposerHeight,
-      messagesContainerHeight: this.prepareMessagesContainerHeight(newMessagesContainerHeight),
     });
   }
 
@@ -359,17 +253,6 @@ class GiftedChat extends React.Component {
   }
 
   onInputSizeChanged(size) {
-    const newComposerHeight = Math.max(
-      this.props.minComposerHeight,
-      Math.min(this.props.maxComposerHeight, size.height),
-    );
-    const newMessagesContainerHeight = this.getMessagesContainerHeightWithKeyboard(
-      newComposerHeight,
-    );
-    this.setState({
-      composerHeight: newComposerHeight,
-      messagesContainerHeight: this.prepareMessagesContainerHeight(newMessagesContainerHeight),
-    });
   }
 
   onInputTextChanged(text) {
@@ -397,14 +280,9 @@ class GiftedChat extends React.Component {
       return;
     }
     this.notifyInputTextReset();
-    this.setMaxHeight(1000);
-    const newComposerHeight = '100%';
-    const newMessagesContainerHeight = newComposerHeight;// this.getMessagesContainerHeightWithKeyboard(newComposerHeight);
     this.setState({
       isInitialized: true,
       text: this.getTextFromProp(''),
-      composerHeight: newComposerHeight,
-      messagesContainerHeight: this.prepareMessagesContainerHeight(newMessagesContainerHeight),
     });
   }
 
@@ -415,13 +293,13 @@ class GiftedChat extends React.Component {
     const inputToolbarProps = {
       ...this.props,
       text: this.getTextFromProp(this.state.text),
-      composerHeight: Math.max(this.props.minComposerHeight, this.state.composerHeight),
+      composerHeight: this.state.composerHeight,
       onSend: this.onSend,
       onInputSizeChanged: this.onInputSizeChanged,
       onTextChanged: this.onInputTextChanged,
       textInputProps: {
         ...this.props.textInputProps,
-        ref: (textInput) => (this.textInput = textInput),
+        ref: textInput => (this.textInput = textInput),
         maxLength: this.getIsTypingDisabled() ? 0 : this.props.maxInputLength,
       },
     };
@@ -467,13 +345,12 @@ class GiftedChat extends React.Component {
       </View>
     );
   }
-
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    height: '100%'
+    height: '100%',
   },
 });
 

src/InputToolbar.js

@@ -10,7 +10,6 @@ import Actions from './Actions';
 import Color from './Color';
 
 export default class InputToolbar extends React.Component {
-
   constructor(props) {
     super(props);
 
@@ -51,7 +50,7 @@ export default class InputToolbar extends React.Component {
   renderActions() {
     if (this.props.renderActions) {
       return this.props.renderActions(this.props);
-    } else if (this.props.onPressActionButton) {
+    } if (this.props.onPressActionButton) {
       return <Actions {...this.props} />;
     }
     return null;
@@ -83,7 +82,7 @@ export default class InputToolbar extends React.Component {
 
   render() {
     return (
-      <View style={[styles.container, this.props.containerStyle, { position: this.state.position }]}>
+      <View style={[styles.container, this.props.containerStyle, { position: this.state.position, height: this.props.composerHeight }]}>
         <View style={[styles.primary, this.props.primaryStyle]}>
           {this.renderActions()}
           {this.renderComposer()}
@@ -93,7 +92,6 @@ export default class InputToolbar extends React.Component {
       </View>
     );
   }
-
 }
 
 const styles = StyleSheet.create({