@planningcenter/chat-react-native 3.2.0-rc.17 → 3.2.0-rc.18

package/build/navigation/index.d.ts

@@ -27,18 +27,23 @@ export declare const NewConversationStack: import("@react-navigation/native").Ty
     readonly screenLayout: typeof ScreenLayout;
     readonly screens: {
         readonly ConversationSelectRecipients: {
-            readonly screen: ({ route, }: {
-                route: {
-                    params: {
-                        chat_group_graph_id?: import("../types/resources/group_resource").GraphId;
-                        group_source_app_name?: import("../types/resources/app_name").AppName;
-                    };
-                };
-            }) => React.JSX.Element;
+            readonly screen: ({ route, }: import("../screens/conversation_select_recipients/types/screen_props").ConversationSelectRecipientsScreenProps) => React.JSX.Element;
             readonly options: ({ 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;
+            }) => {
+                title: string;
+                headerRight: (props: NativeStackHeaderRightProps) => React.JSX.Element;
+                headerBackVisible: false;
+            };
+        };
+        readonly ConversationSelectGroupRecipients: {
+            readonly screen: ({ route, }: import("../screens/conversation_select_recipients/types/screen_props").ConversationSelectRecipientsScreenProps) => React.JSX.Element;
+            readonly options: ({ navigation, route }: {
+                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;
             }) => {
                 title: string;
                 headerRight: (props: NativeStackHeaderRightProps) => React.JSX.Element;
@@ -146,18 +151,23 @@ export declare const ChatStack: import("@react-navigation/native").TypedNavigato
                 readonly screenLayout: typeof ScreenLayout;
                 readonly screens: {
                     readonly ConversationSelectRecipients: {
-                        readonly screen: ({ route, }: {
-                            route: {
-                                params: {
-                                    chat_group_graph_id?: import("../types/resources/group_resource").GraphId;
-                                    group_source_app_name?: import("../types/resources/app_name").AppName;
-                                };
-                            };
-                        }) => React.JSX.Element;
+                        readonly screen: ({ route, }: import("../screens/conversation_select_recipients/types/screen_props").ConversationSelectRecipientsScreenProps) => React.JSX.Element;
                         readonly options: ({ 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;
+                        }) => {
+                            title: string;
+                            headerRight: (props: NativeStackHeaderRightProps) => React.JSX.Element;
+                            headerBackVisible: false;
+                        };
+                    };
+                    readonly ConversationSelectGroupRecipients: {
+                        readonly screen: ({ route, }: import("../screens/conversation_select_recipients/types/screen_props").ConversationSelectRecipientsScreenProps) => React.JSX.Element;
+                        readonly options: ({ navigation, route }: {
+                            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;
                         }) => {
                             title: string;
                             headerRight: (props: NativeStackHeaderRightProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/navigation/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAEL,2BAA2B,EAC5B,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,yBAAyB,EAAE,MAAM,wCAAwC,CAAA;AAClF,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAA;AAOnF,OAAO,EACL,oBAAoB,EAErB,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAAE,eAAe,EAA0B,MAAM,8BAA8B,CAAA;AACtF,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,eAAe,EAA0B,MAAM,6BAA6B,CAAA;AAErF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAO7C,eAAO,MAAM,oBAAoB;;;;;;;;;uOAtBoC,mBACjE;;;;;;;;;;;;;;;;;;;;uBA2Jgoa,gBAAiB,KAAK;;;qCA3H7na,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;uBA2H4ka,gBAAiB,KAAK;;;;qCA3G7na,2BAA2B;;;;EAWtD,CAAA;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;uBA8F8ma,gBAAiB,KAAK;;;qCApF7na,2BAA2B;;;;;;;;;;;;uBAoF4ka,gBAAiB,KAAK;;;;;;;;;;;uBAAtB,gBAAiB,KAAK;;;;qCA9C7na,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDA8C6la,KAAK;;;iDA3H7na,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;mDA2H6la,KAAK;;;;iDA3G7na,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkGtD,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":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAEL,2BAA2B,EAC5B,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,yBAAyB,EAAE,MAAM,wCAAwC,CAAA;AAClF,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,+CAA+C,CAAA;AAOnF,OAAO,EACL,oBAAoB,EAErB,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAAE,eAAe,EAA0B,MAAM,8BAA8B,CAAA;AACtF,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,eAAe,EAA0B,MAAM,6BAA6B,CAAA;AAErF,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAQ7C,eAAO,MAAM,oBAAoB;;;;;;;;;uOAvBoC,mBACjE;;;;;;;;;;;;;uBA2KqgZ,gBAAiB,KAAK;;;qCA1IlgZ,2BAA2B;;;;;;;;;uBA0Ii9Y,gBAAiB,KAAK;;;qCA9HlgZ,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;uBA8Hi9Y,gBAAiB,KAAK;;;;qCA3GlgZ,2BAA2B;;;;EAWtD,CAAA;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;uBA8Fm/Y,gBAAiB,KAAK;;;qCApFlgZ,2BAA2B;;;;;;;;;;;;uBAoFi9Y,gBAAiB,KAAK;;;;;;;;;;;uBAAtB,gBAAiB,KAAK;;;;qCA9ClgZ,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;mDA8Ck+Y,KAAK;;;iDA1IlgZ,2BAA2B;;;;;;;;;mDA0Ik+Y,KAAK;;;iDA9HlgZ,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;mDA8Hk+Y,KAAK;;;;iDA3GlgZ,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkGtD,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

@@ -15,6 +15,7 @@ import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_sc
 import { HeaderRightButton } from './header';
 import { ScreenLayout } from './screenLayout';
 import { ConversationFiltersScreen, ConversationFiltersScreenOptions, } from '../screens/conversation_filters_screen';
+import { ConversationSelectGroupRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_group_recipients_screen';
 export const NewConversationStack = createNativeStackNavigator({
     initialRouteName: 'ConversationSelectRecipients',
     screenOptions: {
@@ -28,6 +29,16 @@ export const NewConversationStack = createNativeStackNavigator({
                 title: 'New conversation',
                 headerRight: (props) => (<HeaderRightButton {...props} onPress={navigation.goBack}>
             Cancel
+          </HeaderRightButton>),
+                headerBackVisible: false,
+            }),
+        },
+        ConversationSelectGroupRecipients: {
+            screen: ConversationSelectGroupRecipientsScreen,
+            options: ({ navigation, route }) => ({
+                title: 'New conversation',
+                headerRight: (props) => (<HeaderRightButton {...props} onPress={() => navigation.popTo('Conversations', route.params)}>
+            Cancel
           </HeaderRightButton>),
             }),
         },

package/build/navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/navigation/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { HeaderBackButton } from '@react-navigation/elements'\nimport { StaticParamList } from '@react-navigation/native'\nimport {\n  createNativeStackNavigator,\n  NativeStackHeaderRightProps,\n} from '@react-navigation/native-stack'\nimport React from 'react'\nimport { Icon } from '../components'\nimport { ConversationDetailsScreen } from '../screens/conversation_details_screen'\nimport { ConversationScreen } from '../screens/conversation_screen'\nimport { ConversationsScreen } from '../screens/conversations/conversations_screen'\nimport { ConversationNewScreen } from '../screens/conversation_new/conversation_new_screen'\nimport {\n  ConversationFilterReceipientsScreenOptions,\n  ConversationFilterRecipientsScreen,\n} from '../screens/conversation_filter_recipients/conversation_filter_recipients_screen'\nimport { ConversationSelectRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_recipients_screen'\nimport {\n  MessageActionsScreen,\n  MessageActionsScreenOptions,\n} from '../screens/message_actions_screen'\nimport { SendGiphyScreen, SendGiphyScreenOptions } from '../screens/send_giphy_screen'\nimport { NotFound } from '../screens/not_found'\nimport { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'\nimport { HeaderRightButton } from './header'\nimport { ScreenLayout } from './screenLayout'\nimport {\n  ConversationFiltersScreen,\n  ConversationFiltersScreenOptions,\n} from '../screens/conversation_filters_screen'\nimport { ConversationFiltersParams } from '../screens/conversation_filters/screen_props'\n\nexport const NewConversationStack = createNativeStackNavigator({\n  initialRouteName: 'ConversationSelectRecipients',\n  screenOptions: {\n    headerBackButtonDisplayMode: 'minimal',\n  },\n  screenLayout: ScreenLayout,\n  screens: {\n    ConversationSelectRecipients: {\n      screen: ConversationSelectRecipientsScreen,\n      options: ({ navigation }) => ({\n        title: 'New conversation',\n        headerRight: (props: NativeStackHeaderRightProps) => (\n          <HeaderRightButton {...props} onPress={navigation.goBack}>\n            Cancel\n          </HeaderRightButton>\n        ),\n      }),\n    },\n    ConversationFilterRecipients: {\n      screen: ConversationFilterRecipientsScreen,\n      options: ConversationFilterReceipientsScreenOptions,\n    },\n    ConversationNew: {\n      screen: ConversationNewScreen,\n      options: ({ navigation, route }) => ({\n        title: 'New conversation',\n        headerLeft: () => null,\n        headerRight: (props: NativeStackHeaderRightProps) => (\n          <HeaderRightButton\n            {...props}\n            onPress={() => navigation.popTo('Conversations', route.params)}\n          >\n            Cancel\n          </HeaderRightButton>\n        ),\n      }),\n    },\n  },\n})\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        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    ConversationFilters: {\n      screen: ConversationFiltersScreen,\n      options: ConversationFiltersScreenOptions,\n    },\n    Conversation: {\n      screen: ConversationScreen,\n      options: ({ route, navigation }) => ({\n        headerTitle: (route.params as { title?: string })?.title ?? 'Chat',\n        headerLeft: props => (\n          <HeaderBackButton\n            displayMode=\"minimal\"\n            onPress={() => {\n              if ((route.params as ConversationFiltersParams)?.chat_group_graph_id) {\n                // Ensure that conversations with a graph id pass them back to the conversation list\n                navigation.popTo('Conversations', route.params)\n              } else {\n                navigation.goBack()\n              }\n            }}\n            {...props}\n          />\n        ),\n      }),\n    },\n    ConversationDetails: {\n      screen: ConversationDetailsScreen,\n      options: ({ navigation }) => ({\n        presentation: 'modal',\n        title: 'Conversation details',\n        headerRight: (props: NativeStackHeaderRightProps) => (\n          <HeaderRightButton {...props} onPress={navigation.goBack}>\n            Done\n          </HeaderRightButton>\n        ),\n      }),\n    },\n    New: {\n      screen: NewConversationStack,\n      options: {\n        headerShown: false,\n        presentation: 'modal',\n      },\n    },\n    SendGiphy: {\n      screen: SendGiphyScreen,\n      options: SendGiphyScreenOptions,\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":"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","sourcesContent":["import { HeaderBackButton } from '@react-navigation/elements'\nimport { StaticParamList } from '@react-navigation/native'\nimport {\n  createNativeStackNavigator,\n  NativeStackHeaderRightProps,\n} from '@react-navigation/native-stack'\nimport React from 'react'\nimport { Icon } from '../components'\nimport { ConversationDetailsScreen } from '../screens/conversation_details_screen'\nimport { ConversationScreen } from '../screens/conversation_screen'\nimport { ConversationsScreen } from '../screens/conversations/conversations_screen'\nimport { ConversationNewScreen } from '../screens/conversation_new/conversation_new_screen'\nimport {\n  ConversationFilterReceipientsScreenOptions,\n  ConversationFilterRecipientsScreen,\n} from '../screens/conversation_filter_recipients/conversation_filter_recipients_screen'\nimport { ConversationSelectRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_recipients_screen'\nimport {\n  MessageActionsScreen,\n  MessageActionsScreenOptions,\n} from '../screens/message_actions_screen'\nimport { SendGiphyScreen, SendGiphyScreenOptions } from '../screens/send_giphy_screen'\nimport { NotFound } from '../screens/not_found'\nimport { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'\nimport { HeaderRightButton } from './header'\nimport { ScreenLayout } from './screenLayout'\nimport {\n  ConversationFiltersScreen,\n  ConversationFiltersScreenOptions,\n} from '../screens/conversation_filters_screen'\nimport { ConversationFiltersParams } from '../screens/conversation_filters/screen_props'\nimport { ConversationSelectGroupRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_group_recipients_screen'\n\nexport const NewConversationStack = createNativeStackNavigator({\n  initialRouteName: 'ConversationSelectRecipients',\n  screenOptions: {\n    headerBackButtonDisplayMode: 'minimal',\n  },\n  screenLayout: ScreenLayout,\n  screens: {\n    ConversationSelectRecipients: {\n      screen: ConversationSelectRecipientsScreen,\n      options: ({ navigation }) => ({\n        title: 'New conversation',\n        headerRight: (props: NativeStackHeaderRightProps) => (\n          <HeaderRightButton {...props} onPress={navigation.goBack}>\n            Cancel\n          </HeaderRightButton>\n        ),\n        headerBackVisible: false,\n      }),\n    },\n    ConversationSelectGroupRecipients: {\n      screen: ConversationSelectGroupRecipientsScreen,\n      options: ({ navigation, route }) => ({\n        title: 'New conversation',\n        headerRight: (props: NativeStackHeaderRightProps) => (\n          <HeaderRightButton\n            {...props}\n            onPress={() => navigation.popTo('Conversations', route.params)}\n          >\n            Cancel\n          </HeaderRightButton>\n        ),\n      }),\n    },\n    ConversationFilterRecipients: {\n      screen: ConversationFilterRecipientsScreen,\n      options: ConversationFilterReceipientsScreenOptions,\n    },\n    ConversationNew: {\n      screen: ConversationNewScreen,\n      options: ({ navigation, route }) => ({\n        title: 'New conversation',\n        headerLeft: () => null,\n        headerRight: (props: NativeStackHeaderRightProps) => (\n          <HeaderRightButton\n            {...props}\n            onPress={() => navigation.popTo('Conversations', route.params)}\n          >\n            Cancel\n          </HeaderRightButton>\n        ),\n      }),\n    },\n  },\n})\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        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    ConversationFilters: {\n      screen: ConversationFiltersScreen,\n      options: ConversationFiltersScreenOptions,\n    },\n    Conversation: {\n      screen: ConversationScreen,\n      options: ({ route, navigation }) => ({\n        headerTitle: (route.params as { title?: string })?.title ?? 'Chat',\n        headerLeft: props => (\n          <HeaderBackButton\n            displayMode=\"minimal\"\n            onPress={() => {\n              if ((route.params as ConversationFiltersParams)?.chat_group_graph_id) {\n                // Ensure that conversations with a graph id pass them back to the conversation list\n                navigation.popTo('Conversations', route.params)\n              } else {\n                navigation.goBack()\n              }\n            }}\n            {...props}\n          />\n        ),\n      }),\n    },\n    ConversationDetails: {\n      screen: ConversationDetailsScreen,\n      options: ({ navigation }) => ({\n        presentation: 'modal',\n        title: 'Conversation details',\n        headerRight: (props: NativeStackHeaderRightProps) => (\n          <HeaderRightButton {...props} onPress={navigation.goBack}>\n            Done\n          </HeaderRightButton>\n        ),\n      }),\n    },\n    New: {\n      screen: NewConversationStack,\n      options: {\n        headerShown: false,\n        presentation: 'modal',\n      },\n    },\n    SendGiphy: {\n      screen: SendGiphyScreen,\n      options: SendGiphyScreenOptions,\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/screens/conversation_select_recipients/components/recipient_link_row.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface RecipientLinkRowProps {
+    onPress: () => void;
+    accessibilityLabel: string;
+    accessibilityHint: string;
+    imageUri?: string;
+    title: string;
+    subtitle: string;
+}
+export declare const RecipientLinkRow: ({ onPress, accessibilityLabel, accessibilityHint, imageUri, title, subtitle, }: RecipientLinkRowProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=recipient_link_row.d.ts.map

package/build/screens/conversation_select_recipients/components/recipient_link_row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"recipient_link_row.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversation_select_recipients/components/recipient_link_row.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,UAAU,qBAAqB;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,iBAAiB,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,gBAAgB,mFAO1B,qBAAqB,sBA2BvB,CAAA"}

package/build/screens/conversation_select_recipients/components/recipient_link_row.js

@@ -0,0 +1,61 @@
+import { PlatformPressable } from '@react-navigation/elements';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Icon, Image, Text } from '../../../components';
+import { useTheme } from '../../../hooks';
+import { platformFontWeightMedium } from '../../../utils';
+export const RecipientLinkRow = ({ onPress, accessibilityLabel, accessibilityHint, imageUri, title, subtitle, }) => {
+    const styles = useStyles();
+    return (<PlatformPressable style={styles.row} onPress={onPress} accessibilityRole="link" accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint}>
+      <View style={styles.innerContainer}>
+        {imageUri && (<Image source={{ uri: imageUri }} resizeMode="cover" style={styles.image} alt=""/>)}
+        <View style={styles.content}>
+          <Text style={styles.title} numberOfLines={2}>
+            {title}
+          </Text>
+          <Text variant="tertiary" numberOfLines={1}>
+            {subtitle}
+          </Text>
+        </View>
+        <Icon name="general.rightChevron" size={16} style={styles.icon}/>
+      </View>
+    </PlatformPressable>);
+};
+const ASPECT_RATIO = 16 / 9;
+const THUMBNAIL_WIDTH = 80;
+const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO;
+const useStyles = () => {
+    const theme = useTheme();
+    return StyleSheet.create({
+        row: {
+            paddingLeft: 16,
+        },
+        innerContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 12,
+            paddingVertical: 16,
+            paddingRight: 16,
+            borderBottomWidth: 1,
+            borderColor: theme.colors.fillColorNeutral050Base,
+        },
+        image: {
+            width: THUMBNAIL_WIDTH,
+            height: THUMBNAIL_HEIGHT,
+            borderRadius: 4,
+        },
+        title: {
+            fontWeight: platformFontWeightMedium,
+            flexShrink: 1,
+        },
+        content: {
+            flexShrink: 1,
+            gap: 2,
+        },
+        icon: {
+            marginLeft: 'auto',
+            color: theme.colors.fillColorNeutral030,
+        },
+    });
+};
+//# sourceMappingURL=recipient_link_row.js.map

package/build/screens/conversation_select_recipients/components/recipient_link_row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recipient_link_row.js","sourceRoot":"","sources":["../../../../src/screens/conversation_select_recipients/components/recipient_link_row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Icon, Image, Text } from '../../../components'\nimport { useTheme } from '../../../hooks'\nimport { platformFontWeightMedium } from '../../../utils'\n\ninterface RecipientLinkRowProps {\n  onPress: () => void\n  accessibilityLabel: string\n  accessibilityHint: string\n  imageUri?: string\n  title: string\n  subtitle: string\n}\n\nexport const RecipientLinkRow = ({\n  onPress,\n  accessibilityLabel,\n  accessibilityHint,\n  imageUri,\n  title,\n  subtitle,\n}: RecipientLinkRowProps) => {\n  const styles = useStyles()\n\n  return (\n    <PlatformPressable\n      style={styles.row}\n      onPress={onPress}\n      accessibilityRole=\"link\"\n      accessibilityLabel={accessibilityLabel}\n      accessibilityHint={accessibilityHint}\n    >\n      <View style={styles.innerContainer}>\n        {imageUri && (\n          <Image source={{ uri: imageUri }} resizeMode=\"cover\" style={styles.image} alt=\"\" />\n        )}\n        <View style={styles.content}>\n          <Text style={styles.title} numberOfLines={2}>\n            {title}\n          </Text>\n          <Text variant=\"tertiary\" numberOfLines={1}>\n            {subtitle}\n          </Text>\n        </View>\n        <Icon name=\"general.rightChevron\" size={16} style={styles.icon} />\n      </View>\n    </PlatformPressable>\n  )\n}\n\nconst ASPECT_RATIO = 16 / 9\nconst THUMBNAIL_WIDTH = 80\nconst THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO\n\nconst useStyles = () => {\n  const theme = useTheme()\n\n  return StyleSheet.create({\n    row: {\n      paddingLeft: 16,\n    },\n    innerContainer: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 12,\n      paddingVertical: 16,\n      paddingRight: 16,\n      borderBottomWidth: 1,\n      borderColor: theme.colors.fillColorNeutral050Base,\n    },\n    image: {\n      width: THUMBNAIL_WIDTH,\n      height: THUMBNAIL_HEIGHT,\n      borderRadius: 4,\n    },\n    title: {\n      fontWeight: platformFontWeightMedium,\n      flexShrink: 1,\n    },\n    content: {\n      flexShrink: 1,\n      gap: 2,\n    },\n    icon: {\n      marginLeft: 'auto',\n      color: theme.colors.fillColorNeutral030,\n    },\n  })\n}\n"]}

package/build/screens/conversation_select_recipients/components/view_more_link_row.d.ts

@@ -0,0 +1,7 @@
+interface ViewMoreLinkRowProps {
+    onPress: () => void;
+    accessibilityHint: string;
+}
+export declare const ViewMoreLinkRow: ({ accessibilityHint, onPress }: ViewMoreLinkRowProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=view_more_link_row.d.ts.map

package/build/screens/conversation_select_recipients/components/view_more_link_row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view_more_link_row.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversation_select_recipients/components/view_more_link_row.tsx"],"names":[],"mappings":"AAGA,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,iBAAiB,EAAE,MAAM,CAAA;CAC1B;AAED,eAAO,MAAM,eAAe,mCAAoC,oBAAoB,gCAUnF,CAAA"}

package/build/screens/conversation_select_recipients/components/view_more_link_row.js

@@ -0,0 +1,21 @@
+import { StyleSheet, View } from 'react-native';
+import { TextButton } from '../../../components';
+export const ViewMoreLinkRow = ({ accessibilityHint, onPress }) => {
+    const styles = useRowStyles();
+    return (<View style={[styles.row]}>
+      <TextButton onPress={onPress} accessibilityHint={accessibilityHint} accessibilityRole="link">
+        View more
+      </TextButton>
+    </View>);
+};
+const useRowStyles = () => {
+    return StyleSheet.create({
+        row: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingVertical: 12,
+            paddingHorizontal: 16,
+        },
+    });
+};
+//# sourceMappingURL=view_more_link_row.js.map

package/build/screens/conversation_select_recipients/components/view_more_link_row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view_more_link_row.js","sourceRoot":"","sources":["../../../../src/screens/conversation_select_recipients/components/view_more_link_row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAOhD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,iBAAiB,EAAE,OAAO,EAAwB,EAAE,EAAE;IACtF,MAAM,MAAM,GAAG,YAAY,EAAE,CAAA;IAE7B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CACxB;MAAA,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,MAAM,CAC1F;;MACF,EAAE,UAAU,CACd;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,GAAG,EAAE;YACH,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,eAAe,EAAE,EAAE;YACnB,iBAAiB,EAAE,EAAE;SACtB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { StyleSheet, View } from 'react-native'\nimport { TextButton } from '../../../components'\n\ninterface ViewMoreLinkRowProps {\n  onPress: () => void\n  accessibilityHint: string\n}\n\nexport const ViewMoreLinkRow = ({ accessibilityHint, onPress }: ViewMoreLinkRowProps) => {\n  const styles = useRowStyles()\n\n  return (\n    <View style={[styles.row]}>\n      <TextButton onPress={onPress} accessibilityHint={accessibilityHint} accessibilityRole=\"link\">\n        View more\n      </TextButton>\n    </View>\n  )\n}\n\nconst useRowStyles = () => {\n  return StyleSheet.create({\n    row: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      paddingVertical: 12,\n      paddingHorizontal: 16,\n    },\n  })\n}\n"]}

package/build/screens/conversation_select_recipients/conversation_select_group_recipients_screen.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ConversationSelectRecipientsScreenProps } from './types/screen_props';
+export declare const ConversationSelectGroupRecipientsScreen: ({ route, }: ConversationSelectRecipientsScreenProps) => React.JSX.Element;
+//# sourceMappingURL=conversation_select_group_recipients_screen.d.ts.map

package/build/screens/conversation_select_recipients/conversation_select_group_recipients_screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation_select_group_recipients_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_group_recipients_screen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,OAAO,EAAE,uCAAuC,EAAE,MAAM,sBAAsB,CAAA;AAE9E,eAAO,MAAM,uCAAuC,eAEjD,uCAAuC,sBA6CzC,CAAA"}

package/build/screens/conversation_select_recipients/conversation_select_group_recipients_screen.js

@@ -0,0 +1,46 @@
+import { useNavigation } from '@react-navigation/native';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
+import { Heading } from '../../components';
+import { useGroupsGroups } from '../../hooks/use_groups_groups';
+import { pluralize } from '../../utils';
+import { RecipientLinkRow } from './components/recipient_link_row';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+export const ConversationSelectGroupRecipientsScreen = ({ route, }) => {
+    const styles = useStyles();
+    const navigation = useNavigation();
+    const { data: groups = [] } = useGroupsGroups();
+    const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation);
+    const handleNavigateToConversationNew = (group) => {
+        navigation.navigate('New', {
+            screen: 'ConversationNew',
+            params: {
+                group_id: group.id,
+                source_app_name: 'Groups',
+                ...route.params,
+            },
+        });
+    };
+    return (<FlashList data={groupsWithCreatePermission} keyExtractor={item => item.id.toString()} estimatedItemSize={65} contentContainerStyle={styles.contentContainer} ListHeaderComponent={<View style={styles.sectionHeader}>
+          <Heading variant="h3">All my groups</Heading>
+        </View>} renderItem={({ item: group }) => {
+            const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`;
+            return (<RecipientLinkRow key={group.id} imageUri={group.headerImage?.thumbnail} title={group.name} subtitle={`${group.membershipsCount} members`} onPress={() => handleNavigateToConversationNew(group)} accessibilityLabel={groupAccessibilityLabel} accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation`}/>);
+        }}/>);
+};
+const useStyles = () => {
+    const { bottom } = useSafeAreaInsets();
+    return StyleSheet.create({
+        contentContainer: {
+            paddingBottom: bottom,
+        },
+        sectionHeader: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            padding: 16,
+            paddingBottom: 4,
+        },
+    });
+};
+//# sourceMappingURL=conversation_select_group_recipients_screen.js.map

package/build/screens/conversation_select_recipients/conversation_select_group_recipients_screen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation_select_group_recipients_screen.js","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_group_recipients_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { FlashList } from '@shopify/flash-list'\nimport { Heading } from '../../components'\nimport { GroupsGroupResource } from '../../types'\nimport { useGroupsGroups } from '../../hooks/use_groups_groups'\nimport { pluralize } from '../../utils'\nimport { RecipientLinkRow } from './components/recipient_link_row'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { ConversationSelectRecipientsScreenProps } from './types/screen_props'\n\nexport const ConversationSelectGroupRecipientsScreen = ({\n  route,\n}: ConversationSelectRecipientsScreenProps) => {\n  const styles = useStyles()\n  const navigation = useNavigation()\n  const { data: groups = [] } = useGroupsGroups()\n  const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)\n\n  const handleNavigateToConversationNew = (group: GroupsGroupResource) => {\n    navigation.navigate('New', {\n      screen: 'ConversationNew',\n      params: {\n        group_id: group.id,\n        source_app_name: 'Groups',\n        ...route.params,\n      },\n    })\n  }\n\n  return (\n    <FlashList\n      data={groupsWithCreatePermission}\n      keyExtractor={item => item.id.toString()}\n      estimatedItemSize={65}\n      contentContainerStyle={styles.contentContainer}\n      ListHeaderComponent={\n        <View style={styles.sectionHeader}>\n          <Heading variant=\"h3\">All my groups</Heading>\n        </View>\n      }\n      renderItem={({ item: group }: { item: GroupsGroupResource }) => {\n        const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`\n\n        return (\n          <RecipientLinkRow\n            key={group.id}\n            imageUri={group.headerImage?.thumbnail}\n            title={group.name}\n            subtitle={`${group.membershipsCount} members`}\n            onPress={() => handleNavigateToConversationNew(group)}\n            accessibilityLabel={groupAccessibilityLabel}\n            accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation`}\n          />\n        )\n      }}\n    />\n  )\n}\n\nconst useStyles = () => {\n  const { bottom } = useSafeAreaInsets()\n\n  return StyleSheet.create({\n    contentContainer: {\n      paddingBottom: bottom,\n    },\n    sectionHeader: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      padding: 16,\n      paddingBottom: 4,\n    },\n  })\n}\n"]}

package/build/screens/conversation_select_recipients/conversation_select_recipients_screen.d.ts

@@ -1,11 +1,4 @@
-import { StaticScreenProps } from '@react-navigation/native';
 import React from 'react';
-import { GraphId } from '../../types/resources/group_resource';
-import { AppName } from '../../types/resources/app_name';
-type ConversationSelectRecipientsScreenProps = StaticScreenProps<{
-    chat_group_graph_id?: GraphId;
-    group_source_app_name?: AppName;
-}>;
+import { ConversationSelectRecipientsScreenProps } from './types/screen_props';
 export declare const ConversationSelectRecipientsScreen: ({ route, }: ConversationSelectRecipientsScreenProps) => React.JSX.Element;
-export {};
 //# sourceMappingURL=conversation_select_recipients_screen.d.ts.map

package/build/screens/conversation_select_recipients/conversation_select_recipients_screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_select_recipients_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAiB,MAAM,0BAA0B,CAAA;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAA;AAC9D,OAAO,EAAE,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGxD,KAAK,uCAAuC,GAAG,iBAAiB,CAAC;IAC/D,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,CAAC,CAAA;AAMF,eAAO,MAAM,kCAAkC,eAE5C,uCAAuC,sBA2EzC,CAAA"}
+{"version":3,"file":"conversation_select_recipients_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,EAAE,uCAAuC,EAAE,MAAM,sBAAsB,CAAA;AAK9E,eAAO,MAAM,kCAAkC,eAE5C,uCAAuC,sBA+EzC,CAAA"}

package/build/screens/conversation_select_recipients/conversation_select_recipients_screen.js

@@ -1,20 +1,20 @@
-import { PlatformPressable } from '@react-navigation/elements';
 import { useNavigation } from '@react-navigation/native';
 import React from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Button, Heading, Icon, Image, Text } from '../../components';
-import { useTheme } from '../../hooks';
+import { Button, Heading } from '../../components';
 import { useGroupsGroups } from '../../hooks/use_groups_groups';
-import { platformFontWeightMedium, pluralize } from '../../utils';
-const ASPECT_RATIO = 16 / 9;
-const THUMBNAIL_WIDTH = 80;
-const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO;
+import { pluralize } from '../../utils';
+import { RecipientLinkRow } from './components/recipient_link_row';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ViewMoreLinkRow } from './components/view_more_link_row';
+const MAX_VISIBLE_GROUPS = 5;
 export const ConversationSelectRecipientsScreen = ({ route, }) => {
     const styles = useStyles();
     const navigation = useNavigation();
     const { data: groups = [] } = useGroupsGroups();
     const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation);
+    const visibleGroups = groupsWithCreatePermission.slice(0, MAX_VISIBLE_GROUPS);
+    const hasMoreGroups = groupsWithCreatePermission.length > MAX_VISIBLE_GROUPS;
     const handleNavigateToConversationNew = (group) => {
         navigation.navigate('New', {
             screen: 'ConversationNew',
@@ -25,25 +25,25 @@ export const ConversationSelectRecipientsScreen = ({ route, }) => {
             },
         });
     };
-    return (<ScrollView style={styles.container}>
+    const handleGroupsViewMore = () => {
+        navigation.navigate('New', {
+            screen: 'ConversationSelectGroupRecipients',
+            params: {
+                ...route.params,
+            },
+        });
+    };
+    return (<ScrollView contentContainerStyle={styles.contentContainer}>
       <View style={styles.section}>
         <View style={styles.sectionHeader}>
           <Heading variant="h3">My groups</Heading>
         </View>
         <View>
-          {groupsWithCreatePermission.map(group => {
+          {visibleGroups.map(group => {
             const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`;
-            return (<PlatformPressable key={group.id} style={styles.row} onPress={() => handleNavigateToConversationNew(group)} accessibilityRole="link" accessibilityLabel={groupAccessibilityLabel} accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation.`}>
-                <Image source={{ uri: group.headerImage?.thumbnail }} resizeMode="cover" style={styles.rowImage} alt=""/>
-                <View style={styles.rowContent}>
-                  <Text style={styles.rowName} numberOfLines={2}>
-                    {group.name}
-                  </Text>
-                  <Text variant="tertiary">{group.membershipsCount} members</Text>
-                </View>
-                <Icon name="general.rightChevron" size={16} style={styles.rowIconRight}/>
-              </PlatformPressable>);
+            return (<RecipientLinkRow key={group.id} imageUri={group.headerImage?.thumbnail} title={group.name} subtitle={`${group.membershipsCount} members`} onPress={() => handleNavigateToConversationNew(group)} accessibilityLabel={groupAccessibilityLabel} accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation`}/>);
         })}
+          {hasMoreGroups && (<ViewMoreLinkRow onPress={handleGroupsViewMore} accessibilityHint="Navigate to a full list of your groups."/>)}
         </View>
       </View>
       <View style={styles.section}>
@@ -61,52 +61,22 @@ export const ConversationSelectRecipientsScreen = ({ route, }) => {
 };
 const useStyles = () => {
     const { bottom } = useSafeAreaInsets();
-    const theme = useTheme();
     return StyleSheet.create({
-        container: {
-            flex: 1,
-            gap: 8,
+        contentContainer: {
+            gap: 24,
+            paddingTop: 16,
+            paddingBottom: 16 + bottom,
         },
         section: {
-            padding: 16,
             flex: 1,
         },
         sectionHeader: {
             flexDirection: 'row',
             justifyContent: 'space-between',
+            paddingHorizontal: 16,
+            paddingBottom: 4,
         },
         selectTeamsButton: {},
-        row: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 12,
-            paddingVertical: 16,
-            borderBottomWidth: 1,
-            borderColor: theme.colors.fillColorNeutral050Base,
-        },
-        rowImage: {
-            width: THUMBNAIL_WIDTH,
-            height: THUMBNAIL_HEIGHT,
-            borderRadius: 4,
-        },
-        rowName: {
-            fontWeight: platformFontWeightMedium,
-            flexShrink: 1,
-        },
-        rowContent: {
-            flexShrink: 1,
-        },
-        rowIconRight: {
-            marginLeft: 'auto',
-            color: theme.colors.fillColorNeutral030,
-        },
-        routeDebug: {
-            alignContent: 'center',
-            padding: 16,
-            paddingBottom: bottom,
-            borderTopWidth: 1,
-            borderTopColor: theme.colors.fillColorNeutral050Base,
-        },
     });
 };
 //# sourceMappingURL=conversation_select_recipients_screen.js.map

package/build/screens/conversation_select_recipients/conversation_select_recipients_screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_select_recipients_screen.js","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport { StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport React from 'react'\nimport { ScrollView, StyleSheet, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Button, Heading, Icon, Image, Text } from '../../components'\nimport { useTheme } from '../../hooks'\nimport { GroupsGroupResource } from '../../types'\nimport { useGroupsGroups } from '../../hooks/use_groups_groups'\nimport { GraphId } from '../../types/resources/group_resource'\nimport { AppName } from '../../types/resources/app_name'\nimport { platformFontWeightMedium, pluralize } from '../../utils'\n\ntype ConversationSelectRecipientsScreenProps = StaticScreenProps<{\n  chat_group_graph_id?: GraphId\n  group_source_app_name?: AppName\n}>\n\nconst ASPECT_RATIO = 16 / 9\nconst THUMBNAIL_WIDTH = 80\nconst THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO\n\nexport const ConversationSelectRecipientsScreen = ({\n  route,\n}: ConversationSelectRecipientsScreenProps) => {\n  const styles = useStyles()\n  const navigation = useNavigation()\n  const { data: groups = [] } = useGroupsGroups()\n  const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)\n\n  const handleNavigateToConversationNew = (group: GroupsGroupResource) => {\n    navigation.navigate('New', {\n      screen: 'ConversationNew',\n      params: {\n        group_id: group.id,\n        source_app_name: 'Groups',\n        ...route.params,\n      },\n    })\n  }\n\n  return (\n    <ScrollView style={styles.container}>\n      <View style={styles.section}>\n        <View style={styles.sectionHeader}>\n          <Heading variant=\"h3\">My groups</Heading>\n        </View>\n        <View>\n          {groupsWithCreatePermission.map(group => {\n            const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`\n\n            return (\n              <PlatformPressable\n                key={group.id}\n                style={styles.row}\n                onPress={() => handleNavigateToConversationNew(group)}\n                accessibilityRole=\"link\"\n                accessibilityLabel={groupAccessibilityLabel}\n                accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation.`}\n              >\n                <Image\n                  source={{ uri: group.headerImage?.thumbnail }}\n                  resizeMode=\"cover\"\n                  style={styles.rowImage}\n                  alt=\"\"\n                />\n                <View style={styles.rowContent}>\n                  <Text style={styles.rowName} numberOfLines={2}>\n                    {group.name}\n                  </Text>\n                  <Text variant=\"tertiary\">{group.membershipsCount} members</Text>\n                </View>\n                <Icon name=\"general.rightChevron\" size={16} style={styles.rowIconRight} />\n              </PlatformPressable>\n            )\n          })}\n        </View>\n      </View>\n      <View style={styles.section}>\n        <View style={styles.sectionHeader}>\n          <Heading variant=\"h3\">Teams I lead</Heading>\n          <Button\n            style={styles.selectTeamsButton}\n            onPress={() =>\n              navigation.navigate('New', {\n                screen: 'ConversationFilterRecipients',\n                params: {\n                  source_app_name: 'Services',\n                },\n              })\n            }\n            title=\"Select teams\"\n            variant=\"outline\"\n            iconNameLeft=\"general.search\"\n          />\n        </View>\n      </View>\n    </ScrollView>\n  )\n}\n\nconst useStyles = () => {\n  const { bottom } = useSafeAreaInsets()\n  const theme = useTheme()\n\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      gap: 8,\n    },\n    section: {\n      padding: 16,\n      flex: 1,\n    },\n    sectionHeader: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n    },\n    selectTeamsButton: {},\n    row: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 12,\n      paddingVertical: 16,\n      borderBottomWidth: 1,\n      borderColor: theme.colors.fillColorNeutral050Base,\n    },\n    rowImage: {\n      width: THUMBNAIL_WIDTH,\n      height: THUMBNAIL_HEIGHT,\n      borderRadius: 4,\n    },\n    rowName: {\n      fontWeight: platformFontWeightMedium,\n      flexShrink: 1,\n    },\n    rowContent: {\n      flexShrink: 1,\n    },\n    rowIconRight: {\n      marginLeft: 'auto',\n      color: theme.colors.fillColorNeutral030,\n    },\n    routeDebug: {\n      alignContent: 'center',\n      padding: 16,\n      paddingBottom: bottom,\n      borderTopWidth: 1,\n      borderTopColor: theme.colors.fillColorNeutral050Base,\n    },\n  })\n}\n"]}
+{"version":3,"file":"conversation_select_recipients_screen.js","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport React from 'react'\nimport { ScrollView, StyleSheet, View } from 'react-native'\nimport { Button, Heading } from '../../components'\nimport { GroupsGroupResource } from '../../types'\nimport { useGroupsGroups } from '../../hooks/use_groups_groups'\nimport { pluralize } from '../../utils'\nimport { RecipientLinkRow } from './components/recipient_link_row'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { ConversationSelectRecipientsScreenProps } from './types/screen_props'\nimport { ViewMoreLinkRow } from './components/view_more_link_row'\n\nconst MAX_VISIBLE_GROUPS = 5\n\nexport const ConversationSelectRecipientsScreen = ({\n  route,\n}: ConversationSelectRecipientsScreenProps) => {\n  const styles = useStyles()\n  const navigation = useNavigation()\n  const { data: groups = [] } = useGroupsGroups()\n  const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)\n  const visibleGroups = groupsWithCreatePermission.slice(0, MAX_VISIBLE_GROUPS)\n  const hasMoreGroups = groupsWithCreatePermission.length > MAX_VISIBLE_GROUPS\n\n  const handleNavigateToConversationNew = (group: GroupsGroupResource) => {\n    navigation.navigate('New', {\n      screen: 'ConversationNew',\n      params: {\n        group_id: group.id,\n        source_app_name: 'Groups',\n        ...route.params,\n      },\n    })\n  }\n\n  const handleGroupsViewMore = () => {\n    navigation.navigate('New', {\n      screen: 'ConversationSelectGroupRecipients',\n      params: {\n        ...route.params,\n      },\n    })\n  }\n\n  return (\n    <ScrollView contentContainerStyle={styles.contentContainer}>\n      <View style={styles.section}>\n        <View style={styles.sectionHeader}>\n          <Heading variant=\"h3\">My groups</Heading>\n        </View>\n        <View>\n          {visibleGroups.map(group => {\n            const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`\n\n            return (\n              <RecipientLinkRow\n                key={group.id}\n                imageUri={group.headerImage?.thumbnail}\n                title={group.name}\n                subtitle={`${group.membershipsCount} members`}\n                onPress={() => handleNavigateToConversationNew(group)}\n                accessibilityLabel={groupAccessibilityLabel}\n                accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation`}\n              />\n            )\n          })}\n          {hasMoreGroups && (\n            <ViewMoreLinkRow\n              onPress={handleGroupsViewMore}\n              accessibilityHint=\"Navigate to a full list of your groups.\"\n            />\n          )}\n        </View>\n      </View>\n      <View style={styles.section}>\n        <View style={styles.sectionHeader}>\n          <Heading variant=\"h3\">Teams I lead</Heading>\n          <Button\n            style={styles.selectTeamsButton}\n            onPress={() =>\n              navigation.navigate('New', {\n                screen: 'ConversationFilterRecipients',\n                params: {\n                  source_app_name: 'Services',\n                },\n              })\n            }\n            title=\"Select teams\"\n            variant=\"outline\"\n            iconNameLeft=\"general.search\"\n          />\n        </View>\n      </View>\n    </ScrollView>\n  )\n}\n\nconst useStyles = () => {\n  const { bottom } = useSafeAreaInsets()\n\n  return StyleSheet.create({\n    contentContainer: {\n      gap: 24,\n      paddingTop: 16,\n      paddingBottom: 16 + bottom,\n    },\n    section: {\n      flex: 1,\n    },\n    sectionHeader: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      paddingHorizontal: 16,\n      paddingBottom: 4,\n    },\n    selectTeamsButton: {},\n  })\n}\n"]}

package/build/screens/conversation_select_recipients/types/screen_props.d.ts

@@ -0,0 +1,9 @@
+import { StaticScreenProps } from '@react-navigation/native';
+import { AppName } from '../../../types/resources/app_name';
+import { GraphId } from '../../../types/resources/group_resource';
+export type ConversationSelectRecipientsParams = {
+    chat_group_graph_id?: GraphId;
+    group_source_app_name?: AppName;
+};
+export type ConversationSelectRecipientsScreenProps = StaticScreenProps<ConversationSelectRecipientsParams>;
+//# sourceMappingURL=screen_props.d.ts.map

package/build/screens/conversation_select_recipients/types/screen_props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"screen_props.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversation_select_recipients/types/screen_props.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAA;AAEjE,MAAM,MAAM,kCAAkC,GAAG;IAC/C,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,CAAA;AAED,MAAM,MAAM,uCAAuC,GACjD,iBAAiB,CAAC,kCAAkC,CAAC,CAAA"}

package/build/screens/conversation_select_recipients/types/screen_props.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=screen_props.js.map

package/build/screens/conversation_select_recipients/types/screen_props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"screen_props.js","sourceRoot":"","sources":["../../../../src/screens/conversation_select_recipients/types/screen_props.tsx"],"names":[],"mappings":"","sourcesContent":["import { StaticScreenProps } from '@react-navigation/native'\nimport { AppName } from '../../../types/resources/app_name'\nimport { GraphId } from '../../../types/resources/group_resource'\n\nexport type ConversationSelectRecipientsParams = {\n  chat_group_graph_id?: GraphId\n  group_source_app_name?: AppName\n}\n\nexport type ConversationSelectRecipientsScreenProps =\n  StaticScreenProps<ConversationSelectRecipientsParams>\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.2.0-rc.17",
+  "version": "3.2.0-rc.18",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "e08fb91663287cbdec079e616e66908c09535bb8"
+  "gitHead": "2d3b63eef761f8eadbfefdf080b39d9ea0a1e5ff"
 }

package/src/navigation/index.tsx

@@ -29,6 +29,7 @@ import {
   ConversationFiltersScreenOptions,
 } from '../screens/conversation_filters_screen'
 import { ConversationFiltersParams } from '../screens/conversation_filters/screen_props'
+import { ConversationSelectGroupRecipientsScreen } from '../screens/conversation_select_recipients/conversation_select_group_recipients_screen'
 
 export const NewConversationStack = createNativeStackNavigator({
   initialRouteName: 'ConversationSelectRecipients',
@@ -46,6 +47,21 @@ export const NewConversationStack = createNativeStackNavigator({
             Cancel
           </HeaderRightButton>
         ),
+        headerBackVisible: false,
+      }),
+    },
+    ConversationSelectGroupRecipients: {
+      screen: ConversationSelectGroupRecipientsScreen,
+      options: ({ navigation, route }) => ({
+        title: 'New conversation',
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderRightButton
+            {...props}
+            onPress={() => navigation.popTo('Conversations', route.params)}
+          >
+            Cancel
+          </HeaderRightButton>
+        ),
       }),
     },
     ConversationFilterRecipients: {

package/src/screens/conversation_select_recipients/components/recipient_link_row.tsx

@@ -0,0 +1,91 @@
+import { PlatformPressable } from '@react-navigation/elements'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Icon, Image, Text } from '../../../components'
+import { useTheme } from '../../../hooks'
+import { platformFontWeightMedium } from '../../../utils'
+
+interface RecipientLinkRowProps {
+  onPress: () => void
+  accessibilityLabel: string
+  accessibilityHint: string
+  imageUri?: string
+  title: string
+  subtitle: string
+}
+
+export const RecipientLinkRow = ({
+  onPress,
+  accessibilityLabel,
+  accessibilityHint,
+  imageUri,
+  title,
+  subtitle,
+}: RecipientLinkRowProps) => {
+  const styles = useStyles()
+
+  return (
+    <PlatformPressable
+      style={styles.row}
+      onPress={onPress}
+      accessibilityRole="link"
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+    >
+      <View style={styles.innerContainer}>
+        {imageUri && (
+          <Image source={{ uri: imageUri }} resizeMode="cover" style={styles.image} alt="" />
+        )}
+        <View style={styles.content}>
+          <Text style={styles.title} numberOfLines={2}>
+            {title}
+          </Text>
+          <Text variant="tertiary" numberOfLines={1}>
+            {subtitle}
+          </Text>
+        </View>
+        <Icon name="general.rightChevron" size={16} style={styles.icon} />
+      </View>
+    </PlatformPressable>
+  )
+}
+
+const ASPECT_RATIO = 16 / 9
+const THUMBNAIL_WIDTH = 80
+const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO
+
+const useStyles = () => {
+  const theme = useTheme()
+
+  return StyleSheet.create({
+    row: {
+      paddingLeft: 16,
+    },
+    innerContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      paddingVertical: 16,
+      paddingRight: 16,
+      borderBottomWidth: 1,
+      borderColor: theme.colors.fillColorNeutral050Base,
+    },
+    image: {
+      width: THUMBNAIL_WIDTH,
+      height: THUMBNAIL_HEIGHT,
+      borderRadius: 4,
+    },
+    title: {
+      fontWeight: platformFontWeightMedium,
+      flexShrink: 1,
+    },
+    content: {
+      flexShrink: 1,
+      gap: 2,
+    },
+    icon: {
+      marginLeft: 'auto',
+      color: theme.colors.fillColorNeutral030,
+    },
+  })
+}

package/src/screens/conversation_select_recipients/components/view_more_link_row.tsx

@@ -0,0 +1,30 @@
+import { StyleSheet, View } from 'react-native'
+import { TextButton } from '../../../components'
+
+interface ViewMoreLinkRowProps {
+  onPress: () => void
+  accessibilityHint: string
+}
+
+export const ViewMoreLinkRow = ({ accessibilityHint, onPress }: ViewMoreLinkRowProps) => {
+  const styles = useRowStyles()
+
+  return (
+    <View style={[styles.row]}>
+      <TextButton onPress={onPress} accessibilityHint={accessibilityHint} accessibilityRole="link">
+        View more
+      </TextButton>
+    </View>
+  )
+}
+
+const useRowStyles = () => {
+  return StyleSheet.create({
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+    },
+  })
+}

package/src/screens/conversation_select_recipients/conversation_select_group_recipients_screen.tsx

@@ -0,0 +1,76 @@
+import { useNavigation } from '@react-navigation/native'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { FlashList } from '@shopify/flash-list'
+import { Heading } from '../../components'
+import { GroupsGroupResource } from '../../types'
+import { useGroupsGroups } from '../../hooks/use_groups_groups'
+import { pluralize } from '../../utils'
+import { RecipientLinkRow } from './components/recipient_link_row'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
+
+export const ConversationSelectGroupRecipientsScreen = ({
+  route,
+}: ConversationSelectRecipientsScreenProps) => {
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const { data: groups = [] } = useGroupsGroups()
+  const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)
+
+  const handleNavigateToConversationNew = (group: GroupsGroupResource) => {
+    navigation.navigate('New', {
+      screen: 'ConversationNew',
+      params: {
+        group_id: group.id,
+        source_app_name: 'Groups',
+        ...route.params,
+      },
+    })
+  }
+
+  return (
+    <FlashList
+      data={groupsWithCreatePermission}
+      keyExtractor={item => item.id.toString()}
+      estimatedItemSize={65}
+      contentContainerStyle={styles.contentContainer}
+      ListHeaderComponent={
+        <View style={styles.sectionHeader}>
+          <Heading variant="h3">All my groups</Heading>
+        </View>
+      }
+      renderItem={({ item: group }: { item: GroupsGroupResource }) => {
+        const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`
+
+        return (
+          <RecipientLinkRow
+            key={group.id}
+            imageUri={group.headerImage?.thumbnail}
+            title={group.name}
+            subtitle={`${group.membershipsCount} members`}
+            onPress={() => handleNavigateToConversationNew(group)}
+            accessibilityLabel={groupAccessibilityLabel}
+            accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation`}
+          />
+        )
+      }}
+    />
+  )
+}
+
+const useStyles = () => {
+  const { bottom } = useSafeAreaInsets()
+
+  return StyleSheet.create({
+    contentContainer: {
+      paddingBottom: bottom,
+    },
+    sectionHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      padding: 16,
+      paddingBottom: 4,
+    },
+  })
+}

package/src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx

@@ -1,24 +1,16 @@
-import { PlatformPressable } from '@react-navigation/elements'
-import { StaticScreenProps, useNavigation } from '@react-navigation/native'
+import { useNavigation } from '@react-navigation/native'
 import React from 'react'
 import { ScrollView, StyleSheet, View } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Button, Heading, Icon, Image, Text } from '../../components'
