@planningcenter/chat-react-native 1.4.3-rc.0 → 1.5.0-rc.1

package/build/components/conversations.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare function Conversations(): React.JSX.Element | null;
+export declare const Conversations: () => React.JSX.Element;
 //# sourceMappingURL=conversations.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"conversations.d.ts","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA+B,MAAM,OAAO,CAAA;AASnD,wBAAgB,aAAa,6BAgB5B"}
+{"version":3,"file":"conversations.d.ts","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,eAAO,MAAM,aAAa,yBA4BzB,CAAA"}

package/build/components/conversations.js

@@ -1,30 +1,19 @@
 import { useNavigation } from '@react-navigation/native';
-import { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query';
-import React, { Suspense, useContext } from 'react';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import React from 'react';
 import { FlatList, Pressable, StyleSheet } from 'react-native';
-import { ChatContext } from '../contexts/chat_context';
 import { useTheme } from '../hooks';
 import { Text } from './display';
-import ErrorBoundary from './error_boundary';
-export function Conversations() {
-    const { token } = useContext(ChatContext);
-    if (!token)
-        return null;
-    return (<QueryErrorResetBoundary>
-      {({ reset }) => (<ErrorBoundary onReset={reset}>
-          <Suspense fallback={<Text>loading...</Text>}>
-            <Loaded />
-          </Suspense>
-        </ErrorBoundary>)}
-    </QueryErrorResetBoundary>);
-}
-const Loaded = () => {
+export const Conversations = () => {
     const styles = useStyles();
     const { data: conversations } = useSuspenseQuery({
         queryKey: ['/chat/v2/me/conversations'],
     });
     const navigation = useNavigation();
-    return (<FlatList data={conversations?.data} contentContainerStyle={styles.container} style={styles.scrollView} ListEmptyComponent={<Text>No conversations found</Text>} ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>} renderItem={({ item }) => (<Pressable onPress={() => navigation.navigate('Settings')}>
+    return (<FlatList data={conversations?.data} contentContainerStyle={styles.container} style={styles.scrollView} ListEmptyComponent={<Text>No conversations found</Text>} ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>} renderItem={({ item }) => (<Pressable onPress={() => navigation.navigate('Conversation', {
+                conversation_id: item.id,
+                chat_group_graph_id: item.id,
+            })}>
           <Text style={styles.listItem}>{item.attributes.title}</Text>
         </Pressable>)}/>);
 };

package/build/components/conversations.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversations.js","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACjF,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAChC,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAI5C,MAAM,UAAU,aAAa;IAC3B,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IAEzC,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAA;IAEvB,OAAO,CACL,CAAC,uBAAuB,CACtB;MAAA,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACd,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAC5B;UAAA,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAC1C;YAAA,CAAC,MAAM,CAAC,AAAD,EACT;UAAA,EAAE,QAAQ,CACZ;QAAA,EAAE,aAAa,CAAC,CACjB,CACH;IAAA,EAAE,uBAAuB,CAAC,CAC3B,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,GAAG,EAAE;IAClB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAwB;QACtE,QAAQ,EAAE,CAAC,2BAA2B,CAAC;KACxC,CAAC,CAAA;IACF,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAElC,OAAO,CACL,CAAC,QAAQ,CACP,IAAI,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAC1B,qBAAqB,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACxC,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CACzB,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE,IAAI,CAAC,CAAC,CACxD,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CACnE,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACxB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CACxD;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,IAAI,CAC7D;QAAA,EAAE,SAAS,CAAC,CACb,CAAC,EACF,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,UAAU,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,eAAe,EAAE,MAAM,CAAC,mBAAmB,EAAE;QACpE,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;QAClC,GAAG,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE;QAC9C,QAAQ,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,mBAAmB,EAAE;KAChD,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { ConversationResource, JSONAPICollection } from '@planningcenter/chat-core'\nimport { useNavigation } from '@react-navigation/native'\nimport { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query'\nimport React, { Suspense, useContext } from 'react'\nimport { FlatList, Pressable, StyleSheet } from 'react-native'\nimport { ChatContext } from '../contexts/chat_context'\nimport { useTheme } from '../hooks'\nimport { Text } from './display'\nimport ErrorBoundary from './error_boundary'\n\ntype ConversationsResponse = JSONAPICollection<ConversationResource>\n\nexport function Conversations() {\n  const { token } = useContext(ChatContext)\n\n  if (!token) return null\n\n  return (\n    <QueryErrorResetBoundary>\n      {({ reset }) => (\n        <ErrorBoundary onReset={reset}>\n          <Suspense fallback={<Text>loading...</Text>}>\n            <Loaded />\n          </Suspense>\n        </ErrorBoundary>\n      )}\n    </QueryErrorResetBoundary>\n  )\n}\n\nconst Loaded = () => {\n  const styles = useStyles()\n  const { data: conversations } = useSuspenseQuery<ConversationsResponse>({\n    queryKey: ['/chat/v2/me/conversations'],\n  })\n  const navigation = useNavigation()\n\n  return (\n    <FlatList\n      data={conversations?.data}\n      contentContainerStyle={styles.container}\n      style={styles.scrollView}\n      ListEmptyComponent={<Text>No conversations found</Text>}\n      ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}\n      renderItem={({ item }) => (\n        <Pressable onPress={() => navigation.navigate('Settings')}>\n          <Text style={styles.listItem}>{item.attributes.title}</Text>\n        </Pressable>\n      )}\n    />\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },\n    container: { gap: 8, padding: 16 },\n    foo: { fontSize: 24, color: colors.testColor },\n    listItem: { color: colors.fillColorNeutral020 },\n  })\n}\n"]}
+{"version":3,"file":"conversations.js","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAIhC,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,EAAE;IAChC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAwB;QACtE,QAAQ,EAAE,CAAC,2BAA2B,CAAC;KACxC,CAAC,CAAA;IACF,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAElC,OAAO,CACL,CAAC,QAAQ,CACP,IAAI,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAC1B,qBAAqB,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACxC,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CACzB,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE,IAAI,CAAC,CAAC,CACxD,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CACnE,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACxB,CAAC,SAAS,CACR,OAAO,CAAC,CAAC,GAAG,EAAE,CACZ,UAAU,CAAC,QAAQ,CAAC,cAAc,EAAE;gBAClC,eAAe,EAAE,IAAI,CAAC,EAAE;gBACxB,mBAAmB,EAAE,IAAI,CAAC,EAAE;aAC7B,CACH,CAAC,CAED;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,IAAI,CAC7D;QAAA,EAAE,SAAS,CAAC,CACb,CAAC,EACF,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,UAAU,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,eAAe,EAAE,MAAM,CAAC,mBAAmB,EAAE;QACpE,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;QAClC,GAAG,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE;QAC9C,QAAQ,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,mBAAmB,EAAE;KAChD,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { ConversationResource, JSONAPICollection } from '@planningcenter/chat-core'\nimport { useNavigation } from '@react-navigation/native'\nimport { useSuspenseQuery } from '@tanstack/react-query'\nimport React from 'react'\nimport { FlatList, Pressable, StyleSheet } from 'react-native'\nimport { useTheme } from '../hooks'\nimport { Text } from './display'\n\ntype ConversationsResponse = JSONAPICollection<ConversationResource>\n\nexport const Conversations = () => {\n  const styles = useStyles()\n  const { data: conversations } = useSuspenseQuery<ConversationsResponse>({\n    queryKey: ['/chat/v2/me/conversations'],\n  })\n  const navigation = useNavigation()\n\n  return (\n    <FlatList\n      data={conversations?.data}\n      contentContainerStyle={styles.container}\n      style={styles.scrollView}\n      ListEmptyComponent={<Text>No conversations found</Text>}\n      ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}\n      renderItem={({ item }) => (\n        <Pressable\n          onPress={() =>\n            navigation.navigate('Conversation', {\n              conversation_id: item.id,\n              chat_group_graph_id: item.id,\n            })\n          }\n        >\n          <Text style={styles.listItem}>{item.attributes.title}</Text>\n        </Pressable>\n      )}\n    />\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },\n    container: { gap: 8, padding: 16 },\n    foo: { fontSize: 24, color: colors.testColor },\n    listItem: { color: colors.fillColorNeutral020 },\n  })\n}\n"]}

package/build/index.d.ts

@@ -3,4 +3,5 @@ export * from './contexts';
 export * from './hooks';
 export * from './screens';
 export * from './utils';
+export * from './navigation';
 //# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA"}

package/build/index.js

@@ -3,4 +3,5 @@ export * from './contexts';
 export * from './hooks';
 export * from './screens';
 export * from './utils';
+export * from './navigation';
 //# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA","sourcesContent":["export * from './components'\nexport * from './contexts'\nexport * from './hooks'\nexport * from './screens'\nexport * from './utils'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,cAAc,CAAA","sourcesContent":["export * from './components'\nexport * from './contexts'\nexport * from './hooks'\nexport * from './screens'\nexport * from './utils'\nexport * from './navigation'\n"]}

package/build/navigation/index.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import { StaticParamList } from '@react-navigation/native';
+import { NotFound } from '../screens/not_found';
+import { ScreenLayout } from './screenLayout';
+import { ConversationsScreen } from '../screens/conversations_screen';
+import { ConversationScreen } from '../screens/conversation_screen';
+export declare const ChatStack: import("@react-navigation/native").TypedNavigator<{
+    ParamList: import("@react-navigation/native").ParamListBase;
+    NavigatorID: undefined;
+    State: import("@react-navigation/native").StackNavigationState<import("@react-navigation/native").ParamListBase>;
+    ScreenOptions: import("@react-navigation/native-stack").NativeStackNavigationOptions;
+    EventMap: import("@react-navigation/native-stack").NativeStackNavigationEventMap;
+    NavigationList: {
+        [x: string]: import("@react-navigation/native-stack").NativeStackNavigationProp<import("@react-navigation/native").ParamListBase, string, undefined>;
+    };
+    Navigator: ({ id, initialRouteName, children, layout, screenListeners, screenOptions, screenLayout, UNSTABLE_getStateForRouteNamesChange, ...rest }: import("@react-navigation/native-stack").NativeStackNavigatorProps) => import("react/jsx-runtime").JSX.Element;
+}, {
+    readonly screenLayout: typeof ScreenLayout;
+    readonly screens: {
+        readonly Conversations: {
+            readonly screen: typeof ConversationsScreen;
+            readonly options: ({ route, navigation }: {
+                route: import("@react-navigation/native").RouteProp<import("@react-navigation/native").ParamListBase, string>;
+                navigation: import("@react-navigation/native-stack").NativeStackNavigationProp<import("@react-navigation/native").ParamListBase, string, undefined>;
+                theme: ReactNavigation.Theme;
+            }) => {
+                headerTitle: string;
+                headerLeft: () => React.JSX.Element;
+            };
+        };
+        readonly Conversation: {
+            readonly screen: typeof ConversationScreen;
+        };
+        readonly NotFound: {
+            readonly screen: typeof NotFound;
+            readonly options: {
+                readonly title: "404";
+            };
+            readonly linking: {
+                readonly path: "*";
+            };
+        };
+    };
+}>;
+type ChatStackParamList = StaticParamList<typeof ChatStack>;
+declare global {
+    namespace ReactNavigation {
+        interface RootParamList extends ChatStackParamList {
+        }
+    }
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,eAAO,MAAM,SAAS;;;;;;;;;uOAClB,mBAAmB;;;;;;;;;uBAgC81hB,gBAAiB,KAAK;;;;;;;;;;;;;;;;;;;EATz4hB,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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { NotFound } from '../screens/not_found';
+import { ScreenLayout } from './screenLayout';
+import { ConversationsScreen } from '../screens/conversations_screen';
+import { ConversationScreen } from '../screens/conversation_screen';
+import { HeaderBackButton } from '@react-navigation/elements';
+export const ChatStack = createNativeStackNavigator({
+    screenLayout: ScreenLayout,
+    screens: {
+        Conversations: {
+            screen: ConversationsScreen,
+            options: ({ route, navigation }) => ({
+                headerTitle: route.params?.title ?? 'Conversations',
+                // This goes back on the parent so it doesn't automatically show up on the first screen
+                headerLeft: () => <HeaderBackButton onPress={navigation.goBack}/>,
+            }),
+        },
+        Conversation: {
+            screen: ConversationScreen,
+        },
+        NotFound: {
+            screen: NotFound,
+            options: {
+                title: '404',
+            },
+            linking: {
+                path: '*',
+            },
+        },
+    },
+});
+//# sourceMappingURL=index.js.map

package/build/navigation/index.js.map

@@ -0,0 +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,MAAM,4BAA4B,CAAA;AAE7D,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,eAAe;gBAC3E,uFAAuF;gBACvF,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,EAAG;aACnE,CAAC;SACH;QACD,YAAY,EAAE;YACZ,MAAM,EAAE,kBAAkB;SAC3B;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 } from '@react-navigation/elements'\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 ?? 'Conversations',\n        // This goes back on the parent so it doesn't automatically show up on the first screen\n        headerLeft: () => <HeaderBackButton onPress={navigation.goBack} />,\n      }),\n    },\n    Conversation: {\n      screen: ConversationScreen,\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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function ScreenLayout({ children }: {
+    children: React.ReactElement;
+}): React.JSX.Element;
+//# sourceMappingURL=screenLayout.d.ts.map

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

@@ -0,0 +1 @@
+{"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,qBAU1E"}

package/build/navigation/screenLayout.js

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

package/build/navigation/screenLayout.js.map

@@ -0,0 +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;AAE5C,MAAM,UAAU,YAAY,CAAC,EAAE,QAAQ,EAAoC;IACzE,OAAO,CACL,CAAC,uBAAuB,CACtB;MAAA,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACd,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAC5B;UAAA,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,QAAQ,CACnE;QAAA,EAAE,aAAa,CAAC,CACjB,CACH;IAAA,EAAE,uBAAuB,CAAC,CAC3B,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'\n\nexport function ScreenLayout({ children }: { children: React.ReactElement }) {\n  return (\n    <QueryErrorResetBoundary>\n      {({ reset }) => (\n        <ErrorBoundary onReset={reset}>\n          <Suspense fallback={<Text>loading...</Text>}>{children}</Suspense>\n        </ErrorBoundary>\n      )}\n    </QueryErrorResetBoundary>\n  )\n}\n"]}

package/build/screens/conversation_screen.d.ts

@@ -0,0 +1,8 @@
+import { StaticScreenProps } from '@react-navigation/native';
+import React from 'react';
+export type ConversationScreenProps = StaticScreenProps<{
+    conversation_id: string;
+    chat_group_graph_id: string;
+}>;
+export declare function ConversationScreen({ route }: ConversationScreenProps): React.JSX.Element;
+//# sourceMappingURL=conversation_screen.d.ts.map

package/build/screens/conversation_screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation_screen.d.ts","sourceRoot":"","sources":["../../src/screens/conversation_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,CAAC;IACtD,eAAe,EAAE,MAAM,CAAA;IACvB,mBAAmB,EAAE,MAAM,CAAA;CAC5B,CAAC,CAAA;AAEF,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,EAAE,uBAAuB,qBAMpE"}

package/build/screens/conversation_screen.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Text } from '../components/display';
+export function ConversationScreen({ route }) {
+    return (<View style={styles.container}>
+      <Text>{JSON.stringify(route.params, null, 2)}</Text>
+    </View>);
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        gap: 8,
+    },
+});
+//# sourceMappingURL=conversation_screen.js.map

