react-native-gifted-chat only re-render last bubble

Question

I want to custom ticks in Bubble with status: sending, sent, receive and read in react-native-gifted-chat

This is my code custom renderTicks:

    renderTicks = message => {
        const { statusMessage } = this.state;
        // TODO: Status pending
        if (message && message.user && message.user._id === this.ownerInfo?.phone) {
            const status = statusMessage[message._id];
            switch (status) {
                case STATUS_MESSAGE.SENDING:
                    return (
                        <ActivityIndicator
                            size="small"
                            color={Colors.pink_06}
                            style={styles.loadingTick}
                        />
                    );
                case STATUS_MESSAGE.RECEIVED:
                    return (
                        <Icon name={'16_notifications_check_circle_full'} style={styles.ticks} />
                    );
                case STATUS_MESSAGE.SENT:
                    return <Icon name={'16_notifications_check_circle'} style={styles.ticks} />;
                case STATUS_MESSAGE.READ:
                    return (
                        <Avatar
                            size="tiny"
                            name={this.friendInfo?.name}
                            source={{ uri: this.friendInfo?.avatar }}
                            style={styles.ticks}
                        />
                    );
                default:
                    return null;
            }
        } else {
            return null;
        }
    };

Status message is wrong

This is my log

I guest the bubble is not re-render although I setState status message

Answer 1

shouldUpdateMessage is props provide by react-native-gifted-chat and it helps me resolve my problem

shouldUpdateMessage={(props, nextProps) =>
    props.extraData !== nextProps.extraData
}