How To Auto Resize React Native Gifted Chat Input?

Question

I use React Native Gifted Chat and I have a problem, when text input is more than two lines or the user uses enter then TextInput is not auto-resize. Like the picture below:

This is my code:

  <GiftedChat
            placeholder={'Type Here'}
            messages={this.state.messages}
            onSend={messages => {
              this.onSend(messages)
              this._sendChatMessage(messages[0].text)

            }}
            user={{
              _id: 'CUSTOMER',
            }}
            maxComposerHeight={200}
            scrollToBottom
            alignTop
            // minInputToolbarHeight={200}
            // maxInputLength={200}
            renderSend={this.renderSend}
            renderBubble={this.renderBubble}
            renderInputToolbar={this.state.isFinishOrder ? this.renderInputToolbarFinish : this.renderInputToolbar}
            renderAvatar={null}
            renderDay={null}
            renderTime={this.renderTime}
            renderFooter={this.renderFooter}
            isCustomViewBottom={true}

I want TextInput on React Native Gifted Chat to auto-resize. Please help. Thanks.

score 1 · Accepted Answer · answered Mar 11 '20 at 08:17

1

You don't really show the function that you use to call in the renderInputToolbar. So i can only make assumption.If my answer doesn't cover you pls update your post with the this.renderInputToolbar included.

By default the textInput uses autoResize so i can only assume that you forgot to pass props in your Input so:

///Pass props
renderInputToolbar = (props) => {

        return ( 
                 <InputToolbar 
                    {...props} 
       //Add the extra styles via containerStyle here
       //Add any other option you want to pass like placeholder
                 />;
       );
    }

answered Mar 11 '20 at 08:17

theocikos

1,684
1
9
7

This my render Toolbar – zidniryi Mar 11 '20 at 08:21
```. /** * * @param {JSX} props * this for toolbar send */ renderInputToolbar(props) { return ( ) }``` – zidniryi Mar 11 '20 at 08:21
Can you give me an examples or links because I already custom that? – zidniryi Mar 11 '20 at 08:24

How To Auto Resize React Native Gifted Chat Input?

1 Answers1