@planningcenter/chat-react-native 2.1.0-rc.0 → 2.1.0

package/build/components/index.d.ts

@@ -1,4 +1,4 @@
 export * from './conversations';
-export * from './error_boundary';
+export * from './page/error_boundary';
 export * from './display';
 //# sourceMappingURL=index.d.ts.map

package/build/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA;AACrC,cAAc,WAAW,CAAA"}

package/build/components/index.js

@@ -1,4 +1,4 @@
 export * from './conversations';
-export * from './error_boundary';
+export * from './page/error_boundary';
 export * from './display';
 //# sourceMappingURL=index.js.map

package/build/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,WAAW,CAAA","sourcesContent":["export * from './conversations'\nexport * from './error_boundary'\nexport * from './display'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA;AACrC,cAAc,WAAW,CAAA","sourcesContent":["export * from './conversations'\nexport * from './page/error_boundary'\nexport * from './display'\n"]}

package/build/components/{error_boundary.d.ts → page/error_boundary.d.ts}

@@ -1,13 +1,15 @@
 import React, { PropsWithChildren } from 'react';
+type ErrorBoundaryState = {
+    error: Response | Error | null;
+    unsubscriber: () => void;
+};
 declare class ErrorBoundary extends React.Component<PropsWithChildren<{
     onReset?: () => void;
 }>> {
-    state: {
-        error: null;
-        unsubscriber: () => void;
-    };
+    state: ErrorBoundaryState;
     componentDidCatch(error: any): void;
     handleError(error: any): void;
+    handleReset: () => void;
     render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
 }
 export default ErrorBoundary;

package/build/components/page/error_boundary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error_boundary.d.ts","sourceRoot":"","sources":["../../../src/components/page/error_boundary.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAsB,MAAM,OAAO,CAAA;AAMpE,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAA;IAC9B,YAAY,EAAE,MAAM,IAAI,CAAA;CACzB,CAAA;AAED,cAAM,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAAE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC,CAAC;IACtF,KAAK,EAAE,kBAAkB,CAGxB;IAED,iBAAiB,CAAC,KAAK,EAAE,GAAG;IAI5B,WAAW,CAAC,KAAK,EAAE,GAAG;IAItB,WAAW,aAGV;IAED,MAAM;CAOP;AA+FD,eAAe,aAAa,CAAA"}

package/build/components/page/error_boundary.js

@@ -0,0 +1,115 @@
+import { useNavigation } from '@react-navigation/native';
+import { useQueryErrorResetBoundary } from '@tanstack/react-query';
+import React, { useEffect, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Button, Heading, Icon, Text } from '../display';
+import { useTheme } from '../../hooks';
+class ErrorBoundary extends React.Component {
+    state = {
+        error: null,
+        unsubscriber: () => { },
+    };
+    componentDidCatch(error) {
+        this.handleError(error);
+    }
+    handleError(error) {
+        this.setState({ error });
+    }
+    handleReset = () => {
+        this.props.onReset?.();
+        this.setState({ error: null });
+    };
+    render() {
+        if (this.state.error) {
+            return <ErrorView error={this.state.error} onReset={this.handleReset}/>;
+        }
+        else {
+            return this.props.children;
+        }
+    }
+}
+function ErrorView({ error, onReset }) {
+    const { reset } = useQueryErrorResetBoundary();
+    useEffect(() => {
+        if (!reset)
+            return;
+        return () => {
+            onReset();
+            reset();
+        };
+    }, [reset, onReset]);
+    if (error instanceof Response) {
+        return <ResponseErrorView error={error} onReset={onReset}/>;
+    }
+    return <ErrorContent heading={'Oops!'} body={'Something unexpected happened.'}/>;
+}
+function ResponseErrorView({ error: response }) {
+    const { status } = response;
+    const heading = useMemo(() => {
+        switch (status) {
+            case 403:
+                return 'Permission required';
+            case 404:
+                return 'Content not found';
+            default:
+                return 'Oops!';
+        }
+    }, [status]);
+    const body = useMemo(() => {
+        switch (status) {
+            case 403:
+                return 'Contact your administrator for access.';
+            case 404:
+                return 'If you believe something should be here, please reach out to your administrator.';
+            default:
+                return 'Something unexpected happened.';
+        }
+    }, [status]);
+    return <ErrorContent heading={heading} body={body}/>;
+}
+function ErrorContent({ heading, body }) {
+    const styles = useStyles();
+    const navigation = useNavigation();
+    return (<View style={styles.container}>
+      <Icon name="general.outlinedTextMessage" size={32} color={styles.icon.color}/>
+      <View style={styles.information}>
+        <Heading variant="h3" style={styles.heading}>
+          {heading}
+        </Heading>
+        <Text style={styles.body}>{body}</Text>
+      </View>
+      <Button variant="outline" onPress={navigation.goBack} title="Go back" size="md"/>
+    </View>);
+}
+const useStyles = () => {
+    const theme = useTheme();
+    const { bottom } = useSafeAreaInsets();
+    return StyleSheet.create({
+        container: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: 24,
+            paddingHorizontal: 16,
+            paddingBottom: bottom,
+        },
+        information: {
+            alignItems: 'center',
+            gap: 8,
+        },
+        heading: {
+            textAlign: 'center',
+            lineHeight: 20,
+        },
+        body: {
+            textAlign: 'center',
+            lineHeight: 20,
+        },
+        icon: {
+            color: theme.colors.iconColorDefaultDisabled,
+        },
+    });
+};
+export default ErrorBoundary;
+//# sourceMappingURL=error_boundary.js.map

