React-native-gifted-chat: Show/Hide/Disable chat textinput ?

[eggybot]

is there any function I can use on how to disable/show/hide the textinput at the bottom of the chat list? I want this function to control so User must click the buttons on the chat bubble (renderCustomView) before he/she can proceed to input a text message.

thanks,

[mafiusu]

You could use renderInputToolbar as a prop for the GiftedChat and render it to null.

[eggybot]

Thanks, working now

renderInputToolbar(props) {
  if (this.state.noinput == true) {
  } else {
  return(
    <InputToolbar
    {...props}
    />
  ); 
}
}

[brunolemos]

This code works: renderInputToolbar={disable ? () => null : undefined}

[aamir-munir]

I am trying to hide input toolbar based on a state, below is my code:

messages={this.state.messages.reverse()}
renderInputToolbar={this.renderInputToolbar(this.state.toolbar)}
onSend={messages => this.onSend(messages)}
user={{
_id: 2,
}}
/>

renderInputToolbar(){
//if(this.state.toolbar){
return(

);
//}
}

but I cannot access state in that method? what I am doing wrong? or how I can do that?

[eshiply]

messages={this.state.messages.reverse()}
renderInputToolbar={this.renderInputToolbar(this.state.toolbar)}
onSend={messages => this.onSend(messages)}
user={{
_id: 2,
}}
/>

renderInputToolbar(){
//if(this.state.toolbar){
return(

);
//}
}

Try the code below:-
` messages={this.state.messages.reverse()}
**renderInputToolbar={(props) => this.renderInputToolbar(props)}**
onSend={messages => this.onSend(messages)}
user={{
_id: 2,
}}
/>

renderInputToolbar(props){
if(this.state.toolbar){
return(

);
}
}`

[martintjandra]

Try the code below:-
` messages={this.state.messages.reverse()}
**renderInputToolbar={(props) => this.renderInputToolbar(props)}**
onSend={messages => this.onSend(messages)}
user={{
_id: 2,
}}
/>

renderInputToolbar(props){
if(this.state.toolbar){
return(

);
}
}`

To explain @eshiply 's answer, you need to supply a fat arrow function, not an ordinary function. Or you can supply ordinary function, but you need to add "bind this" to that function. Long story short, just use fat arrow function if you need to access "this" inside the function, because it's automatically "bind this" for you.

So, either:

<...
    renderInputToolbar=(props) => this.renderInputToolbar(props}
.../>

or

<...
    renderInputToolbar={this.renderInputToolbar()}
.../>

renderInputToolbar = () => {
    if(this.state.toolbar) {
        return(
            <InputToolbar {...props} />
        );
    }
}

Notice the fat arrow (=>) and the syntax. More about that here.

[SiSa68]

In my case when I return null as renderInputToolbar, the textinput was hidden, but it's height remained as blank
This fix the blank box also:

minComposerHeight={0}
maxComposerHeight={0}
minInputToolbarHeight={0}
renderInputToolbar={() => null}

[aamir-munir]

Hello,

This is the format we can import in WooCommerce. We need as much data as
possible.

Remember not all are required but better to have all possible data.

Please let me know if you need more information.

Thank you

On Thu, Nov 14, 2019 at 3:14 AM Siyamak Fazleelahi [e-mail]
wrote:

In my case when I return null as renderInputToolbar, the textinput was
hidden, but it's height remained as blank
This fix the blank box also:

minComposerHeight={0}
maxComposerHeight={0}
minInputToolbarHeight={0}
renderInputToolbar={() => null}

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/FaridSafi/react-native-gifted-chat/issues/755?email_source=notifications&email_token=AAKVFFJSWC6QGPG4BTYGNV3QTUCHTA5CNFSM4ERAXHQKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEA7EPA#issuecomment-553775676,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAKVFFMCF63NOXHCGP5JRZ3QTUCHTANCNFSM4ERAXHQA
.

--
Regards,
Aamir Munir

[aamir-munir]

Wrong thread sorry

On Thu, Nov 14, 2019 at 11:46 AM Aamir Munir [e-mail] wrote:

Hello,

This is the format we can import in WooCommerce. We need as much data as
possible.

Remember not all are required but better to have all possible data.

Please let me know if you need more information.

Thank you

On Thu, Nov 14, 2019 at 3:14 AM Siyamak Fazleelahi <
[email protected]> wrote:

In my case when I return null as renderInputToolbar, the textinput was
hidden, but it's height remained as blank
This fix the blank box also:

minComposerHeight={0}
maxComposerHeight={0}
minInputToolbarHeight={0}
renderInputToolbar={() => null}

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/FaridSafi/react-native-gifted-chat/issues/755?email_source=notifications&email_token=AAKVFFJSWC6QGPG4BTYGNV3QTUCHTA5CNFSM4ERAXHQKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEA7EPA#issuecomment-553775676,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AAKVFFMCF63NOXHCGP5JRZ3QTUCHTANCNFSM4ERAXHQA
.

--
Regards,
Aamir Munir

>

Regards,
Aamir Munir

[frankyjuang]

In my case when I return null as renderInputToolbar, the textinput was hidden, but it's height remained as blank
This fix the blank box also:

minComposerHeight={0}
maxComposerHeight={0}
minInputToolbarHeight={0}
renderInputToolbar={() => null}

For me this is enough

minInputToolbarHeight={0}
renderInputToolbar={() => null}

[FayyazAliKhan1]

After hiding i want to show a message on it just like in whatsapp when some one leave a group then a message is displayed that you are no longer a participant of this group...kindly help me

[charithAmila]

renderInputToolbar={disable ? () => null : undefined}

Nice

[amc-apatel]

minComposerHeight={0}
maxComposerHeight={0}
minInputToolbarHeight={0}
renderInputToolbar={() => null}

Thanks. This worked, but not when keyboard is visible, If keyboard is visible it is showing blank space between message list and next component.