Set a leave confirmation dialog

Live Streaming Kit (ZegoUIKitPrebuilt) ends a live by default when the user clicks the End Live button or the Android’s Back button.

If you want to add a confirmation dialog box to double confirm whether the user wants to leave a live, you can use the confirmDialogInfo config: After configuring the confirmDialogInfo parameter, ZegoUIKitPrebuilt will pop up a confirmation dialog box with the default style before ending the live, showing the confirmation info you set.

The effect will be like this:

Here is the reference code:

Untitled

import React from 'react';
import { StyleSheet, View } from 'react-native';
import ZegoUIKitPrebuiltLiveStreaming, { HOST_DEFAULT_CONFIG } from '@zegocloud/zego-uikit-prebuilt-live-streaming-rn';
import * as ZIM from 'zego-zim-react-native';

export default function HostPage(props) {
    return (
        <View style={styles.container}>
            <ZegoUIKitPrebuiltLiveStreaming
                appID={yourAppID}
                appSign={yourAppSign}
                userID={userID}
                userName={userName}
                liveID={liveID}

                config={{
                    ...HOST_DEFAULT_CONFIG,
                    onLeaveLiveStreaming: () => { props.navigation.navigate('HomePage') },
                    confirmDialogInfo: { // Modify your custom configurations here.
                        title: "Leave confirm",
                        message: "Do you want to leave?",
                        cancelButtonName: "Cancel",
                        confirmButtonName: "Confirm"
                    }
                }}
                plugins={[ZIM]}
            />
        </View>
    );
}

Copied!

If the default dialog style can’t meet your needs, or you want to pop up a more complex dialog, then you can use the onLeaveLiveStreamingConfirming parameter. This parameter requires a value of type function and requires the function to return a Promise. You can set the confirmation dialog that you want to pop up in the Promise.

And sure, you can also implement the logic that decides whether to end the live or not, or any other business logic in this callback as wanted.

Here is the reference code:

Untitled

import React from 'react';
import { StyleSheet, View, Alert } from 'react-native';
import ZegoUIKitPrebuiltLiveStreaming, { HOST_DEFAULT_CONFIG } from '@zegocloud/zego-uikit-prebuilt-live-streaming-rn';
import * as ZIM from 'zego-zim-react-native';

export default function HostPage(props) {
    return (
        <View style={styles.container}>
            <ZegoUIKitPrebuiltLiveStreaming
                appID={yourAppID}
                appSign={yourAppSign}
                userID={userID}
                userName={userName}
                liveID={liveID}

                config={{
                    ...HOST_DEFAULT_CONFIG,
                    onLeaveLiveStreaming: () => { props.navigation.navigate('HomePage') },
                    onLeaveLiveStreamingConfirming: () => { // Modify your custom configurations here.
                        return new Promise((resolve, reject) => {
                            Alert.alert(
                                "This is your custom dialog.",
                                "You can customize this dialog as needed.",
                                [
                                    {
                                        text: "Cancel",
                                        onPress: () => reject(),
                                        style: "cancel"
                                    },
                                    {
                                        text: "Exit",
                                        onPress: () => resolve()
                                    }
                                ]
                            );
                        })
                    }
                }}
                plugins={[ZIM]}
            />
        </View>
    );
}

Copied!

The effect of a custom dialog will be like this:

If you want to listen for leave events, ZegoUIKitPrebuiltLiveStreaming provides an onLeaveLiveStreaming callback that will be triggered when the live ends. And sure, you can also implement custom business logic in the onLeaveLiveStreaming.