How To Auto Resize React Native Gifted Chat Input?

Asked
Active3 hr before
Viewed126 times

9 Answers

inputnativereact
90%

I want TextInput on React Native Gifted Chat to auto-resize. Please help. Thanks.,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:, Stack Overflow help chat

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
                 />;
       );
    }
88%

messages (Array) - Messages to display,isTyping (Bool) - Typing Indicator state; default false. If you userenderFooter it will override this.,text (String) - Input text; default is undefined, but if specified, it will override GiftedChat's internal state (e.g. for redux; see notes below)

import React, { useState, useCallback, useEffect } from 'react'
import { GiftedChat } from 'react-native-gifted-chat'

export function Example() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    setMessages([
      {
        _id: 1,
        text: 'Hello developer',
        createdAt: new Date(),
        user: {
          _id: 2,
          name: 'React Native',
          avatar: 'https://placeimg.com/140/140/any',
        },
      },
    ])
  }, [])

  const onSend = useCallback((messages = []) => {
    setMessages(previousMessages => GiftedChat.append(previousMessages, messages))
  }, [])

  return (
    <GiftedChat
      messages={messages}
      onSend={messages => onSend(messages)}
      user={{
        _id: 1,
      }}
    />
  )
}
load more v
72%

npm i react-native-gifted-chat,Using Yarn: yarn add react-native-gifted-chat,Gitgithub.com/FaridSafi/react-native-gifted-chat

import React, { useState, useCallback, useEffect } from 'react'import { GiftedChat } from 'react-native-gifted-chat' export function Example() {  const [messages, setMessages] = useState([]);   useEffect(() => {    setMessages([      {        _id1,        text'Hello developer',        createdAtnew Date(),        user: {          _id2,          name'React Native',          avatar'https://placeimg.com/140/140/any',        },      },    ])  }, [])   const onSend = useCallback((messages = []) => {    setMessages(previousMessages => GiftedChat.append(previousMessages, messages))  }, [])   return (    <GiftedChat      messages={messages}      onSend={messages => onSend(messages)}      user={{        _id: 1,      }}    />  )}
load more v
65%

We are the Borg. Your biological and technological distinctiveness will be added to our own. Resistance is futile.

Pretag
 Pretag team - issue, fix, solve, resolve
75%

This app also include the signin , signout and register function. We just need to use firebase and react native gifted chat.,In this article, we are going to create a chat app in a simple way. We do not need to use many crazy stuff to create this chat page. It can display the time, the avatar, the messages.

Pretag
 Pretag team - issue, fix, solve, resolve
40%

This was not an easy one. It took me a lot of work to find and fix the issue too + animate the input nicely. You simple can't use padding for your input, it will break the multi-line calculation (thats why you have this glitch),react-native-gifted-chat version: 0.13.0,I won't give any support on this, but here is my custom Composer, which you can add as custom prop to <GiftedChat>. Play with it until it fits your needs.

      <GiftedChat
        alignTop
        renderSend={() => null}
        renderAccessory={({ text, onSend }) => (
          <MessengerInputButtons
            sendButton={sendButton}
            onSend={onSend}
            text={text}
            showMediaPrompt={this.props.showMediaPrompt}
          />
        )}
        renderBubble={(props) => <ChatBubble {...props} />}
        messages={formattedMessages}
        renderMessageText={(props) => <MessageText {...props} />}
        renderMessageImage={(props) => <MessageImage {...props} />}
        renderTime={() => null}
        renderDay={(props) => <ChatTimeStamp {...props} />}
        renderAvatar={(msgs) => (
          <FailedMessage
            showRetryActionSheet={this.props.showRetryActionSheet}
            messages={msgs}
          />
        )}
        showUserAvatar
        placeholder={'Write a message...'}
        placeholderTextColor={colors.brightGrey}
        textInputStyle={styles.textInputStyle}
        renderInputToolbar={(props) => (
          <InputToolbar
            {...props}
            containerStyle={styles.inputContainerStyle}
          />
        )}
        onSend={sendButton ? () => {} : message => this._onSend(message)}
        minInputToolbarHeight={this.determineMinInputHeight()}
        keyboardShouldPersistTaps={'never'}
        imageStyle={{ margin: 0 }}
        user={{ _id: this.props.user.id }}
        textInputProps={{
          selectionColor: colors.seafoam,
          marginTop: 12,
          marginLeft: 0,
          marginBottom: interfaceHelper.styleSwitch({
            xphone: 21, iphone: 6, android: 6,
          }),
          marginRight: 0,
          paddingTop: 0,
        }}
      />
load more v
22%

Pretag
 Pretag team - issue, fix, solve, resolve
60%

Props available for react-native-gifted-chat,import GiftedChat from react-native-gifted-chat. This component is going to be essential in adding UI and chat functionalitie, import GiftedChat from react-native-gifted-chat. This component is going to be essential in adding UI and chat functionalitie s

yarn add react - native - gifted - chat
load more v
48%

focusTextInput() - Open the keyboard and focus the text input box,import { GiftedChat } from 'react-native-gifted-chat';,https://github.com/FaridSafi/react-native-gifted-chat/pull/1211

import React, { useState, useCallback, useEffect } from 'react'
import { GiftedChat } from 'react-native-gifted-chat'

export function Example() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    setMessages([
      {
        _id: 1,
        text: 'Hello developer',
        createdAt: new Date(),
        user: {
          _id: 2,
          name: 'React Native',
          avatar: 'https://placeimg.com/140/140/any',
        },
      },
    ])
  }, [])

  const onSend = useCallback((messages = []) => {
    setMessages(previousMessages => GiftedChat.append(previousMessages, messages))
  }, [])

  return (
    <GiftedChat
      messages={messages}
      onSend={messages => onSend(messages)}
      user={{
        _id: 1,
      }}
    />
  )
}
load more v

Other "input-native" queries related to "How To Auto Resize React Native Gifted Chat Input?"