React-native-gifted-chat: Rendering CustomView at bottom of every bubble or chat message

Created on 11 Sep 2017 · 3Comments · Source: FaridSafi/react-native-gifted-chat

Issue Description

Im trying to add a button below the chat message. That means every chat bubble must have a button.
The button must be below the message. However, I am only getting the custom view i.e the button, on the top of the message. How do i fix this?

Steps to Reproduce / Code Snippets

renderCustomView = props => (
{...props}
isSessionId
onApprovePress={this.handleApproveButtonPress}
/>
);

Expected Results

Button should be below chat messages inside of the bubble.

Additional Information

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

question

Source

cerberusv2px

👍1

Most helpful comment

I have found a solution that works for me:
Pass the prop renderMessageText and put your CustomView after the MessageText

renderMessageText(props) {
        return (
            <View>
                <MessageText
                    {...props}
                />
                <CustomBubbleView
                    {...props}
                />
            </View>
        );
    }

the solution is just my implementation of the response given here: #391

PolSendra on 18 Sep 2017

🎉2 👍2

All 3 comments

I have found a solution that works for me:
Pass the prop renderMessageText and put your CustomView after the MessageText

renderMessageText(props) {
        return (
            <View>
                <MessageText
                    {...props}
                />
                <CustomBubbleView
                    {...props}
                />
            </View>
        );
    }

the solution is just my implementation of the response given here: #391

PolSendra on 18 Sep 2017

🎉2 👍2

Please, feel free to reopen if the solution proposed by @PolSendra does not work for you.
Thanks!