@planningcenter/chat-react-native 3.7.1-rc.0 → 3.7.1-rc.2

package/build/screens/reactions_screen.js

@@ -1,19 +1,22 @@
-import React from 'react';
-import { StyleSheet, useWindowDimensions, View } from 'react-native';
+import React, { memo } from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import { FlatList } from 'react-native-gesture-handler';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Avatar, Text } from '../components';
-import { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction';
+import { REACTION_EMOJIS } from '../components/conversation/message_reaction';
 import { Tabs } from '../components/display/tabs';
 import { useSuspenseGet, useTheme } from '../hooks';
 import { useConversationMessages } from '../hooks/use_conversation_messages';
-import { FlashList } from '@shopify/flash-list';
-export const ReactionsScreenOptions = {
-    presentation: 'formSheet',
-    headerShown: false,
-    sheetAllowedDetents: [0.5],
-    sheetGrabberVisible: true,
-    sheetCornerRadius: 16,
-};
+import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet';
+import { platformFontWeightMedium } from '../utils';
+import { useFontScale } from '../hooks/use_font_scale';
+export const ReactionsScreenOptions = getFormSheetScreenOptions({
+    sheetAllowedDetents: Platform.select({
+        android: [0.5, 0.94], // Going straight to full 0.94 preserves height of screen on Android
+        default: [0.5, 1],
+    }),
+    headerTitle: 'Reactions',
+});
 export function ReactionsScreen({ route }) {
     const { conversation_id, message_id, reaction_value } = route.params;
     const styles = useStyles();
@@ -38,54 +41,65 @@ export function ReactionsScreen({ route }) {
     }
     const authorIds = reactionCount.authorIds;
     const authors = members.filter(member => authorIds.includes(member.id));
-    return (<View style={styles.container}>
+    return (<FormSheet.Root contentStyle={styles.formSheetContent}>
       <Tabs data={reactionCounts} activeTab={reactionCount} onTabPress={item => {
             setReactionCountValue(item.value);
         }} renderItem={({ item }) => (<Reaction active={reactionCount.id === item.id} reaction={item} onPress={() => setReactionCountValue(item.value)}/>)} style={styles.actions}/>
-      <FlashList data={authors} keyExtractor={item => item.id.toString()} renderItem={({ item: author }) => (<View style={styles.authorList}>
-            <Avatar size={'md'} sourceUri={author.avatar}/>
-            <Text key={author.id}>{author.name}</Text>
-          </View>)}/>
-    </View>);
+      <FlatList data={authors} contentContainerStyle={styles.contentContainer} keyExtractor={item => item.id.toString()} renderItem={({ item: author }) => <Author author={author} key={author.id}/>}/>
+    </FormSheet.Root>);
 }
 const Reaction = ({ reaction, }) => {
     const styles = useStyles();
-    const reactionStyles = useReactionStyles({ mine: reaction.mine ? 1 : 0 });
     return (<View key={reaction.value} style={styles.reaction}>
-      <Text style={reactionStyles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
-      <Text style={reactionStyles.reactionEmoji}>{reaction.count}</Text>
+      <Text style={styles.reactionContent}>{REACTION_EMOJIS[reaction.value]}</Text>
+      <Text style={styles.reactionContent}>{reaction.count}</Text>
     </View>);
 };
+const Author = memo(({ author }) => {
+    const styles = useStyles();
+    return (<View style={styles.authorRow}>
+      <Avatar sourceUri={author.avatar} size="sm"/>
+      <Text variant="tertiary" numberOfLines={2} style={styles.authorName}>
+        {author.name}
+      </Text>
+    </View>);
+});
 const useStyles = () => {
-    const theme = useTheme();
-    const { height } = useWindowDimensions();
+    const { colors } = useTheme();
     const { bottom } = useSafeAreaInsets();
+    const fontScale = useFontScale({ maxFontSizeMultiplier: 1.3 });
     return StyleSheet.create({
-        container: {
-            justifyContent: 'flex-start',
-            paddingTop: 12,
-            paddingBottom: bottom,
-            width: '100%',
-            backgroundColor: theme.colors.fillColorNeutral100Inverted,
-            height,
-            gap: 8,
+        formSheetContent: {
+            paddingTop: Platform.select({ android: 4, default: 16 }),
         },
-        authorList: {
+        contentContainer: {
+            paddingTop: 8,
+            paddingBottom: bottom + Platform.select({ android: 24, default: 16 }),
+        },
+        authorRow: {
             flexDirection: 'row',
             alignItems: 'center',
             gap: 8,
-            paddingHorizontal: 12,
-            paddingVertical: 12,
+            paddingVertical: 8,
+            paddingHorizontal: 16,
+            flex: 1,
+        },
+        authorName: {
+            flex: 1,
         },
         reaction: {
-            paddingVertical: 12,
-            paddingHorizontal: 12,
+            paddingHorizontal: 8,
+            paddingVertical: 16,
             flexDirection: 'row',
             gap: 4,
         },
+        reactionContent: {
+            fontSize: 18,
+            fontWeight: platformFontWeightMedium,
+        },
         actions: {
-            minHeight: 48,
-            borderBottomColor: theme.colors.fillColorNeutral040,
+            minHeight: 68 * fontScale,
+            borderBottomColor: colors.borderColorDefaultBase,
             borderBottomWidth: 1,
         },
         errorContainer: {

package/build/screens/reactions_screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"reactions_screen.js","sourceRoot":"","sources":["../../src/screens/reactions_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StaticScreenProps } from '@react-navigation/native'\nimport { NativeStackNavigationOptions } from '@react-navigation/native-stack'\nimport React from 'react'\nimport { StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Avatar, Text } from '../components'\nimport { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction'\nimport { Tabs } from '../components/display/tabs'\nimport { useSuspenseGet, useTheme } from '../hooks'\nimport { useConversationMessages } from '../hooks/use_conversation_messages'\nimport { MemberResource } from '../types'\nimport { ReactionCountResource } from '../types/resources/reaction'\nimport { FlashList } from '@shopify/flash-list'\n\nexport const ReactionsScreenOptions: NativeStackNavigationOptions = {\n  presentation: 'formSheet',\n  headerShown: false,\n  sheetAllowedDetents: [0.5],\n  sheetGrabberVisible: true,\n  sheetCornerRadius: 16,\n}\n\nexport type ReactionScreenProps = StaticScreenProps<{\n  message_id: string\n  conversation_id: number\n  reaction_value?: string\n}>\n\nexport function ReactionsScreen({ route }: ReactionScreenProps) {\n  const { conversation_id, message_id, reaction_value } = route.params\n  const styles = useStyles()\n\n  const { messages } = useConversationMessages({ conversation_id }, { refetchOnMount: false })\n  const { data: members } = useSuspenseGet<MemberResource[]>({\n    url: `/me/conversations/${conversation_id}/members`,\n    data: {\n      fields: {\n        Member: ['id', 'name', 'avatar', 'badges', 'child', 'role'],\n      },\n    },\n  })\n  const message = messages.find(m => m.id === message_id)\n  const reactionCounts = message?.reactionCounts || []\n  const initialReactionCount =\n    reactionCounts.find(r => r.value === reaction_value) || reactionCounts[0]\n  const [reactionCountValue, setReactionCountValue] = React.useState<\n    ReactionCountResource['value']\n  >(initialReactionCount.value)\n  const reactionCount = reactionCounts.find(r => r.value === reactionCountValue)\n\n  if (!reactionCount) {\n    return (\n      <View style={styles.errorContainer}>\n        <Text>No reactions found for this message.</Text>\n      </View>\n    )\n  }\n\n  const authorIds = reactionCount.authorIds\n  const authors = members.filter(member => authorIds.includes(member.id))\n\n  return (\n    <View style={styles.container}>\n      <Tabs\n        data={reactionCounts}\n        activeTab={reactionCount}\n        onTabPress={item => {\n          setReactionCountValue(item.value)\n        }}\n        renderItem={({ item }) => (\n          <Reaction\n            active={reactionCount.id === item.id}\n            reaction={item}\n            onPress={() => setReactionCountValue(item.value)}\n          />\n        )}\n        style={styles.actions}\n      />\n      <FlashList\n        data={authors}\n        keyExtractor={item => item.id.toString()}\n        renderItem={({ item: author }) => (\n          <View style={styles.authorList}>\n            <Avatar size={'md'} sourceUri={author.avatar} />\n            <Text key={author.id}>{author.name}</Text>\n          </View>\n        )}\n      />\n    </View>\n  )\n}\n\nconst Reaction = ({\n  reaction,\n}: {\n  active: boolean\n  reaction: ReactionCountResource\n  onPress: () => void\n}) => {\n  const styles = useStyles()\n  const reactionStyles = useReactionStyles({ mine: reaction.mine ? 1 : 0 })\n\n  return (\n    <View key={reaction.value} style={styles.reaction}>\n      <Text style={reactionStyles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>\n      <Text style={reactionStyles.reactionEmoji}>{reaction.count}</Text>\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const theme = useTheme()\n  const { height } = useWindowDimensions()\n  const { bottom } = useSafeAreaInsets()\n\n  return StyleSheet.create({\n    container: {\n      justifyContent: 'flex-start',\n      paddingTop: 12,\n      paddingBottom: bottom,\n      width: '100%',\n      backgroundColor: theme.colors.fillColorNeutral100Inverted,\n      height,\n      gap: 8,\n    },\n    authorList: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 8,\n      paddingHorizontal: 12,\n      paddingVertical: 12,\n    },\n    reaction: {\n      paddingVertical: 12,\n      paddingHorizontal: 12,\n      flexDirection: 'row',\n      gap: 4,\n    },\n    actions: {\n      minHeight: 48,\n      borderBottomColor: theme.colors.fillColorNeutral040,\n      borderBottomWidth: 1,\n    },\n    errorContainer: {\n      flex: 1,\n      justifyContent: 'center',\n      alignItems: 'center',\n      padding: 16,\n      marginTop: 30,\n    },\n  })\n}\n"]}
+{"version":3,"file":"reactions_screen.js","sourceRoot":"","sources":["../../src/screens/reactions_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StaticScreenProps } from '@react-navigation/native'\nimport React, { memo } from 'react'\nimport { Platform, StyleSheet, View } from 'react-native'\nimport { FlatList } from 'react-native-gesture-handler'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Avatar, Text } from '../components'\nimport { REACTION_EMOJIS } from '../components/conversation/message_reaction'\nimport { Tabs } from '../components/display/tabs'\nimport { useSuspenseGet, useTheme } from '../hooks'\nimport { useConversationMessages } from '../hooks/use_conversation_messages'\nimport { MemberResource } from '../types'\nimport { ReactionCountResource } from '../types/resources/reaction'\nimport FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'\nimport { platformFontWeightMedium } from '../utils'\nimport { useFontScale } from '../hooks/use_font_scale'\n\nexport const ReactionsScreenOptions = getFormSheetScreenOptions({\n  sheetAllowedDetents: Platform.select({\n    android: [0.5, 0.94], // Going straight to full 0.94 preserves height of screen on Android\n    default: [0.5, 1],\n  }),\n  headerTitle: 'Reactions',\n})\n\nexport type ReactionScreenProps = StaticScreenProps<{\n  message_id: string\n  conversation_id: number\n  reaction_value?: string\n}>\n\nexport function ReactionsScreen({ route }: ReactionScreenProps) {\n  const { conversation_id, message_id, reaction_value } = route.params\n  const styles = useStyles()\n\n  const { messages } = useConversationMessages({ conversation_id }, { refetchOnMount: false })\n  const { data: members } = useSuspenseGet<MemberResource[]>({\n    url: `/me/conversations/${conversation_id}/members`,\n    data: {\n      fields: {\n        Member: ['id', 'name', 'avatar', 'badges', 'child', 'role'],\n      },\n    },\n  })\n  const message = messages.find(m => m.id === message_id)\n  const reactionCounts = message?.reactionCounts || []\n  const initialReactionCount =\n    reactionCounts.find(r => r.value === reaction_value) || reactionCounts[0]\n  const [reactionCountValue, setReactionCountValue] = React.useState<\n    ReactionCountResource['value']\n  >(initialReactionCount.value)\n  const reactionCount = reactionCounts.find(r => r.value === reactionCountValue)\n\n  if (!reactionCount) {\n    return (\n      <View style={styles.errorContainer}>\n        <Text>No reactions found for this message.</Text>\n      </View>\n    )\n  }\n\n  const authorIds = reactionCount.authorIds\n  const authors = members.filter(member => authorIds.includes(member.id))\n\n  return (\n    <FormSheet.Root contentStyle={styles.formSheetContent}>\n      <Tabs\n        data={reactionCounts}\n        activeTab={reactionCount}\n        onTabPress={item => {\n          setReactionCountValue(item.value)\n        }}\n        renderItem={({ item }) => (\n          <Reaction\n            active={reactionCount.id === item.id}\n            reaction={item}\n            onPress={() => setReactionCountValue(item.value)}\n          />\n        )}\n        style={styles.actions}\n      />\n      <FlatList\n        data={authors}\n        contentContainerStyle={styles.contentContainer}\n        keyExtractor={item => item.id.toString()}\n        renderItem={({ item: author }) => <Author author={author} key={author.id} />}\n      />\n    </FormSheet.Root>\n  )\n}\n\nconst Reaction = ({\n  reaction,\n}: {\n  active: boolean\n  reaction: ReactionCountResource\n  onPress: () => void\n}) => {\n  const styles = useStyles()\n\n  return (\n    <View key={reaction.value} style={styles.reaction}>\n      <Text style={styles.reactionContent}>{REACTION_EMOJIS[reaction.value]}</Text>\n      <Text style={styles.reactionContent}>{reaction.count}</Text>\n    </View>\n  )\n}\n\ntype AuthorProps = Pick<MemberResource, 'id' | 'name' | 'avatar'>\n\nconst Author = memo(({ author }: { author: AuthorProps }) => {\n  const styles = useStyles()\n\n  return (\n    <View style={styles.authorRow}>\n      <Avatar sourceUri={author.avatar} size=\"sm\" />\n      <Text variant=\"tertiary\" numberOfLines={2} style={styles.authorName}>\n        {author.name}\n      </Text>\n    </View>\n  )\n})\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n  const { bottom } = useSafeAreaInsets()\n  const fontScale = useFontScale({ maxFontSizeMultiplier: 1.3 })\n\n  return StyleSheet.create({\n    formSheetContent: {\n      paddingTop: Platform.select({ android: 4, default: 16 }),\n    },\n    contentContainer: {\n      paddingTop: 8,\n      paddingBottom: bottom + Platform.select({ android: 24, default: 16 }),\n    },\n    authorRow: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 8,\n      paddingVertical: 8,\n      paddingHorizontal: 16,\n      flex: 1,\n    },\n    authorName: {\n      flex: 1,\n    },\n    reaction: {\n      paddingHorizontal: 8,\n      paddingVertical: 16,\n      flexDirection: 'row',\n      gap: 4,\n    },\n    reactionContent: {\n      fontSize: 18,\n      fontWeight: platformFontWeightMedium,\n    },\n    actions: {\n      minHeight: 68 * fontScale,\n      borderBottomColor: colors.borderColorDefaultBase,\n      borderBottomWidth: 1,\n    },\n    errorContainer: {\n      flex: 1,\n      justifyContent: 'center',\n      alignItems: 'center',\n      padding: 16,\n      marginTop: 30,\n    },\n  })\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.7.1-rc.0",
+  "version": "3.7.1-rc.2",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "5cf4db13bcc0470ed9bc5f8489b3c2f1ae9493af"
+  "gitHead": "77bc347b971eb160e5f56a026899e1633e3113d1"
 }

package/src/components/primitive/form_sheet.tsx

@@ -6,6 +6,8 @@ import {
   View,
   useWindowDimensions,
   type AccessibilityRole,
+  type StyleProp,
+  type ViewStyle,
 } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../hooks'
@@ -58,15 +60,17 @@ export type { FormSheetRootProps, FormSheetActionProps, FormSheetHeaderProps }
 
 interface FormSheetRootProps {
   children: ReactNode
+  style?: StyleProp<ViewStyle>
+  contentStyle?: StyleProp<ViewStyle>
 }
 
-export function FormSheetRoot({ children }: FormSheetRootProps) {
+export function FormSheetRoot({ children, style, contentStyle }: FormSheetRootProps) {
   const styles = useStyles()
 
   return (
-    <View style={styles.container} collapsable={false}>
+    <View style={[styles.container, style]} collapsable={false}>
       <AndroidSheetGrabber />
-      <View style={styles.content}>{children}</View>
+      <View style={[styles.content, contentStyle]}>{children}</View>
     </View>
   )
 }

package/src/screens/conversation_filter_recipients/components/checkbox_row.tsx

@@ -2,20 +2,24 @@ import { Pressable, View, StyleSheet, type ViewStyle } from 'react-native'
 import { useTheme } from '../../../hooks'
 import { Icon, Text } from '../../../components'
 import { tokens } from '../../../vendor/tapestry/tokens'
-import { ConversationFilterRecipientsScreenProps, TeamProps } from '../types'
+import { ConversationFilterRecipientsScreenProps, SetTeamFilters, TeamProps } from '../types'
 import { type RouteProp, useRoute } from '@react-navigation/native'
-import { useFilterRecipientsContext } from '../context/conversation_filter_recipients_context'
 
 interface TeamRowProps {
   data: TeamProps
   style?: ViewStyle
   accessibilityLabelledBy: string
+  setTeamFilters: SetTeamFilters
 }
 
-export const CheckboxRow = ({ data, style, accessibilityLabelledBy }: TeamRowProps) => {
+export const CheckboxRow = ({
+  data,
+  style,
+  accessibilityLabelledBy,
+  setTeamFilters,
+}: TeamRowProps) => {
   const styles = useStyles()
   const route = useRoute<RouteProp<ConversationFilterRecipientsScreenProps['route']>>()
-  const { setTeamFilters } = useFilterRecipientsContext()
 
   const { teamId, teamName } = data
   const { team_ids: currentTeamIds } = route.params

package/src/screens/conversation_filter_recipients/components/header_row.tsx

@@ -1,11 +1,14 @@
 import { View, StyleSheet, type ViewStyle } from 'react-native'
 import { useTheme } from '../../../hooks'
 import { Icon, Heading, TextButton } from '../../../components'
-import type { ConversationFilterRecipientsScreenProps, ServiceTypeProps } from '../types'
+import type {
+  ConversationFilterRecipientsScreenProps,
+  ServiceTypeProps,
+  SetTeamFilters,
+} from '../types'
 import { tokens } from '../../../vendor/tapestry/tokens'
 import { pluralize } from '../../../utils'
 import { useRoute, type RouteProp } from '@react-navigation/native'
-import { useFilterRecipientsContext } from '../context/conversation_filter_recipients_context'
 
 const BULK_SELECT_LIMIT = 10
 
@@ -13,11 +16,11 @@ interface HeaderRowProps {
   data: ServiceTypeProps
   nativeID: string
   style?: ViewStyle
+  setTeamFilters: SetTeamFilters
 }
 
-export const HeaderRow = ({ data, nativeID, style }: HeaderRowProps) => {
+export const HeaderRow = ({ data, nativeID, style, setTeamFilters }: HeaderRowProps) => {
   const styles = useStyles()
-  const { setTeamFilters } = useFilterRecipientsContext()
   const route = useRoute<RouteProp<ConversationFilterRecipientsScreenProps['route']>>()
 
   const { serviceTypeName, teamIdsForServiceType } = data

package/src/screens/conversation_filter_recipients/conversation_filter_recipients_screen.tsx

@@ -1,38 +1,35 @@
-import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
-import React from 'react'
-import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
+import { NativeStackNavigationProp } from '@react-navigation/native-stack'
+import React, { useCallback } from 'react'
+import { Platform, StyleSheet } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { FlashList } from '@shopify/flash-list'
-import { Heading } from '../../components'
+import { FlatList } from 'react-native-gesture-handler'
+import { Button, Heading, TextButton } from '../../components'
 import { useTheme } from '../../hooks'
 import { useFlattenedArrayOfServiceTypesWithTeams } from './hooks/use_flattened_array_of_service_types_with_teams'
 import { ConversationFilterRecipientsScreenProps, SectionTypes } from './types'
 import { HeaderRow } from './components/header_row'
 import { tokens } from '../../vendor/tapestry/tokens'
 import { CheckboxRow } from './components/checkbox_row'
-import { useHeaderHeight } from '@react-navigation/elements'
-import { FilterRecipientsProvider } from './context/conversation_filter_recipients_context'
-import { HeaderRightWithContext, FilterHeaderTitle } from './components/navigation_header'
 import { useServiceTypesWithTeams } from './hooks/use_service_types_with_teams'
+import { StackActions, useNavigation } from '@react-navigation/native'
+import FormSheet, { getFormSheetScreenOptions } from '../../components/primitive/form_sheet'
 
 const SERVICE_TYPE_LABELLED_BY_PREFIX = 'header-'
 
-export const ConversationFilterReceipientsScreenOptions: NativeStackNavigationOptions = {
-  presentation: Platform.select({ android: 'modal', ios: 'formSheet' }),
+export const ConversationFilterReceipientsScreenOptions = getFormSheetScreenOptions({
   sheetAllowedDetents: Platform.select({
     android: [0.75, 0.94],
     default: [0.75, 1],
   }),
-  sheetGrabberVisible: true,
-  headerBackVisible: false,
-  headerRight: HeaderRightWithContext,
-  headerTitle: FilterHeaderTitle,
-  headerTitleAlign: 'left',
-  sheetCornerRadius: 16,
-}
+  headerTitle: 'Teams I lead',
+})
 
-export const ConversationFilterRecipientsScreen = ({}: ConversationFilterRecipientsScreenProps) => {
+export const ConversationFilterRecipientsScreen = ({
+  route,
+}: ConversationFilterRecipientsScreenProps) => {
   const styles = useStyles()
+  const navigation =
+    useNavigation<NativeStackNavigationProp<ConversationFilterRecipientsScreenProps>>()
 
   const { serviceTypes } = useServiceTypesWithTeams()
   const data = useFlattenedArrayOfServiceTypesWithTeams({
@@ -41,69 +38,99 @@ export const ConversationFilterRecipientsScreen = ({}: ConversationFilterRecipie
     lastRowStyle: styles.lastRow,
   })
 
+  const { params } = route
+  const noTeamsSelected = params.team_ids?.length === 0 || !params.team_ids
+  const applyButtonAccessibilityHint = noTeamsSelected
+    ? 'Select at least one team to navigate to the final step in creating your conversation.'
+    : 'Saves selected teams and navigates to the final step to create your conversation.'
+
+  const setTeamFilters = useCallback(
+    ({ team_ids }: { team_ids: number[] }) => {
+      navigation.setParams({
+        team_ids,
+      })
+    },
+    [navigation]
+  )
+
+  const resetTeamFilters = useCallback(() => {
+    navigation.goBack()
+  }, [navigation])
+
+  const applyTeamFilters = useCallback(() => {
+    navigation.dispatch(StackActions.popTo('ConversationNew', params))
+  }, [navigation, params])
+
   return (
-    <FilterRecipientsProvider>
-      <View style={styles.listWrapper}>
-        <FlashList
-          data={data}
-          ListHeaderComponent={
-            <Heading variant="h3" style={styles.listHeader}>
-              Service Types
-            </Heading>
+    <FormSheet.Root>
+      <FormSheet.Header
+        title="Teams I lead"
+        secondaryButton={
+          <TextButton
+            onPress={resetTeamFilters}
+            accessibilityHint="Cancels any selected teams and closes this modal."
+          >
+            Cancel
+          </TextButton>
+        }
+        primaryButton={
+          <Button
+            title="Apply"
+            accessibilityHint={applyButtonAccessibilityHint}
+            onPress={applyTeamFilters}
+            disabled={noTeamsSelected}
+          />
+        }
+      />
+      <FlatList
+        data={data}
+        ListHeaderComponent={
+          <Heading variant="h3" style={styles.listHeader}>
+            Service Types
+          </Heading>
+        }
+        contentContainerStyle={styles.listContentContainer}
+        keyExtractor={item =>
+          `${item.type === SectionTypes.header ? item.data.serviceTypeId : item.data.teamId}`
+        }
+        renderItem={({ item }) => {
+          switch (item.type) {
+            case SectionTypes.header:
+              return (
+                <HeaderRow
+                  data={item.data}
+                  style={item.sectionStyle}
+                  nativeID={`${SERVICE_TYPE_LABELLED_BY_PREFIX}${item.data.serviceTypeId}`}
+                  setTeamFilters={setTeamFilters}
+                />
+              )
+            case SectionTypes.team:
+              return (
+                <CheckboxRow
+                  data={item.data}
+                  style={item.sectionStyle}
+                  accessibilityLabelledBy={`${SERVICE_TYPE_LABELLED_BY_PREFIX}${item.data.serviceTypeId}`}
+                  setTeamFilters={setTeamFilters}
+                />
+              )
+            default:
+              return null
           }
-          estimatedItemSize={50}
-          contentContainerStyle={styles.listContentContainer}
-          keyExtractor={item =>
-            `${item.type === SectionTypes.header ? item.data.serviceTypeId : item.data.teamId}`
-          }
-          renderItem={({ item }) => {
-            switch (item.type) {
-              case SectionTypes.header:
-                return (
-                  <HeaderRow
-                    data={item.data}
-                    style={item.sectionStyle}
-                    nativeID={`${SERVICE_TYPE_LABELLED_BY_PREFIX}${item.data.serviceTypeId}`}
-                  />
-                )
-              case SectionTypes.team:
-                return (
-                  <CheckboxRow
-                    data={item.data}
-                    style={item.sectionStyle}
-                    accessibilityLabelledBy={`${SERVICE_TYPE_LABELLED_BY_PREFIX}${item.data.serviceTypeId}`}
-                  />
-                )
-              default:
-                return null
-            }
-          }}
-        />
-      </View>
-    </FilterRecipientsProvider>
+        }}
+      />
+    </FormSheet.Root>
   )
 }
 
 const useStyles = () => {
   const { colors } = useTheme()
-  const { top, bottom } = useSafeAreaInsets()
-  const { height } = useWindowDimensions()
-  const headerHeight = useHeaderHeight()
-
-  const containerHeight = Platform.select({
-    android: height,
-    ios: height - top - headerHeight,
-  })
+  const { bottom } = useSafeAreaInsets()
 
   return StyleSheet.create({
-    listWrapper: {
-      flex: 1,
-      height: containerHeight,
-      backgroundColor: colors.surfaceColor080,
-    },
     listContentContainer: {
+      backgroundColor: colors.surfaceColor080,
       padding: 16,
-      paddingBottom: bottom,
+      paddingBottom: bottom + Platform.select({ android: 24, default: 16 }),
     },
     listHeader: {
       paddingBottom: 16,

package/src/screens/conversation_filter_recipients/types.tsx

@@ -45,3 +45,5 @@ export type ConversationFilterRecipientsParams = {
 
 export type ConversationFilterRecipientsScreenProps =
   StaticScreenProps<ConversationFilterRecipientsParams>
+
+export type SetTeamFilters = ({ team_ids }: { team_ids: number[] }) => void

package/src/screens/message_actions_screen.tsx

@@ -5,7 +5,7 @@ import React, { useCallback } from 'react'
 import { Alert, Platform, StyleSheet, View } from 'react-native'
 import { Text } from '../components'
 import { REACTION_EMOJIS, useReactionStyles } from '../components/conversation/message_reaction'
-import { useCreateAndroidRippleColor, useTheme } from '../hooks'
+import { useCreateAndroidRippleColor, useFontScale, useTheme } from '../hooks'
 import { useApiClient } from '../hooks/use_api_client'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
 import { useMessageReactionToggle } from '../hooks/use_message_reaction_toggle'
@@ -203,9 +203,10 @@ const Reaction = ({
 
 const useStyles = () => {
   const { colors } = useTheme()
+  const fontScale = useFontScale({ maxFontSizeMultiplier: 1.3 })
 
   const btnBorderWidth = 1
-  const baseSize = 44
+  const baseSize = 44 * fontScale
   const reactionBtnSize = Platform.select({
     ios: baseSize,
     android: baseSize + btnBorderWidth * 2,