package/build/screens/conversation_screen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation_screen.js","sourceRoot":"","sources":["../../src/screens/conversation_screen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAO5C,MAAM,UAAU,kBAAkB,CAAC,EAAE,KAAK,EAA2B;IACnE,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,IAAI,CACrD;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;QACP,cAAc,EAAE,QAAQ;QACxB,GAAG,EAAE,CAAC;KACP;CACF,CAAC,CAAA","sourcesContent":["import { StaticScreenProps } from '@react-navigation/native'\nimport React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Text } from '../components/display'\n\nexport type ConversationScreenProps = StaticScreenProps<{\n  conversation_id: string\n  chat_group_graph_id: string\n}>\n\nexport function ConversationScreen({ route }: ConversationScreenProps) {\n  return (\n    <View style={styles.container}>\n      <Text>{JSON.stringify(route.params, null, 2)}</Text>\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    gap: 8,\n  },\n})\n"]}

package/build/screens/conversations_screen.d.ts

@@ -0,0 +1,8 @@
+import { StaticScreenProps } from '@react-navigation/native';
+import React from 'react';
+export type ConversationScreenProps = StaticScreenProps<{
+    title?: string;
+    chat_group_graph_id?: string;
+}>;
+export declare function ConversationsScreen(_props: ConversationScreenProps): React.JSX.Element;
+//# sourceMappingURL=conversations_screen.d.ts.map

