Deprecated project
NOTE: this project is no longer active and not recommended for use.
Please use the native SDKs
- Android Telnyx WebRTC SDK here
- IOS Telnyx WebRTC SDK here
Telnyx React Native
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.
Requirements
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.
Getting Started
Install the package with:
npm install @telnyx/react-native --save
import { TelnyxRTC } from '@telnyx/react-native';
Usage
To initialize the JavaScript SDK, you'll need to authenticate using a Telnyx Connection. You can access the Connection credentials in the Telnyx Portal.
const client = new TelnyxRTC({
login: username,
password: password,
});
let activeCall;
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'))
.on('telnyx.notification', (notification) => {
activeCall = notification.call;
switch (notification.type) {
case 'callUpdate':
if (
notification.call.state === 'hangup' ||
notification.call.state === 'destroy'
) {
activeCall = null;
}
if (notification.call.state === 'active') {
return;
}
if (notification.call.state === 'new') {
return;
}
if (notification.call.state === 'ringing') {
return;
}
if (notification.call.state === 'held') {
return;
}
break;
}
});
client.connect();
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.
React Native
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',
video: {facingMode: 'user'},
});
Run our example.
React Native
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 `examples/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`
Screenshot:

Third-party libraries dependencies
- react-native-elements
- react-native-vector-icons
- react-native-webrtc
- @react-navigation
- @react-native-community
Troubleshooting
If you have any trouble building the App follow the steps for each native library to double check all frameworks have been linked properly:
iOS
Android
WebRTC Engine
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
and Info.plist
to access the device camera and microphone!
Developers
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!
Versioning
TelnyxRTC SDK for React Native follows Semantic Versioning 2.0 as defined at http://semver.org.
Contributing
See Contribution Guide
License
MIT © Telnyx