one
Version:
One is a new React Framework that makes Vite serve both native and web.
171 lines (170 loc) • 4.3 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { BottomTabBarHeightContext } from "@react-navigation/bottom-tabs";
import React from "react";
import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
function ErrorBoundary(param) {
var {
error,
retry,
route
} = param,
inTabBar = React.useContext(BottomTabBarHeightContext),
Wrapper = inTabBar ? View : SafeAreaView,
isDev = process.env.NODE_ENV === "development";
return console.error("[One] Error in route:", route?.routeName || "unknown", error), /* @__PURE__ */_jsx(Wrapper, {
style: styles.container,
children: /* @__PURE__ */_jsxs(View, {
style: styles.content,
children: [/* Error icon */
/* @__PURE__ */_jsx(View, {
style: styles.iconContainer,
children: /* @__PURE__ */_jsx(Text, {
style: styles.iconText,
children: "!"
})
}), /* Title */
/* @__PURE__ */_jsx(Text, {
style: styles.title,
children: "Something went wrong"
}), /* Route info */
route?.routeName && /* @__PURE__ */_jsxs(Text, {
style: styles.routeInfo,
children: ["on route: ", route.routeName]
}), /* Error message */
/* @__PURE__ */_jsx(View, {
style: styles.errorBox,
children: /* @__PURE__ */_jsx(Text, {
style: styles.errorMessage,
children: error?.message || "An unexpected error occurred"
})
}), /* Stack trace (dev only) */
isDev && error?.stack && /* @__PURE__ */_jsxs(ScrollView, {
style: styles.stackContainer,
children: [/* @__PURE__ */_jsx(Text, {
style: styles.stackTitle,
children: "Stack trace:"
}), /* @__PURE__ */_jsx(Text, {
style: styles.stackText,
children: error.stack
})]
}), /* Actions */
/* @__PURE__ */_jsx(View, {
style: styles.actions,
children: /* @__PURE__ */_jsx(Pressable, {
onPress: function () {
return retry();
},
style: function (param2) {
var {
pressed
} = param2;
return [styles.button, styles.primaryButton, pressed && styles.buttonPressed];
},
children: /* @__PURE__ */_jsx(Text, {
style: styles.primaryButtonText,
children: "Try Again"
})
})
})]
})
});
}
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#0a0a0f"
},
content: {
flex: 1,
alignItems: "center",
justifyContent: "center",
padding: 24
},
iconContainer: {
width: 64,
height: 64,
backgroundColor: "#ef4444",
borderRadius: 32,
alignItems: "center",
justifyContent: "center",
marginBottom: 24
},
iconText: {
color: "white",
fontSize: 32,
fontWeight: "bold"
},
title: {
fontSize: 22,
fontWeight: "600",
color: "#e8e8e8",
marginBottom: 8,
textAlign: "center"
},
routeInfo: {
fontSize: 13,
color: "#666",
marginBottom: 16
},
errorBox: {
backgroundColor: "#1a1a2e",
borderRadius: 8,
padding: 16,
marginBottom: 16,
width: "100%",
maxWidth: 400
},
errorMessage: {
fontFamily: "monospace",
fontSize: 14,
lineHeight: 20,
color: "#f87171",
textAlign: "center"
},
stackContainer: {
maxHeight: 150,
width: "100%",
maxWidth: 400,
backgroundColor: "#16162a",
borderRadius: 8,
padding: 12,
marginBottom: 16
},
stackTitle: {
fontSize: 11,
color: "#666",
marginBottom: 8
},
stackText: {
fontFamily: "monospace",
fontSize: 10,
lineHeight: 16,
color: "#a0a0a0"
},
actions: {
flexDirection: "row",
gap: 12,
marginTop: 8
},
button: {
paddingVertical: 12,
paddingHorizontal: 24,
borderRadius: 8,
minWidth: 120,
alignItems: "center"
},
primaryButton: {
backgroundColor: "#3b82f6"
},
buttonPressed: {
opacity: 0.8
},
primaryButtonText: {
color: "white",
fontSize: 14,
fontWeight: "500"
}
});
export { ErrorBoundary };
//# sourceMappingURL=ErrorBoundary.native.js.map