Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Memory leak

See original GitHub issue

I got memory leak on IOS devices, ram consumption increases and ram doesn’t release, when I’m comming back to this screen and making call again. Finally I got crash after ram go over 1GB on my iPhone. I think there is something wrong with SurfaceView components, without render them all works properly. Any ideas? Thanks.

“react-native-agora”: “^3.1.2”

import React, { Component } from 'react';
import { Platform, ScrollView, Text, View, TouchableOpacity, Dimensions, StyleSheet } from 'react-native';
import RtcEngine, { ChannelProfile, RtcLocalView, RtcRemoteView, VideoRenderMode } from 'react-native-agora';

interface Props {}

/**
 * @property peerIds Array for storing connected peers
 * @property appId
 * @property channelName Channel Name for the current session
 * @property joinSucceed State variable for storing success
 */
interface State {
    appId: string;
    channelName: string;
    joinSucceed: boolean;
    peerIds: number[];
}

class VideoChat extends Component<Props, State> {
    _engine?: RtcEngine;

    constructor(props) {
        super(props);
        this.state = {
            appId: 'xxxxxxxxxxxxxxxxxxxxxxx',
            channelName: 'channel-x',
            joinSucceed: false,
            peerIds: [],
        };
        if (Platform.OS === 'android') {
            // Request required permissions from Android
            /*requestCameraAndAudioPermission().then(() => {
                console.log('requested!');
            });*/
        }
    }

    componentDidMount() {
        this.init();
    }

    componentWillUnmount() {
        this._engine.destroy();
    }

    /**
     * @name init
     * @description Function to initialize the Rtc Engine, attach event listeners and actions
     */
    init = async () => {
        const { appId } = this.state;
        this._engine = await RtcEngine.create(appId);
        await this._engine?.setChannelProfile(ChannelProfile.Communication);
        await this._engine.enableVideo();

        this._engine.addListener('UserJoined', (uid, elapsed) => {
            console.log('UserJoined', uid, elapsed);
            // Get current peer IDs
            const { peerIds } = this.state;
            // If new user
            if (peerIds.indexOf(uid) === -1) {
                this.setState({
                    // Add peer ID to state array
                    peerIds: [...peerIds, uid],
                });
            }
        });

        this._engine.addListener('UserOffline', (uid, reason) => {
            console.log('UserOffline', uid, reason);
            const { peerIds } = this.state;
            this.setState({
                // Remove peer ID from state array
                peerIds: peerIds.filter((id) => id !== uid),
            });
        });

        // If Local user joins RTC channel
        this._engine.addListener('JoinChannelSuccess', (channel, uid, elapsed) => {
            console.log('JoinChannelSuccess', channel, uid, elapsed);
            // Set state variable to true
            this.setState({
                joinSucceed: true,
            });
        });
    };

    /**
     * @name startCall
     * @description Function to start the call
     */
    startCall = async () => {
        // Join Channel using null token and channel name
        const clientUid = Math.floor(new Date().getTime() / 1000);
        // Join Channel using null token and channel name
        await this._engine?.joinChannel(null, this.state.channelName, null, clientUid);
    };

    /**
     * @name endCall
     * @description Function to end the call
     */
    endCall = async () => {
        await this._engine?.leaveChannel();
        this.setState({ peerIds: [], joinSucceed: false });
    };

    switchCamera = async () => {
        await this._engine?.switchCamera();
    };

    render() {
        return (
            <View style={styles.max}>
                <View style={styles.max}>
                    {this._renderVideos()}
                    <View style={styles.buttonHolder}>
                        <TouchableOpacity onPress={this.startCall} style={styles.button}>
                            <Text style={styles.buttonText}> Start Call </Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={this.endCall} style={styles.button}>
                            <Text style={{ ...styles.buttonText }}> End Call </Text>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={this.switchCamera} style={styles.button}>
                            <Text style={styles.buttonText}>Switch </Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        );
    }

    _renderVideos = () => {
        const { joinSucceed } = this.state;
        return joinSucceed ? (
            <View style={styles.fullView}>
                <RtcLocalView.SurfaceView
                    style={styles.max}
                    channelId={this.state.channelName}
                    renderMode={VideoRenderMode.Hidden}
                />
                {this._renderRemoteVideos()}
            </View>
        ) : null;
    };

    _renderRemoteVideos = () => {
        const { peerIds } = this.state;
        return (
            <ScrollView style={styles.remoteContainer} contentContainerStyle={{ paddingHorizontal: 2.5 }} horizontal={true}>
                {peerIds.map((value, index, array) => {
                    return (
                        <RtcRemoteView.SurfaceView
                            style={styles.remote}
                            uid={value}
                            channelId={this.state.channelName}
                            renderMode={VideoRenderMode.Hidden}
                            zOrderMediaOverlay={true}
                        />
                    );
                })}
            </ScrollView>
        );
    };
}

const styles = StyleSheet.create({
    max: {
        height: '50%',
    },
    buttonHolder: {
        height: 100,
        alignItems: 'center',
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-evenly',
        position: 'absolute',
        top: 450,
        zIndex: 999999,
    },
    button: {
        paddingHorizontal: 20,
        paddingVertical: 10,
        backgroundColor: '#0093E9',
        borderRadius: 25,
    },
    buttonText: {
        color: '#fff',
    },
    fullView: {
        width: Dimensions.get('screen').width,
        height: Dimensions.get('screen').height - 100 / 2,
    },
    remoteContainer: {
        width: '100%',
        height: 150,
        position: 'absolute',
        top: 5,
    },
    remote: {
        width: 150,
        height: 150,
        marginHorizontal: 2.5,
        borderRadius: 500,
    },
    noUserText: {
        paddingHorizontal: 10,
        paddingVertical: 5,
        color: '#0093E9',
    },
});

export default VideoChat;