@planningcenter/chat-react-native 3.7.0-rc.6 → 3.7.0-rc.8

package/build/screens/conversation/message_read_receipts_screen.js

@@ -1,75 +1,64 @@
-import React, { useEffect } from 'react';
-import { View, StyleSheet, useWindowDimensions, Platform } from 'react-native';
+import { useHeaderHeight } from '@react-navigation/elements';
+import React, { memo } from 'react';
+import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Avatar, Heading, Text } from '../../components';
 import { useTheme } from '../../hooks';
-import { useNavigation } from '@react-navigation/native';
 import { useReadReceipts } from '../../hooks/use_read_receipts';
-import { FlashList } from '@shopify/flash-list';
-import { useHeaderHeight } from '@react-navigation/elements';
-const SCREEN_HEIGHT_RATIO_QUARTER = 0.25; // 25% of the screen height
-const SCREEN_HEIGHT_RATIO_HALF = 0.5; // 50% of the screen height
-const SCREEN_HEIGHT_RATIO_FULL = 1; // 100% of the screen height
+import { FlatList } from 'react-native-gesture-handler';
 export const MessageReadReceiptsScreenOptions = {
-    presentation: Platform.select({ ios: 'formSheet', android: 'modal' }),
+    presentation: 'formSheet',
     sheetAllowedDetents: Platform.select({
-        ios: [SCREEN_HEIGHT_RATIO_QUARTER, SCREEN_HEIGHT_RATIO_HALF, SCREEN_HEIGHT_RATIO_FULL],
-        default: undefined,
+        android: [0.25, 0.94], // Going straight to full 0.94 preserves height of screen on Android
+        default: [0.25, 0.5, 1],
     }),
     sheetGrabberVisible: true,
-    headerShown: Platform.select({ ios: false, default: true }),
+    headerShown: false,
     sheetCornerRadius: 16,
+    headerTitle: 'Read receipts',
 };
 export function MessageReadReceiptsScreen({ route }) {
     const styles = useStyles();
-    const navigation = useNavigation();
     const { conversation_id, message_id } = route.params;
     const { data: receipts, totalCount, fetchNextPage, } = useReadReceipts({ conversation_id, message_id });
-    useEffect(() => {
-        navigation.setOptions({
-            headerTitle: `Read receipts (${totalCount})`,
-        });
-    }, [totalCount, navigation]);
-    return (<View style={styles.container}>
-      <FlashList data={receipts} contentContainerStyle={styles.contentContainer} keyExtractor={item => item.id.toString()} estimatedItemSize={24} renderItem={({ item }) => (<View style={styles.receiptRow}>
-            <Avatar sourceUri={item.avatar} size="sm"/>
-            <Text variant="tertiary" numberOfLines={2} style={styles.name}>
-              {item.name}
-            </Text>
-          </View>)} ListHeaderComponent={() => PlatformListHeader({ totalCount })} ListFooterComponent={<View style={styles.footer}/>} ListEmptyComponent={<Text style={styles.emptyText}>No one has read this message yet.</Text>} onEndReached={fetchNextPage} onEndReachedThreshold={0.2}/>
+    return (<View style={styles.container} collapsable={false}>
+      <Heading variant="h3" style={styles.header}>
+        Read receipts ({totalCount})
+      </Heading>
+      <FlatList data={receipts} style={styles.contentContainer} keyExtractor={item => item.id.toString()} renderItem={({ item }) => <Receipt receipt={item}/>} nestedScrollEnabled ListFooterComponent={<View style={styles.footer}/>} ListEmptyComponent={<Text style={styles.emptyText}>No one has read this message yet.</Text>} onEndReached={() => fetchNextPage()} onEndReachedThreshold={0.2}/>
     </View>);
 }
-function PlatformListHeader({ totalCount }) {
+const Receipt = memo(({ receipt }) => {
     const styles = useStyles();
-    return Platform.select({
-        ios: (<Heading variant="h3" style={styles.header}>
-        Read receipts ({totalCount})
-      </Heading>),
-        default: null,
-    });
-}
+    return (<View style={styles.receiptRow}>
+      <Avatar sourceUri={receipt.avatar} size="sm"/>
+      <Text variant="tertiary" numberOfLines={2} style={styles.name}>
+        {receipt.name}
+      </Text>
+    </View>);
+});
 const useStyles = () => {
     const theme = useTheme();
     const { height } = useWindowDimensions();
     const { bottom, top } = useSafeAreaInsets();
     const headerHeight = useHeaderHeight();
     const containerHeight = Platform.select({
-        android: height,
+        android: null,
         ios: height - top - headerHeight,
     });
     return StyleSheet.create({
         container: {
-            paddingHorizontal: 16,
+            paddingTop: 16,
             backgroundColor: theme.colors.fillColorNeutral100Inverted,
             height: containerHeight,
             flex: 1,
         },
         contentContainer: {
-            paddingTop: 8,
+            paddingHorizontal: 16,
         },
         header: {
-            marginTop: 16,
-            marginBottom: 8,
+            paddingHorizontal: 16,
+            paddingBottom: 8,
         },
         receiptRow: {
             flexDirection: 'row',
@@ -82,7 +71,7 @@ const useStyles = () => {
             flex: 1,
         },
         footer: {
-            height: bottom + 40,
+            height: bottom + 16,
         },
         emptyText: {
             textAlign: 'center',

package/build/screens/conversation/message_read_receipts_screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"message_read_receipts_screen.js","sourceRoot":"","sources":["../../../src/screens/conversation/message_read_receipts_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect } from 'react'\nimport { View, StyleSheet, useWindowDimensions, Platform } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Avatar, Heading, Text } from '../../components'\nimport { useTheme } from '../../hooks'\nimport { StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport { NativeStackNavigationOptions } from '@react-navigation/native-stack'\nimport { useReadReceipts } from '../../hooks/use_read_receipts'\nimport { FlashList } from '@shopify/flash-list'\nimport { useHeaderHeight } from '@react-navigation/elements'\n\nconst SCREEN_HEIGHT_RATIO_QUARTER = 0.25 // 25% of the screen height\nconst SCREEN_HEIGHT_RATIO_HALF = 0.5 // 50% of the screen height\nconst SCREEN_HEIGHT_RATIO_FULL = 1 // 100% of the screen height\n\nexport const MessageReadReceiptsScreenOptions: NativeStackNavigationOptions = {\n  presentation: Platform.select({ ios: 'formSheet', android: 'modal' }),\n  sheetAllowedDetents: Platform.select({\n    ios: [SCREEN_HEIGHT_RATIO_QUARTER, SCREEN_HEIGHT_RATIO_HALF, SCREEN_HEIGHT_RATIO_FULL],\n    default: undefined,\n  }),\n  sheetGrabberVisible: true,\n  headerShown: Platform.select({ ios: false, default: true }),\n  sheetCornerRadius: 16,\n}\n\nexport type MessageReadReceiptsScreenProps = StaticScreenProps<{\n  conversation_id: number\n  message_id: string\n}>\n\nexport function MessageReadReceiptsScreen({ route }: MessageReadReceiptsScreenProps) {\n  const styles = useStyles()\n  const navigation = useNavigation()\n\n  const { conversation_id, message_id } = route.params\n  const {\n    data: receipts,\n    totalCount,\n    fetchNextPage,\n  } = useReadReceipts({ conversation_id, message_id })\n\n  useEffect(() => {\n    navigation.setOptions({\n      headerTitle: `Read receipts (${totalCount})`,\n    })\n  }, [totalCount, navigation])\n\n  return (\n    <View style={styles.container}>\n      <FlashList\n        data={receipts}\n        contentContainerStyle={styles.contentContainer}\n        keyExtractor={item => item.id.toString()}\n        estimatedItemSize={24}\n        renderItem={({ item }) => (\n          <View style={styles.receiptRow}>\n            <Avatar sourceUri={item.avatar} size=\"sm\" />\n            <Text variant=\"tertiary\" numberOfLines={2} style={styles.name}>\n              {item.name}\n            </Text>\n          </View>\n        )}\n        ListHeaderComponent={() => PlatformListHeader({ totalCount })}\n        ListFooterComponent={<View style={styles.footer} />}\n        ListEmptyComponent={<Text style={styles.emptyText}>No one has read this message yet.</Text>}\n        onEndReached={fetchNextPage}\n        onEndReachedThreshold={0.2}\n      />\n    </View>\n  )\n}\n\nfunction PlatformListHeader({ totalCount }: { totalCount: number }) {\n  const styles = useStyles()\n\n  return Platform.select({\n    ios: (\n      <Heading variant=\"h3\" style={styles.header}>\n        Read receipts ({totalCount})\n      </Heading>\n    ),\n    default: null,\n  })\n}\n\nconst useStyles = () => {\n  const theme = useTheme()\n  const { height } = useWindowDimensions()\n  const { bottom, top } = useSafeAreaInsets()\n  const headerHeight = useHeaderHeight()\n\n  const containerHeight = Platform.select({\n    android: height,\n    ios: height - top - headerHeight,\n  })\n\n  return StyleSheet.create({\n    container: {\n      paddingHorizontal: 16,\n      backgroundColor: theme.colors.fillColorNeutral100Inverted,\n      height: containerHeight,\n      flex: 1,\n    },\n    contentContainer: {\n      paddingTop: 8,\n    },\n    header: {\n      marginTop: 16,\n      marginBottom: 8,\n    },\n    receiptRow: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 8,\n      paddingVertical: 8,\n      flex: 1,\n    },\n    name: {\n      flex: 1,\n    },\n    footer: {\n      height: bottom + 40,\n    },\n    emptyText: {\n      textAlign: 'center',\n      color: '#888',\n      marginTop: 32,\n      fontSize: 16,\n    },\n    emptyContainer: {\n      flex: 1,\n      justifyContent: 'center',\n    },\n  })\n}\n"]}
+{"version":3,"file":"message_read_receipts_screen.js","sourceRoot":"","sources":["../../../src/screens/conversation/message_read_receipts_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useHeaderHeight } from '@react-navigation/elements'\nimport { StaticScreenProps } from '@react-navigation/native'\nimport { NativeStackNavigationOptions } from '@react-navigation/native-stack'\nimport React, { memo } from 'react'\nimport { Platform, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Avatar, Heading, Text } from '../../components'\nimport { useTheme } from '../../hooks'\nimport { useReadReceipts } from '../../hooks/use_read_receipts'\nimport { FlatList } from 'react-native-gesture-handler'\nimport { ReadReceiptResource } from '../../types/resources/read_receipt'\n\nexport const MessageReadReceiptsScreenOptions: NativeStackNavigationOptions = {\n  presentation: 'formSheet',\n  sheetAllowedDetents: Platform.select({\n    android: [0.25, 0.94], // Going straight to full 0.94 preserves height of screen on Android\n    default: [0.25, 0.5, 1],\n  }),\n  sheetGrabberVisible: true,\n  headerShown: false,\n  sheetCornerRadius: 16,\n  headerTitle: 'Read receipts',\n}\n\nexport type MessageReadReceiptsScreenProps = StaticScreenProps<{\n  conversation_id: number\n  message_id: string\n}>\n\nexport function MessageReadReceiptsScreen({ route }: MessageReadReceiptsScreenProps) {\n  const styles = useStyles()\n\n  const { conversation_id, message_id } = route.params\n  const {\n    data: receipts,\n    totalCount,\n    fetchNextPage,\n  } = useReadReceipts({ conversation_id, message_id })\n\n  return (\n    <View style={styles.container} collapsable={false}>\n      <Heading variant=\"h3\" style={styles.header}>\n        Read receipts ({totalCount})\n      </Heading>\n      <FlatList\n        data={receipts}\n        style={styles.contentContainer}\n        keyExtractor={item => item.id.toString()}\n        renderItem={({ item }) => <Receipt receipt={item} />}\n        nestedScrollEnabled\n        ListFooterComponent={<View style={styles.footer} />}\n        ListEmptyComponent={<Text style={styles.emptyText}>No one has read this message yet.</Text>}\n        onEndReached={() => fetchNextPage()}\n        onEndReachedThreshold={0.2}\n      />\n    </View>\n  )\n}\n\nconst Receipt = memo(({ receipt }: { receipt: ReadReceiptResource }) => {\n  const styles = useStyles()\n\n  return (\n    <View style={styles.receiptRow}>\n      <Avatar sourceUri={receipt.avatar} size=\"sm\" />\n      <Text variant=\"tertiary\" numberOfLines={2} style={styles.name}>\n        {receipt.name}\n      </Text>\n    </View>\n  )\n})\n\nconst useStyles = () => {\n  const theme = useTheme()\n  const { height } = useWindowDimensions()\n  const { bottom, top } = useSafeAreaInsets()\n  const headerHeight = useHeaderHeight()\n\n  const containerHeight = Platform.select({\n    android: null,\n    ios: height - top - headerHeight,\n  })\n\n  return StyleSheet.create({\n    container: {\n      paddingTop: 16,\n      backgroundColor: theme.colors.fillColorNeutral100Inverted,\n      height: containerHeight,\n      flex: 1,\n    },\n    contentContainer: {\n      paddingHorizontal: 16,\n    },\n    header: {\n      paddingHorizontal: 16,\n      paddingBottom: 8,\n    },\n    receiptRow: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 8,\n      paddingVertical: 8,\n      flex: 1,\n    },\n    name: {\n      flex: 1,\n    },\n    footer: {\n      height: bottom + 16,\n    },\n    emptyText: {\n      textAlign: 'center',\n      color: '#888',\n      marginTop: 32,\n      fontSize: 16,\n    },\n    emptyContainer: {\n      flex: 1,\n      justifyContent: 'center',\n    },\n  })\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"conversation_filters_screen.d.ts","sourceRoot":"","sources":["../../src/screens/conversation_filters_screen.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,4BAA4B,EAC7B,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,EACL,8BAA8B,EAE/B,MAAM,qCAAqC,CAAA;AA8B5C,eAAO,MAAM,gCAAgC,EAAE,4BAY9C,CAAA;AAoCD,eAAO,MAAM,yBAAyB,WAAY,8BAA8B,sBAU/E,CAAA"}
+{"version":3,"file":"conversation_filters_screen.d.ts","sourceRoot":"","sources":["../../src/screens/conversation_filters_screen.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,4BAA4B,EAC7B,MAAM,gCAAgC,CAAA;AACvC,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,EACL,8BAA8B,EAE/B,MAAM,qCAAqC,CAAA;AA8B5C,eAAO,MAAM,gCAAgC,EAAE,4BAS9C,CAAA;AAoCD,eAAO,MAAM,yBAAyB,WAAY,8BAA8B,sBAU/E,CAAA"}

package/build/screens/conversation_filters_screen.js

@@ -30,10 +30,7 @@ const HeaderRightWithContext = () => {
 };
 export const ConversationFiltersScreenOptions = {
     presentation: Platform.select({ android: 'modal', ios: 'formSheet' }),
-    sheetAllowedDetents: Platform.select({
-        android: [0.75, 0.94],
-        default: [0.75, 1],
-    }),
+    sheetAllowedDetents: [0.75, 1],
     sheetGrabberVisible: true,
     headerBackVisible: false,
     headerRight: HeaderRightWithContext,

package/build/screens/conversation_filters_screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_filters_screen.js","sourceRoot":"","sources":["../../src/screens/conversation_filters_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { HeaderTitle, HeaderTitleProps, useHeaderHeight } from '@react-navigation/elements'\nimport { createComponentForStaticNavigation, RouteProp, useRoute } from '@react-navigation/native'\nimport {\n  createNativeStackNavigator,\n  NativeStackNavigationOptions,\n} from '@react-navigation/native-stack'\nimport React from 'react'\nimport { Platform, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Button, TextButton } from '../components'\nimport {\n  FilterContext,\n  FilterProvider,\n} from './conversation_filters/context/conversation_filter_context'\nimport { ConversationFilters } from './conversation_filters/components/conversation_filters'\nimport { GroupFilters } from './conversation_filters/group_filters'\nimport {\n  ConversationFiltersScreenProps,\n  ConversationFilterStackParamList,\n} from './conversation_filters/screen_props'\nimport { useTheme } from '../hooks'\nimport { TeamFilters } from './conversation_filters/team_filters'\n\nconst FilterHeaderTitle = ({ tintColor }: HeaderTitleProps) => {\n  const styles = useStyles()\n  return <HeaderTitle style={[styles.headerTitle, { color: tintColor }]}>Filters</HeaderTitle>\n}\n\nconst HeaderRight = () => {\n  const { resetFilter, applyFilters } = React.useContext(FilterContext)\n  const route = useRoute<RouteProp<ConversationFiltersScreenProps['route']>>()\n  const styles = useStyles()\n\n  return (\n    <View style={styles.headerRight}>\n      <TextButton onPress={resetFilter}>Reset</TextButton>\n      <Button title=\"Apply\" onPress={() => applyFilters(route.params)} />\n    </View>\n  )\n}\n\nconst HeaderRightWithContext = () => {\n  return (\n    <FilterProvider>\n      <HeaderRight />\n    </FilterProvider>\n  )\n}\n\nexport const ConversationFiltersScreenOptions: NativeStackNavigationOptions = {\n  presentation: Platform.select({ android: 'modal', ios: 'formSheet' }),\n  sheetAllowedDetents: Platform.select({\n    android: [0.75, 0.94],\n    default: [0.75, 1],\n  }),\n  sheetGrabberVisible: true,\n  headerBackVisible: false,\n  headerRight: HeaderRightWithContext,\n  headerTitle: FilterHeaderTitle,\n  headerTitleAlign: 'left',\n  sheetCornerRadius: 16,\n}\n\nconst FilterNavigator = createNativeStackNavigator<ConversationFilterStackParamList>({\n  initialRouteName: 'Filters',\n  screens: {\n    Filters: {\n      screen: ConversationFilters,\n      options: {\n        headerShown: false,\n      },\n    },\n    GroupFilters: {\n      screen: GroupFilters,\n      options: {\n        headerTitle: Platform.select({\n          android: 'Groups',\n          ios: '',\n        }),\n        headerBackTitle: 'Groups',\n      },\n    },\n    TeamFilters: {\n      screen: TeamFilters,\n      options: {\n        headerTitle: Platform.select({\n          android: 'Teams',\n          ios: '',\n        }),\n        headerBackTitle: 'Teams',\n      },\n    },\n  },\n})\n\nconst Filters = createComponentForStaticNavigation(FilterNavigator, 'Filters')\n\nexport const ConversationFiltersScreen = (_props: ConversationFiltersScreenProps) => {\n  const styles = useStyles()\n\n  return (\n    <FilterProvider>\n      <View style={styles.container}>\n        <Filters />\n      </View>\n    </FilterProvider>\n  )\n}\n\nconst useStyles = () => {\n  const { top } = useSafeAreaInsets()\n  const { height } = useWindowDimensions()\n  const headerHeight = useHeaderHeight()\n  const theme = useTheme()\n\n  const containerHeight = Platform.select({\n    android: height,\n    ios: height - top - headerHeight,\n  })\n\n  return StyleSheet.create({\n    container: {\n      height: containerHeight,\n      flex: 1,\n    },\n    headerTitle: {\n      textAlign: 'left',\n      flex: 1,\n    },\n    filterBar: {\n      backgroundColor: theme.colors.fillColorNeutral100Inverted,\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      alignItems: 'center',\n      paddingHorizontal: 16,\n      paddingVertical: 16,\n      gap: 8,\n    },\n    filterBarScroll: {\n      elevation: 4,\n      boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.1)',\n    },\n    filterBarActions: {\n      flexDirection: 'row',\n      gap: 8,\n      alignItems: 'center',\n    },\n    headerRight: {\n      flexDirection: 'row',\n      gap: 8,\n      alignItems: 'center',\n    },\n  })\n}\n"]}
+{"version":3,"file":"conversation_filters_screen.js","sourceRoot":"","sources":["../../src/screens/conversation_filters_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { HeaderTitle, HeaderTitleProps, useHeaderHeight } from '@react-navigation/elements'\nimport { createComponentForStaticNavigation, RouteProp, useRoute } from '@react-navigation/native'\nimport {\n  createNativeStackNavigator,\n  NativeStackNavigationOptions,\n} from '@react-navigation/native-stack'\nimport React from 'react'\nimport { Platform, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Button, TextButton } from '../components'\nimport {\n  FilterContext,\n  FilterProvider,\n} from './conversation_filters/context/conversation_filter_context'\nimport { ConversationFilters } from './conversation_filters/components/conversation_filters'\nimport { GroupFilters } from './conversation_filters/group_filters'\nimport {\n  ConversationFiltersScreenProps,\n  ConversationFilterStackParamList,\n} from './conversation_filters/screen_props'\nimport { useTheme } from '../hooks'\nimport { TeamFilters } from './conversation_filters/team_filters'\n\nconst FilterHeaderTitle = ({ tintColor }: HeaderTitleProps) => {\n  const styles = useStyles()\n  return <HeaderTitle style={[styles.headerTitle, { color: tintColor }]}>Filters</HeaderTitle>\n}\n\nconst HeaderRight = () => {\n  const { resetFilter, applyFilters } = React.useContext(FilterContext)\n  const route = useRoute<RouteProp<ConversationFiltersScreenProps['route']>>()\n  const styles = useStyles()\n\n  return (\n    <View style={styles.headerRight}>\n      <TextButton onPress={resetFilter}>Reset</TextButton>\n      <Button title=\"Apply\" onPress={() => applyFilters(route.params)} />\n    </View>\n  )\n}\n\nconst HeaderRightWithContext = () => {\n  return (\n    <FilterProvider>\n      <HeaderRight />\n    </FilterProvider>\n  )\n}\n\nexport const ConversationFiltersScreenOptions: NativeStackNavigationOptions = {\n  presentation: Platform.select({ android: 'modal', ios: 'formSheet' }),\n  sheetAllowedDetents: [0.75, 1],\n  sheetGrabberVisible: true,\n  headerBackVisible: false,\n  headerRight: HeaderRightWithContext,\n  headerTitle: FilterHeaderTitle,\n  headerTitleAlign: 'left',\n  sheetCornerRadius: 16,\n}\n\nconst FilterNavigator = createNativeStackNavigator<ConversationFilterStackParamList>({\n  initialRouteName: 'Filters',\n  screens: {\n    Filters: {\n      screen: ConversationFilters,\n      options: {\n        headerShown: false,\n      },\n    },\n    GroupFilters: {\n      screen: GroupFilters,\n      options: {\n        headerTitle: Platform.select({\n          android: 'Groups',\n          ios: '',\n        }),\n        headerBackTitle: 'Groups',\n      },\n    },\n    TeamFilters: {\n      screen: TeamFilters,\n      options: {\n        headerTitle: Platform.select({\n          android: 'Teams',\n          ios: '',\n        }),\n        headerBackTitle: 'Teams',\n      },\n    },\n  },\n})\n\nconst Filters = createComponentForStaticNavigation(FilterNavigator, 'Filters')\n\nexport const ConversationFiltersScreen = (_props: ConversationFiltersScreenProps) => {\n  const styles = useStyles()\n\n  return (\n    <FilterProvider>\n      <View style={styles.container}>\n        <Filters />\n      </View>\n    </FilterProvider>\n  )\n}\n\nconst useStyles = () => {\n  const { top } = useSafeAreaInsets()\n  const { height } = useWindowDimensions()\n  const headerHeight = useHeaderHeight()\n  const theme = useTheme()\n\n  const containerHeight = Platform.select({\n    android: height,\n    ios: height - top - headerHeight,\n  })\n\n  return StyleSheet.create({\n    container: {\n      height: containerHeight,\n      flex: 1,\n    },\n    headerTitle: {\n      textAlign: 'left',\n      flex: 1,\n    },\n    filterBar: {\n      backgroundColor: theme.colors.fillColorNeutral100Inverted,\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      alignItems: 'center',\n      paddingHorizontal: 16,\n      paddingVertical: 16,\n      gap: 8,\n    },\n    filterBarScroll: {\n      elevation: 4,\n      boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.1)',\n    },\n    filterBarActions: {\n      flexDirection: 'row',\n      gap: 8,\n      alignItems: 'center',\n    },\n    headerRight: {\n      flexDirection: 'row',\n      gap: 8,\n      alignItems: 'center',\n    },\n  })\n}\n"]}

package/build/utils/index.d.ts

@@ -8,5 +8,4 @@ export * from './cache';
 export * from './native_adapters';
 export * from './pluralize';
 export * from './destructure_chat_group_graph_id';
-export * from './navigation_constants';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,mCAAmC,CAAA"}

package/build/utils/index.js

@@ -8,5 +8,4 @@ export * from './cache';
 export * from './native_adapters';
 export * from './pluralize';
 export * from './destructure_chat_group_graph_id';
-export * from './navigation_constants';
 //# sourceMappingURL=index.js.map

package/build/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,mCAAmC,CAAA;AACjD,cAAc,wBAAwB,CAAA","sourcesContent":["export * from './session'\nexport * from './theme'\nexport * from './styles'\nexport * from './space'\nexport * from './client'\nexport * from './uri'\nexport * from './cache'\nexport * from './native_adapters'\nexport * from './pluralize'\nexport * from './destructure_chat_group_graph_id'\nexport * from './navigation_constants'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,mCAAmC,CAAA","sourcesContent":["export * from './session'\nexport * from './theme'\nexport * from './styles'\nexport * from './space'\nexport * from './client'\nexport * from './uri'\nexport * from './cache'\nexport * from './native_adapters'\nexport * from './pluralize'\nexport * from './destructure_chat_group_graph_id'\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.7.0-rc.6",
+  "version": "3.7.0-rc.8",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "b872ecaf8dca621c7619ae91e856ef62f27d0d49"
+  "gitHead": "7e6a66b01f150561ea8c8d195c6bc7e3badd2df1"
 }

package/src/components/conversations/conversation_actions.tsx

@@ -4,12 +4,13 @@ import ReanimatedSwipeable, {
   SwipeableMethods,
 } from 'react-native-gesture-handler/ReanimatedSwipeable'
 import { useConversationsContext } from '../../contexts/conversations_context'
-import { useTheme } from '../../hooks'
+import { useTheme, useCreateAndroidRippleColor } from '../../hooks'
 import {
   useConversationsMarkRead,
   useConversationsMute,
 } from '../../hooks/use_conversations_actions'
 import { ConversationResource } from '../../types'
+import { platformPressedOpacityStyle } from '../../utils'
 import { tokens } from '../../vendor/tapestry/tokens'
 import { ActionToggleButton } from './action_toggle_button'
 
@@ -29,6 +30,9 @@ export function ConversationActions({
   const { activeConversationId, setActiveConversationId } = useConversationsContext()
   const [disabled, setDisabled] = useState(false)
   const overshootLeft = Platform.OS === 'ios'
+  const androidRippleColor = useCreateAndroidRippleColor({
+    color: styles.swipeableChildContainer.backgroundColor,
+  })
 
   const handleSwipeableClose = () => {
     setDisabled(false)
@@ -66,7 +70,11 @@ export function ConversationActions({
         <LeftActions conversation={conversation} onClose={handleSwipeableClose} />
       )}
     >
-      <Pressable onPress={handlePress} style={style}>
+      <Pressable
+        onPress={handlePress}
+        style={({ pressed }) => [style, pressed && platformPressedOpacityStyle]}
+        android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}
+      >
         {children}
       </Pressable>
     </ReanimatedSwipeable>

package/src/components/primitive/{actions_form_sheet.tsx → form_sheet.tsx}

@@ -1,9 +1,8 @@
 import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import React, { ReactNode } from 'react'
-import { AccessibilityRole, StyleSheet, View } from 'react-native'
+import { AccessibilityRole, Platform, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../hooks'
-import { PLATFORM_SHEET_ALLOWED_DETENTS_FIT_TO_CONTENTS } from '../../utils/navigation_constants'
 import { PlatformPressable } from '@react-navigation/elements'
 import { Icon, IconString, Text } from '../display'
 
@@ -11,70 +10,97 @@ import { Icon, IconString, Text } from '../display'
 // ====== Exports ==================
 // =================================
 
-export const BaseActionsFormSheetOptions: NativeStackNavigationOptions = {
+/**
+ * Screen options for the formsheet's NativeStackNavigation route
+ * @param {string} options.headerTitle - Doesn't show in UI but good to have for semantic reasons.
+ * @param {number[]} [options.sheetAllowedDetents] - Controls the height increments the sheet grows to. To prevent bugs in Android, do not specify more then two values and use [0.94] instead of [1] to go full screen.
+ * @param {NativeStackNavigationOptions} [options.rest] - Adds or overrides any valid NativeStackNavigationOptions
+ * @returns {NativeStackNavigationOptions} Merged NativeStackNavigationOptions
+ */
+export const getFormSheetScreenOptions = ({
+  headerTitle,
+  sheetAllowedDetents = [0.25],
+  ...rest
+}: NativeStackNavigationOptions = {}): NativeStackNavigationOptions => ({
   presentation: 'formSheet',
   headerShown: false,
-  sheetAllowedDetents: PLATFORM_SHEET_ALLOWED_DETENTS_FIT_TO_CONTENTS,
+  sheetAllowedDetents,
   sheetCornerRadius: 16,
-}
-
-const ActionsFormSheet = {
-  Root: ActionsFormSheetRoot,
-  Action: ActionsFormSheetAction,
+  sheetGrabberVisible: true,
+  headerTitle,
+  ...rest,
+})
+
+const FormSheet = {
+  Root: FormSheetRoot,
+  Action: FormSheetAction,
 } as const
 
-type ActionFormSheetComponents = {
-  Root: React.FC<ActionsFormSheetRootProps>
-  Action: React.FC<ActionsFormSheetActionProps>
+type FormSheetComponents = {
+  Root: React.FC<FormSheetRootProps>
+  Action: React.FC<FormSheetActionProps>
 }
 
-export default ActionsFormSheet as ActionFormSheetComponents
-export type { ActionsFormSheetRootProps, ActionsFormSheetActionProps }
+export default FormSheet as FormSheetComponents
+export type { FormSheetRootProps, FormSheetActionProps }
 
 // ====================================
 // ====== ActionsFormSheetRoot ========
 // ====================================
 
-interface ActionsFormSheetRootProps {
+interface FormSheetRootProps {
   children: ReactNode
 }
 
-export function ActionsFormSheetRoot({ children }: ActionsFormSheetRootProps) {
+export function FormSheetRoot({ children }: FormSheetRootProps) {
   const styles = useStyles()
 
   return (
     <View style={styles.container}>
-      <View style={styles.gestureBar} />
-      <View style={styles.actions}>{children}</View>
+      <AndroidSheetGrabber />
+      <View style={styles.content}>{children}</View>
     </View>
   )
 }
 
-ActionsFormSheetRoot.displayName = 'ActionsFormSheet.Root'
+FormSheetRoot.displayName = 'FormSheet.Root'
+
+// ====================================
+// ====== AndroidSheetGrabber =========
+// ====================================
+
+function AndroidSheetGrabber() {
+  const styles = useStyles()
+
+  return Platform.select({
+    android: <View style={styles.androidSheetGrabber} />,
+    ios: null,
+  })
+}
 
 // ====================================
 // ====== ActionsFormSheetAction ======
 // ====================================
 
-const ACTION_FORM_SHEET_ACTION_APPEARANCES = {
+const FORM_SHEET_ACTION_APPEARANCES = {
   neutral: 'neutral',
   danger: 'danger',
 } as const
 
-type ActionsFormSheetActionAppearanceUnion =
-  (typeof ACTION_FORM_SHEET_ACTION_APPEARANCES)[keyof typeof ACTION_FORM_SHEET_ACTION_APPEARANCES]
+type FormSheetActionAppearanceUnion =
+  (typeof FORM_SHEET_ACTION_APPEARANCES)[keyof typeof FORM_SHEET_ACTION_APPEARANCES]
 
-interface ActionsFormSheetActionProps {
+interface FormSheetActionProps {
   title: string
   iconName: IconString
   onPress: () => void
   accessibilityLabel?: string
   accessibilityHint?: string
   accessibilityRole?: AccessibilityRole
-  appearance?: ActionsFormSheetActionAppearanceUnion
+  appearance?: FormSheetActionAppearanceUnion
 }
 
-function ActionsFormSheetAction({
+function FormSheetAction({
   title,
   iconName,
   onPress,
@@ -82,7 +108,7 @@ function ActionsFormSheetAction({
   accessibilityHint,
   accessibilityRole = 'button',
   appearance = 'neutral',
-}: ActionsFormSheetActionProps) {
+}: FormSheetActionProps) {
   const styles = useStyles({ appearance })
 
   return (
@@ -99,14 +125,14 @@ function ActionsFormSheetAction({
   )
 }
 
-ActionsFormSheetAction.displayName = 'ActionsFormSheet.Action'
+FormSheetAction.displayName = 'FormSheet.Action'
 
 // ==================================
 // ====== Styles ====================
 // ==================================
 
 interface Styles {
-  appearance?: ActionsFormSheetActionAppearanceUnion
+  appearance?: FormSheetActionAppearanceUnion
 }
 
 const useStyles = ({ appearance = 'neutral' }: Styles = {}) => {
@@ -128,20 +154,20 @@ const useStyles = ({ appearance = 'neutral' }: Styles = {}) => {
     container: {
       flex: 1,
       justifyContent: 'flex-start',
-      paddingTop: 12,
       paddingBottom: bottom,
       width: '100%',
       backgroundColor: colors.fillColorNeutral100Inverted,
     },
-    gestureBar: {
-      width: 32,
-      height: 4,
-      backgroundColor: colors.fillColorNeutral050Base,
+    androidSheetGrabber: {
+      marginTop: 5,
+      width: 34,
+      height: 5,
+      backgroundColor: colors.fillColorNeutral040,
       borderRadius: 100,
       alignSelf: 'center',
     },
-    actions: {
-      paddingTop: 20,
+    content: {
+      paddingTop: Platform.select({ android: 16, ios: 20 }),
     },
     actionPressable: {
       flexDirection: 'row',

package/src/navigation/index.tsx

@@ -219,10 +219,7 @@ export const ChatStack = createNativeStackNavigator({
     },
     MessageReadReceipts: {
       screen: MessageReadReceiptsScreen,
-      options: {
-        ...MessageReadReceiptsScreenOptions,
-        headerTitle: 'Read receipts',
-      },
+      options: MessageReadReceiptsScreenOptions,
     },
     BugReport: {
       screen: BugReportScreen,

package/src/screens/attachment_actions/attachment_actions_screen.tsx

@@ -1,12 +1,12 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React from 'react'
 import { Linking } from 'react-native'
-import ActionsFormSheet, {
-  BaseActionsFormSheetOptions,
-} from '../../components/primitive/actions_form_sheet'
+import FormSheet, { getFormSheetScreenOptions } from '../../components/primitive/form_sheet'
 import { useDeleteAttachment } from './hooks/useDeleteAttachment'
 
-export const AttachmentActionsScreenOptions = BaseActionsFormSheetOptions
+export const AttachmentActionsScreenOptions = getFormSheetScreenOptions({
+  headerTitle: 'Attachment actions',
+})
 
 export type AttachmentActionsScreenProps = StaticScreenProps<{
   attachmentId: string
@@ -43,8 +43,8 @@ export function AttachmentActionsScreen({ route }: AttachmentActionsScreenProps)
   }
 
   return (
-    <ActionsFormSheet.Root>
-      <ActionsFormSheet.Action
+    <FormSheet.Root>
+      <FormSheet.Action
         iconName="general.newWindow"
         title="Open in browser"
         accessibilityRole="link"
@@ -53,14 +53,14 @@ export function AttachmentActionsScreen({ route }: AttachmentActionsScreenProps)
         onPress={handleOpenInBrowser}
       />
       {canDelete && (
-        <ActionsFormSheet.Action
+        <FormSheet.Action
           appearance="danger"
           iconName="publishing.trash"
           title={`Delete ${attachmentName}`}
           onPress={handleDeleteAttachment}
         />
       )}
-    </ActionsFormSheet.Root>
+    </FormSheet.Root>
   )
 }