NOTE: this project is no longer active and not recommended for use.
Please use the native SDKs
The Telnyx SDK for React Native enables developers to connect and use Telnyx APIs within their own React Native apps. Our TelnyxRTC SDK allows developers to build or add robust and innovative communication services to their applications.
You'll need node v11.15.0 or later.
You'll also need a Telnyx account in order to authenticate your application. Follow our quick start guide to create a Connection with Credentials Authentication -- it's simple and quick to get set up with secure credentials that are automatically generated for you.
Install the package with:
npm install @telnyx/react-native --save
import { TelnyxRTC } from "@telnyx/react-native";
To initialize the JavaScript SDK, you'll need to authenticate using a Telnyx Connection. You can access the Connection credentials in the Telnyx Portal.
// Initialize the client
const client = new TelnyxRTC({
// Required credentials
login: username,
password: password,
});
// Create a variable to track the current call
let activeCall;
// Attach event listeners
client
.on("telnyx.socket.open", () => console.log("socket open"))
.on("telnyx.socket.close", () => {
console.log("socket closed");
client.disconnect();
})
.on("telnyx.socket.error", (error) => {
console.log("telnyx.socket.error", error);
client.disconnect();
})
.on("telnyx.ready", () => console.log("ready to call"))
.on("telnyx.error", () => console.log("error"))
// Event fired on call updates, e.g. when there's an incoming call
.on("telnyx.notification", (notification) => {
activeCall = notification.call;
switch (notification.type) {
case "callUpdate":
// Call is over and can be removed
if (
notification.call.state === "hangup" ||
notification.call.state === "destroy"
) {
activeCall = null;
}
// An established and active call
if (notification.call.state === "active") {
return;
}
// New calls that haven't started connecting yet
if (notification.call.state === "new") {
return;
}
// Receiving an inbound call
if (notification.call.state === "ringing") {
return;
}
// Call is active but on hold
if (notification.call.state === "held") {
return;
}
break;
}
});
// Connect and login
client.connect();
// You can disconnect when you're done
// client.disconnect();
Important: You should treat Connection credentials as sensitive data and should not hardcode credentials into your frontend web application. Check out the examples for sample React code that handles username and password by prompting the user.
Setting your video stream in RTCView to show video call
let streamURL = null;
const {
options: {remoteStream = null, localStream = null},
} = activeCall;
if (remoteStream) {
streamURL = remoteStream.toURL();
}
return (
<View style={styles.wrapperMiddle}>
{streamURL && (
<RTCView
mirror={false}
objectFit="contain"
streamURL={streamURL}
style={{width: '100%', height: '100%'}}
zOrder={1}
/>
)}
</View>
);
Making a call
client.newCall({
destinationNumber: '9999999999999', // Or you can use SIP address
video: {facingMode: 'user'},
});
We've included a few examples in React Native to help you get started.
You can access the documentation here about @telnyx/react-native
to have more information.
1. Navigate into the `https://github.com/team-telnyx/webrtc-examples/tree/main/react-native/calling-video-app`
2. Run `npm install` to install dependencies.
3. Connect a real mobile device in your computer. This is necessary because it needs to access real camera and microphone.
4. Run `npm run android` or `npm run ios`
- react-native-elements
- react-native-vector-icons
- react-native-webrtc
- @react-navigation
- @react-native-community
If you have any trouble building the App follow the steps for each native library to double check all frameworks have been linked properly:
- Instructions for react-native-webrtc
- Instructions for react-native-incall-manager
- Instructions for async-storage
- Instructions for react-native-webrtc
- Instructions for react-native-incall-manager
- Instructions for async-storage
It's possible that an error will occur during the linking process of the native libraries. If your app does not compile, follow these steps to troubleshoot:
Make sure to check the app permissions in
AndroidManifest.xml
andInfo.plist
to access the device camera and microphone!
The React Native SDK is a package inside the @telnyx/webrtc monorepo. To setup the dev environment follow these steps:
- Download the installer for the LTS version of Node.js. This is the best way to also install npm.
- Fork the @telnyx/webrtc repository and clone it.
- Create a new branch from
master
for your change. - Run
npm install
to install global dependencies. - Run
npm run build
to prepare the React Native package. - Navigate into the react-native directory with
cd src/ReactNative
. - Make changes!
TelnyxRTC SDK for React Native follows Semantic Versioning 2.0 as defined at http://semver.org.