package/build/components/page/error_boundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error_boundary.js","sourceRoot":"","sources":["../../../src/components/page/error_boundary.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport { useQueryErrorResetBoundary } from '@tanstack/react-query'\nimport React, { PropsWithChildren, useEffect, useMemo } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Button, Heading, Icon, Text } from '../display'\nimport { useTheme } from '../../hooks'\n\ntype ErrorBoundaryState = {\n  error: Response | Error | null\n  unsubscriber: () => void\n}\n\nclass ErrorBoundary extends React.Component<PropsWithChildren<{ onReset?: () => void }>> {\n  state: ErrorBoundaryState = {\n    error: null,\n    unsubscriber: () => {},\n  }\n\n  componentDidCatch(error: any) {\n    this.handleError(error)\n  }\n\n  handleError(error: any) {\n    this.setState({ error })\n  }\n\n  handleReset = () => {\n    this.props.onReset?.()\n    this.setState({ error: null })\n  }\n\n  render() {\n    if (this.state.error) {\n      return <ErrorView error={this.state.error} onReset={this.handleReset} />\n    } else {\n      return this.props.children\n    }\n  }\n}\n\nfunction ErrorView({ error, onReset }: { error: Error | Response; onReset: () => void }) {\n  const { reset } = useQueryErrorResetBoundary()\n  useEffect(() => {\n    if (!reset) return\n\n    return () => {\n      onReset()\n      reset()\n    }\n  }, [reset, onReset])\n\n  if (error instanceof Response) {\n    return <ResponseErrorView error={error} onReset={onReset} />\n  }\n\n  return <ErrorContent heading={'Oops!'} body={'Something unexpected happened.'} />\n}\n\nfunction ResponseErrorView({ error: response }: { error: Response; onReset: () => void }) {\n  const { status } = response\n  const heading = useMemo(() => {\n    switch (status) {\n      case 403:\n        return 'Permission required'\n      case 404:\n        return 'Content not found'\n      default:\n        return 'Oops!'\n    }\n  }, [status])\n\n  const body = useMemo(() => {\n    switch (status) {\n      case 403:\n        return 'Contact your administrator for access.'\n      case 404:\n        return 'If you believe something should be here, please reach out to your administrator.'\n      default:\n        return 'Something unexpected happened.'\n    }\n  }, [status])\n\n  return <ErrorContent heading={heading} body={body} />\n}\n\nfunction ErrorContent({ heading, body }: { heading: string; body: string }) {\n  const styles = useStyles()\n  const navigation = useNavigation()\n\n  return (\n    <View style={styles.container}>\n      <Icon name=\"general.outlinedTextMessage\" size={32} color={styles.icon.color} />\n      <View style={styles.information}>\n        <Heading variant=\"h3\" style={styles.heading}>\n          {heading}\n        </Heading>\n        <Text style={styles.body}>{body}</Text>\n      </View>\n      <Button variant=\"outline\" onPress={navigation.goBack} title=\"Go back\" size=\"md\" />\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const theme = useTheme()\n  const { bottom } = useSafeAreaInsets()\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      justifyContent: 'center',\n      alignItems: 'center',\n      gap: 24,\n      paddingHorizontal: 16,\n      paddingBottom: bottom,\n    },\n    information: {\n      alignItems: 'center',\n      gap: 8,\n    },\n    heading: {\n      textAlign: 'center',\n      lineHeight: 20,\n    },\n    body: {\n      textAlign: 'center',\n      lineHeight: 20,\n    },\n    icon: {\n      color: theme.colors.iconColorDefaultDisabled,\n    },\n  })\n}\n\nexport default ErrorBoundary\n"]}

package/build/components/page/loading.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function DefaultLoading(): React.JSX.Element;
+//# sourceMappingURL=loading.d.ts.map

