React-native-gifted-chat: How to customize the accessory height?

[ATShiTou]

Issue Description

I'd like to develop an app like wechat:

I tried to custom the accessory height like this:

<GiftedChat
    renderAccessory={()=><View style={{height:300}}/>
/>

But failed.

Steps to Reproduce / Code Snippets

I looked up the lib source code ,and try to change accessoryStyle

<GiftedChat
    renderAccessory={()=><View style={{flex:1}}/>
    accessoryStyle={{height: 300}}
/>

It works, but the accessory has covered the message container.

Expected Results

Custom the accessory height and do not cover the message container.

Additional Information

• Nodejs version: 10.0.0
• React version: 16.3.1
• React Native version: 0.55.4
• react-native-gifted-chat version: 0.4.3
• Platform(s) (iOS, Android, or both?): [FILL THIS OUT]

[moerabaya]

@ATShiTou did you manage to fix it?

[ATShiTou]

NO，I give up to use this library and do it myself.

[k1115]

@ATShiTou Can you share your solution, please?

[Durisvk]

@k1115 @moerabaya @ATShiTou

based on the code in PR #1524 that is not yet merged,
you can still extend the original component class both in pure javascript and typescript,

here's a TypeScript example:

class GiftedChatExtended extends GiftedChat {
  componentDidUpdate(prevProps: GiftedChatProps, prevState: any, snapshot?: any) {
    super.componentDidUpdate && super.componentDidUpdate(prevProps, prevState, snapshot);

    if (prevProps.minInputToolbarHeight !== this.props.minInputToolbarHeight) {
      this.setState({
        messagesContainerHeight: this.prepareMessagesContainerHeight(
          this.getBasicMessagesContainerHeight() - this.getKeyboardHeight()
        ),
      });
    }
  }
}

and then use GiftedChatExtended however you'd use original GiftedChat component

[shamilovtim]

@Durisvk very clever work, nice job.

[SiroSong]

why i can't find this.prepareMessagesContainerHeight() in GiftedChat? It isn't here? but I return the value without wrapped with it, the messageContarinerHeight make work yet.

[madsrode]

This seems to do the job
renderInputToolbar={(props) => { return <InputToolbar {...props} accessoryStyle={{ height: showAcc ? 44 : 0 }} />; }}