react-native-code-sync/src/code-sync/OtaUpdateModal.js

React-native plugin for the code-sync functionality on live via OTA (Over-the-air)

import React, { useMemo } from "react";
import { View, StyleSheet, Text } from "react-native";
import { PrimaryButton } from "./Components";
import { Colors } from "../utils";

export const OtaUpdateModal = ({
    visible,
    otaUpdateError,
    progressPercentage,
    progressValue,
    onCancelPress,
    onRestartPress,
    appLogo,
    showCancelButton,
    themeColor = Colors.PRIMARY,
    downloadCompleteMessage = 'Your app has downloaded latest package, please restart your app',
    downloadingInProgressMessage = 'Please wait we are downloading updated app package',
    downloadErrorMessage = 'Error while parsing bundle package',
    cancelButtonLabel = 'Cancel',
    restartButtonLabel = 'Restart',
    percentageTextStyle,
    messageStyle,
    mainContaineStyle,
    cancelButtonLabelStyle,
    restartButtonLabelStyle,
    customUI
}) => {
    if (!visible) return null

    const isDownloadComplete = useMemo(() => {
        return progressValue == 100
    }, [progressValue])

    const getContentMessage = () => {
        if (otaUpdateError) return downloadErrorMessage
        if (isDownloadComplete) return downloadCompleteMessage
        return downloadingInProgressMessage
    }

    return (
        <View style={[styles.mainContainer, mainContaineStyle]}>
            <View style={styles.innerWrapper}>
                {appLogo ? appLogo : null}
                <Text style={[styles.text, messageStyle]}>{getContentMessage()}</Text>
                {progressPercentage ? <View style={styles.progressContainer}>
                    <View style={[styles.percentageWrapper, { borderColor: themeColor }]}>
                        <Text style={[styles.progressValue, { color: themeColor }, percentageTextStyle]}>{progressPercentage}</Text>
                    </View>
                    {customUI ? customUI : null}
                </View> : null}
                {(isDownloadComplete || otaUpdateError) ? <View style={styles.buttonWrapper}>
                    {showCancelButton ?
                        <>
                            <PrimaryButton
                                label={cancelButtonLabel}
                                style={[styles.cancelButtonStyle, { borderColor: themeColor }]}
                                onPress={onCancelPress}
                                labelStyle={[styles.cancelText, { color: themeColor }, cancelButtonLabelStyle]}
                            />
                            <View style={styles.separator} />
                        </>
                        : null}
                    <PrimaryButton
                        label={restartButtonLabel}
                        style={[styles.restartButonStyle, { backgroundColor: themeColor }]}
                        onPress={onRestartPress}
                        labelStyle={restartButtonLabelStyle}
                    />
                </View> : null}
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    mainContainer: {
        ...StyleSheet.absoluteFill,
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: Colors.BLACK_50,
        zIndex: 10
    },
    innerWrapper: {
        backgroundColor: Colors.WHITE,
        borderRadius: 15,
        padding: 15,
        marginHorizontal: 20
    },
    text: {
        fontSize: 14,
        textAlign: 'center',
        color: Colors.BLACK
    },
    progressContainer: {
        marginVertical: 20,
        alignItems: 'center'
    },
    progressValue: {
        color: Colors.WHITE,
        fontSize: 14,
    },
    percentageWrapper: {
        width: 65,
        height: 65,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 100,
        borderWidth: 5
    },
    buttonWrapper: {
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    cancelButtonStyle: {
        width: null,
        flex: 1,
        backgroundColor: Colors.WHITE,
        borderWidth: 1,
        borderColor: Colors.PRIMARY
    },
    cancelText: {
        color: Colors.PRIMARY
    },
    separator: {
        width: 15
    },
    restartButonStyle: {
        width: null,
        flex: 1
    }
})