React-native gifted chat podcast

react-native gifted chat

Hello, everybody. This is react native conversation. This is Dappros team, we are talking about different applications of react native technology. And today we want to talk about the topic of messaging and specifically gifted chat which we started to use in our product So in our product Dappros platform is a platform which is allowing people to add tokenization into some sort of business processes into communities. It’s powered by multiple Technologies, including ethereum blockchain, API system and last year We also added communication features and real-time communication because it helps a lot with making it sticky easy and for users and I’m allowing users to connect and meet together. And this brought up the question of how do we Implement that messaging on on the react native side? So as far as I understand so with me on this call is Vineeth Nambiar our developer and Nikhil our ux designer. So  I will ask some questions and we can discuss here. Maybe Vineeth can also flash some code And show some cold as well. So as far as I understand Vineeth so just so I understand everybody who doesn’t understand who how this works. So what is gifted chat. How is it useful for implementing communication features in the react native apps?

Yeah. Sure. So Gifted chat is just a UI library that packages together most of the Chatting mechanisms that most of other chatting mechanisms share so these particular UI Library provides us all those basic things like the chat Bubbles and custom design of chat Bubbles and sending different files audios and all those steps. So basically, this is a whole package wherein we can Install it. this Library we can install it on react native project and then we can just go ahead and customize it in our own be so yeah, so I’m right now in that GitHub of FaridSafi who is the author of the gifted chat and it’s an open source project. It’s under the MIT license. And so yeah, this is like illustration. So pretty much it allows you to implement the It seems that the provides the UI but what is is there anything behind the UI? So does it provide you with some logic in their app or is it mainly the set of UI and you need to implement the rest yourself? Yeah, it’s a set of UI and then it provides these things ready made, but you can obviously then there is a default for each and every UI thing. That is your modules similar, but you can obviously customize it very like I mean like in our project too we I have created a separate component itself that is using the same basic things that is that are this gifted chat is providing us. So I mean all the other Logics that is related to xmpp that obviously we need to implement it by ourself. This just gives the median Wherein the it accepts the incoming message. It has the ability to accept messages and display messages and other features, too. So Okay, so you mentioned you mentioned XMPP here. I want to just to quickly go over that so in our platform, so we you know xmpp is a way to it’s extended messaging protocol. It’s a protocol for chat for text-based instant messaging so we added support for that just started adding last year and you know have released some Initial early versions of supporting that in our platform there are other ways to implement chat and messaging but this is xmpp is being used in many applications or have been used in the past like WhatsApp for example, and I’ll quickly show architecture here. So

 

So we we have the platform There is a API layer and you know that mobile apps and web apps communicate to API via JSON but if you want to support instant quick instant messaging then you need to implement an xmpp server or some alternative. So xmpp is not the only way to support chat well, I have personally worked with xmpp in the past in the past in my previous companies the different xmpp server, but I thought for dappros we should try e-jabbered because this is one of the industry standards. It’s based written in Erlang. It’s really scalable and WhatsApp has it has been built on it and WhatsApp is really I know that have they have optimized a lot. So maybe it’s they’re using Something different or completely Rewritten ejabbered right now, but this is what we’re using and how it works is the applications talk to APIs and to application business logic via JSON but for instant messaging it’s xmpp protocol exchange between the mobile app and the chat Real Time Communication server. So yeah back to you Vineeth so my question is for gifted chat is it? Does it work with the xmpp only I could it work with any sort of protocol or and yeah, it can work with any sort of protocol. Okay, great. Gifted chat it just like I mentioned it is just a UI Library. It just gives the features where in you can type like it showing this particular GIF where you can type in messages, it will display and other features that Basic chat application would have I mean from the UI perspective. So yeah that’s it. it is not dependent on any particular protocol or anything just a simple component So UI Library.

 

Things like chat bubbles and all the other like UI and when you build a chat messaging application or implement this real-time communication features into existent app, which is maybe not related directly to chat But you just want to have this feature. You don’t realize how many of these different UI and ux components Are there make it really look and feel as a proper messenger or communication Experience and we can say that consumers and users are spoiled nowadays by you know great experience they receive from WhatsApp, Facebook, Messenger, Telegram by which all those different viber and different applications. But when you build it yourself, you will be surprised how difficulty it is. You need to have this chat bubbles. You need to format the properly timestamps ticks, double clicks, avatars and photos. Yeah, that’s the time when you realize you can these things there are. We’re now into whatsapp and just check it then I realize okay. This is how they have done it. This is how they might have done it and all these aspects we get a detailed way of how these before and I got into this I felt like okay. This is just a simple I never noticed the details of this particular whatsapp or any UI Higher level things Initially when you get into that then you realize okay. These are the small things and I mean I have just implemented it. I was thinking about the people who have created this particular UI libraries not just this many other UI libraries to who they have realized how like smaller things too has a bigger impact like not Together it has a bigger impact obviously, but yeah, yes. And Vineeth, I do have some questions also, How modifiable is it? I mean as you can see in the GIF that the chat bubble is blue or the avatar is in circular shape and we don’t see any  Yeah attachment feature also Yes. Yeah. Yeah, we do have all those. Yeah. Yeah, it can be extremely modifiable for example

 

