React-native-gifted-chat: Is there any way I can add a header bar

[smccamley]

Issue Description

I'm looking to add a header bar with a summary of the chat content and a back button, my attempts have not gone well, any help would be appreciated.

Additional Information

• React Native version: 2.0.1
• react-native-gifted-chat version: ^0.1.4
• Platform(s) (iOS, Android, or both?): iOS

[varungupta85]

You can compose a new component in your app using a ChatHeaderBar and GiftedChat components. The ChatHeaderBar component is something that you will write separately for your app and not part of GiftedChat. So, the resulting component would render something like:

<View>
  <ChatHeaderBar {someProps} />
  <GiftedChat {someProps} />
</View>

[smccamley]

Thank you, I'm a little new to react-native. I had tried that, but it wasn't working. Tried again just now and works perfectly. No idea what I was doing wrong.
👍

[jeaye]

Let's close this, if it's no longer a problem.

[VeeShostak]

@smccamley @varungupta85
Just a heads up to anybody in the future:
When you wrap these components in a View set the flex to 1. The view you are giving it has no size and therefore the child components are inheriting their size from the parent (which is 0).

(Otherwise Gifted chat will disappear after adding the header component)(https://github.com/FaridSafi/react-native-gifted-chat/issues/613)

This worked for me:

<View style={{flex: 1}}>
        <Header {props...} />
        <GiftedChat {props...} />
</View>

see: https://stackoverflow.com/a/43197064