Quickstart

import {
    createAgoraRtcEngine,
    ChannelProfileType,
    ClientRoleType,
    IRtcEngine,
    RtcSurfaceView,
    RtcConnection,
    IRtcEngineEventHandler,
} from 'react-native-agora';

const appId = '<-- Insert app ID -->';

const setupVideoSDKEngine = async () => {
    if (Platform.OS === 'android') { await getPermission(); }
    agoraEngineRef.current = createAgoraRtcEngine();
    const agoraEngine = agoraEngineRef.current;
    await agoraEngine.initialize({ appId: appId });
};

const token = '<-- Insert token -->';
const channelName = '<-- Insert channel name -->';
const localUid = 0; // Local user UID, no need to modify

// Define the join method called after clicking the join channel button
const join = async () => {
    if (isJoined) {
        return;
    }
    if (isHost) {
        // Join the channel as a broadcaster
        agoraEngineRef.current?.joinChannel(token, channelName, localUid, {
            // Set the channel profile according to your use case (see table above)
            channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
            // Set user role to broadcaster
            clientRoleType: ClientRoleType.ClientRoleBroadcaster,
            // Publish audio collected by the microphone
            publishMicrophoneTrack: true,
            // Publish video collected by the camera
            publishCameraTrack: true,
            // Automatically subscribe to all audio streams
            autoSubscribeAudio: true,
            // Automatically subscribe to all video streams
            autoSubscribeVideo: true,
        });
    } else {
        // Join the channel as an audience
        agoraEngineRef.current?.joinChannel(token, channelName, localUid, {
            // Set the channel profile according to your use case (see table above)
            channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
            // Set user role to audience
            clientRoleType: ClientRoleType.ClientRoleAudience,
            // Only takes effect for the audience role
            audienceLatencyLevel: AudienceLatencyLevelType.AudienceLatencyLevelLowLatency,
            // Do not publish audio collected by the microphone
            publishMicrophoneTrack: false,
            // Do not publish video collected by the camera
            publishCameraTrack: false,
            // Automatically subscribe to all audio streams
            autoSubscribeAudio: true,
            // Automatically subscribe to all video streams
            autoSubscribeVideo: true,
        });
    }
};

const [remoteUid, setRsemoteUid] = useState(0); // Uid of the remote user

const setupEventHandler = () => {
    eventHandler.current = {
        // Triggered when the local user successfully joins a channel
        onJoinChannelSuccess: () => {
            setMessage('Successfully joined channel: ' + channelName);
            setupLocalVideo();
            setIsJoined(true);
        },
        // Triggered when a remote user joins the channel
        onUserJoined: (_connection: RtcConnection, uid: number) => {
            setMessage('Remote user ' + uid + ' joined');
            setRemoteUid(uid);
        },
        // Triggered when a remote user leaves the channel
        onUserOffline: (_connection: RtcConnection, uid: number) => {
            setMessage('Remote user ' + uid + ' left the channel');
            setRemoteUid(uid);
        },
    };
    // Register the event handler
    agoraEngineRef.current?.registerEventHandler(eventHandler.current);
};

const setupLocalVideo = () => {
    agoraEngineRef.current?.enableVideo();
    agoraEngineRef.current?.startPreview();
};

<React.Fragment key={0}>
    <RtcSurfaceView canvas={{ uid: 0 }} style={ width: '90%', height: 200 } />
</React.Fragment>

<React.Fragment key={remoteUid}>
    <RtcSurfaceView
        canvas={{ uid: remoteUid }}
        style={ width: '90%', height: 200 }
    />
</React.Fragment>

const leave = () => {
    // Leave the channel
    agoraEngineRef.current?.leaveChannel();
    setIsJoined(false);
};

const cleanupAgoraEngine = () => {
    return () => {
        agoraEngineRef.current?.unregisterEventHandler(eventHandler.current!);
        agoraEngineRef.current?.release();
    };
};

import React, { useState } from 'react';
// Import user interface elements
import {
    SafeAreaView,
    ScrollView,
    StyleSheet,
    Text,
    View,
    Switch,
} from 'react-native';

const localUid = 0; // Local user Uid, no need to modify

const App = () => {
    const [isJoined, setIsJoined] = useState(false); // Whether the local user has joined the channel
    const [isHost, setIsHost] = useState(true); // User role
    const [remoteUid, setRemoteUid] = useState(0); // Uid of the remote user
    const [message, setMessage] = useState(''); // User prompt message

    // Render user interface
    return (
        <SafeAreaView style={styles.main}>
            <Text style={styles.head}>Agora RTC SDK quickstart</Text>
            <View style={styles.btnContainer}>
                <Text onPress={join} style={styles.button}>
                    Join Channel
                </Text>
                <Text onPress={leave} style={styles.button}>
                    Leave Channel
                </Text>
            </View>
            <View style={styles.btnContainer}>
                <Text>Audience</Text>
                <Switch
                    onValueChange={switchValue => {
                        setIsHost(switchValue);
                        if (isJoined) {
                            leave();
                        }
                    }}
                    value={isHost}
                />
                <Text>Host</Text>
            </View>
            <ScrollView
                style={styles.scroll}
                contentContainerStyle={styles.scrollContainer}>
                {isJoined && isHost ? (
                    <React.Fragment key={localUid}>
                        <Text>Local user uid: {localUid}</Text>
                    </React.Fragment>
                ) : (
                    <Text>Join a channel</Text>
                )}
                {isJoined && remoteUid !== 0 ? (
                    <React.Fragment key={remoteUid}>
                       <Text>Remote user uid: {remoteUid}</Text>
                    </React.Fragment>
                ) : (
                    <Text>{isJoined && !isHost ? 'Waiting for remote user to join' : ''}</Text>
                )}
                <Text style={styles.info}>{message}</Text>
            </ScrollView>
        </SafeAreaView>
    );
};

// Define user interface styles
const styles = StyleSheet.create({
    button: {
        paddingHorizontal: 25,
        paddingVertical: 4,
        fontWeight: 'bold',
        color: '#ffffff',
        backgroundColor: '#0055cc',
        margin: 5,
    },
    main: { flex: 1, alignItems: 'center' },
    scroll: { flex: 1, backgroundColor: '#ddeeff', width: '100%' },
    scrollContainer: { alignItems: 'center' },
    videoView: { width: '90%', height: 200 },
    btnContainer: { flexDirection: 'row', justifyContent: 'center' },
    head: { fontSize: 20 },
    info: { backgroundColor: '#ffffe0', paddingHorizontal: 8, color: '#0000ff' },
});

export default App;