That is there Is not a support for example our recent my recent obstacle was to scroll into particular what you say message, which so this feature was not provided by this gift chat. So but still I will I just went into the code and I just did it. I mean if it didn’t gifted chat didn’t provide it, but we can do it like we can go to. You show that some piece of code Vineeth so we can show and you can just give a glimpse of you know, how it is to integrate a customized something using gifted chat. We might not have too much time for that. But just a quick Glimpse and then we can have another session covering some additional features of gifted chat. Yep. So shall I just yeah, please go ahead.

 

Yeah, can you see the screen? We have different like for example, if I want to load earlier messages, then we have this particular function that handles this thing and submit message. Is this function? Yeah, so similarly, so what I did for this what you say jump into that particular message, so I just created a reference for this. The picture over here so that I can use this particular gifted chance all the props and methods of this gift to check outside this particular render function so over here, I have named it gifted ref. So if I go, okay. So all the thinking all these like highlighted in green, I dislike standard methods of gifted chart Grandeur lodging load earlier values. Yeah, this this I had that then the function for it. So if Yeah, so if some gifted chat has this mechanism default lie, but if I want to change if I want to customize it in my way, then I can write a function and do it. For example, I’ll just give you a simple example is render message. Where is this?

So this particular I have created a separate component. I’m not using the pictures default UI so for here, whatever the messages that are being rented is done in this particular function. Kimber It returns a message body UI so over here, you can see the message body has all the the message body will have the UI the function to render multiple bubbles depending on how like for example over here. You can see I want to render in each the initial thing would be the day. That is on what they this particular message was sent. So the first line I will just I think I do have the code. Yeah, so yeah over here. You can see the main function that does this scrolling feature is should scroll. I’ll just yeah over here. It accepts an index value basically. So what I do is I create a reference of gifted chat so that I can access its properties and functions. So Previously in the previous versions there. There was no there was this particular crop missing inside this gifted chat. So it was I wasn’t able to do this thing. Now they have included it or maybe in the previous version. It wasn’t in this particular property inside this particular object. So it was I wasn’t able to do that previously. So now I am able to use this function which is which basically gets the message countenance right containers reference and inside it it gets the current message container and it’s cruel to index function. So the current message container means that it is basically a flat list that have that is listed in front of Obviously, if so the plat list contains index values and it returns index so it also has this function scroll to index using the scroll to index do is I can just scroll towards that index. And if I am setting the animated value to True here so that it looks very settle and the movement so If this index values, so so the main objective was that once there is a push notification. The user should click on it and the user should be redirected to that particular chat rooms that particular message. So so over here, what I do is once I accept the users click once the operating system of the device as mdtech shape. Opens our application and it gives you the information that has been sent via push notifications. So you extract those information and one of the information is the message ID that we need. So so this message ID is sent by the server. I extract it and I put it inside one of the reducers that is Redux reducer and And I grabbed over here and I check. So over here, you can see that inside this particular function, which basically what does is it adds message to the defects that Cyrus so that it can be showed into the So over here, I do a check. That is I just yeah, I map through the current list of messages and out of fish. I find the same message ID is the current the message ID that I received from the push notification is equal to the current this message ID that I am mapping through this message array. What I do is I set a variable and I said the index of that particular message ID Cable that is push note the message index and once the once I set the speed that is I add this particular message to the When for example when the user gets into that chat message it dysfunction is run through and if there is any of the if there is any message ID in it, then it will put it over here in sales. And then the sea states are set after that. What I do is I call this for example, if there is any push no tea message index value, then it It will run this particular function which accepts the index value and Scrolls to that particular message.

So this is how I have done the scroll to message feature. So in short in summarize this you just have to create a give reference for the gifted chat and access the value of that message containers access the function of message container reference that is This message container reference. Current and scroll to index. So now you will be scrolled to that particular message. So we have this is how I have done this.

Soon, maybe maybe I can show you a scenario. Let’s that’s it. Can I just have a few more questions when you flash it for useful. So these functions like Spruce crawl to and scroll to message. So you scroll to Index this are these implemented by you. So yeah. Yeah. This is implemented by me.

