One of the most appealing sides of React Native framework is that you only have to build your app at once using JavaScript. React Native means two times lower costs for building and maintenance. It has a large community and a variety of libraries in native languages. It is similar in structure to React.js, so it is easy for web developers to work with it.
React Native makes use of native Objective-C/Swift and Java/Kotlin ingredients. They help native-like UI and boost performance in intensive operations. Yet, you can’t reuse native modules across different platforms.
We have recently announced the release of the Quickblox React Native SDK. Today we have prepared a step-by-step guide on building a messenger app with it. You are welcome to download Quickblox React Native SDK. It is in beta now, and we are ready to hear the feedback and improve our SDK according to your proposals.
QuickBlox React Native SDK offers you all you need to build a chat messaging app. Our toolkit contains helpful methods for implementing the following functionality:
To create a new React Native chat messaging app with QuickBlox SDK from scratch follow these steps:
react-native init AwesomeChatApp
to create a new projectnpm install
npm install quickblox-react-native-sdk --save
pod install
You’re done with dependencies!
Now you can start the app with react-native run-android
or react-native run-ios
But the application created is not really a chat messenger yet, right? So now you should create some UI for messages and then use our SDK to make it alive!
To make SDK work you should use your QuickBlox application account. To create a QuickBlox application, follow the steps below:
Now, it’s time to turn on the QuickBlox SDK:
Now you should sign in and connect to chat:
Once you signed in you can connect:
Great! Now since you’re connected to chat – it’s time to send a message to someone. Let’s create a new dialog:
In order to receive new messages we should tell SDK to send us events when there are new messages in chat:
But how will we handle new messages? We should probably assign an event handler:
So, now we have a dialog, we subscribed for new messages and created function to handle incoming messages. Let’s send our first message:
That’s it!
QuickBlox React Native SDK is here to speed up the process of messaging app development – from designing the prototype to final testing. Using our toolkit, you can integrate the messenger, voice, and video calling to your app, manage the files and objects. If you have any questions or suggestions, please submit a ticket to our support team.
You will receive an email shortly to verify your subscription.
Check out your inbox!