I'm sending images and pdf through gifted chat with twilio messaging. After sending I'm having trouble to show documents in gifted-chat ui.
Here is the message object which gifted chat will accept:
{
_id: 1,
text: 'My message',
createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://facebook.github.io/react/img/logo_og.png',
},
image: 'https://facebook.github.io/react/img/logo_og.png',
// You can also add a video prop:
video: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
// Mark the message as sent, using one tick
sent: true,
// Mark the message as received, using two tick
received: true,
// Mark the message as pending with a clock loader
pending: true,
// Any additional custom parameters are passed through
}
How can i attach pdf(document) link in here,
Currently am attaching pdf url with key of image and it is returning blank coz it is recognising that url as an image.
How can i show pdf instead of blank their?
Here is the current result
I think you can define "document" in your message object rather than using "image".
Then you can customize your document message in the props renderCustomView like this:
// Custom render message
const renderCustomView = (props) => {
// Custom document message
if (props.currentMessage.document) {
// Your custom pdf message
}
}
Related
If 2 user is using the app, messages are being displayed on the left side of the screen. cannot differentiate between them (sender who sent what messages),It occurs only when use our own REST Api Call to onload,
But when send one new message at that time message will display separately sender and receiver format and one more scenario when i use twillio default getMessages method at that time also error won’t occur.
Twilio method to get Previous Messages on both user:
this.channel.getMessages(0).then((messages) => {
console.log("getMessages" + messages);
this.handleBatch(messages);
});
Please find screenshot above for your reference.Any one know how to fix this issue or any suggestions are welcome.
try adding the user who is writting to the giftedChat:
<GiftedChat
isAnimated
messages={this.props.messages}
onSend={messages => this.onSend(messages)}
user={{
_id: 'sarathy',
name: 'Minecraft',
}}
/>
Every message that has the user's _id: 'sarathy' will be displayed on the right.
example of message that will be displayed on the right side:
{
_id: 3,
text: 'How r u?',
createdAt: new Date(),
user: {
_id: 'sarathy',
name: 'React Native'
},
},
react-native-gifted-chat differentiates messages using user props, which specify
User sending the messages,
so you have to give user props as
<GiftedChat
messages={this.state.messages}
onSend={this.handleNewMessage.bind(this)}
user={{
_id: your user id
name: users name,
avatar: users image
}}
/>
name and avatar is useful for displaying name or image in gifted chat if you want
and onSend event send this user with text to twillio as
handleNewMessage = (message = {}) => {
this.channel.sendMessage( message[0].text, message[0].user)
.catch(error => console.error(error));
}
Now on your getMessages
this.channel.getMessages(0).then((messages) => {
console.log("getMessages" + messages);
this.handleBatch(messages);
});
before appanding gifted chat change message format as gifted chat want
only for example i m using state to set message
handleBatch= (message) => {
const messageData = this.formatMessage(message);
this.setState(previousState => ({
messages: GiftedChat.append(previousState.messages, messageData),
}));
}
formatMessage(message) {
return {
_id: message.sid, // or your own unique id
text: message.body,
user: message.attributes, // here you can get your user parameters in message attributes which we send to identify user
createdAt: message.timestamp,
};
}
// change above conditions as you get response by twillio.
i hope it will help you.
if any query let me know.
anyone having this issue Like me not looking to docs code properly... Do one thing ... add _id in-place id... both message object in user props inside
I am using react-native-fcm library for android device. I am getting notification properly when my application is running, but when my application is in the background or killed then I am getting notification data in JSON format similarly in an image I shared here.
componentDidMount() {
// iOS: show permission prompt for the first call. later just check permission in user settings
// Android: check permission in user settings
FCM.requestPermissions().then(()=>console.log('granted')).catch(()=>console.log('notification permission rejected'));
/*FCM.getFCMToken().then(token => {
console.log('Token',token)
// store fcm token in your server
});*/
this.notificationListener = FCM.on(FCMEvent.Notification, async(notif) => {
console.log('FCM notification', notif)
this.sendRemote(notif)
});
// initial notification contains the notification that launchs the app. If user launchs app by clicking banner, the banner notification info will be here rather than through FCM.on event
// sometimes Android kills activity when app goes to background, and when resume it broadcasts notification before JS is run. You can use FCM.getInitialNotification() to capture those missed events.
// initial notification will be triggered all the time even when open app by icon so send some action identifier when you send notification
/*FCM.getInitialNotification().then(notif => {
console.log('FCM', notif)
this.sendRemote(notif)
//console.log('Initial Notification',notif)
});*/
FCM.getInitialNotification().then((notif: any) => {
// for android/ios app killed state
console.log("ifAny",notif)
if (notif) {
console.log("Any",notif)
// there are two parts of notif. notif.notification contains the notification payload, notif.data contains data payload
}
});
}
sendRemote(notif) {
var data = notif.fcm.body;
var title = notif.fcm.title;
FCM.presentLocalNotification({
title: 'App Name',
body: title,
big_text: title,
large_icon: 'ic_launcher',
priority: 'high',
sound: "default",
click_action: this.clickActions(notif),
show_in_foreground: true,
wake_screen: true,
local: true,
param: notif.notify_about,
paramData: data
});
}
notify_about:'',
fcm:{action:null,
body:"{data:'',time:''}",
color:null,
icon: '',
tag:null,
title:"Notification title"}
this is my data format which I am sending from the server.
Here I want to show only data body. But when the app is killed or in the background, it shows the complete body in the notification.And Its working fine when the app is running.
Is it possible to have multiple menu attachment and allow users to select each menu before sending back the collated response?
return Promise.resolve({
text: `Rate each game`,
attachments: [
...games.map(game => ({
color: "#5A352D",
title: game,
callback_id: "game:done",
actions: [
{
name: "done",
text: "Select a score",
type: "select",
value: "game:done",
options: [
{ text: 1, value: 1 },
{ text: 2, value: 2 }
]
}
]
}))
]
});
This images shows how it renders
But, I need to call the callback only when the user has finished scoring each game.
Perhaps, I can provide an additional button for that, but how can I handle callback for these menu actions
Choosing a menu option will always fire a request to your app. But you could replace the former message and recreate the menu list each time and show the remaining menus to the user until all are chosen. Technically it will be a new message each time, but by replacing the old message the user will not notice.
I've implemented branch.io in my react native project.
I'm having troubles finding out how to include custom parameters in the showShareSheet function.
My goal is to use them to navigate to the correct screen.
I'm using React Navigation.
this._branchUniversalObj.showShareSheet({
// Include custom info here?
shareOptions: {
messageHeader: 'Title',
messageBody: 'My message body',
emailSubject: 'My email subject'
},
linkProperties: {
feature: 'spot-share'
}
}).then(({ channel, completed, error }) => {
});
I successfully can send and receive messages with my JS implementation of QuickBlox Chat SDK. But I can't add custom data to any message.
QB.chat.send(opponentId, {
type: 'chat',
custom: 'doesnt_work',
body: currentMessage,
extension: {
save_to_history: 1,
}
});
Since this are 1-1 chat I didn't create a dialog. Dialog automatically created after first message sent.
Documentation telling me that this should work
Found answer by myself. Maybe this will be useful for somebody. Correct format:
QB.chat.send(opponentId, {
type: 'chat',
body: currentMessage,
extension: {
save_to_history: 1,
custom: 'it works'
}
});