load new messages and keep scroll position

[antoinefotso]

how to load new messages received from backend without scroll to bottom ( keep scroll position ) so user can scroll to bottom manually or click to scroll to bottom component

[hungtd97]

@antoinefotso how did you solve it?

[antoinefotso]

@hungtd97 c235c8d

[antoinefotso]

@hungtd97
i forked this repo and modify Giftedchat.js and install my own fork but unfortunatelly i was not able to install it properly (problem to built my fork OS Windows 10) so i cheated a bit.
i modified Giftedchat.js like this commit #1472 in node_modules of my project (official repo cuz my fork did not work) and make sure to use props inverted={false} in Giftedchat component.

important: its not recommend to modify directly node_modules because re installing to modified repo will overwrite your changes
i still working on this project

[hungtd97]

@hungtd97
i forked this repo and modify Giftedchat.js and install my own fork but unfortunatelly i was not able to install it properly (problem to built my fork OS Windows 10) so i cheated a bit.
i modified Giftedchat.js like that https://github.com/FaridSafi/react-native-gifted-chat/commit/c235c8d5cd3abe8c0e24f0a1580d173735175843 in node_modules of my project (official repo cuz my fork did not work) and make sure to use props inverted={false} in Giftedchat component.

important: its not recommend to modify directly node_modules because re installing to modified repo will overwrite your changes
i still working on this project

Thanks for your advices. I’ve done with it but got other trouble when send a message, list view wont scroll to the bottom, I need to scroll by my hand. Do you know why?

[KaloyanYosifov]

I've created a pull request, that fixes this issue -- #1677.

But until it gets reviewed and published in the new version you can do a hack by extending the component.

/**
 * External dependencies.
 */
import React from 'react';
import { GiftedChat, IMessage } from 'react-native-gifted-chat';

/**
 * Internal dependencies.
 */

interface ChatProps {
    onSend?: (messages: IMessage[], scrollToBottom: (animated: boolean) => void) => void
}

class Chat extends GiftedChat {
    constructor(props) {
        super(props);
    }

    componentDidUpdate(prevProps) {
        const { messages, text, inverted } = this.props;

        if (this.props !== prevProps) {
            this.setMessages(messages || []);
        }

        if (
            inverted === false &&
            messages &&
            prevProps.messages &&
            messages.length !== prevProps.messages.length &&
            this.props.scrollToBottom
        ) {
            setTimeout(() => this.scrollToBottom(false), 200);
        }

        if (text !== prevProps.text) {
            this.setTextFromProp(text);
        }
    }

    onSend = (messages: any = [], shouldResetInputToolbar = false) => {
        if (!Array.isArray(messages)) {
            messages = [messages];
        }
        const newMessages: IMessage[] = messages.map(message => {
            return {
                ...message,
                user: this.props.user!,
                createdAt: new Date(),
                _id: this.props.messageIdGenerator && this.props.messageIdGenerator(),
            };
        });

        if (shouldResetInputToolbar) {
            this.setIsTypingDisabled(true);
            this.resetInputToolbar();
        }
        if ((this.props as ChatProps).onSend) {
            (this.props as ChatProps).onSend(newMessages, this.scrollToBottom.bind(this));
        }

        if (shouldResetInputToolbar) {
            setTimeout(() => {
                if (this.getIsMounted()) {
                    this.setIsTypingDisabled(false);
                }
            }, 100);
        }
    };
}

export default Chat;

In the code above, I just extend the GiftedChat component and override the onSend function and componentDidUpdated lifecycle.

This utilizes the scrollToBottom prop and passes the scrollToBottom function on the onSend.

This way if scrollToBottom prop is false, the view will not scroll automatically and if you want to scroll only when you enter a new message you can in the onSend callback, by calling the second parameter.

Here is how i call it:

const onSend = useCallback((newMessages: IMessage[], scrollToBottom: () => void) => {
        setMessages((previousMessages) => GiftedChat.prepend(previousMessages, newMessages));
        setTimeout(() => { scrollToBottom(); }, 50);

        messageClient.send(newMessages[0].text, conversationId);
    }, []);

return (
        <Layout style={{ flex: 1 }}>
            <Chat
                listViewProps={{ onRefresh, refreshing: loading }}
                inverted={false}
                scrollToBottom={false}
                onSend={onSend}
                messages={messages}
                renderLoading={renderLoading}
                user={{
                    _id: getUserData.id,
                }}
            />
        </Layout>
    );
};

[stale]

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.

[cesarve77]

related issues:

#1033
#1608
#1486
#1603

[stale]

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.

[CptMaumau]

My solution has come from the prop maintainVisibleContentPosition in the listViewProps.
One problem is that this prop is not available for Android yet but thanks to this library I was able to patch gifted-chat and got it to work.

First add the package to your project then apply the patch with patch-package:

diff --git a/node_modules/react-native-gifted-chat/lib/MessageContainer.d.ts b/node_modules/react-native-gifted-chat/lib/MessageContainer.d.ts
index 924a495..82ec386 100644
--- a/node_modules/react-native-gifted-chat/lib/MessageContainer.d.ts
+++ b/node_modules/react-native-gifted-chat/lib/MessageContainer.d.ts
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { RefObject } from 'react';
-import { FlatList, ListViewProps, ListRenderItemInfo, NativeSyntheticEvent, NativeScrollEvent, StyleProp, ViewStyle } from 'react-native';
+import { ListViewProps, ListRenderItemInfo, NativeSyntheticEvent, NativeScrollEvent, StyleProp, ViewStyle } from 'react-native';
+import { FlatList } from '@stream-io/flat-list-mvcp';
 import { LoadEarlierProps } from './LoadEarlier';
 import Message from './Message';
 import { User, IMessage, Reply } from './Models';
diff --git a/node_modules/react-native-gifted-chat/lib/MessageContainer.js b/node_modules/react-native-gifted-chat/lib/MessageContainer.js
index 12fab47..a5d479e 100644
--- a/node_modules/react-native-gifted-chat/lib/MessageContainer.js
+++ b/node_modules/react-native-gifted-chat/lib/MessageContainer.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { FlatList, View, StyleSheet, TouchableOpacity, Text, Platform, } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, Text, Platform, } from 'react-native';
+import { FlatList } from '@stream-io/flat-list-mvcp';
 import { LoadEarlier } from './LoadEarlier';
 import Message from './Message';
 import Color from './Color';
diff --git a/node_modules/react-native-gifted-chat/lib/MessageContainer.js.flow b/node_modules/react-native-gifted-chat/lib/MessageContainer.js.flow
index c09569f..8d80539 100644
--- a/node_modules/react-native-gifted-chat/lib/MessageContainer.js.flow
+++ b/node_modules/react-native-gifted-chat/lib/MessageContainer.js.flow
@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react'
-import { FlatList } from 'react-native'
+import { FlatList } from '@stream-io/flat-list-mvcp'
 import type { LoadEarlierProps } from './LoadEarlier'
 import type { MessageProps } from './Message'
 import type { User, IMessage, Reply } from './types'

Otherwise you can manually replace the Flatlist import in MessageContainer files.
Hope this helps!