FlatList spaces between newly added messages [bug]

[shaheem-khanzada]

[Parthasarath]

const COMPOSER_HEIGHT = 60;

---

renderInputToolbar(props) { return <InputToolbar {...props} containerStyle={[styles.inputToolBar]} />; }

renderComposer(props) { return <Composer {...props} placeholder={'Type a message...'} placeholderColor={'#BCBCBC'} textInputStyle={styles.composerText} />; }

---

<GiftedChat composerHeight={COMPOSER_HEIGHT} minInputToolbarHeight={COMPOSER_HEIGHT} renderAvatar={null} messages={currentInbox ? currentInbox.messages.slice().reverse() : []} renderBubble={props => this.renderBubble(props)} renderMessageText={props => this.renderMessageText(props)} renderTime={props => this.renderTime(props)} renderInputToolbar={props => this.renderInputToolbar(props)} renderComposer={props => this.renderComposer(props)} renderActions={props => this.renderActions(props)} renderSend={props => this.renderSend(props)} renderMessageImage={props => this.renderMessageImage(props)} onSend={messages => this.onSend(messages)} user={user} />

---

styles

inputToolBar: { position: 'absolute', bottom: 0, left: 0, right: 0, maxHeight: COMPOSER_HEIGHT, minHeight: COMPOSER_HEIGHT, justifyContent: 'center', borderTopWidth: 0, shadowOpacity: 0.10, shadowColor: 'black', shadowOffset: { width: 0, height: -2 }, elevation: 2, shadowRadius: 2 }, composerText: { maxHeight: COMPOSER_HEIGHT, fontFamily: 'Quicksand-Medium', color: '#333333', fontSize: Normalize(14), },

Change composer height to adjust that spaces between newly added messages.

[shaheem-khanzada]

have you also faced same issue ??

[Parthasarath]

have you also faced same issue ??

Yes

[shaheem-khanzada]

i am still facing i set both composerHeight={COMPOSER_HEIGHT} minInputToolbarHeight={COMPOSER_HEIGHT} but noting happens

[Parthasarath]

i am still facing i set both composerHeight={COMPOSER_HEIGHT} minInputToolbarHeight={COMPOSER_HEIGHT} but noting happens

render() { const COMPOSER_HEIGHT = 60; return ( <GiftedChat composerHeight={COMPOSER_HEIGHT} minInputToolbarHeight={COMPOSER_HEIGHT} messages={this.state.messages} onSend={messages => this.onSend(messages)} user={{ _id: this.state.customerId }} /> ) }

Try this method

[shaheem-khanzada]

noting happens i guess its not problem with composer height its problem with flatList

[shaheem-khanzada]

acctually i am using new updated code by download zip and paste all new code since its not on npm thats why i am having these issues when i remove shouldComponent update from giftedchat/messages component it work fine because it re render all messages again event if we append

[xcarpentier]

Hi, @shaheem-khanzada Can you please make a PR with your code fix? Thanks

[shaheem-khanzada]

its not get fixed yet because shouldComponentUpdate do great job with performace but when we remove component should update life cycle it start rendering all messages again and do not create space

[xcarpentier]

Fixed in v0.7.2