@planningcenter/chat-react-native 3.14.0-rc.5 → 3.15.0-rc.0

package/build/screens/conversations/conversations_screen.js

@@ -5,7 +5,7 @@ import { Conversations, TextButton } from '../../components';
 import { ActionButton } from '../../components/display/action_button';
 import { ConversationsContextProvider } from '../../contexts/conversations_context';
 import { useCanCreateConversations } from '../../hooks';
-import { destructureChatGroupGraphId } from '../../utils';
+import { destructureChatGroupGraphId, MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils';
 import { ListHeaderComponent } from './components/list_header_component';
 export function ConversationsScreen({ route }) {
     const navigation = useNavigation();
@@ -48,7 +48,7 @@ export function ConversationsScreen({ route }) {
       <ConversationsContextProvider args={route.params}>
         <Conversations ListHeaderComponent={ListHeaderComponent}/>
       </ConversationsContextProvider>
-      <ActionButton visible={canCreateConversations} title="New conversation" onPress={handleNewConversationNavigation} buttonIconNameLeft="churchCenter.signups" secondaryButton={<TextButton variant="tertiary" onPress={reportABug}>
+      <ActionButton visible={canCreateConversations} title="New conversation" onPress={handleNewConversationNavigation} buttonIconNameLeft="churchCenter.signups" secondaryButton={<TextButton variant="tertiary" onPress={reportABug} maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}>
             Report a bug
           </TextButton>}/>
     </View>);

package/build/screens/conversations/conversations_screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversations_screen.js","sourceRoot":"","sources":["../../../src/screens/conversations/conversations_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Conversations, TextButton } from '../../components'\nimport { ActionButton } from '../../components/display/action_button'\nimport { ConversationsContextProvider } from '../../contexts/conversations_context'\nimport { useCanCreateConversations } from '../../hooks'\nimport { GraphId } from '../../types/resources/group_resource'\nimport { destructureChatGroupGraphId } from '../../utils'\nimport { ListHeaderComponent } from './components/list_header_component'\nimport { AppName } from '../../types/resources/app_name'\n\nexport type ConversationsScreenProps = StaticScreenProps<{\n  title?: string\n  chat_group_graph_id?: GraphId\n  group_source_app_name?: AppName\n}>\n\nexport function ConversationsScreen({ route }: ConversationsScreenProps) {\n  const navigation = useNavigation()\n  const canCreateConversations = useCanCreateConversations()\n  const styles = useStyles()\n\n  const { chat_group_graph_id } = route.params || {}\n  const { sourceAppName, sourceId } = destructureChatGroupGraphId(chat_group_graph_id)\n\n  const handleNewConversationNavigation = () => {\n    if (sourceAppName === 'Services') {\n      return navigation.navigate('New', {\n        screen: 'ConversationNew',\n        params: {\n          team_ids: sourceId ? [sourceId] : [],\n          source_app_name: sourceAppName,\n          ...route.params,\n        },\n      })\n    }\n    if (sourceAppName === 'Groups') {\n      return navigation.navigate('New', {\n        screen: 'ConversationNew',\n        params: {\n          group_id: sourceId,\n          source_app_name: sourceAppName,\n          ...route.params,\n        },\n      })\n    }\n\n    return navigation.navigate('New', {\n      screen: 'ConversationSelectRecipients',\n      params: {\n        ...route.params,\n      },\n    })\n  }\n\n  const reportABug = () => {\n    return navigation.navigate('BugReport')\n  }\n\n  return (\n    <View style={styles.container}>\n      <ConversationsContextProvider args={route.params}>\n        <Conversations ListHeaderComponent={ListHeaderComponent} />\n      </ConversationsContextProvider>\n      <ActionButton\n        visible={canCreateConversations}\n        title=\"New conversation\"\n        onPress={handleNewConversationNavigation}\n        buttonIconNameLeft=\"churchCenter.signups\"\n        secondaryButton={\n          <TextButton variant=\"tertiary\" onPress={reportABug}>\n            Report a bug\n          </TextButton>\n        }\n      />\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      justifyContent: 'center',\n    },\n  })\n}\n"]}
+{"version":3,"file":"conversations_screen.js","sourceRoot":"","sources":["../../../src/screens/conversations/conversations_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StaticScreenProps, useNavigation } from '@react-navigation/native'\nimport React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Conversations, TextButton } from '../../components'\nimport { ActionButton } from '../../components/display/action_button'\nimport { ConversationsContextProvider } from '../../contexts/conversations_context'\nimport { useCanCreateConversations } from '../../hooks'\nimport { GraphId } from '../../types/resources/group_resource'\nimport { destructureChatGroupGraphId, MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'\nimport { ListHeaderComponent } from './components/list_header_component'\nimport { AppName } from '../../types/resources/app_name'\n\nexport type ConversationsScreenProps = StaticScreenProps<{\n  title?: string\n  chat_group_graph_id?: GraphId\n  group_source_app_name?: AppName\n}>\n\nexport function ConversationsScreen({ route }: ConversationsScreenProps) {\n  const navigation = useNavigation()\n  const canCreateConversations = useCanCreateConversations()\n  const styles = useStyles()\n\n  const { chat_group_graph_id } = route.params || {}\n  const { sourceAppName, sourceId } = destructureChatGroupGraphId(chat_group_graph_id)\n\n  const handleNewConversationNavigation = () => {\n    if (sourceAppName === 'Services') {\n      return navigation.navigate('New', {\n        screen: 'ConversationNew',\n        params: {\n          team_ids: sourceId ? [sourceId] : [],\n          source_app_name: sourceAppName,\n          ...route.params,\n        },\n      })\n    }\n    if (sourceAppName === 'Groups') {\n      return navigation.navigate('New', {\n        screen: 'ConversationNew',\n        params: {\n          group_id: sourceId,\n          source_app_name: sourceAppName,\n          ...route.params,\n        },\n      })\n    }\n\n    return navigation.navigate('New', {\n      screen: 'ConversationSelectRecipients',\n      params: {\n        ...route.params,\n      },\n    })\n  }\n\n  const reportABug = () => {\n    return navigation.navigate('BugReport')\n  }\n\n  return (\n    <View style={styles.container}>\n      <ConversationsContextProvider args={route.params}>\n        <Conversations ListHeaderComponent={ListHeaderComponent} />\n      </ConversationsContextProvider>\n      <ActionButton\n        visible={canCreateConversations}\n        title=\"New conversation\"\n        onPress={handleNewConversationNavigation}\n        buttonIconNameLeft=\"churchCenter.signups\"\n        secondaryButton={\n          <TextButton\n            variant=\"tertiary\"\n            onPress={reportABug}\n            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}\n          >\n            Report a bug\n          </TextButton>\n        }\n      />\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      justifyContent: 'center',\n    },\n  })\n}\n"]}

package/build/utils/styles.d.ts

@@ -1,4 +1,5 @@
 export declare const MAX_FONT_SIZE_MULTIPLIER = 1.5;
+export declare const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.3;
 export declare const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16;
 export declare const platformFontWeightMedium: "500" | "700" | undefined;
 export declare const platformFontWeightBold: "600" | "700" | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,wBAAwB,MAAM,CAAA;AAE3C,eAAO,MAAM,4CAA4C,KAAK,CAAA;AAE9D,eAAO,MAAM,wBAAwB,2BAGnC,CAAA;AAEF,eAAO,MAAM,sBAAsB,2BAGjC,CAAA;AAEF,eAAO,MAAM,2BAA2B;;aAGtC,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,wBAAwB,MAAM,CAAA;AAC3C,eAAO,MAAM,iCAAiC,MAAM,CAAA;AAEpD,eAAO,MAAM,4CAA4C,KAAK,CAAA;AAE9D,eAAO,MAAM,wBAAwB,2BAGnC,CAAA;AAEF,eAAO,MAAM,sBAAsB,2BAGjC,CAAA;AAEF,eAAO,MAAM,2BAA2B;;aAGtC,CAAA"}

package/build/utils/styles.js

@@ -1,6 +1,7 @@
 import { Platform } from 'react-native';
 import { tokens } from '../vendor/tapestry/tokens';
 export const MAX_FONT_SIZE_MULTIPLIER = 1.5;
+export const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.3; // Use in headers, footers, toolbars, etc.
 export const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16; // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created
 export const platformFontWeightMedium = Platform.select({
     ios: tokens.fontWeightMedium,

package/build/utils/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAElD,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;AAE3C,MAAM,CAAC,MAAM,4CAA4C,GAAG,EAAE,CAAA,CAAC,4FAA4F;AAE3J,MAAM,CAAC,MAAM,wBAAwB,GAAG,QAAQ,CAAC,MAAM,CAAC;IACtD,GAAG,EAAE,MAAM,CAAC,gBAAgB;IAC5B,OAAO,EAAE,MAAM,CAAC,cAAc;CAC/B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,QAAQ,CAAC,MAAM,CAAC;IACpD,GAAG,EAAE,MAAM,CAAC,kBAAkB;IAC9B,OAAO,EAAE,MAAM,CAAC,cAAc;CAC/B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,QAAQ,CAAC,MAAM,CAAC;IACzD,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;IACrB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;CACxB,CAAC,CAAA","sourcesContent":["import { Platform } from 'react-native'\nimport { tokens } from '../vendor/tapestry/tokens'\n\nexport const MAX_FONT_SIZE_MULTIPLIER = 1.5\n\nexport const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created\n\nexport const platformFontWeightMedium = Platform.select({\n  ios: tokens.fontWeightMedium,\n  android: tokens.fontWeightBold,\n})\n\nexport const platformFontWeightBold = Platform.select({\n  ios: tokens.fontWeightSemiBold,\n  android: tokens.fontWeightBold,\n})\n\nexport const platformPressedOpacityStyle = Platform.select({\n  ios: { opacity: 0.5 },\n  android: { opacity: 1 },\n})\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAA;AAElD,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;AAC3C,MAAM,CAAC,MAAM,iCAAiC,GAAG,GAAG,CAAA,CAAC,0CAA0C;AAE/F,MAAM,CAAC,MAAM,4CAA4C,GAAG,EAAE,CAAA,CAAC,4FAA4F;AAE3J,MAAM,CAAC,MAAM,wBAAwB,GAAG,QAAQ,CAAC,MAAM,CAAC;IACtD,GAAG,EAAE,MAAM,CAAC,gBAAgB;IAC5B,OAAO,EAAE,MAAM,CAAC,cAAc;CAC/B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,QAAQ,CAAC,MAAM,CAAC;IACpD,GAAG,EAAE,MAAM,CAAC,kBAAkB;IAC9B,OAAO,EAAE,MAAM,CAAC,cAAc;CAC/B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,QAAQ,CAAC,MAAM,CAAC;IACzD,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE;IACrB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE;CACxB,CAAC,CAAA","sourcesContent":["import { Platform } from 'react-native'\nimport { tokens } from '../vendor/tapestry/tokens'\n\nexport const MAX_FONT_SIZE_MULTIPLIER = 1.5\nexport const MAX_FONT_SIZE_MULTIPLIER_LANDMARK = 1.3 // Use in headers, footers, toolbars, etc.\n\nexport const CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL = 16 // TODO: move to `screens/conversation/utils/styles` when `/screens/conversation` is created\n\nexport const platformFontWeightMedium = Platform.select({\n  ios: tokens.fontWeightMedium,\n  android: tokens.fontWeightBold,\n})\n\nexport const platformFontWeightBold = Platform.select({\n  ios: tokens.fontWeightSemiBold,\n  android: tokens.fontWeightBold,\n})\n\nexport const platformPressedOpacityStyle = Platform.select({\n  ios: { opacity: 0.5 },\n  android: { opacity: 1 },\n})\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.14.0-rc.5",
+  "version": "3.15.0-rc.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "<5.6.0"
   },
-  "gitHead": "9ff44909158b5a0d22c6cd6ba729b85b5b782040"
+  "gitHead": "dc18b2159bfddbee7a105fc0b975ac2d371293c0"
 }

package/src/components/conversations/conversation_preview.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, View, ViewStyle } from 'react-native'
 import { ConversationResource } from '../../types'
 import { AvatarGroup, Heading, Text, Badge, type BadgeProps } from '../display'
 import { formatDatePreview } from '../../utils/date'
