Example of Connecting/Disconnecting OTRN

App.js

import React, { Component } from 'react';
import { View, Button } from 'react-native';
import { OTSession, OTPublisher, OTSubscriber } from 'opentok-react-native';

export default class App extends Component {
	constructor(props) {
		super(props);
		this.state = {
			show: false
		}
		this.apiKey = '';
		this.sessionId = '';
		this.token = '';
		this.sessionEventHandlers = {
			sessionConnected: (event) => {
				console.log('sessionConnected', event)
			},
			sessionDisconnected: (event) => {
				console.log('sessionDisconnected', event)
			},
			sessionReconnected: (event) => {
				console.log('sessionReconnected', event)
			},
			sessionReconnecting: (event) => {
				console.log('sessionReconnecting', event)
			},
			error: (event) => {
				console.log('Session - error', event)
			},
			otrnError: (event) => {
				console.log('Session - otrnError', event)
			},
		}

		this.publisherEventHandlers = {

			streamCreated: (event) => {
				console.log('Publisher stream created', event)
			},
			streamDestroyed: (event) => {
				console.log(`Publisher stream destroyed because`, event)
			},
			error: (event) => {
				console.log('Pub - error', event)
			},
			otrnError: (event) => {
				console.log('Pub - otrnError', event)
			},
		}

		this.subscriberEventHandlers = {
			videoEnabled: (event) => {
				console.log('Subscriber video enabled', event)
			},
			videoDisabled: (event) => {
				console.log('Subscriber video disabled', event)
			},
			connected: (event) => {
				console.log('Subscriber connected', event)
			},
			disconnected: (event) => {
				console.log('Subscriber disconnected', event)
			},
			error: (event) => {
				console.log('Sub - error', event)
			},
			otrnError: (event) => {
				console.log('Sub - otrnError', event)
			},
		}
	}

	toggleSession = () => {
		const { show } = this.state;
		this.setState({ show: !show })
	}

	render() {
		const { show } = this.state;
		return (
			<View style={{ flex: 1, flexDirection: 'row' }}>
				<Button
					title="Press me"
					onPress={this.toggleSession}
				/>
				{show && <OTSession apiKey={this.apiKey} sessionId={this.sessionId} token={this.token} eventHandlers={this.sessionEventHandlers}>
					<OTPublisher style={{ width: 100, height: 100 }} eventHandlers={this.publisherEventHandlers} />
					<OTSubscriber style={{ width: 100, height: 100 }} eventHandlers={this.subscriberEventHandlers} />
				</OTSession>}
			</View>
		);
	}
}