@whitemordred/react-native-bootstrap5/lib/utils/withSafeRender.js

A complete React Native library that replicates Bootstrap 5.3 with 100% feature parity, full theming support, CSS variables, and dark/light mode

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useSafeRender = void 0;
exports.withSafeRender = withSafeRender;
const react_1 = __importDefault(require("react"));
const react_native_1 = require("react-native");
const validation_1 = require("./validation");
/**
 * Higher-order component that adds error handling to any component
 * This prevents the entire app from crashing if a component fails
 */
function withSafeRender(Component, componentName) {
    return react_1.default.forwardRef((props, ref) => {
        const errorHandler = (0, validation_1.createErrorHandler)(componentName);
        try {
            return <Component {...props} ref={ref}/>;
        }
        catch (error) {
            errorHandler(error);
            return (<react_native_1.View style={styles.errorContainer}>
          <react_native_1.Text style={styles.errorText}>{componentName} Error</react_native_1.Text>
        </react_native_1.View>);
        }
    });
}
/**
 * Hook to wrap render functions with error handling
 */
const useSafeRender = (componentName) => {
    const errorHandler = (0, validation_1.createErrorHandler)(componentName);
    return {
        safeRender: (renderFn) => {
            try {
                return renderFn();
            }
            catch (error) {
                errorHandler(error);
                return (<react_native_1.View style={styles.errorContainer}>
            <react_native_1.Text style={styles.errorText}>{componentName} Error</react_native_1.Text>
          </react_native_1.View>);
            }
        },
        errorHandler,
    };
};
exports.useSafeRender = useSafeRender;
const styles = react_native_1.StyleSheet.create({
    errorContainer: {
        backgroundColor: '#f8d7da',
        borderColor: '#f5c6cb',
        borderWidth: 1,
        padding: 12,
        borderRadius: 6,
        alignItems: 'center',
    },
    errorText: {
        color: '#721c24',
        fontSize: 14,
    },
});