React-native-gifted-chat: How to make message bubble use full available width instead of being sized to fit message text

[jordanmkoncz]

Issue Description

react-native-gifted-chat currently automatically sizes message bubbles to fit the message text, so that if the message text is only a few words, the bubble will not expand all the way out to the full available width, but instead just wrap around the size of the message text.

I have a use case where some messages will render an image, map etc. using renderCustomView(), and for these messages, I want the message bubble to expand to take up the full available width of the container, so even if the message text was only 1 letter length, the message bubble would still expand to take up the full available width. This then gives the image, map etc. space to render properly. Currently the image/map etc. will only take the space that happens to be available based on the message width (assuming the image/map does not have a fixed width and instead has a dynamic width and just fills the available space).

Is there any way to achieve this? I know I can achieve this by doing some manual calculations to figure out the exact width that is available (based on device width, minus space taken up by other parts of the message such as avatar and setting that as a fixed width on a containing <View> within renderCustomView(), but I'm hoping there's a nicer way to just get the message bubble to take up the full available width.

Additional Information

• React Native version: 0.41.2
• react-native-gifted-chat version: 0.1.3
• Platform(s) (iOS, Android, or both?): Both

[kfiroo]

@jordanmkoncz You can user renderMessage / renderBubble and customize the view completely according to your needs

[jordanmkoncz]

@kfiroo Yes I'm aware of renderMessage / renderBubble, but I haven't been able to find a way to customise them so that for some messages (where I'm rendering a custom view), the message bubble expands to take up the full available width of the container even if the message text is very short, while for other messages (where I'm not rendering a custom view) it behaves as it does by default with the message bubble only being as wide as the message text.

If you know of the correct structure/styles to achieve this please let me know!

[asessa]

@jordanmkoncz you can do that by using renderBubble

    renderBubble(props) {
        return (
            <Bubble
                {...props}
                wrapperStyle={{
                    left: {
                        alignSelf: 'stretch',
                        marginRight: 0
                    },
                    right: {
                        alignSelf: 'stretch',
                        marginLeft: 0
                    },
                }}
            />
        );
    }

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.