These are not part of gifted child know which parts are provided by gifted shot. So the reference yeah, you have friends is a feature that is that you can get in any components it for example, if you create so this custom header is a is created by me this component so I can create a reference like this over here and I can just access the top. Teams of this particular companies. So this is also not provided like specific to gifted chart references. Basically, you can get it from anywhere. I mean in any of the components like here C so you create a custom header includes some you have some damage but bronze some extent efficient HTML tags. There is no Shadow color. So what? Is this is it like? Yeah, yeah. So this is the extended Jace Jace X. This is called jsx. This is not actually HTML tags. This is basically a component for example, if I go over here, you can see that it is actually a class that is returned and we accept be imported over here in the charts and I am using it. In this syntax format in this way. So what it does is so I have created this custom header component which accepts one two, three properties. So what it does is I am saying that he’s QR is equal to true. And for example, I will just take this particular scenario. So what it does is it returns this

You can access this particular info over here and is Q Bar. Yeah, so I’m using this so you can see in this dot props. I can this means this particular class. So in this particular class is props, you can access the E skewer which is set over here. So this becomes a dynamic form of like, you know using this. Nuclear components I can if I do Falls here if I set Falls here, it will act as say that okay, it is false and it will do the task accordingly, whatever I have written. So this is the basic this is actually the basics of react native components. This is the way you send the props one of the ways in which you send the props to component.

Yeah, that’s how to give th at. Is this similar component? A UI Library basically, so it has all these things and it’s so so for example over here render, you can see the property called render loading what so it accepts this particular activity indicator component. So this property accepts a whole component. So what it does is whenever You whenever the gifted chat is loading. It will show this particular UI component. That is the activity indicator. That is the loaders over the on the screen. So in this way all these properties except some values and it is processed inside this gifted chat component like it does over here in the custom header.

So don’t yellowish kind of these parameters data provided by gifted chat, right? Yeah, exactly. And how are we using using all of them or these are the the yard the one which I have listed over here. I’m using it. So for example, the render loading load earlier the feature that we had initially implemented so load earlier except One of the two values that is true, either true or false. If you set it true, then it has the ability to load the previous messages. Okay, so and how you want to do that render those previous messages is you pass a function basically over here and this property accepts that function and whatever you do it in this particular function. It will be processed by this particular products via this particular props in gifted chef.

Got it. Thank you. I’ll be using all of them or other like some figure there are many there are many if I go over one year. There are much more. Like yeah, these are the whole. Properties of give texture you can use all of these according to your needs still here.

Great. Okay, understood. Yeah, okay, so just to recap so what you just want is the feature of scrolling to specific to a specific chat message. Yeah one you received a push notification from our Push Service. We have the custom questionnaire has implemented in the server side. We receive a message from that. Yeah, and by the way

In our case, it’s written in erlang and we have a custom implemented push notification service. But if somebody’s building similar application, they can use one of the providers for push notification services and I think even Firebase provides something. Yeah. Yeah. Yeah. So after the user who is not active and user who is not. Sitting in the upon the moment receive the push notification for example to notify about incoming chat message or somebody has replied to the user or send the user something or there is an update in the chat to each user has subscribed then it will be a nice user experience if we scroll to that specific message.

Oh for of the of the multi-user chat room toward to which the push notification is related. So then in that case as as you’re throwing we’re taking that idea of that message and using the gifted child components and some nice animation for scrolling us crawl into that specific message. So that user will have to tap in on that push. The user will end up in the specific chat room and in the specific message, right? Yeah exactly. I will extract the information from the push notification and use that with any in our case which is message ID. And then from the message array that is in our database I point out which is that particular message ID and map the particular index of that in Inside this container And then scroll to it.

If the ramp many chat rooms, do you have to hold those message erasing the memory or do you look them up? No time indicator work. How does it work? Yeah, actually a poor example I bought I do is every time I go into any of the message arrays that is for exam chat rooms, then I load it from our Local database which is Rel. And and also at the same time I hit the guitar API that sorry the message archive em am archive xmpp stanza so that I can receive any of the new messages if there are any so so this is this happens in the background for the time being the user is shown with whatever the messages there are inside the local. Call database it is pretty fast. Actually. If you go inside one of those then you will be shown with the previous data chat information.

