react-native-debug-toolkit/lib/views/RestartModal.js

A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development

import React from 'react';
import {
    View,
    Text,
    Modal,
    StyleSheet,
    Dimensions
} from 'react-native';
import { DebugColors } from '../utils/DebugConst';

const { width: screenWidth, height: screenHeight } = Dimensions.get('window');

const RestartModal = () => {
    return (
        <Modal
            visible={true}
            transparent={true}
            animationType="fade"
            onRequestClose={() => {}}
        >
            <View style={styles.overlay}>
                <View style={styles.modalContent}>
                    <Text style={styles.title}>Environment Changed</Text>
                    <Text style={styles.message}>
                        The app needs to restart to apply the new environment settings.{'\n\n'}
                        Please manually kill the app and restart it.
                    </Text>
                </View>
            </View>
        </Modal>
    );
};

const styles = StyleSheet.create({
    overlay: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'center',
        alignItems: 'center',
        width: screenWidth,
        height: screenHeight,
        zIndex: 9999,
    },
    modalContent: {
        backgroundColor: 'white',
        borderRadius: 10,
        padding: 20,
        width: screenWidth * 0.8,
        alignItems: 'center',
        elevation: 5,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
    },
    title: {
        fontSize: 18,
        fontWeight: 'bold',
        color: DebugColors.text,
        marginBottom: 15,
        textAlign: 'center'
    },
    message: {
        fontSize: 16,
        color: DebugColors.text,
        textAlign: 'center',
        lineHeight: 22
    }
});

export default RestartModal;