React-native-gifted-chat: InputToolbar height dynamically

[luisfuertes]

Issue Description

Im trying to use a list of button options or default InputToolBar dynamycally.

I try to render options buttons with renderInputToolbar prop, but container height is always the same.

This is my code:

renderInputToolbar(props) {
    if(this.state.responseType == "text") {
      return <InputToolbar {...props} />
    } else if(this.state.responseType == "options") {
      return <AnswerMultipleOptions options={[1,2,3]} onPress={(opt) => console.log("opt: ", opt)} />
    }
  }

  render() {
    return (
        <View style={{flex: 1, backgroundColor: 'red'}}>
          <GiftedChat
            messages={this.state.messages}
            loadEarlier={false}
            onSend={this.onSend.bind(this)}
            renderInputToolbar={this.renderInputToolbar.bind(this)}

            user={{
              _id: 1,
            }}
          />
        </View>
    )
  }

Capture:

Somebody know how can i change the renderInputToolbar height dynamically?

Thanks

[luisfuertes]

Ok, now i calculate the height of my AnswerMultipleOptions component and set to minInputToolbarHeight prop, it works perfect when show options, but when i come back to show defaultText input and change renderInputToolbar to default height, it doesnt work until i click on inputText.

Captures:

Here minInputToolbarHeight is 44.5, but dont render the changes

And when i click on textInput:

And code now:

  constructor(props) {
    super(props)
    this.state = {
      messages: [],
      responseType: 'text',
      minInputToolbarHeight: 44.5,
    }
  }

onSend(messages = []) {
    this.setState({responseType: 'options'})
  }

  renderInputToolbar(props) {
    if(this.state.responseType == "text") {
      return (
        <View onLayout={(e) => { this.calculateMinInputToolbarHeight(e.nativeEvent.layout) }}>
          <InputToolbar {...props} />
        </View>
      )
    } else if(this.state.responseType == "options") {
      return (
        <View onLayout={(e) => { this.calculateMinInputToolbarHeight(e.nativeEvent.layout) }}>
          <AnswerMultipleOptions options={[1,2,3]} onPress={(opt) => this.setState({responseType: 'text'})} />
        </View>
      )
    }
  }

  calculateMinInputToolbarHeight(layout) {
    if(layout && layout.height){
      this.setState({minInputToolbarHeight: layout.height})
    }
  }

  render() {
    console.log("this.state.minInputToolbarHeight: ", this.state.minInputToolbarHeight)
    return (
      <View style={{flex: 1, backgroundColor: 'red'}}>
          <GiftedChat
            messages={this.state.messages}
            loadEarlier={false}
            onSend={this.onSend.bind(this)}
            renderInputToolbar={this.renderInputToolbar.bind(this)}
            minInputToolbarHeight={this.state.minInputToolbarHeight}
            user={{
              _id: 1,
            }}
          />
      </View>
    )
  }

[luisfuertes]

Im trying to add ref to chat (ref="chat") and when my renderInputToolbarheight change i call:
this.refs.chat.onInputSizeChanged(layout)

But it doesnt work xd Maybe some of this.refs.chat functions can help with this. @FaridSafi you know some about this?

[luisfuertes]

Finally i solved it with:

  calculateMinInputToolbarHeight(layout) {
    if(layout){
      this.setState({minInputToolbarHeight: layout.height})
    }
  }

and:

  componentDidUpdate(prevProps, prevState) {
    if(prevState.minInputToolbarHeight != this.state.minInputToolbarHeight){
      this.refs.chat.resetInputToolbar()
    }
  }

because the method setMinInputToolbarHeight is "to do"