@umituz/react-native-design-system 4.23.109 → 4.23.111
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/src/exception/ErrorBoundary.tsx +101 -0
- package/src/exception/index.ts +7 -0
- package/src/index.ts +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umituz/react-native-design-system",
|
|
3
|
-
"version": "4.23.
|
|
3
|
+
"version": "4.23.111",
|
|
4
4
|
"description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
|
|
5
5
|
"main": "./src/index.ts",
|
|
6
6
|
"types": "./src/index.ts",
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
"expo-sharing": ">=12.0.0",
|
|
91
91
|
"expo-video": ">=3.0.0",
|
|
92
92
|
"react": ">=19.0.0",
|
|
93
|
-
"react-native": "
|
|
93
|
+
"react-native": "*",
|
|
94
94
|
"react-native-gesture-handler": ">=2.20.0",
|
|
95
95
|
"react-native-safe-area-context": ">=5.6.2",
|
|
96
96
|
"zustand": ">=5.0.0"
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ErrorBoundary Component
|
|
3
|
+
* React 19 compatible error boundary for catching rendering errors
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
import React, { Component, ReactNode } from "react";
|
|
7
|
+
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
|
|
8
|
+
|
|
9
|
+
export interface ErrorBoundaryProps {
|
|
10
|
+
children: ReactNode;
|
|
11
|
+
fallback?: ReactNode;
|
|
12
|
+
onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
interface ErrorBoundaryState {
|
|
16
|
+
hasError: boolean;
|
|
17
|
+
error: Error | null;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export class ErrorBoundary extends Component<
|
|
21
|
+
ErrorBoundaryProps,
|
|
22
|
+
ErrorBoundaryState
|
|
23
|
+
> {
|
|
24
|
+
constructor(props: ErrorBoundaryProps) {
|
|
25
|
+
super(props);
|
|
26
|
+
this.state = { hasError: false, error: null };
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
static getDerivedStateFromError(error: Error): ErrorBoundaryState {
|
|
30
|
+
return { hasError: true, error };
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
|
|
34
|
+
this.props.onError?.(error, errorInfo);
|
|
35
|
+
|
|
36
|
+
if (typeof __DEV__ !== "undefined" && __DEV__) {
|
|
37
|
+
console.error("[ErrorBoundary] Error caught:", error);
|
|
38
|
+
console.error("[ErrorBoundary] Error info:", errorInfo);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
handleReset = () => {
|
|
43
|
+
this.setState({ hasError: false, error: null });
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
render() {
|
|
47
|
+
if (this.state.hasError) {
|
|
48
|
+
if (this.props.fallback) {
|
|
49
|
+
return this.props.fallback;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
return (
|
|
53
|
+
<View style={styles.container}>
|
|
54
|
+
<Text style={styles.title}>Something went wrong</Text>
|
|
55
|
+
<Text style={styles.message}>
|
|
56
|
+
{this.state.error?.message || "An unexpected error occurred"}
|
|
57
|
+
</Text>
|
|
58
|
+
<TouchableOpacity style={styles.button} onPress={this.handleReset}>
|
|
59
|
+
<Text style={styles.buttonText}>Try Again</Text>
|
|
60
|
+
</TouchableOpacity>
|
|
61
|
+
</View>
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
return this.props.children;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
const styles = StyleSheet.create({
|
|
70
|
+
container: {
|
|
71
|
+
flex: 1,
|
|
72
|
+
justifyContent: "center",
|
|
73
|
+
alignItems: "center",
|
|
74
|
+
padding: 20,
|
|
75
|
+
backgroundColor: "#FFFFFF",
|
|
76
|
+
},
|
|
77
|
+
title: {
|
|
78
|
+
fontSize: 24,
|
|
79
|
+
fontWeight: "bold",
|
|
80
|
+
marginBottom: 12,
|
|
81
|
+
color: "#000000",
|
|
82
|
+
},
|
|
83
|
+
message: {
|
|
84
|
+
fontSize: 16,
|
|
85
|
+
textAlign: "center",
|
|
86
|
+
marginBottom: 24,
|
|
87
|
+
color: "#666666",
|
|
88
|
+
paddingHorizontal: 20,
|
|
89
|
+
},
|
|
90
|
+
button: {
|
|
91
|
+
backgroundColor: "#007AFF",
|
|
92
|
+
paddingHorizontal: 24,
|
|
93
|
+
paddingVertical: 12,
|
|
94
|
+
borderRadius: 8,
|
|
95
|
+
},
|
|
96
|
+
buttonText: {
|
|
97
|
+
color: "#FFFFFF",
|
|
98
|
+
fontSize: 16,
|
|
99
|
+
fontWeight: "600",
|
|
100
|
+
},
|
|
101
|
+
});
|
package/src/index.ts
CHANGED
|
@@ -58,9 +58,9 @@ export * from "./organisms";
|
|
|
58
58
|
export * from "./safe-area";
|
|
59
59
|
|
|
60
60
|
// =============================================================================
|
|
61
|
-
// EXCEPTION EXPORTS
|
|
61
|
+
// EXCEPTION EXPORTS
|
|
62
62
|
// =============================================================================
|
|
63
|
-
|
|
63
|
+
export * from "./exception";
|
|
64
64
|
|
|
65
65
|
// =============================================================================
|
|
66
66
|
// INFINITE SCROLL EXPORTS
|