React-native-gifted-chat: Lag when there are a lot of messages

[rzdev]

Issue Description

Noticeable lag when there are a lot of messages and multiple sender.
is this to be expected or am i doing something wrong?

Steps to Reproduce / Code Snippets

send a lot of message from multiple sender

Expected Results

Minimum lag

Additional Information

• Nodejs version: 6.11.0
• React version: 16.0.0-alpha.6
• React Native version: 0.44.2
• react-native-gifted-chat version: 0.4.3
• Platform(s) (iOS, Android, or both?): Android

code

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

import SocketIOClient from 'socket.io-client';
import { GiftedChat } from 'react-native-gifted-chat'

export default class rn_ws_app extends Component {

    constructor(props){
        super(props);

        this.state = {
            messages:[]
        }

         this.onReceiveMessage = this.onReceiveMessage.bind(this);

        this.socket = SocketIOClient('http://192.168.1.137:3000');
        this.socket.on('message', this.onReceiveMessage);
    }

    onReceiveMessage(message) {
        this.setState(previousState => ({
            messages: GiftedChat.append(previousState.messages, [message]),
        }))
    }

    onSend(messages = []) {
        this.socket.emit('message', messages[0]);
        this.setState(previousState => ({
            messages: GiftedChat.append(previousState.messages, messages)
        }))
    }

    render() {
        return (
            <GiftedChat
                messages={this.state.messages}
                onSend={messages => this.onSend(messages)}
                user={{
                    _id: 1,
                }}
            />
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

AppRegistry.registerComponent('rn_ws_app', () => rn_ws_app);

[rzdev]

Found 2 ways to speed things up:

1. this https://github.com/FaridSafi/react-native-gifted-chat/issues/840 fix the issue with typing lag
2. on GiftedChat.js, line 88 change from

return inverted ? messages.concat(currentMessages) : currentMessages.concat(messages);

to

return inverted ? [...messages,...currentMessages] : currentMessages.concat(messages);

[uiBing]

@rzdev 谢谢提供修复方案，但我修改了这两个地方，还是没有效果。
请问还有其他解决方案吗？

Nodejs version: 8.9.4
React version: 16.3.1
React Native version: 0.55.3
react-native-gifted-chat version: ^0.4.3
Platform(s) (iOS, Android, or both?): Android

[Suraj-Tiwari]

@uiBing Can you show us your modified code???

[ruk91]

I had the same issue and I was able to fix by commenting the line
value={this.props.text} in Composer.js

[aspidvip]

this is work! good!!!

[akiladevinda]

@ruk91 commenting those lines will give bug in iOS. Text not clearing after sending new message

[ruk91]

@akiladevinda thanks for informing. Did you try state resetting?

[akiladevinda]

@ruk91 Yes I did state resetting. But still the same issue. Keyboard lag in android is been solved. But still I have issue with iOS

[Suraj-Tiwari]

@akiladevinda do this in composer.js
value={Platform.OS === 'ios' ? this.props.text : null}
Refrence: https://github.com/FaridSafi/react-native-gifted-chat/issues/840#issuecomment-395175767

[akiladevinda]

@Suraj-Tiwari Thank You ! Issue was fixed

[ajaykumar97]

I am facing some performance issues. For few messages, it is working good. But after few messages, it takes while to send message. I mean, when I press the send button, it takes a while to list that message into the messages list. Please help me if anyone knows the solution.

[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.

[Schabaani]

I have a chat app when I load a lot of messages, it has a lag to scroll down and show the last message(I loaded all of images and appended to GiftedChat then pass these messages as props to GiftedChat component). What can I do?

[FrenchMajesty]

I am facing a similar problem than @Schabaani.

If I pass an array of simply 12 messages to GiftedChat there is a good 0.5 seconds lag before they appear. The lag obviously increases as more messages are added to the array.