package/build/screens/conversations_screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversations_screen.d.ts","sourceRoot":"","sources":["../../src/screens/conversations_screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,MAAM,uBAAuB,GAAG,iBAAiB,CAAC;IACtD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,CAAC,CAAA;AAEF,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,uBAAuB,qBAMlE"}

package/build/screens/conversations_screen.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Conversations } from '../components';
+export function ConversationsScreen(_props) {
+    return (<View style={styles.container}>
+      <Conversations />
+    </View>);
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        gap: 8,
+    },
+});
+//# sourceMappingURL=conversations_screen.js.map

package/build/screens/conversations_screen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversations_screen.js","sourceRoot":"","sources":["../../src/screens/conversations_screen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAO7C,MAAM,UAAU,mBAAmB,CAAC,MAA+B;IACjE,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,aAAa,CAAC,AAAD,EAChB;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;QACP,cAAc,EAAE,QAAQ;QACxB,GAAG,EAAE,CAAC;KACP;CACF,CAAC,CAAA","sourcesContent":["import { StaticScreenProps } from '@react-navigation/native'\nimport React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Conversations } from '../components'\n\nexport type ConversationScreenProps = StaticScreenProps<{\n  title?: string\n  chat_group_graph_id?: string\n}>\n\nexport function ConversationsScreen(_props: ConversationScreenProps) {\n  return (\n    <View style={styles.container}>\n      <Conversations />\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    gap: 8,\n  },\n})\n"]}

