Search code examples
react-nativeuser-interfacereact-native-gifted-chat

React-native-gifted-chat change color under inputToolbar

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.

Solution

  • 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