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,
                    }
                }}
            />
        )
    }