-import { useTheme } from '../../hooks'
+import { Button, Heading } from '../../components'
 import { GroupsGroupResource } from '../../types'
 import { useGroupsGroups } from '../../hooks/use_groups_groups'
-import { GraphId } from '../../types/resources/group_resource'
-import { AppName } from '../../types/resources/app_name'
-import { platformFontWeightMedium, pluralize } from '../../utils'
-
-type ConversationSelectRecipientsScreenProps = StaticScreenProps<{
-  chat_group_graph_id?: GraphId
-  group_source_app_name?: AppName
-}>
+import { pluralize } from '../../utils'
+import { RecipientLinkRow } from './components/recipient_link_row'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
+import { ViewMoreLinkRow } from './components/view_more_link_row'
 
-const ASPECT_RATIO = 16 / 9
-const THUMBNAIL_WIDTH = 80
-const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO
+const MAX_VISIBLE_GROUPS = 5
 
 export const ConversationSelectRecipientsScreen = ({
   route,
@@ -27,6 +19,8 @@ export const ConversationSelectRecipientsScreen = ({
   const navigation = useNavigation()
   const { data: groups = [] } = useGroupsGroups()
   const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)
+  const visibleGroups = groupsWithCreatePermission.slice(0, MAX_VISIBLE_GROUPS)
+  const hasMoreGroups = groupsWithCreatePermission.length > MAX_VISIBLE_GROUPS
 
   const handleNavigateToConversationNew = (group: GroupsGroupResource) => {
     navigation.navigate('New', {
@@ -39,41 +33,43 @@ export const ConversationSelectRecipientsScreen = ({
     })
   }
 
+  const handleGroupsViewMore = () => {
+    navigation.navigate('New', {
+      screen: 'ConversationSelectGroupRecipients',
+      params: {
+        ...route.params,
+      },
+    })
+  }
+
   return (
-    <ScrollView style={styles.container}>
+    <ScrollView contentContainerStyle={styles.contentContainer}>
       <View style={styles.section}>
         <View style={styles.sectionHeader}>
           <Heading variant="h3">My groups</Heading>
         </View>
         <View>
-          {groupsWithCreatePermission.map(group => {
+          {visibleGroups.map(group => {
             const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`
 
             return (
-              <PlatformPressable
+              <RecipientLinkRow
                 key={group.id}
-                style={styles.row}
+                imageUri={group.headerImage?.thumbnail}
+                title={group.name}
+                subtitle={`${group.membershipsCount} members`}
                 onPress={() => handleNavigateToConversationNew(group)}
-                accessibilityRole="link"
                 accessibilityLabel={groupAccessibilityLabel}
-                accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation.`}
-              >
-                <Image
-                  source={{ uri: group.headerImage?.thumbnail }}
-                  resizeMode="cover"
-                  style={styles.rowImage}
-                  alt=""
-                />
-                <View style={styles.rowContent}>
-                  <Text style={styles.rowName} numberOfLines={2}>
-                    {group.name}
-                  </Text>
-                  <Text variant="tertiary">{group.membershipsCount} members</Text>
-                </View>
-                <Icon name="general.rightChevron" size={16} style={styles.rowIconRight} />
-              </PlatformPressable>
+                accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation`}
+              />
             )
           })}
+          {hasMoreGroups && (
+            <ViewMoreLinkRow
+              onPress={handleGroupsViewMore}
+              accessibilityHint="Navigate to a full list of your groups."
+            />
+          )}
         </View>
       </View>
       <View style={styles.section}>
@@ -101,52 +97,22 @@ export const ConversationSelectRecipientsScreen = ({
 
 const useStyles = () => {
   const { bottom } = useSafeAreaInsets()
-  const theme = useTheme()
 
   return StyleSheet.create({
-    container: {
-      flex: 1,
-      gap: 8,
+    contentContainer: {
+      gap: 24,
+      paddingTop: 16,
+      paddingBottom: 16 + bottom,
     },
     section: {
-      padding: 16,
       flex: 1,
     },
     sectionHeader: {
       flexDirection: 'row',
       justifyContent: 'space-between',
+      paddingHorizontal: 16,
+      paddingBottom: 4,
     },
     selectTeamsButton: {},
-    row: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 12,
-      paddingVertical: 16,
-      borderBottomWidth: 1,
-      borderColor: theme.colors.fillColorNeutral050Base,
-    },
-    rowImage: {
-      width: THUMBNAIL_WIDTH,
-      height: THUMBNAIL_HEIGHT,
-      borderRadius: 4,
-    },
-    rowName: {
-      fontWeight: platformFontWeightMedium,
-      flexShrink: 1,
-    },
-    rowContent: {
-      flexShrink: 1,
-    },
-    rowIconRight: {
-      marginLeft: 'auto',
-      color: theme.colors.fillColorNeutral030,
-    },
-    routeDebug: {
-      alignContent: 'center',
-      padding: 16,
-      paddingBottom: bottom,
-      borderTopWidth: 1,
-      borderTopColor: theme.colors.fillColorNeutral050Base,
-    },
   })
 }

package/src/screens/conversation_select_recipients/types/screen_props.tsx

@@ -0,0 +1,11 @@
+import { StaticScreenProps } from '@react-navigation/native'
+import { AppName } from '../../../types/resources/app_name'
+import { GraphId } from '../../../types/resources/group_resource'
+
+export type ConversationSelectRecipientsParams = {
+  chat_group_graph_id?: GraphId
+  group_source_app_name?: AppName
+}
+
+export type ConversationSelectRecipientsScreenProps =
+  StaticScreenProps<ConversationSelectRecipientsParams>