React Native Gifted Chat: How to hide keyboard and text input

Question

I am making a react native application using expo and am using react-native-gifted-chat for a chat like feature (https://github.com/FaridSafi/react-native-gifted-chat). In this feature, I only want certain users to be able to send a message. The users who cant should only be able to view the messages that have been sent.

In order to implement this, I need a way to hide the keyboard/text input for the users who are not authorized to send a message. I was reading through the documentation and am unsure of how to do this. Is there a way to hide the keyboard/text input and only load the messages?

Not sure if this is relevant but my code for the gifted chat is as follows:

<GiftedChat
      messages={this.state.messages}
      placeholder="Send your thoughts?"
      onSend={(messages) => this.sendMessage(messages)}
      user={{
        ...user details
      }}
/>

Thanks!

dansiemens · Accepted Answer · 2020-08-02T19:55:39.917

2

Just pass null for the prop renderInputToolbar:

<GiftedChat
    ...
    renderInputToolbar={() => { return null }}
/>

edited Aug 02 '20 at 19:55

answered Aug 01 '20 at 01:57

dansiemens

530
1
4
12

This does not seem to work. The keyboard/text input still appears at the bottom of the page. – Questions123 Aug 02 '20 at 19:26
My bad. Edited. – dansiemens Aug 02 '20 at 19:55
Is there a way to make it so the keyboard has height 0? Right now it disappears, but there is still a 44px gap between the messages and the bottom of the screen. Thanks! – Questions123 Aug 05 '20 at 18:00

score 0 · Answer 2 · edited Sep 13 '20 at 01:47

0

Set the minInputToolbarHeight attribute to zero:

<GiftedChat
    ...
    minInputToolbarHeight=0
/>

edited Sep 13 '20 at 01:47

ib.

27,830
11
80
100

answered Sep 12 '20 at 15:40

Gunjan Mistry

1

React Native Gifted Chat: How to hide keyboard and text input

2 Answers2