package/build/components/page/loading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading.d.ts","sourceRoot":"","sources":["../../../src/components/page/loading.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,wBAAgB,cAAc,sBAQ7B"}

package/build/components/page/loading.js

@@ -0,0 +1,24 @@
+import { useTheme } from '@react-navigation/native';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Spinner } from '../display';
+export function DefaultLoading() {
+    const styles = useStyles();
+    return (<View style={styles.container}>
+      <Spinner size={48}/>
+    </View>);
+}
+const useStyles = () => {
+    const theme = useTheme();
+    return StyleSheet.create({
+        container: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+        loading: {
+            color: theme.colors.text,
+        },
+    });
+};
+//# sourceMappingURL=loading.js.map

package/build/components/page/loading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading.js","sourceRoot":"","sources":["../../../src/components/page/loading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAA;AACnD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAEpC,MAAM,UAAU,cAAc;IAC5B,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EACpB;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,IAAI,EAAE,CAAC;YACP,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;SACrB;QACD,OAAO,EAAE;YACP,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;SACzB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { useTheme } from '@react-navigation/native'\nimport React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Spinner } from '../display'\n\nexport function DefaultLoading() {\n  const styles = useStyles()\n\n  return (\n    <View style={styles.container}>\n      <Spinner size={48} />\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const theme = useTheme()\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      justifyContent: 'center',\n      alignItems: 'center',\n    },\n    loading: {\n      color: theme.colors.text,\n    },\n  })\n}\n"]}

package/build/navigation/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { StaticParamList } from '@react-navigation/native';
+import { NativeStackHeaderLeftProps, NativeStackHeaderRightProps } from '@react-navigation/native-stack';
 import { NotFound } from '../screens/not_found';
 import { ScreenLayout } from './screenLayout';
 import { ConversationsScreen } from '../screens/conversations_screen';
