Misalignment of UI when render two message with same user and showAvatarForEveryMessage is disabled

[manindervolumetree]

I'm facing an issue when showAvatarForEveryMessage = false while sending multiple message from same user. On message in which avatar is hidden takes default image size which is height = 36 and width = 36. So UI is getting misaligned.

Steps to Reproduce / Code Snippets

showAvatarForEveryMessage = false
decrease avatar size to height 15 and width 15
Send multiple message from same user

Expected Results

Expected result is the bubble should be alined

[fukemy]

better using your custom renderAvatar, see my code snippet for example:

const renderAvatar = (props) => {
        const { user = {} } = props.currentMessage
        const { user: pUser = {} } = props.previousMessage
        let isSameUser = pUser._id === user._id
        if (isSameUser) {
            // check if previous message is call
            // this case will now show user avatar before for current message
            if (props.previousMessage.call && roomDetailRef.current.Type === RoomType.Group) {
                isSameUser = false
            }
        }
        const isSelf = user._id === 1
        const isSameDate = utils.isSameHour(props.currentMessage, props.previousMessage)
        const shouldNotRenderName = (isSameUser && isSameDate) || isSelf
        if (shouldNotRenderName) return <View style={styles.nonAvatar} />
        return (
            <Avatar
                {...props}
                containerStyle={{
                    left: {
                        marginTop: isContactRoom ? 0 : 15,
                        marginRight: 0,
                    }
                }}
            />
        )
    }

[thuandohoang]

Just dive deeper into the code. It's hard to customize the avatar size, the best way I can think of is to patch the lib. Since the Avatar component just returns the GiftedAvatar when showAvatarForEveryMessage is false (ref). In addition, GiftedAvatar and renderAvatar use the same style (containerStyle and imageStyle), and we can't customize GiftedAvatar component without style conflict.

IMO, in order to customize the size of avater, the lib should allow us to customize the GiftedAvatar component.