-import { useTheme } from '../../hooks'
+import { useTheme, useAtFontScaleBreakpoint } from '../../hooks'
 import { UnreadCountBadge } from './unread_count_badge'
 import { ConversationActions } from './conversation_actions'
 import { MuteIndicator } from './mute_indicator'
@@ -39,6 +39,7 @@ export const ConversationPreview = ({
   const hasAvatarUrls = previewAvatarUrls && previewAvatarUrls.length > 0
   const shouldShowFallback = emptyConversation || !hasAvatarUrls
   const fallbackIconName = emptyConversation ? 'people.noTextMessage' : 'general.person'
+  const hasMetaContent = lastMessageCreatedAt || unreadCount > 0 || muted
 
   const conversationPreviewText = lastMessageTextPreview
     ? `${lastMessageAuthorName}: ${lastMessageTextPreview}`
@@ -75,13 +76,15 @@ export const ConversationPreview = ({
         </Text>
         <ConversationBadges visible={showBadges} badges={badges} />
       </View>
-      <View style={styles.metaContainer}>
-        <Text variant="tertiary">{formatDatePreview(lastMessageCreatedAt)}</Text>
-        <View style={styles.statusContainer}>
-          <UnreadCountBadge count={unreadCount} showDot={muted} />
-          <MuteIndicator muted={muted} />
+      {hasMetaContent && (
+        <View style={styles.metaContainer}>
+          <Text variant="tertiary">{formatDatePreview(lastMessageCreatedAt)}</Text>
+          <View style={styles.statusContainer}>
+            <UnreadCountBadge count={unreadCount} showDot={muted} />
+            <MuteIndicator muted={muted} />
+          </View>
         </View>
-      </View>
+      )}
     </ConversationActions>
   )
 }
@@ -179,13 +182,16 @@ const getConversationAccessibilityLabel = ({
 
 const useStyles = () => {
   const { colors } = useTheme()
+  const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
 
   return StyleSheet.create({
     previewRow: {
-      flexDirection: 'row',
+      flexDirection: atFontScaleBreakpoint ? 'column' : 'row',
       gap: 8,
       borderBottomWidth: 1,
-      borderBottomColor: colors.borderColorDefaultDim,
+      borderBottomColor: atFontScaleBreakpoint
+        ? colors.borderColorDefaultDark
+        : colors.borderColorDefaultDim,
       paddingTop: 12,
       paddingBottom: 12,
       paddingHorizontal: 16,
@@ -214,8 +220,10 @@ const useStyles = () => {
       borderRadius: 4,
     },
     metaContainer: {
-      rowGap: 4,
-      alignItems: 'flex-end',
+      gap: 4,
+      alignItems: atFontScaleBreakpoint ? 'center' : 'flex-end',
+      justifyContent: atFontScaleBreakpoint ? 'space-between' : 'flex-start',
+      flexDirection: atFontScaleBreakpoint ? 'row' : 'column',
     },
     dateLoading: {
       width: 60,

package/src/components/display/action_button.tsx

@@ -6,6 +6,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../hooks'
 import { Text } from './text'
 import { IconString } from './icon'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
 
 export const ActionButton = ({
   visible = true,
@@ -56,13 +57,14 @@ export const ActionButton = ({
           style={secondaryButton ? null : styles.fullWidthButton}
           iconNameLeft={buttonIconNameLeft}
           loading={loading}
+          maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
         />
       </View>
     </Animated.View>
   )
 }
 
-const SCALE_THAT_BUTTONS_WRAP = 1.2
+const SCALE_THAT_BUTTONS_WRAP = 1.15
 
 const useStyles = () => {
   const { fontScale } = useWindowDimensions()

package/src/components/display/badge.tsx

@@ -175,9 +175,9 @@ const useStyles = ({
 
   const statusColorMap = useStatusColorAppearanceMap()
 
-  const badgePaddingHorizontal = 8 * fontScale
-  const badgePaddingVertical = 4 * fontScale
   const badgeGap = 4 * fontScale
+  const badgePaddingHorizontal = 8
+  const badgePaddingVertical = 4
   const badgeFontSize = 12
 
   const variantStylesMap: VariantStyles = {
@@ -188,7 +188,7 @@ const useStyles = ({
       paddingHorizontal: badgePaddingHorizontal,
       paddingVertical: badgePaddingVertical,
       borderWidth: tokens.borderSizeDefault * fontScale,
-      borderRadius: tokens.borderRadiusMd,
+      borderRadius: tokens.borderRadiusMd * fontScale,
       textColor: statusColorMap[appearance].text,
       fontWeight: 'normal',
     },
@@ -199,7 +199,7 @@ const useStyles = ({
       paddingHorizontal: badgePaddingHorizontal,
       paddingVertical: badgePaddingVertical,
       borderWidth: tokens.borderSizeDefault * fontScale,
-      borderRadius: tokens.borderRadiusMd,
+      borderRadius: tokens.borderRadiusMd * fontScale,
       textColor: statusColorMap[appearance].text,
       fontWeight: platformFontWeightMedium,
     },
@@ -219,7 +219,6 @@ const useStyles = ({
   return StyleSheet.create({
     badgeWrapper: {
       flexDirection: 'row',
-      alignItems: 'center',
       justifyContent: 'center',
       alignSelf: 'flex-start',
       borderRadius: variantStylesMap[variant].borderRadius,
@@ -255,6 +254,7 @@ const useStyles = ({
     metaLabel: {
       paddingHorizontal: variantStylesMap[variant].paddingHorizontal,
       fontSize: badgeFontSize,
+      alignSelf: 'center',
       flexShrink: 1,
       paddingLeft: variantStylesMap[variant].metaLabelPaddingLeft,
     },

package/src/components/display/platform_modal_header_buttons.tsx

@@ -4,17 +4,17 @@ import { HeaderButton } from '@react-navigation/elements'
 import { Icon } from './icon'
 import { useTheme } from '../../hooks'
 
-interface HeaderSubmitButtonProps {
+interface HeaderTextButtonProps {
   onPress: () => void
   title?: string
   disabled?: boolean
 }
 
-export const HeaderSubmitButton = ({
+export const HeaderTextButton = ({
   onPress,
   title = 'Submit',
   ...props
-}: HeaderSubmitButtonProps) => {
+}: HeaderTextButtonProps) => {
   const styles = useStyles()
 
   return (
@@ -29,18 +29,18 @@ export const HeaderSubmitButton = ({
   )
 }
 
-interface HeaderCancelButtonProps {
+interface HeaderDismissButtonProps {
   onPress: () => void
   title?: string
   tintColor?: ColorValue
 }
 
-export const HeaderCancelButton = ({
+export const HeaderDismissButton = ({
   onPress,
   title = 'Cancel',
   tintColor,
   ...props
-}: HeaderCancelButtonProps) => {
+}: HeaderDismissButtonProps) => {
   const styles = useStyles()
 
   return Platform.select({

package/src/components/display/text.tsx

@@ -1,13 +1,37 @@
 import { useTheme } from '../../hooks'
 import React from 'react'
 import { StyleSheet, Text as ReactNativeText, Platform } from 'react-native'
-import type { TextStyle, TextProps as ReactNativeTextProps } from 'react-native'
+import type {
+  TextStyle as ReactNativeTextStyle,
+  TextProps as ReactNativeTextProps,
+  StyleProp,
+} from 'react-native'
 import { tokens } from '../../vendor/tapestry/tokens'
 
 // =================================
 // ====== Constants ================
 // =================================
 
+// TextStyle extends ViewStyle, which includes border properties.
+// CCA has issues with borders on Text on iOS. (https://github.com/planningcenter/chat-mobile/pull/177)
+// Our pattern is to apply boarders to a parent View instead.
+type BorderKeys =
+  | 'borderWidth'
+  | 'borderBottomWidth'
+  | 'borderLeftWidth'
+  | 'borderRightWidth'
+  | 'borderTopWidth'
+  | 'borderColor'
+  | 'borderBottomColor'
+  | 'borderLeftColor'
+  | 'borderRightColor'
+  | 'borderTopColor'
+  | 'borderStyle'
+
+export type TextStyle = Omit<ReactNativeTextStyle, BorderKeys> & {
+  [K in BorderKeys]?: never
+}
+
 const VARIANTS = {
   plain: 'plain',
   secondary: 'secondary',
@@ -22,11 +46,15 @@ type VariantStyles = Record<VariantUnion, TextStyle>
 // ====== Component ================
 // =================================
 
-export interface TextProps extends ReactNativeTextProps {
+export interface TextProps extends Omit<ReactNativeTextProps, 'style'> {
   /**
    * Changes the styles and size of the text.
    */
   variant?: VariantUnion
+  /**
+   * Text styles (border and background properties are not allowed)
+   */
+  style?: StyleProp<TextStyle>
 }
 
 export function Text({ style, variant = 'plain', children, ...props }: TextProps) {

package/src/components/display/toggle_button.tsx

@@ -8,7 +8,11 @@ import {
   useCreateAndroidRippleColor,
   useInteractionGhostBackgroundColor,
 } from '../../hooks'
-import { platformFontWeightBold, platformPressedOpacityStyle } from '../../utils'
+import {
+  MAX_FONT_SIZE_MULTIPLIER_LANDMARK,
+  platformFontWeightBold,
+  platformPressedOpacityStyle,
+} from '../../utils'
 import { Icon, IconString } from './icon'
 import { tokens } from '../../vendor/tapestry/tokens'
 import { Haptic } from '../../utils/native_adapters/configuration'
@@ -66,7 +70,7 @@ export function ToggleButton({
   allowFontScaling = true,
   iconNameLeft,
   iconNameRight,
-  maxFontSizeMultiplier,
+  maxFontSizeMultiplier = MAX_FONT_SIZE_MULTIPLIER_LANDMARK,
   minimumFontScale,
   title,
   style,

package/src/components/page/error_boundary.tsx

@@ -1,11 +1,8 @@
 import { useNavigation } from '@react-navigation/native'
 import { useQueryErrorResetBoundary } from '@tanstack/react-query'
 import React, { PropsWithChildren, useEffect, useMemo } from 'react'
-import { StyleSheet, View } from 'react-native'
-import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Button, Heading, Icon, Text, TextButton } from '../display'
-import { useTheme } from '../../hooks'
 import { ResponseError } from '../../utils/response_error'
+import BlankState from '../primitive/blank_state_primitive'
 
 type ErrorBoundaryState = {
   error: ResponseError | Error | TypeError | null
@@ -108,54 +105,26 @@ function ResponseErrorView({ response }: { response: Response; onReset: () => vo
 }
 
 function ErrorContent({ heading, body }: { heading: string; body: string }) {
-  const styles = useStyles()
   const navigation = useNavigation()
 
   return (
-    <View style={styles.container}>
-      <Icon name="general.outlinedTextMessage" size={32} color={styles.icon.color} />
-      <View style={styles.information}>
-        <Heading variant="h3" style={styles.heading}>
-          {heading}
-        </Heading>
-        <Text style={styles.body}>{body}</Text>
-      </View>
-      <Button variant="outline" onPress={navigation.goBack} title="Go back" size="md" />
-      <TextButton variant="tertiary" onPress={() => navigation.navigate('BugReport')}>
+    <BlankState.Root>
+      <BlankState.Imagery name="people.noTextMessage" />
+      <BlankState.Content>
+        <BlankState.Heading>{heading}</BlankState.Heading>
+        <BlankState.Text>{body}</BlankState.Text>
+      </BlankState.Content>
+      <BlankState.Button
+        title="Go back"
+        onPress={navigation.goBack}
+        size="md"
+        accessibilityRole="link"
+      />
+      <BlankState.TextButton onPress={() => navigation.navigate('BugReport')}>
         Report a bug
-      </TextButton>
-    </View>
+      </BlankState.TextButton>
+    </BlankState.Root>
   )
 }
 
-const useStyles = () => {
-  const theme = useTheme()
-  const { bottom } = useSafeAreaInsets()
-  return StyleSheet.create({
-    container: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: 24,
-      paddingHorizontal: 16,
-      paddingBottom: bottom,
-    },
-    information: {
-      alignItems: 'center',
-      gap: 8,
-    },
-    heading: {
-      textAlign: 'center',
-      lineHeight: 20,
-    },
-    body: {
-      textAlign: 'center',
-      lineHeight: 20,
-    },
-    icon: {
-      color: theme.colors.iconColorDefaultDisabled,
-    },
-  })
-}
-
 export default ErrorBoundary

package/src/components/primitive/avatar_primitive.tsx

@@ -1,9 +1,10 @@
 import React, { createContext, useContext, useEffect, useState } from 'react'
 import { StyleSheet, View, ViewProps } from 'react-native'
-import { useTheme } from '../../hooks'
+import { useFontScale, useTheme } from '../../hooks'
 import { Icon, IconString } from '../display/icon'
 import { Image, ImageProps } from '../display/image'
 import { Spinner } from '../display/spinner'
+import { MAX_FONT_SIZE_MULTIPLIER } from '../../utils'
 
 // =================================
 // ====== Exports ==================
@@ -146,8 +147,10 @@ interface AvatarImageProps extends Omit<ImageProps, 'source' | 'alt'> {
 
 function AvatarImage({ sourceUri, ...props }: AvatarImageProps) {
   const { size } = useAvatarContext()
+  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })
+  const scaledAvatarSize = AVATAR_PX[size] * fontScale
 
-  return <Image source={{ uri: sourceUri }} loaderSize={AVATAR_PX[size]} {...props} alt="" />
+  return <Image source={{ uri: sourceUri }} loaderSize={scaledAvatarSize} {...props} alt="" />
 }
 
 AvatarImage.displayName = 'Avatar.Image'
@@ -171,12 +174,14 @@ interface AvatarImageFallbackProps {
 function AvatarImageFallback({ name = 'general.person' }: AvatarImageFallbackProps) {
   const { size } = useAvatarContext()
   const styles = useStyles()
+  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })
+  const scaledIconSize = AVATAR_FALLBACK_ICON_PX[size] * fontScale
 
   return (
     <View style={styles.fallbackContainer}>
       <Icon
         name={name}
-        size={AVATAR_FALLBACK_ICON_PX[size]}
+        size={scaledIconSize}
         style={styles.fallbackIcon}
         accessibilityElementsHidden={true}
       />
@@ -309,12 +314,14 @@ AvatarGroup.displayName = 'Avatar.Group'
 function AvatarGroupLoader() {
   const { size, allImagesLoaded } = useAvatarContext()
   const styles = useStyles({ size })
+  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })
+  const scaledSpinnerSize = AVATAR_PX[size] * fontScale
 
   if (allImagesLoaded) return null
 
   return (
     <View style={styles.groupLoader}>
-      <Spinner size={AVATAR_PX[size]} />
+      <Spinner size={scaledSpinnerSize} />
     </View>
   )
 }
@@ -349,12 +356,13 @@ interface Styles {
 
 const useStyles = ({ size = 'md', presence = 'offline' }: Styles = {}) => {
   const { colors } = useTheme()
+  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })
   const PRESENCE_COLOR = {
     online: colors.fillColorInteractionOnlineDefault,
     offline: colors.iconColorDefaultDisabled,
   }
-  const presenceDiameter = AVATAR_PRESENCE_PX[size]
-  const avatarDiameter = AVATAR_PX[size]
+  const presenceDiameter = AVATAR_PRESENCE_PX[size] * fontScale
+  const avatarDiameter = AVATAR_PX[size] * fontScale
   const groupGap = 1
 
   return StyleSheet.create({

package/src/components/primitive/blank_state_primitive.tsx

@@ -5,11 +5,13 @@ import {
   Button,
   Heading,
   Icon,
+  TextButton,
   Text,
   type ButtonProps,
   type HeadingProps,
   type IconString,
   type IconStyle,
+  type TextButtonProps,
   type TextProps,
 } from '../display'
 
@@ -24,6 +26,7 @@ const BlankState = {
   Heading: BlankStateHeading,
   Text: BlankStateText,
   Button: BlankStateButton,
+  TextButton: BlankStateTextButton,
 } as const
 
 type BlankStateComponents = {
@@ -33,6 +36,7 @@ type BlankStateComponents = {
   Heading: FC<BlankStateHeadingProps>
   Text: FC<BlankStateTextProps>
   Button: FC<BlankStateButtonProps>
+  TextButton: FC<BlankStateTextButtonProps>
 }
 
 export default BlankState as BlankStateComponents
@@ -43,6 +47,7 @@ export type {
   BlankStateHeadingProps,
   BlankStateTextProps,
   BlankStateButtonProps,
+  BlankStateTextButtonProps,
 }
 
 // ========================================
@@ -159,6 +164,18 @@ function BlankStateButton(props: BlankStateButtonProps) {
 
 BlankStateButton.displayName = 'BlankState.Button'
 
+// ========================================
+// ====== BlankStateTextButton ================
+// ========================================
+
+interface BlankStateTextButtonProps extends TextButtonProps {}
+
+function BlankStateTextButton(props: BlankStateTextButtonProps) {
+  return <TextButton variant="tertiary" {...props} />
+}
+
+BlankStateTextButton.displayName = 'BlankState.TextButton'
+
 // ========================================
 // ====== Styles ==========================
 // ========================================

package/src/hooks/index.ts

@@ -12,3 +12,4 @@ export * from './use_api'
 export * from './use_api_client'
 export * from './use_message_reaction_toggle'
 export * from './use_interaction_ghost_color'
+export * from './use_at_font_scale_breakpoint'

package/src/hooks/use_at_font_scale_breakpoint.ts

@@ -0,0 +1,11 @@
+import { useFontScale } from './use_font_scale'
+
+// Based on iOS's AX1 font scale https://developer.apple.com/design/human-interface-guidelines/typography#iOS-iPadOS-larger-accessibility-type-sizes
+const FONT_SCALE_BREAKPOINT_FALLBACK = 1.78
+
+export const useAtFontScaleBreakpoint = (scaleBreakpoint?: number) => {
+  const fontScale = useFontScale()
+  const breakpoint = scaleBreakpoint ?? FONT_SCALE_BREAKPOINT_FALLBACK
+
+  return fontScale >= breakpoint
+}

package/src/navigation/index.tsx

@@ -42,7 +42,7 @@ import {
   MessageReadReceiptsScreenOptions,
 } from '../screens/conversation/message_read_receipts_screen'
 import { Platform } from 'react-native'
-import { HeaderSubmitButton } from '../components/display/platform_modal_header_buttons'
+import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
 import { TeamConversationScreen } from '../screens/team_conversation_screen'
 import { CardStyleInterpolators } from '@react-navigation/stack'
 
@@ -63,7 +63,7 @@ export const NewConversationStack = createNativeStackNavigator({
       options: ({ navigation }) => ({
         title: 'New conversation',
         headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderSubmitButton {...props} onPress={navigation.goBack} title="Cancel" />
+          <HeaderTextButton {...props} onPress={navigation.goBack} title="Cancel" />
         ),
         headerBackVisible: false,
       }),
@@ -73,7 +73,7 @@ export const NewConversationStack = createNativeStackNavigator({
       options: ({ navigation, route }) => ({
         title: 'New conversation',
         headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderSubmitButton
+          <HeaderTextButton
             {...props}
             onPress={() => navigation.popTo('Conversations', route.params)}
             title="Cancel"
@@ -86,7 +86,7 @@ export const NewConversationStack = createNativeStackNavigator({
       options: ({ navigation, route }) => ({
         title: 'New conversation',
         headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderSubmitButton
+          <HeaderTextButton
             {...props}
             onPress={() => navigation.popTo('Conversations', route.params)}
             title="Cancel"
@@ -104,7 +104,7 @@ export const NewConversationStack = createNativeStackNavigator({
         title: 'New conversation',
         headerLeft: () => null,
         headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderSubmitButton
+          <HeaderTextButton
             {...props}
             onPress={() => navigation.getParent()?.goBack()}
             title="Cancel"
@@ -195,7 +195,7 @@ export const ChatStack = createNativeStackNavigator({
         presentation: 'modal',
         title: 'Conversation details',
         headerRight: (props: NativeStackHeaderRightProps) => (
-          <HeaderSubmitButton {...props} onPress={navigation.goBack} title="Done" />
+          <HeaderTextButton {...props} onPress={navigation.goBack} title="Done" />
         ),
       }),
     },