@@ -17,6 +18,9 @@ export declare const ChatStack: import("@react-navigation/native").TypedNavigato
     };
     Navigator: ({ id, initialRouteName, children, layout, screenListeners, screenOptions, screenLayout, UNSTABLE_getStateForRouteNamesChange, ...rest }: import("@react-navigation/native-stack").NativeStackNavigatorProps) => import("react/jsx-runtime").JSX.Element;
 }, {
+    readonly screenOptions: {
+        readonly headerBackButtonDisplayMode: "minimal";
+    };
     readonly screenLayout: typeof ScreenLayout;
     readonly screens: {
         readonly Conversations: {
@@ -27,8 +31,8 @@ export declare const ChatStack: import("@react-navigation/native").TypedNavigato
                 theme: ReactNavigation.Theme;
             }) => {
                 headerTitle: string;
-                headerLeft: () => React.JSX.Element;
-                headerRight: () => React.JSX.Element;
+                headerLeft: ({ tintColor }: NativeStackHeaderLeftProps) => React.JSX.Element;
+                headerRight: (props: NativeStackHeaderRightProps) => React.JSX.Element;
             };
         };
         readonly Conversation: {

package/build/navigation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/navigation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAGnE,OAAO,EACL,oBAAoB,EAErB,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAAE,eAAe,EAA0B,MAAM,6BAA6B,CAAA;AAErF,eAAO,MAAM,SAAS;;;;;;;;;uOALpB,mBAAgB;;;;;;;;;uBAwDu+gB,gBAAiB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAT7ghB,CAAA;AAEF,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,SAAS,CAAC,CAAA;AAE3D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,eAAe,CAAC;QACxB,UAAU,aAAc,SAAQ,kBAAkB;SAAG;KACtD;CACF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/navigation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAEL,0BAA0B,EAC1B,2BAA2B,EAC5B,MAAM,gCAAgC,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAGnE,OAAO,EACL,oBAAoB,EAErB,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAAE,eAAe,EAA0B,MAAM,6BAA6B,CAAA;AAErF,eAAO,MAAM,SAAS;;;;;;;;;uOARmC,mBACzD;;;;;;;;;;;;uBA8DyugB,gBAAiB,KAAK;;;4CA7C3tgB,0BAA0B;qCAKjC,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;EA+BtD,CAAA;AAEF,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,SAAS,CAAC,CAAA;AAE3D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,eAAe,CAAC;QACxB,UAAU,aAAc,SAAQ,kBAAkB;SAAG;KACtD;CACF"}

package/build/navigation/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { createNativeStackNavigator, } from '@react-navigation/native-stack';
 import { NotFound } from '../screens/not_found';
 import { ScreenLayout } from './screenLayout';
 import { ConversationsScreen } from '../screens/conversations_screen';
@@ -9,16 +9,19 @@ import { Icon } from '../components';
 import { MessageActionsScreen, MessageActionsScreenOptions, } from '../screens/message_actions_screen';
 import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen';
 export const ChatStack = createNativeStackNavigator({
+    screenOptions: {
+        headerBackButtonDisplayMode: 'minimal',
+    },
     screenLayout: ScreenLayout,
     screens: {
         Conversations: {
             screen: ConversationsScreen,
             options: ({ route, navigation }) => ({
                 headerTitle: route.params?.title ?? 'Chat',
-                headerLeft: () => (<HeaderButton>
-            <Icon name="general.threeReducingHorizontalBars" size={18}/>
+                headerLeft: ({ tintColor }) => (<HeaderButton>
+            <Icon name="general.threeReducingHorizontalBars" size={18} color={tintColor}/>
           </HeaderButton>),
-                headerRight: () => (<HeaderBackButton onPress={navigation.goBack} backImage={() => <Icon name="general.x" size={18}/>}/>),
+                headerRight: (props) => (<HeaderBackButton backImage={() => <Icon name="general.x" size={18} color={props.tintColor}/>} onPress={navigation.goBack} {...props}/>),
             }),
         },
         Conversation: {

package/build/navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/navigation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAA;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AACnE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAC3E,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EACL,oBAAoB,EACpB,2BAA2B,GAC5B,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAErF,MAAM,CAAC,MAAM,SAAS,GAAG,0BAA0B,CAAC;IAClD,YAAY,EAAE,YAAY;IAC1B,OAAO,EAAE;QACP,aAAa,EAAE;YACb,MAAM,EAAE,mBAAmB;YAC3B,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC;gBACnC,WAAW,EAAG,KAAK,CAAC,MAA6B,EAAE,KAAK,IAAI,MAAM;gBAClE,UAAU,EAAE,GAAG,EAAE,CAAC,CAChB,CAAC,YAAY,CACX;YAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qCAAqC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAC5D;UAAA,EAAE,YAAY,CAAC,CAChB;gBACD,WAAW,EAAE,GAAG,EAAE,CAAC,CACjB,CAAC,gBAAgB,CACf,OAAO,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAC3B,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAG,CAAC,EACrD,CACH;aACF,CAAC;SACH;QACD,YAAY,EAAE;YACZ,MAAM,EAAE,kBAAkB;SAC3B;QACD,cAAc,EAAE;YACd,MAAM,EAAE,oBAAoB;YAC5B,gEAAgE;YAChE,OAAO,EAAE,2BAA2B;SACrC;QACD,SAAS,EAAE;YACT,MAAM,EAAE,eAAe;YACvB,OAAO,EAAE,sBAAsB;SAChC;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,QAAQ;YAChB,OAAO,EAAE;gBACP,KAAK,EAAE,KAAK;aACb;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;SACF;KACF;CACF,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StaticParamList } from '@react-navigation/native'\nimport { createNativeStackNavigator } from '@react-navigation/native-stack'\nimport { NotFound } from '../screens/not_found'\nimport { ScreenLayout } from './screenLayout'\nimport { ConversationsScreen } from '../screens/conversations_screen'\nimport { ConversationScreen } from '../screens/conversation_screen'\nimport { HeaderBackButton, HeaderButton } from '@react-navigation/elements'\nimport { Icon } from '../components'\nimport {\n  MessageActionsScreen,\n  MessageActionsScreenOptions,\n} from '../screens/message_actions_screen'\nimport { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'\n\nexport const ChatStack = createNativeStackNavigator({\n  screenLayout: ScreenLayout,\n  screens: {\n    Conversations: {\n      screen: ConversationsScreen,\n      options: ({ route, navigation }) => ({\n        headerTitle: (route.params as { title?: string })?.title ?? 'Chat',\n        headerLeft: () => (\n          <HeaderButton>\n            <Icon name=\"general.threeReducingHorizontalBars\" size={18} />\n          </HeaderButton>\n        ),\n        headerRight: () => (\n          <HeaderBackButton\n            onPress={navigation.goBack}\n            backImage={() => <Icon name=\"general.x\" size={18} />}\n          />\n        ),\n      }),\n    },\n    Conversation: {\n      screen: ConversationScreen,\n    },\n    MessageActions: {\n      screen: MessageActionsScreen,\n      // Something about sheetAllowedDetents declared inline breaks TS\n      options: MessageActionsScreenOptions,\n    },\n    Reactions: {\n      screen: ReactionsScreen,\n      options: ReactionsScreenOptions,\n    },\n    NotFound: {\n      screen: NotFound,\n      options: {\n        title: '404',\n      },\n      linking: {\n        path: '*',\n      },\n    },\n  },\n})\n\ntype ChatStackParamList = StaticParamList<typeof ChatStack>\n\ndeclare global {\n  namespace ReactNavigation {\n    interface RootParamList extends ChatStackParamList {}\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/navigation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EACL,0BAA0B,GAG3B,MAAM,gCAAgC,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AACnE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AAC3E,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EACL,oBAAoB,EACpB,2BAA2B,GAC5B,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAAE,eAAe,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAA;AAErF,MAAM,CAAC,MAAM,SAAS,GAAG,0BAA0B,CAAC;IAClD,aAAa,EAAE;QACb,2BAA2B,EAAE,SAAS;KACvC;IACD,YAAY,EAAE,YAAY;IAC1B,OAAO,EAAE;QACP,aAAa,EAAE;YACb,MAAM,EAAE,mBAAmB;YAC3B,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC;gBACnC,WAAW,EAAG,KAAK,CAAC,MAA6B,EAAE,KAAK,IAAI,MAAM;gBAClE,UAAU,EAAE,CAAC,EAAE,SAAS,EAA8B,EAAE,EAAE,CAAC,CACzD,CAAC,YAAY,CACX;YAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qCAAqC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,EAC9E;UAAA,EAAE,YAAY,CAAC,CAChB;gBACD,WAAW,EAAE,CAAC,KAAkC,EAAE,EAAE,CAAC,CACnD,CAAC,gBAAgB,CACf,SAAS,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,EAAG,CAAC,CAC7E,OAAO,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAC3B,IAAI,KAAK,CAAC,EACV,CACH;aACF,CAAC;SACH;QACD,YAAY,EAAE;YACZ,MAAM,EAAE,kBAAkB;SAC3B;QACD,cAAc,EAAE;YACd,MAAM,EAAE,oBAAoB;YAC5B,gEAAgE;YAChE,OAAO,EAAE,2BAA2B;SACrC;QACD,SAAS,EAAE;YACT,MAAM,EAAE,eAAe;YACvB,OAAO,EAAE,sBAAsB;SAChC;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,QAAQ;YAChB,OAAO,EAAE;gBACP,KAAK,EAAE,KAAK;aACb;YACD,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;SACF;KACF;CACF,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { StaticParamList } from '@react-navigation/native'\nimport {\n  createNativeStackNavigator,\n  NativeStackHeaderLeftProps,\n  NativeStackHeaderRightProps,\n} from '@react-navigation/native-stack'\nimport { NotFound } from '../screens/not_found'\nimport { ScreenLayout } from './screenLayout'\nimport { ConversationsScreen } from '../screens/conversations_screen'\nimport { ConversationScreen } from '../screens/conversation_screen'\nimport { HeaderBackButton, HeaderButton } from '@react-navigation/elements'\nimport { Icon } from '../components'\nimport {\n  MessageActionsScreen,\n  MessageActionsScreenOptions,\n} from '../screens/message_actions_screen'\nimport { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'\n\nexport const ChatStack = createNativeStackNavigator({\n  screenOptions: {\n    headerBackButtonDisplayMode: 'minimal',\n  },\n  screenLayout: ScreenLayout,\n  screens: {\n    Conversations: {\n      screen: ConversationsScreen,\n      options: ({ route, navigation }) => ({\n        headerTitle: (route.params as { title?: string })?.title ?? 'Chat',\n        headerLeft: ({ tintColor }: NativeStackHeaderLeftProps) => (\n          <HeaderButton>\n            <Icon name=\"general.threeReducingHorizontalBars\" size={18} color={tintColor} />\n          </HeaderButton>\n        ),\n        headerRight: (props: NativeStackHeaderRightProps) => (\n          <HeaderBackButton\n            backImage={() => <Icon name=\"general.x\" size={18} color={props.tintColor} />}\n            onPress={navigation.goBack}\n            {...props}\n          />\n        ),\n      }),\n    },\n    Conversation: {\n      screen: ConversationScreen,\n    },\n    MessageActions: {\n      screen: MessageActionsScreen,\n      // Something about sheetAllowedDetents declared inline breaks TS\n      options: MessageActionsScreenOptions,\n    },\n    Reactions: {\n      screen: ReactionsScreen,\n      options: ReactionsScreenOptions,\n    },\n    NotFound: {\n      screen: NotFound,\n      options: {\n        title: '404',\n      },\n      linking: {\n        path: '*',\n      },\n    },\n  },\n})\n\ntype ChatStackParamList = StaticParamList<typeof ChatStack>\n\ndeclare global {\n  namespace ReactNavigation {\n    interface RootParamList extends ChatStackParamList {}\n  }\n}\n"]}

package/build/navigation/screenLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screenLayout.d.ts","sourceRoot":"","sources":["../../src/navigation/screenLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAA;CAAE,qBAY1E"}
+{"version":3,"file":"screenLayout.d.ts","sourceRoot":"","sources":["../../src/navigation/screenLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAA;CAAE,qBAQ1E"}

package/build/navigation/screenLayout.js

@@ -1,16 +1,13 @@
 import React from 'react';
-import { QueryErrorResetBoundary } from '@tanstack/react-query';
-import ErrorBoundary from '../components/error_boundary';
+import ErrorBoundary from '../components/page/error_boundary';
 import { Suspense } from 'react';
-import { Text } from '../components/display';
 import { ApiProvider } from '../contexts';
+import { DefaultLoading } from '../components/page/loading';
 export function ScreenLayout({ children }) {
     return (<ApiProvider>
-      <QueryErrorResetBoundary>
-        {({ reset }) => (<ErrorBoundary onReset={reset}>
-            <Suspense fallback={<Text>loading...</Text>}>{children}</Suspense>
-          </ErrorBoundary>)}
-      </QueryErrorResetBoundary>
+      <ErrorBoundary>
+        <Suspense fallback={<DefaultLoading />}>{children}</Suspense>
+      </ErrorBoundary>
     </ApiProvider>);
 }
 //# sourceMappingURL=screenLayout.js.map

package/build/navigation/screenLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"screenLayout.js","sourceRoot":"","sources":["../../src/navigation/screenLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,aAAa,MAAM,8BAA8B,CAAA;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAEzC,MAAM,UAAU,YAAY,CAAC,EAAE,QAAQ,EAAoC;IACzE,OAAO,CACL,CAAC,WAAW,CACV;MAAA,CAAC,uBAAuB,CACtB;QAAA,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACd,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAC5B;YAAA,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,QAAQ,CACnE;UAAA,EAAE,aAAa,CAAC,CACjB,CACH;MAAA,EAAE,uBAAuB,CAC3B;IAAA,EAAE,WAAW,CAAC,CACf,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport { QueryErrorResetBoundary } from '@tanstack/react-query'\nimport ErrorBoundary from '../components/error_boundary'\nimport { Suspense } from 'react'\nimport { Text } from '../components/display'\nimport { ApiProvider } from '../contexts'\n\nexport function ScreenLayout({ children }: { children: React.ReactElement }) {\n  return (\n    <ApiProvider>\n      <QueryErrorResetBoundary>\n        {({ reset }) => (\n          <ErrorBoundary onReset={reset}>\n            <Suspense fallback={<Text>loading...</Text>}>{children}</Suspense>\n          </ErrorBoundary>\n        )}\n      </QueryErrorResetBoundary>\n    </ApiProvider>\n  )\n}\n"]}
+{"version":3,"file":"screenLayout.js","sourceRoot":"","sources":["../../src/navigation/screenLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,aAAa,MAAM,mCAAmC,CAAA;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAE3D,MAAM,UAAU,YAAY,CAAC,EAAE,QAAQ,EAAoC;IACzE,OAAO,CACL,CAAC,WAAW,CACV;MAAA,CAAC,aAAa,CACZ;QAAA,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,AAAD,EAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAC9D;MAAA,EAAE,aAAa,CACjB;IAAA,EAAE,WAAW,CAAC,CACf,CAAA;AACH,CAAC","sourcesContent":["import React from 'react'\nimport ErrorBoundary from '../components/page/error_boundary'\nimport { Suspense } from 'react'\nimport { ApiProvider } from '../contexts'\nimport { DefaultLoading } from '../components/page/loading'\n\nexport function ScreenLayout({ children }: { children: React.ReactElement }) {\n  return (\n    <ApiProvider>\n      <ErrorBoundary>\n        <Suspense fallback={<DefaultLoading />}>{children}</Suspense>\n      </ErrorBoundary>\n    </ApiProvider>\n  )\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "2.1.0-rc.0",
+  "version": "2.1.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -51,5 +51,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "9ada391b04ffc168aa7ffb4baaa746429ee7e093"
+  "gitHead": "7960721dcdf26174d4029bc7fe281a9429adde43"
 }

package/src/components/index.tsx

@@ -1,3 +1,3 @@
 export * from './conversations'
-export * from './error_boundary'
+export * from './page/error_boundary'
 export * from './display'

package/src/components/page/error_boundary.tsx

@@ -0,0 +1,135 @@
+import { useNavigation } from '@react-navigation/native'
+import { useQueryErrorResetBoundary } from '@tanstack/react-query'
+import React, { PropsWithChildren, useEffect, useMemo } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { Button, Heading, Icon, Text } from '../display'
+import { useTheme } from '../../hooks'
+
+type ErrorBoundaryState = {
+  error: Response | Error | null
+  unsubscriber: () => void
+}
+
+class ErrorBoundary extends React.Component<PropsWithChildren<{ onReset?: () => void }>> {
+  state: ErrorBoundaryState = {
+    error: null,
+    unsubscriber: () => {},
+  }
+
+  componentDidCatch(error: any) {
+    this.handleError(error)
+  }
+
+  handleError(error: any) {
+    this.setState({ error })
+  }
+
+  handleReset = () => {
+    this.props.onReset?.()
+    this.setState({ error: null })
+  }
+
+  render() {
+    if (this.state.error) {
+      return <ErrorView error={this.state.error} onReset={this.handleReset} />
+    } else {
+      return this.props.children
+    }
+  }
+}
+
+function ErrorView({ error, onReset }: { error: Error | Response; onReset: () => void }) {
+  const { reset } = useQueryErrorResetBoundary()
+  useEffect(() => {
+    if (!reset) return
+
+    return () => {
+      onReset()
+      reset()
+    }
+  }, [reset, onReset])
+
+  if (error instanceof Response) {
+    return <ResponseErrorView error={error} onReset={onReset} />
+  }
+
+  return <ErrorContent heading={'Oops!'} body={'Something unexpected happened.'} />
+}
+
+function ResponseErrorView({ error: response }: { error: Response; onReset: () => void }) {
+  const { status } = response
+  const heading = useMemo(() => {
+    switch (status) {
+      case 403:
+        return 'Permission required'
+      case 404:
+        return 'Content not found'
+      default:
+        return 'Oops!'
+    }
+  }, [status])
+
+  const body = useMemo(() => {
+    switch (status) {
+      case 403:
+        return 'Contact your administrator for access.'
+      case 404:
+        return 'If you believe something should be here, please reach out to your administrator.'
+      default:
+        return 'Something unexpected happened.'
+    }
+  }, [status])
+
+  return <ErrorContent heading={heading} body={body} />
+}
+
+function ErrorContent({ heading, body }: { heading: string; body: string }) {
+  const styles = useStyles()
+  const navigation = useNavigation()
+
+  return (
+    <View style={styles.container}>
+      <Icon name="general.outlinedTextMessage" size={32} color={styles.icon.color} />
+      <View style={styles.information}>
+        <Heading variant="h3" style={styles.heading}>
+          {heading}
+        </Heading>
+        <Text style={styles.body}>{body}</Text>
+      </View>
+      <Button variant="outline" onPress={navigation.goBack} title="Go back" size="md" />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const theme = useTheme()
+  const { bottom } = useSafeAreaInsets()
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: 24,
+      paddingHorizontal: 16,
+      paddingBottom: bottom,
+    },
+    information: {
+      alignItems: 'center',
+      gap: 8,
+    },
+    heading: {
+      textAlign: 'center',
+      lineHeight: 20,
+    },
+    body: {
+      textAlign: 'center',
+      lineHeight: 20,
+    },
+    icon: {
+      color: theme.colors.iconColorDefaultDisabled,
+    },
+  })
+}
+
+export default ErrorBoundary

package/src/components/page/loading.tsx

@@ -0,0 +1,28 @@
+import { useTheme } from '@react-navigation/native'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Spinner } from '../display'
+
+export function DefaultLoading() {
+  const styles = useStyles()
+
+  return (
+    <View style={styles.container}>
+      <Spinner size={48} />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const theme = useTheme()
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    loading: {
+      color: theme.colors.text,
+    },
+  })
+}

package/src/navigation/index.tsx

@@ -1,6 +1,10 @@
 import React from 'react'
 import { StaticParamList } from '@react-navigation/native'
-import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import {
+  createNativeStackNavigator,
+  NativeStackHeaderLeftProps,
+  NativeStackHeaderRightProps,
+} from '@react-navigation/native-stack'
 import { NotFound } from '../screens/not_found'
 import { ScreenLayout } from './screenLayout'
 import { ConversationsScreen } from '../screens/conversations_screen'
@@ -14,21 +18,25 @@ import {
 import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'
 
 export const ChatStack = createNativeStackNavigator({
+  screenOptions: {
+    headerBackButtonDisplayMode: 'minimal',
+  },
   screenLayout: ScreenLayout,
   screens: {
     Conversations: {
       screen: ConversationsScreen,
       options: ({ route, navigation }) => ({
         headerTitle: (route.params as { title?: string })?.title ?? 'Chat',
-        headerLeft: () => (
+        headerLeft: ({ tintColor }: NativeStackHeaderLeftProps) => (
           <HeaderButton>
-            <Icon name="general.threeReducingHorizontalBars" size={18} />
+            <Icon name="general.threeReducingHorizontalBars" size={18} color={tintColor} />
           </HeaderButton>
         ),
-        headerRight: () => (
+        headerRight: (props: NativeStackHeaderRightProps) => (
           <HeaderBackButton
+            backImage={() => <Icon name="general.x" size={18} color={props.tintColor} />}
             onPress={navigation.goBack}
-            backImage={() => <Icon name="general.x" size={18} />}
+            {...props}
           />
         ),
       }),

package/src/navigation/screenLayout.tsx

@@ -1,20 +1,15 @@
 import React from 'react'
-import { QueryErrorResetBoundary } from '@tanstack/react-query'
-import ErrorBoundary from '../components/error_boundary'
+import ErrorBoundary from '../components/page/error_boundary'
 import { Suspense } from 'react'
-import { Text } from '../components/display'
 import { ApiProvider } from '../contexts'
+import { DefaultLoading } from '../components/page/loading'
 
 export function ScreenLayout({ children }: { children: React.ReactElement }) {
   return (
     <ApiProvider>
-      <QueryErrorResetBoundary>
-        {({ reset }) => (
-          <ErrorBoundary onReset={reset}>
-            <Suspense fallback={<Text>loading...</Text>}>{children}</Suspense>
-          </ErrorBoundary>
-        )}
-      </QueryErrorResetBoundary>
+      <ErrorBoundary>
+        <Suspense fallback={<DefaultLoading />}>{children}</Suspense>
+      </ErrorBoundary>
     </ApiProvider>
   )
 }

package/build/components/error_boundary.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"error_boundary.d.ts","sourceRoot":"","sources":["../../src/components/error_boundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAGhD,cAAM,aAAc,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAAE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC,CAAC;IACtF,KAAK;;;MAGJ;IAED,iBAAiB,CAAC,KAAK,EAAE,GAAG;IAI5B,WAAW,CAAC,KAAK,EAAE,GAAG;IAItB,MAAM;CAOP;AAED,eAAe,aAAa,CAAA"}

package/build/components/error_boundary.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Text } from 'react-native';
-class ErrorBoundary extends React.Component {
-    state = {
-        error: null,
-        unsubscriber: () => { },
-    };
-    componentDidCatch(error) {
-        this.handleError(error);
-    }
-    handleError(error) {
-        this.setState({ error });
-    }
-    render() {
-        if (this.state.error) {
-            return <Text>{JSON.stringify(this.state.error, null, 2)}</Text>;
-        }
-        else {
-            return this.props.children;
-        }
-    }
-}
-export default ErrorBoundary;
-//# sourceMappingURL=error_boundary.js.map

package/build/components/error_boundary.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"error_boundary.js","sourceRoot":"","sources":["../../src/components/error_boundary.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEnC,MAAM,aAAc,SAAQ,KAAK,CAAC,SAAsD;IACtF,KAAK,GAAG;QACN,KAAK,EAAE,IAAI;QACX,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;KACvB,CAAA;IAED,iBAAiB,CAAC,KAAU;QAC1B,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;IACzB,CAAC;IAED,WAAW,CAAC,KAAU;QACpB,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;IAC1B,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YACrB,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAA;QACjE,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;QAC5B,CAAC;IACH,CAAC;CACF;AAED,eAAe,aAAa,CAAA","sourcesContent":["import React, { PropsWithChildren } from 'react'\nimport { Text } from 'react-native'\n\nclass ErrorBoundary extends React.Component<PropsWithChildren<{ onReset?: () => void }>> {\n  state = {\n    error: null,\n    unsubscriber: () => {},\n  }\n\n  componentDidCatch(error: any) {\n    this.handleError(error)\n  }\n\n  handleError(error: any) {\n    this.setState({ error })\n  }\n\n  render() {\n    if (this.state.error) {\n      return <Text>{JSON.stringify(this.state.error, null, 2)}</Text>\n    } else {\n      return this.props.children\n    }\n  }\n}\n\nexport default ErrorBoundary\n"]}

package/src/components/error_boundary.tsx

@@ -1,27 +0,0 @@
-import React, { PropsWithChildren } from 'react'
-import { Text } from 'react-native'
-
-class ErrorBoundary extends React.Component<PropsWithChildren<{ onReset?: () => void }>> {
-  state = {
-    error: null,
-    unsubscriber: () => {},
-  }
-
-  componentDidCatch(error: any) {
-    this.handleError(error)
-  }
-
-  handleError(error: any) {
-    this.setState({ error })
-  }
-
-  render() {
-    if (this.state.error) {
-      return <Text>{JSON.stringify(this.state.error, null, 2)}</Text>
-    } else {
-      return this.props.children
-    }
-  }
-}
-
-export default ErrorBoundary