MirrorFly’s React Native Sample App is the easiest way to build messaging platforms. You’ll use the pre-built sample app, integrate the React Native Chat SDK, and launch a fully-functional messaging app for any platform you prefer.
React Native is highly flexible and extensible. You can use MirrorFly’s own sample app to build any Android or iOS app with 1000s of real-time communication capabilities. The React native chat SDK is low-code, enabling easy integration and launch in less than 20 mins. Plus, the performance is faster when compared to apps as the SDK is carefully designed with minimal codes.
MirrorFly’s React Native SDK allows you to add the following capabilities to your platform.
💬 Enterprise Instant Messaging - Secure real-time communication across organizations.
🎯 HD Group Video Calling- High-definition Group video calling for face to face conversations.
🦾 SIP/ VoIP Calling - Enable instant communication on IP-based phone lines.
🦾 Live Streaming - Broadcasting functionality to take content to millions of audience.
You can also add 1000+ real-time communication capabilities. Check out our other offerings here
MirrorFly offers full freedom with the hosting options:
- Self-hosted: Host your React Native client on your own data centers, private cloud servers or third-party servers.
Check out our multi-tenant cloud hosting
- Cloud: Deploy your React Native client platform on MirrorFly’s multi-tenant cloud servers.
Check out our multi-tenant cloud hosting
MirrorFly offers a fully-built client SafeTalk that is available in:
You can use this client as a messaging app, or customize, rebrand & white-label it as your chat client.
For MirrorFly React Native, ensure you install the following dependencies:
- Node: 14.20.0
- npm: 6.14.10
- React Native: 0.69.12 or higher
Prefer to learn the full integration steps as a video? Watch here
Step 1: Update package.json Ensure all dependencies in your package.json file are up-to-date. You can use:
npm install
or for specific updates:
npm update
Step 2: Check for Duplicates (For iOS Issues)
Look for duplicate packages that might cause conflicts, especially for iOS. Run:
npm ls | grep 'package-name'
If duplicates are found, remove or consolidate them to avoid version conflicts.
Step 3: Install Mirrorfly SDK in your App
npm i mirrorfly-reactnative-sdk
Step 4: Import the SDK. In the file where you want to use the MirrorFly SDK, add the import statement at the top:
import { SDK } from "mirrorfly-reactnative-sdk";
{
"react-native-get-random-values": "1.7.1",//must use version >=1.7.1
'realm': "^10.8.0" <= "^11.9.0",
'react-native-fs': "^2.18.0",
'@react-native-community/netinfo': "^8.0.0",
'moment': "2.29.4",
'react-native-compressor': "1.6.1",
'react-native-convert-ph-asset': "^1.0.3",
"react-native-create-thumbnail": "^1.6.4",
//add the below calls related dependencies
"react-native-webrtc": "118.0.5", // must use version "118.0.5"
"react-native-background-timer": "2.*.*"
}
To start initializing the chat SDK, you need data that handles connection status changes in the client's app.
Paste the license key into the license key parameter and use the method below to pass this data to the SDK.
In your App file (e.g., App.tsx or App.js), import the SDK and call the initializeSDK function with the required parameters.
const initializeObj = {
apiBaseUrl: `API_URL`,
licenseKey: `LICENSE_KEY`,
isTrialLicenseKey: `TRIAL_MODE`,
callbackListeners: {},
};
await SDK.initializeSDK(initializeObj);
Step 1
Use the method below to register a new user.
Step 2
After registration, you'll receive a username and password. Use these credentials to connect to the server with the connect method.
await SDK.register(`USER_IDENTIFIER`);
Step 1
Use the registration credentials to connect to the server.
Step 2
Upon a successful connection, you’ll receive an approval message with a status code of 200. If there’s an issue, you’ll encounter an execution error.
Step 3
You can track the connection status through the connectionListener callback function.
Step 4
If an error occurs during the connection, you’ll receive an error message via the callback.
await SDK.connect(`USERNAME`, `PASSWORD`);
Finally, use the method below to send a message to another user
await SDK.sendTextMessage(`TO_USER_JID`, `MESSAGE_BODY`,`MESSAGE_ID`,`REPLY_TO`);
To receive messages from another user, implement the messageListener function. This function will be triggered whenever you receive a new message or related event in one-to-one or group chats. Additionally, include the callback method below during the SDK initialization process.
function messageListener(response) {
console.log("Message Listener", response);
}
To add additional capabilities like group chat, recent chat and push notifications, follow the steps demonstrated in our official documentation.
If you need any further help with our React Native Sample App, check out our resources
If you need any help in resolving any issues or have questions, Drop a mail to integration@contus.in
Looking for a tech team to develop your enterprise app in React Native? Hire a team of seasoned professionals who manage the entire process from concept to launch. We’ll deliver a high-quality app, expertly crafted and ready for launch.
If you’d like to take help when working with our solution, feel free to contact our experts who will be available to help you anytime of the day or night.
We're always on the lookout for talented developers, support specialists, and product managers. Visit our careers page to explore current opportunities.