React and React Native are growing in popularity and they probably will be the leading frameworks in 2018. According to StackOverflow’s 2017 Developer Survey, React is the most loved library and it also took the fourth place among the most popular frameworks. Moreover, React is one of the most popular and depended-upon packages at npm.

You may also like… [React + Backbone: Keeping the LiveChat Tech Stack Fresh](http://developers.livechatinc.com/blog/livechat-technology-stack/)

At LiveChat, we couldn’t ignore that trend, so we decided to add React and React Native modules to our collection. React and LiveChat are perfect together because React is pretty straightforward and allows for controlling data flow in an easy and predictable way.

I was responsible for the development part of the modules and I loved it to the bones. We have briefly described these components in LiveChat and Single-Page Applications already, but it’s now time for more details, live examples, and behind-the-scenes facts. Read on!

LiveChat for React

This module was an instant hit. Merely two lines of code give you a fully functional LiveChat implementation:

import LiveChat from 'react-livechat'

;<LiveChat license={your_license_id} />

Moreover, to make your code cleaner and your life easier, LiveChat React component gives you an option to easily control chat callbacks and methods. Let’s say that you want to display a sent or received message somewhere else. You can fetch new messages using the code below:

<LiveChat
  ...
  onMessage={ data => console.log(data) }
/>

Behind the scenes it’s just the same code which you can see on the LiveChat installation page, but smartly hidden behind a React component.

LiveChat React component is easy and fun to work with, so no wonder that its popularity is growing:

LiveChat React component — download results (January 2018)Get LiveChat React component

LiveChat for React Native

I am a big fan of React Native because of its simplicity and the option to develop both Android and iOS apps at the same time, so I really enjoyed working on this module.

React Native is very similar to React (with just a few exceptions), so it was easy for me to learn and surely it will be the same for anyone who has had some previous experience with React.

LiveChat for React Native component was more challenging than the previous one because I had to create my own chat widget and connect it with LiveChat Visitor SDK.

The component comes with its own chat UI. What does it mean?

React Native doesn’t support CSS files, so the styles of the chat window have to be controlled by the module itself. The layout of LiveChat for React Native was partly inspired by Facebook Messenger, but it’s easily customizable:

LiveChat React Native component — chat UIAgain, you need only two lines of code to get started with this module:

import LiveChat from 'react-native-livechat'

;<LiveChat license={your_license_id} />

The interesting thing is that although the component seems pretty straightforward, it took about 500 lines of code to make everything work as expected.

Here’s how it looks in action:

LiveChat for React Native demoThe number of downloads of this module is surprisingly high. It shows that React Native is becoming a big player in the mobile development and that’s good news.

LiveChat React Native component — download results (January 2018)

Get LiveChat React Native component

Moving forward

Overall, I’m super happy with the results so far. The modules are still being developed, so expect more features as we move on.

Both projects are available on GitHub with full source code, so feel free to fork them and play with them. If you spot any bug, please report!

If you want to request a functionality or contribute to these projects, let us know via email or on Twitter — we will be more than happy to hear from you.