So you are going from multiple erase with chat messages, but how does it work? Are they maintained by the app or do you have to extract them from the server on load of the app? Yeah, I do both actually, for example, like if I am going into chat ABC chatroom ABC what for initial thing I do is I call the All the chats in the particular date or the sorted order and then I show it to the user and after that I fetch I hit the like I mentioned I hit the announced an xmpp each a bird database with this particular stanza. That is a message archive Sansa and get any of the new messages that I have. And and if user just in real-time sends any message, then that is received from The xmpp Listener and add it to the database and also the gifted sharks message array at the same time. Go to thank you, since you mentioned that you have mentioned just now the stanzas so it will just help it would be useful to quickly explain. So since we are using xmpp server where you can ejabberd server, which is a type of jabber server, which is using xmpp messaging format and messages or the phone. Of messages in that server is called stanzas. It’s a bit like to XML, you know, can you talk a bit more about what how give to chat works with the does he give to chat implemental librarian actually give pictured is not at all. It doesn’t care about what you are using is whether it’s a xmpp or stands out nothing it what it wants is For example, the main that is mandatory props that it requires has this the messages things so that it can load those messages. So what I’m doing is I am extracting all the messages that I am receiving from the area bird server. That is I am hitting the server with the message archive stanza. So the server one after another it sends me all those messages.

And then what I do is I capture them save it inside an array and feed it to this particular crops that is message over here. So can you talk a bit more? Because I know that that part can be complicated because you need to have some sort of mechanism which allows you to continuously be in connection with the xmpp server. And to parse those messages, so we need to use some sort of library or some sort of like in four parts and xmpp messages. What are you using here? I’m using the xmpp dot JS Library. It is. Basically it is not specific to react native. It is just a simple JavaScript library that anyone can implement. So over here, you can see just ignore this this part so over here whenever the app is initialized first. What I do in our case is first, I extract the wallet address and the password and provide it to the example. I use this xmpp JS Library client component and over here. I submit them are service and domain name.

Which is this and username as wallet address and password I submitted and so once everything is clear. The credentials are clear. It gives an okay response. And then I start sorry once I create this configuration. I call this function start and then once the xmpp server, that is our service it. Responds with okay, then I am good to go and use it further. So now the next what I do is once the xmpp is online, that is its. I’ve created The xmpp Listener over here listener function. Yeah, so what it does is basically it checks every time this listener checks for if there is a need for example in this particular piece of code. You can see if it checks for the stanza error. That is if there is any error then it will just basically do whatever you write inside this particular Lambda function and next is if it’s offline, then it will do whatever you have written it inside and then

Then if it receives any stand. For example, if someone on the other side sends any messages any message, then it will listen over here. So I am using this xmpp dot JS library to create this particular listener which listens to this stanza and accepts it and does whatever you have written inside this particular function.

Great. Yeah xmpp. The GS is the library for using the and if you could scroll back just to explain the wallet, you know where the exam people dot JS library is being first. Yeah. So the wallet address there is yeah, so Because in our case we use features on blockchain and tokenization. We use wallet address for identifying users. It’s like a public key basically and password is password obviously, so in if you’re building something different, you don’t need blockchain of tokenization, then you instead of wallet address. You will be using some username. Or something else. Okay. So and xn P big p dot GS takes care of parsing XML or xmpp format and that’s all those things for you, right? Yeah. Yeah, it has the passing of XML component. So what you can do is for example, I have this particular JavaScript code over here. I have written all of the stanzas that I need to send the Never. I want to for example a latest feature was to show is typing now typing feature. So whenever the user is typing on the text input, I send this particular I hit this particular function, which is basically sending this particular stanza over here the composing stanza. So it will now we only interesting topical form or you know specific stanzas. So we need to expend That there are standard message stanzas in xmpp, which is like a template of the it’s almost does look like an XML. Yeah, some will object xmpp object over here. You can see you send it to the chat server to another user or to the chat room at Chad chat server broadcasts it to other

Nurse of the chat room that simple and it’s it’s shown it’s rendered by xmpp dodgy as in our case library on the client side in react native app, and then it’s rendered visually again in our case by gifted chat and it’s nicely shown to the users as as a chat message in some nice book chat bubble and things like that, but there is an option to implement. Nickel or other features while xmpp stanzas, like for example, somebody is typing like you’re saying here in is right. So in that case you just send the different type of stands at which it which is still very similar format. It’s just a little bit different but it might it might include some additional technical data omitted metadata like in this case what you including

Composing, right? Yeah into the system is basically a message stands. I’d sell and inside. So what I’m doing is I’m not sending anybody. Usually what a message stanza includes is a body to so am not sending anybody am just simply sending the composing feature. That is a does this feature is actually from the chart State feature. So composing is one of its function. I like yeah, so right when you say you send it to the server and all of the clients inside all of the users inside that particular chat room will receive this particular message with the ID that you send that is over here. I have and using is composing ID. So on in the client side that is over here. I can fetch it by as this particular. He’s composing is a