package/build/screens/not_found.d.ts

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

package/build/screens/not_found.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"not_found.d.ts","sourceRoot":"","sources":["../../src/screens/not_found.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,wBAAgB,QAAQ,sBAOvB"}

package/build/screens/not_found.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Button, Text } from '@react-navigation/elements';
+import { StyleSheet, View } from 'react-native';
+export function NotFound() {
+    return (<View style={styles.container}>
+      <Text>404</Text>
+      <Button screen="Conversations">Go to Home</Button>
+    </View>);
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: 10,
+    },
+});
+//# sourceMappingURL=not_found.js.map

package/build/screens/not_found.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"not_found.js","sourceRoot":"","sources":["../../src/screens/not_found.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAE/C,MAAM,UAAU,QAAQ;IACtB,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAC5B;MAAA,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CACf;MAAA,CAAC,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,UAAU,EAAE,MAAM,CACnD;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;QACP,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,EAAE;KACR;CACF,CAAC,CAAA","sourcesContent":["import React from 'react'\nimport { Button, Text } from '@react-navigation/elements'\nimport { StyleSheet, View } from 'react-native'\n\nexport function NotFound() {\n  return (\n    <View style={styles.container}>\n      <Text>404</Text>\n      <Button screen=\"Conversations\">Go to Home</Button>\n    </View>\n  )\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    gap: 10,\n  },\n})\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "1.4.3-rc.0",
+  "version": "1.5.0-rc.1",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -22,7 +22,8 @@
   "peerDependencies": {
     "@planningcenter/icons": "^15.17.0",
     "@react-navigation/elements": "*",
-    "@react-navigation/native": "*",
+    "@react-navigation/native": ">=7.0.0",
+    "@react-navigation/native-stack": ">=7.0.0",
     "@tanstack/react-query": "^5.0.0",
     "lodash": "*",
     "react": "*",
@@ -39,5 +40,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "1ac58da2e856582a61e56f94dd9387efbdbb2663"
+  "gitHead": "e378fe4c1dcbe28813fc3374906968454d4c8796"
 }

package/src/components/conversations.tsx

@@ -1,34 +1,14 @@
 import { ConversationResource, JSONAPICollection } from '@planningcenter/chat-core'
 import { useNavigation } from '@react-navigation/native'
-import { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query'
-import React, { Suspense, useContext } from 'react'
+import { useSuspenseQuery } from '@tanstack/react-query'
+import React from 'react'
 import { FlatList, Pressable, StyleSheet } from 'react-native'
-import { ChatContext } from '../contexts/chat_context'
 import { useTheme } from '../hooks'
 import { Text } from './display'
-import ErrorBoundary from './error_boundary'
 
 type ConversationsResponse = JSONAPICollection<ConversationResource>
 
-export function Conversations() {
-  const { token } = useContext(ChatContext)
-
-  if (!token) return null
-
-  return (
-    <QueryErrorResetBoundary>
-      {({ reset }) => (
-        <ErrorBoundary onReset={reset}>
-          <Suspense fallback={<Text>loading...</Text>}>
-            <Loaded />
-          </Suspense>
-        </ErrorBoundary>
-      )}
-    </QueryErrorResetBoundary>
-  )
-}
-
-const Loaded = () => {
+export const Conversations = () => {
   const styles = useStyles()
   const { data: conversations } = useSuspenseQuery<ConversationsResponse>({
     queryKey: ['/chat/v2/me/conversations'],
@@ -43,7 +23,14 @@ const Loaded = () => {
       ListEmptyComponent={<Text>No conversations found</Text>}
       ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}
       renderItem={({ item }) => (
-        <Pressable onPress={() => navigation.navigate('Settings')}>
+        <Pressable
+          onPress={() =>
+            navigation.navigate('Conversation', {
+              conversation_id: item.id,
+              chat_group_graph_id: item.id,
+            })
+          }
+        >
           <Text style={styles.listItem}>{item.attributes.title}</Text>
         </Pressable>
       )}

package/src/index.tsx

@@ -3,3 +3,4 @@ export * from './contexts'
 export * from './hooks'
 export * from './screens'
 export * from './utils'
+export * from './navigation'

package/src/navigation/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { StaticParamList } from '@react-navigation/native'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import { NotFound } from '../screens/not_found'
+import { ScreenLayout } from './screenLayout'
+import { ConversationsScreen } from '../screens/conversations_screen'
+import { ConversationScreen } from '../screens/conversation_screen'
+import { HeaderBackButton } from '@react-navigation/elements'
+
+export const ChatStack = createNativeStackNavigator({
+  screenLayout: ScreenLayout,
+  screens: {
+    Conversations: {
+      screen: ConversationsScreen,
+      options: ({ route, navigation }) => ({
+        headerTitle: (route.params as { title?: string })?.title ?? 'Conversations',
+        // This goes back on the parent so it doesn't automatically show up on the first screen
+        headerLeft: () => <HeaderBackButton onPress={navigation.goBack} />,
+      }),
+    },
+    Conversation: {
+      screen: ConversationScreen,
+    },
+    NotFound: {
+      screen: NotFound,
+      options: {
+        title: '404',
+      },
+      linking: {
+        path: '*',
+      },
+    },
+  },
+})
+
+type ChatStackParamList = StaticParamList<typeof ChatStack>
+
+declare global {
+  namespace ReactNavigation {
+    interface RootParamList extends ChatStackParamList {}
+  }
+}

package/src/navigation/screenLayout.tsx

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

package/src/screens/conversation_screen.tsx

@@ -0,0 +1,25 @@
+import { StaticScreenProps } from '@react-navigation/native'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Text } from '../components/display'
+
+export type ConversationScreenProps = StaticScreenProps<{
+  conversation_id: string
+  chat_group_graph_id: string
+}>
+
+export function ConversationScreen({ route }: ConversationScreenProps) {
+  return (
+    <View style={styles.container}>
+      <Text>{JSON.stringify(route.params, null, 2)}</Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    gap: 8,
+  },
+})

package/src/screens/conversations_screen.tsx

@@ -0,0 +1,25 @@
+import { StaticScreenProps } from '@react-navigation/native'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Conversations } from '../components'
+
+export type ConversationScreenProps = StaticScreenProps<{
+  title?: string
+  chat_group_graph_id?: string
+}>
+
+export function ConversationsScreen(_props: ConversationScreenProps) {
+  return (
+    <View style={styles.container}>
+      <Conversations />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    gap: 8,
+  },
+})

package/src/screens/not_found.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Button, Text } from '@react-navigation/elements'
+import { StyleSheet, View } from 'react-native'
+
+export function NotFound() {
+  return (
+    <View style={styles.container}>
+      <Text>404</Text>
+      <Button screen="Conversations">Go to Home</Button>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 10,
+  },
+})