Gifted chat missing '_id' for message - React Native - react-native

Question

So I'm building the chat functionality part for my app. I'm using sendbird sdk along with gifted chat for the UI.
My messages won't show up and I keep on getting the following warning.
'GiftedChat: _id is missing for message''
Now I've triple checked my sendbird is configured correctly, I'm logged in correctly and have also created the appropriate channel. These are both working.
Looking at the log of my messages they are posting as shown.
{
messageType: 'user',
messageId: 2122453749,
etc ...
}
But they are posting as messageId , Do I have to change the structure of this? If so how do I go about this as sendbird pre configures it already. Or can I change this in gifted-chat ?
Please take a look at the snippets of my code below.
getChannelMetaData(channel) {
if (channel) {
const self = this;
const messagesQuery = channel.createPreviousMessageListQuery();
messagesQuery.load(50, true, (messages, error) => {
if (error) {
console.error(error);
}
this.setState({
messages,
});
});
}
}
onSend(messages = []) {
const handle = this;
const sb = SendBird.getInstance();
const { channel } = this.props.navigation.state.params;
this.setState(previousState => {
channel.sendUserMessage(messages[0].text, (response, error) => {
if (!error) {
handle.getChannelMetaData(channel);
}
});
console.log(this.state.messages);
return { messages: GiftedChat.append(previousState.messages, messages) };
});
}
<GiftedChat
messages={this.state.messages}
renderBubble={bubble}
loadEarlier
renderLoadEarlier={loadEarlier}
isAnimated
keyboardShouldPersistTaps="never"
onSend={messages => this.onSend(messages)}
user={{
_id: userID,
}}
showUserAvatar
/>

Answer 1

You should use this format:
{
_id: 1,
text: 'message',
createdAt: new Date(),
user: {
_id: 2,
name: 'nickname',
avatar: 'YourimageURL',
},
},

Answer 2

If you don't follow the format specified by them, it throws this warning. So what we did for that ...we just customized our JSON object from the array of chat messages like below
let giftedChatMessages = chatMessages.map((chatMessage) => {
let gcm = {
_id: chatMessage.id,
text: chatMessage.get("text"),
createdAt: chatMessage.get("createdAt"),
user: {
_id: chatMessage.get("user").id,
name: chatMessage.get("user").get("name"),
avatar: chatMessage.get("user").get("avatarUrl")
}
};
return gcm;
});

Answer 3

messages={this.state.messages}
Here, {this.state.messages} should have the following structure
id:
text:
createdAt:
user: {
_id:
name:
avatar:
}
Option 1: You get all the corresponding field values as is from sendbird and update an intermediary array with the expected property names and then update this.state.messages
Option 2: Onsend function should insert the values for the following column headers in sendbird
id:
text:
createdAt:
user: {
_id:
name:
avatar:
}
So that, when you retrieve the message from sendbird, you get exactly the same fields as is expceted by giftedchat format.