Heidi and I can fetch Using that and then accordingly shows the now typing thing over there. So basically this is a message stanza itself. What you this is exactly the same thing that you use to send anyone any message just a small difference is that there is nobody tagged over here. Yeah, so we are not to summarize. We’re not inventing anything here in terms of We are using as we can see in the code here as standard chat States function of attributes of the XML xmpp protocol, which is listed in general dot org website. For example, and yeah, we are we are just implementing that using that feature.

To show that somebody is typing which is a nice ux user experience feature, especially in Lincoln group chat. But also on a one-on-one chat is it improves the experience of the end-user providing that experience that somebody is there and somebody is doing something even before they have sent the message you can see they are doing something and type in their message. So that’s one thing you can do. You can use one of the existent like composing. How can you go back to that composing you can do use different, right? Yeah this one. So number of jobs States you can use here and it’s just one of the extensions are called steps. So those eggs accepts xep those are extensions of the xmpp protocol and you can add a number of those in the chat server that you’re using if you’re implementing xmpp protocol, of course, so that’s one thing you can do but

I think we could also add that you can create custom, you know message for my message parameters and parse it in some other way in your front-end application. For example, what I what I mean is say you wanted to implement file attachments. And as far as I remember in xmpp protocol. Standard way to send file attachment is kind of peer-to-peer which might be not ideal for most scenarios because in that case it only allows you to ask to send and receive the check the file attachment when both users are online if you want to implement chat attachments file attachments in your own way using your own API using your own file.

Storage and that it’s stored in like Amazon S3. For example, like we Implement in some cases in distributed ipfs database system file storage system. Then you might want to implement your own custom type of stanza or custom. Meet up data parameters in stanza and then you can render it in a different way in your front end code. So for example, you can choose you can elect to show that those type of messages which include file attachment information like URL to the file and thumbnail and things like that. You can choose to display that sort of my

Which not as a child mobile but as as a preview or a photo of like water video for example, or if you have detected that that file is a PDF. You can display like an icon of PDF or something like that. So you have some Freedom around xmpp messages and xmpp stanzas and either using

Protocol provided parameters or parameters provided by extensions accepts you can you can Implement specific different types of xmpp stanzas or chat messages which can be technical or which can include Additional information either using the protocol provided parameters or implementing some of your own custom parameters for the scenarios and business logic that you need to implement.

Right. I think we are going through most of the gifted chat features and we have covered what is gifted chart. How does it help to build your user experience and UI in your react native application.
We have covered xmpp do GS and that in our case that library is that what we are using for parsing the xmpp and working with xmpp server to provide information and which which can be afterwards render think to visual implementation in wire if the chat. Yeah, is there anything else we need to add here about how this whole thing works? I think so either any differences for implementation for IOS and Android auto is it all taken care of direct nature. Yeah, it is taken care of pay react native itself. There was nothing specific that I had to do in like there was nothing specific that didn’t work in either of the platform.

Related to these. So yeah, so everything worked fine. How about you I and like Judd Bubbles and think like that. Is it rendered? And yeah, Kate can adjust automatically by is it that job done by gifted chart? Yeah. It is usually provides you but what I have done is I have created my own component for it so that it can We can customize it. However we need so what I did was basically

You can see I have created this particular message body component. And over here I am showing. So over here I am and I use this particular message body, which is basically the whole container of the message and inside this I position all of the what you say the elements that is chat bubble the date and the time and all those stuffs so over here you can see these are the things that I’m using from the gifted chat library. That is the avatar. The day component the you tells component and the system message component. So I’m for the system message and using their own component itself. I imported it from the react native gifted chat and I’m using it over here. So yeah, that’s how so you can customize it. You can use your own system message or utils and all this stuff. So I thought we already have these things for Goodbye gift to check and we can use it. So yeah. Nice, that’s great. And we might want to actually cover some of these topics and go through later on future future recordings future podcasts that we are doing to go through for example how to customize and those chat messages and what else like some deeper things we can do around gift. Enjoy gifted chart and xmpp stanzas. Well, yeah, but let’s keep it for that.

Thank you very much. We need I think we have probably the most important aspects that we wanted to cover actually and it gives you know me personally and I think everybody who is listening and looking at this much better understanding of how to implement to actually a chat chat messaging functionality into Iraq native app. And specifically how to work with gifted chat with gifted chat framework library and and also touched on xmpp do GS. So thank you again. And thank you everybody for listening looking to this and stay tuned for future updates.

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *