CODEWITHSUNDEEP
react-native
kd12345
kd12345

Reputation: 793

React Native: How to render new message at the bottom?

I just finished implementing socket.io in my react native application to achieve a 1-1 private messaging.

The socket is working correctly as required ie. messages are getting sent live. But my problem is when i try sending a message it gets added at the top of my inverted Flatlist when newest messages should be shown at bottom.

Here is my code:

const message = route.params.message;
const [messages, setMessages] = useState([]);
const [refreshing, setRefreshing] = useState(false);
const [text, setText] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
const [socket, setSocket] = useState(null);
const { user } = useAuth();

useEffect(() => {
const newsocket =io.connect("http://192.168.1.103:9000")
setMessages(message.Messages)

newsocket.on('connect', msg => {
console.log(`user: ${user.id} has joined conversation ${message.id}`)
setSocket(newsocket)
newsocket.emit('subscribe', message.id);
});

newsocket.on("send_message", (msg) => {
console.log("this is the chat messages:", msg);
setMessages(messages => messages.concat(msg)) // I THINK PROBLEM IS HERE 
});

return(()=>newsocket.close());

}, []);

const onSend = (ConversationId,senderId,receiverId,message) => {
console.log("sent")
const to = (user.id===route.params.message.user1? 
route.params.message.user2:route.params.message.user1)
socket.emit('message', { to: to, from: user.id, message,ConversationId });
setText("")
messagesApi.sendMessage({ConversationId,senderId,receiverId,message});
};

const updateText=(text)=>{
setText(text);
}

return(
<Animated.FlatList
    inverted
    data={messages}
    keyExtractor={(item,index)=>index.toString()}
    extraData={messages} // add this    
    renderItem={({item,index})=>(
        <>
        <MessageDate_Time 
        text={moment(item.createdAt).fromNow()} 
        mine={item.senderId !== user.id}
        />
        <MessageBubble
        text={item.message}
        mine={item.senderId !== user.id}
        />
         </>
    )}
    />
)

Upvotes: 1

Views: 1182

Answers (1)

Leri Gogsadze
Leri Gogsadze

Reputation: 3093

Change concat to unshift.

newsocket.on("send_message", (msg) => {
    setMessages(messages => messages.unshift(msg));
    // OR
    const newMessages = [msg, ...messages];
    setMessages(newMessages);
});

Hence you are using inverted props, messages are reversed that's why you need to add a new message at the beginning to be at the end. Kinda confusing :))

Upvotes: 3

Related Questions