Skip to content

React Native Messaging API & SDK. Build customizable video, voice or chat apps for Android, iOS or web with MirrorFly React Native Messaging SDK.

Notifications You must be signed in to change notification settings

MirrorFly/MirrorFly-ReactNative-Sample

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build Platform-specific Apps With Custom React Native Video & Chat SDK

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.

⚒️ Key Product Offerings

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

☁️ Deployment Models - Self-hosted and Cloud

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

📱 Mobile Client

MirrorFly offers a fully-built client SafeTalk that is available in:

image   appstore

You can use this client as a messaging app, or customize, rebrand & white-label it as your chat client.

⚙️ Requirements

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

📥Integrate the Chat SDK

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";

🛠️ Setting Up NPM Dependencies for Chat SDK Integration


{
   
    "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.*.*"
  }


▶️ Initialize Chat SDK

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);

📝Register User

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`);

🛜Connect to MirrorFly Server

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`);

⏩Send a Message

Finally, use the method below to send a message to another user

await SDK.sendTextMessage(`TO_USER_JID`, `MESSAGE_BODY`,`MESSAGE_ID`,`REPLY_TO`);

⏪ Receive a Message

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);
}

🤹Add More Capabilities

To add additional capabilities like group chat, recent chat and push notifications, follow the steps demonstrated in our official documentation.

🤝Getting Help

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 [email protected]

📚 Learn More

🧑‍💻 Hire Experts

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.

⏱️ Round-the-clock Support

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.

💼 Become a Part of our amazing team

We're always on the lookout for talented developers, support specialists, and product managers. Visit our careers page to explore current opportunities.

🗞️ Get the Latest Updates