0

I am using react-native-gifted-chat, and I am having a hard time figuring out how to color or add a view below the InputToolbar to resemble something like the second image below.

This is what I have

enter image description here

This is what I am trying to do

enter image description here

If anyone knows how I could get close to the second image that would be great. If someone could send a link to a similar example or any help at all is much appreciated.

Adam Lee
  • 66
  • 1
  • 15

1 Answers1

2

You cab use renderInputToolbar and set the height for the root view as long as it fills to the bottom:

import {LeftAction, ChatInput, SendButton} from 'react-native-gifted-chat'

...

minInputToolbarHeight={70}
renderInputToolbar={(props)=> (
    <View style={{ backgroundColor: COLORS.lighterblue, height: 200 }}>
        <View style={styles.inputContainer}>
            <LeftAction {...props} />
            <ChatInput {...props} />
            <SendButton {...props} />
        </View>
        <View></View>
    </View>
)}

Result:

Result

Tomerikoo
  • 18,379
  • 16
  • 47
  • 61
Hieu
  • 46
  • 1
  • 1
  • While this link may answer the question (Example link), it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – borchvm Feb 13 '20 at 06:46
  • This is exactly what I done to make this work. I upvoted this not why someone would downvote the right answer. Thank you for Hieu for answering. – Adam Lee Feb 13 '20 at 09:25