React-native-gifted-chat: Dynamically render accesory bar - accessory bar takes height even when render returns null

[florianbepunkt]

Issue Description

I want to dynamically render an accesory bar. By defualt my accessoryBar render function returns null. When I tap an emoticons button for example, it returns a View with an emoticons picker and so on.

a simplified version of my accessory bar method

renderAccessory() {
    switch (this.state.renderAccessory) {
      case 'emoticons':
        console.log('check');
        return(
          <View>
            <Text>
              Show Emoticons Picker here
            </Text>
          </View>
        );
        break;

      default:
        return null;
    }
  }

issue is, that even when the method returns null, the accessory bar takes space (empty space).

screenshot for reference

Steps to Reproduce / Code Snippets

use standard repo in fresh install, use code above

Expected Results

if the renderAccessory function returns null nothing should be rendered

Additional Information

• React Native version: 0.37.0
• react-native-gifted-chat version: 0.0.10
• Platform(s) (iOS, Android, or both?): only tested on ios simulator (iOS 10)

[kfiroo]

@florianbepunkt Hey, looks like this is the cause https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/GiftedChat.js#L195
You could try to resolve it and submit a PR, or simply don't provide the renderAccessory prop when you don't need it

[florianbepunkt]

@kfiroo i'm working on PR right now… implementing the setMinInputToolbarHeight method that was marked with TO DO. However what I notice is that this is rather unresponsive.

What i do is call my new method setMinInputToolbarHeight on GiftedChat.js

setMinInputToolbarHeight(88) {
    MIN_INPUT_TOOLBAR_HEIGHT = value;
}

and then call existing resetInputToolbar method in GiftedChat: https://github.com/FaridSafi/react-native-gifted-chat/blob/master/src/GiftedChat.js#L334

It works but it takes like a second or so which feels bad UX wise. any idea what might cause the delay here?

[kfiroo]

@florianbepunkt I'm not really sure what's going on there, but I feel there might be something a bit off with the fact we need 2 _(at least)_ render cycles to calculate the correct height.

1. We first need to render the chat to see if the renderAccessory method returned a view.
2. Then measure it and set the inputToolbarHeight accordingly.

This doesn't feel right to me.
@FaridSafi (or anyone else), what do you think?

[florianbepunkt]

@kfiroo seems like my build folder was messed up. I cleaned it up now and it's performing well. still I think you're right regarding render cycles… I have 3 render cycles.

[tpedersen123]

@florianbepunkt Did you submit a PR for this or did you change it in your own version?

[florianbepunkt]

@tpedersen123 No, it never matured into something that was suitable for a PR. but the change described above did basically what I needed.

[tpedersen123]

@florianbepunkt Thanks for the quick reply.

So, you implement the missing method like this?

setMinInputToolbarHeight(value) {
    MIN_INPUT_TOOLBAR_HEIGHT = value;
  }

and when do you then call it?

[florianbepunkt]

@tpedersen123 exactly: I set up the method in GiftedChat.js

  setMinInputToolbarHeight(value) {
    MIN_INPUT_TOOLBAR_HEIGHT = value;
  }

then when you use the component somewhere you set up a ref… so basically in your container you probably have

render() {
return(
<GiftedChat
        ref='myCosyChatReference'
        …
/>
);
}

You can use your reference to call the method
this.refs.myCosyChatReference.setMinInputToolbarHeight(100000);

[GuoJiKaiHehe]

accessoryStyle