@planningcenter/chat-react-native 3.5.0-rc.1 → 3.5.0

package/src/components/conversation/attachments/expanded_link.tsx

@@ -7,10 +7,10 @@ import { PlatformPressable } from '@react-navigation/elements'
 
 export function ExpandedLink({
   attachment,
-  onAttachmentLongPress,
+  onMessageLongPress,
 }: {
   attachment: DenormalizedExpandedLinkAttachmentResource
-  onAttachmentLongPress: (attachment: DenormalizedExpandedLinkAttachmentResource) => void
+  onMessageLongPress: () => void
 }) {
   const styles = useStyles()
   const { attributes } = attachment
@@ -23,12 +23,7 @@ export function ExpandedLink({
   }
 
   return (
-    <PlatformPressable
-      style={styles.container}
-      onPress={openUrl}
-      onLongPress={() => onAttachmentLongPress(attachment)}
-      accessibilityHint="Long press for more options"
-    >
+    <PlatformPressable style={styles.container} onPress={openUrl} onLongPress={onMessageLongPress}>
       {imageUrl && (
         <Image source={{ uri: imageUrl }} style={[styles.image, { aspectRatio }]} alt={title} />
       )}

package/src/components/conversation/attachments/generic_file_attachment.tsx

@@ -9,10 +9,10 @@ import { PlatformPressable } from '@react-navigation/elements'
 
 export function GenericFileAttachment({
   attachment,
-  onAttachmentLongPress,
+  onMessageAttachmentLongPress,
 }: {
   attachment: DenormalizedMessageAttachmentResource
-  onAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
+  onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
 }) {
   const styles = useStyles()
   const { url, filename, contentType } = attachment.attributes
@@ -21,7 +21,7 @@ export function GenericFileAttachment({
 
   return (
     <PlatformPressable
-      onLongPress={() => onAttachmentLongPress(attachment)}
+      onLongPress={() => onMessageAttachmentLongPress(attachment)}
       accessibilityHint="Long press for more options"
     >
       <AttachmentCard>

package/src/components/conversation/attachments/giphy_attachment.tsx

@@ -1,19 +1,21 @@
 import React from 'react'
-import { Text, Image, StyleSheet, Linking, Pressable } from 'react-native'
+import { Text, Image, StyleSheet, Linking } from 'react-native'
 import { tokens } from '../../../vendor/tapestry/tokens'
 import { useTheme } from '../../../hooks'
 import { DenormalizedGiphyAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
+import { PlatformPressable } from '@react-navigation/elements'
 
 export function GiphyAttachment({
   attachment,
-  onAttachmentLongPress,
+  onMessageLongPress,
 }: {
   attachment: DenormalizedGiphyAttachmentResource
-  onAttachmentLongPress: (attachment: DenormalizedGiphyAttachmentResource) => void
+  onMessageLongPress: () => void
 }) {
   const styles = useStyles()
   const { title, titleLink, giphy } = attachment
-  const { url, width, height } = giphy.fixedWidth
+  const { url } = giphy.fixedWidth
+  const { width, height } = assertKeysAreNumbers(giphy.fixedWidth)
 
   function handlePress() {
     if (titleLink) {
@@ -23,11 +25,10 @@ export function GiphyAttachment({
   }
 
   return (
-    <Pressable
+    <PlatformPressable
       onPress={handlePress}
+      onLongPress={onMessageLongPress}
       style={styles.container}
-      onLongPress={() => onAttachmentLongPress(attachment)}
-      accessibilityHint="Long press for more options"
     >
       <Image
         source={{ uri: url }}
@@ -37,10 +38,24 @@ export function GiphyAttachment({
       <Text style={styles.link}>
         <Text style={styles.tag}>/giphy</Text> {title}
       </Text>
-    </Pressable>
+    </PlatformPressable>
   )
 }
 
+const assertKeysAreNumbers = (obj: Object): Record<any, number> => {
+  return Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, assertNumber(value)]))
+}
+
+const assertNumber = (value: string): number => {
+  if (typeof value === 'number') return value
+
+  if (typeof value === 'string' && !isNaN(Number(value))) {
+    return Number(value)
+  }
+
+  return 0
+}
+
 const useStyles = () => {
   const { colors } = useTheme()
   return StyleSheet.create({

package/src/components/conversation/attachments/image_attachment.tsx

@@ -38,11 +38,11 @@ export type MetaProps = {
 export function ImageAttachment({
   attachment,
   metaProps,
-  onAttachmentLongPress,
+  onMessageAttachmentLongPress,
 }: {
   attachment: DenormalizedMessageAttachmentResource
   metaProps: MetaProps
-  onAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
+  onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
 }) {
   const { attributes } = attachment
   const { url, urlMedium, filename, metadata = {} } = attributes
@@ -83,12 +83,12 @@ export function ImageAttachment({
       <PlatformPressable
         style={styles.container}
         onPress={() => setVisible(true)}
-        onLongPress={() => onAttachmentLongPress(attachment)}
+        onLongPress={() => onMessageAttachmentLongPress(attachment)}
         accessibilityHint="Long press for more options"
       >
         <Image
           source={{ uri: urlMedium || url }}
-          style={{ borderRadius: 8 }}
+          style={styles.image}
           wrapperStyle={styles.imageWrapper}
           alt={filename}
         />

package/src/components/conversation/attachments/video_attachment.tsx

@@ -8,10 +8,10 @@ import { PlatformPressable } from '@react-navigation/elements'
 
 export function VideoAttachment({
   attachment,
-  onAttachmentLongPress,
+  onMessageAttachmentLongPress,
 }: {
   attachment: DenormalizedMessageAttachmentResource
-  onAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
+  onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
 }) {
   const { attributes } = attachment
   const { width = MESSAGE_ATTACHMENT_WIDTH_SINGLE, height = MESSAGE_ATTACHMENT_WIDTH_SINGLE } =
@@ -39,7 +39,7 @@ export function VideoAttachment({
   return (
     <View style={styles.container} ref={viewRef}>
       <PlatformPressable
-        onLongPress={() => onAttachmentLongPress(attachment)}
+        onLongPress={() => onMessageAttachmentLongPress(attachment)}
         accessibilityHint="Long press for more options"
       >
         <Video.Player

package/src/components/conversation/empty_conversation_blank_state.tsx

@@ -1,4 +1,4 @@
-import { BlankState } from '../display/blank_state'
+import { BlankState } from '../display'
 
 export const EmptyConversationBlankState = () => {
   return (

package/src/components/conversation/message.tsx

@@ -11,16 +11,22 @@ import { ReactionCountResource } from '../../types/resources/reaction'
 import { MessageAttachments } from './message_attachments'
 import ErrorBoundary from '../page/error_boundary'
 import { MessageMarkdown } from './message_markdown'
-import { DenormalizedAttachmentResource } from '../../types/resources/denormalized_attachment_resource'
+import { DenormalizedMessageAttachmentResource } from '../../types/resources/denormalized_attachment_resource'
 
 /** Message
  * Component for display of a message within a conversation list
  */
-export function Message(props: MessageResource & { conversation_id: number }) {
-  const { text, conversation_id, reactionCounts } = props
+interface MessageProps extends MessageResource {
+  canDeleteNonAuthoredMessages: boolean
+  conversation_id: number
+}
+
+export function Message(props: MessageProps) {
+  const { conversation_id, canDeleteNonAuthoredMessages, text, reactionCounts } = props
   const styles = useMessageStyles(props)
   const navigation = useNavigation()
-  const handleMessagePress = () => {
+
+  const handleMessageLongPress = () => {
     navigation.navigate('MessageActions', {
       message_id: props.id,
       conversation_id,
@@ -34,9 +40,14 @@ export function Message(props: MessageResource & { conversation_id: number }) {
     })
   }
 
-  const handleAttachmentLongPress = (attachment: DenormalizedAttachmentResource) => {
+  const handleMessageAttachmentLongPress = (attachment: DenormalizedMessageAttachmentResource) => {
     navigation.navigate('AttachmentActions', {
-      attachment,
+      attachmentId: attachment?.id,
+      attachmentContentType: attachment?.attributes.contentType,
+      attachmentUrl: attachment?.attributes.url,
+      conversation_id,
+      canDeleteNonAuthoredMessages,
+      myMessage: props.mine,
     })
   }
 
@@ -54,12 +65,13 @@ export function Message(props: MessageResource & { conversation_id: number }) {
       )}
       <View style={styles.messageContent}>
         {!props.mine && <Text variant="tertiary">{props.author.name}</Text>}
-        <PlatformPressable style={styles.messageBubble} onLongPress={handleMessagePress}>
+        <PlatformPressable style={styles.messageBubble} onLongPress={handleMessageLongPress}>
           <ErrorBoundary>
             <MessageAttachments
               attachments={props.attachments}
               metaProps={metaProps}
-              onAttachmentLongPress={handleAttachmentLongPress}
+              onMessageAttachmentLongPress={handleMessageAttachmentLongPress}
+              onMessageLongPress={handleMessageLongPress}
             />
           </ErrorBoundary>
           {text && (

package/src/components/conversation/message_attachments.tsx

@@ -14,10 +14,11 @@ import { ImageAttachment, type MetaProps } from './attachments/image_attachment'
 export function MessageAttachments(props: {
   attachments: DenormalizedAttachmentResource[]
   metaProps: MetaProps
-  onAttachmentLongPress: (attachment: DenormalizedAttachmentResource) => void
+  onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
+  onMessageLongPress: () => void
 }) {
   const styles = useStyles()
-  const { attachments, metaProps, onAttachmentLongPress } = props
+  const { attachments, metaProps, onMessageAttachmentLongPress, onMessageLongPress } = props
   if (!attachments || attachments.length === 0) return null
   return (
     <View style={styles.attachmentsContainer}>
@@ -29,7 +30,7 @@ export function MessageAttachments(props: {
                 key={attachment.id}
                 attachment={attachment}
                 metaProps={metaProps}
-                onAttachmentLongPress={onAttachmentLongPress}
+                onMessageAttachmentLongPress={onMessageAttachmentLongPress}
               />
             )
           case 'giphy':
@@ -37,7 +38,7 @@ export function MessageAttachments(props: {
               <GiphyAttachment
                 key={attachment.id || attachment.titleLink}
                 attachment={attachment}
-                onAttachmentLongPress={onAttachmentLongPress}
+                onMessageLongPress={onMessageLongPress}
               />
             )
           case 'ExpandedLink':
@@ -45,7 +46,7 @@ export function MessageAttachments(props: {
               <ExpandedLink
                 key={attachment.id}
                 attachment={attachment}
-                onAttachmentLongPress={onAttachmentLongPress}
+                onMessageLongPress={onMessageLongPress}
               />
             )
           default:
@@ -59,11 +60,11 @@ export function MessageAttachments(props: {
 function MessageAttachment({
   attachment,
   metaProps,
-  onAttachmentLongPress,
+  onMessageAttachmentLongPress,
 }: {
   attachment: DenormalizedMessageAttachmentResource
   metaProps: MetaProps
-  onAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
+  onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void
 }) {
   const { attributes } = attachment
   const contentType = attributes?.contentType
@@ -74,22 +75,28 @@ function MessageAttachment({
         <ImageAttachment
           attachment={attachment}
           metaProps={metaProps}
-          onAttachmentLongPress={onAttachmentLongPress}
+          onMessageAttachmentLongPress={onMessageAttachmentLongPress}
         />
       )
     case 'video':
       return (
-        <VideoAttachment attachment={attachment} onAttachmentLongPress={onAttachmentLongPress} />
+        <VideoAttachment
+          attachment={attachment}
+          onMessageAttachmentLongPress={onMessageAttachmentLongPress}
+        />
       )
     case 'audio':
       return (
-        <AudioAttachment attachment={attachment} onAttachmentLongPress={onAttachmentLongPress} />
+        <AudioAttachment
+          attachment={attachment}
+          onMessageAttachmentLongPress={onMessageAttachmentLongPress}
+        />
       )
     default:
       return (
         <GenericFileAttachment
           attachment={attachment}
-          onAttachmentLongPress={onAttachmentLongPress}
+          onMessageAttachmentLongPress={onMessageAttachmentLongPress}
         />
       )
   }

package/src/components/conversations/conversation_actions.tsx

@@ -61,6 +61,7 @@ export function ConversationActions({
       overshootRight={false}
       onSwipeableOpenStartDrag={handleSwipeableOpen}
       onSwipeableClose={() => setDisabled(false)}
+      renderRightActions={() => <></>}
       renderLeftActions={() => (
         <LeftActions conversation={conversation} onClose={handleSwipeableClose} />
       )}

package/src/components/conversations/conversation_preview.tsx

@@ -33,19 +33,37 @@ export const ConversationPreview = ({
     muted,
   } = conversation
 
+  const emptyConversation = !lastMessageCreatedAt
+  const hasAvatarUrls = previewAvatarUrls && previewAvatarUrls.length > 0
+  const shouldShowFallback = emptyConversation || !hasAvatarUrls
+  const fallbackIconName = emptyConversation ? 'people.noTextMessage' : 'general.person'
+
+  const conversationPreviewText = lastMessageTextPreview
+    ? `${lastMessageAuthorName}: ${lastMessageTextPreview}`
+    : 'Send your first message'
+
   return (
     <ConversationActions
       conversation={conversation}
       style={[styles.previewRow, style]}
       onPress={onPress}
     >
-      <AvatarGroup size="lg" sourceUris={previewAvatarUrls || []} />
+      <AvatarGroup
+        size="lg"
+        sourceUris={previewAvatarUrls || []}
+        showFallback={shouldShowFallback}
+        fallbackIconName={fallbackIconName}
+      />
       <View style={styles.conversationBody}>
         <Heading numberOfLines={1} variant="h3" style={styles.title}>
           {title}
         </Heading>
-        <Text variant="tertiary" numberOfLines={2}>
-          {lastMessageAuthorName}: {lastMessageTextPreview}
+        <Text
+          variant="tertiary"
+          numberOfLines={2}
+          style={emptyConversation && styles.emptyConversationPreviewText}
+        >
+          {conversationPreviewText}
         </Text>
         <ConversationBadges visible={showBadges} badges={badges} />
       </View>
@@ -103,6 +121,9 @@ const useStyles = () => {
       flex: 1,
       rowGap: 2,
     },
+    emptyConversationPreviewText: {
+      color: colors.interaction,
+    },
     metaContainer: {
       rowGap: 4,
       alignItems: 'flex-end',

package/src/components/conversations/conversations.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { useConversationsContext } from '../../contexts/conversations_context'
 import { useTheme } from '../../hooks'
-import { Text } from '../display'
+import { BlankState } from '../display'
 import { ConversationPreview } from './conversation_preview'
 
 interface ConversationsProps {
@@ -41,7 +41,7 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
         ListHeaderComponent={ListHeaderComponent}
         ListEmptyComponent={
           <View style={styles.listEmpty}>
-            <Text variant="secondary">No conversations found</Text>
+            <BlankState iconName="general.outlinedTextMessage" title="No conversations" />
           </View>
         }
         renderItem={({ item }) => (
@@ -68,7 +68,7 @@ const useStyles = () => {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
-      paddingVertical: 16,
+      paddingVertical: 32,
     },
   })
 }

package/src/components/display/action_button.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from 'react'
-import { Animated, LayoutAnimation, StyleSheet } from 'react-native'
+import { Animated, LayoutAnimation, StyleSheet, View } from 'react-native'
 import { Button } from './button'
 import { useEffect } from 'react'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../hooks'
 import { Text } from './text'
+import { IconString } from './icon'
 
 export const ActionButton = ({
   visible = true,
@@ -12,12 +13,16 @@ export const ActionButton = ({
   onPress,
   title,
   infoText,
+  buttonIconNameLeft,
+  secondaryButton,
 }: {
   visible?: boolean
   disabled?: boolean
   onPress: () => void
   title: string
   infoText?: string
+  buttonIconNameLeft?: IconString
+  secondaryButton?: React.ReactNode
 }) => {
   const styles = useStyles()
   const [show, setShow] = useState(visible)
@@ -38,7 +43,18 @@ export const ActionButton = ({
           {infoText}
         </Text>
       )}
-      <Button variant="fill" size="lg" onPress={onPress} title={title} disabled={disabled} />
+      <View style={styles.buttonRow}>
+        {secondaryButton}
+        <Button
+          variant="fill"
+          size="lg"
+          onPress={onPress}
+          title={title}
+          disabled={disabled}
+          style={secondaryButton ? null : styles.fullWidthButton}
+          iconNameLeft={buttonIconNameLeft}
+        />
+      </View>
     </Animated.View>
   )
 }
@@ -46,16 +62,28 @@ export const ActionButton = ({
 const useStyles = () => {
   const { bottom } = useSafeAreaInsets()
   const { colors } = useTheme()
+  const containerVerticalPadding = 16
 
   return StyleSheet.create({
     container: {
-      paddingVertical: 16,
+      backgroundColor: colors.surfaceColor090,
       paddingHorizontal: 24,
-      paddingBottom: bottom,
+      paddingTop: containerVerticalPadding,
+      paddingBottom: bottom + containerVerticalPadding,
       borderTopWidth: 1,
       borderTopColor: colors.fillColorNeutral060,
       gap: 16,
     },
+    buttonRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: 16,
+      flexWrap: 'wrap-reverse',
+    },
+    fullWidthButton: {
+      flexGrow: 1,
+    },
     infoText: {
       textAlign: 'center',
     },

package/src/components/display/avatar.tsx

@@ -4,18 +4,33 @@ import AvatarPrimitive, {
   type AvatarPresenceProps,
   type AvatarRootProps,
 } from '../primitive/avatar_primitive'
+import { type IconString } from './icon'
 
 interface AvatarProps {
   sourceUri: AvatarImageProps['sourceUri']
   size?: AvatarRootProps['size']
   presence?: AvatarPresenceProps['presence']
+  showFallback?: boolean
+  fallbackIconName?: IconString
 }
 
-export function Avatar({ presence, size = 'lg', sourceUri }: AvatarProps) {
+export function Avatar({
+  presence,
+  size = 'lg',
+  sourceUri,
+  showFallback = false,
+  fallbackIconName = 'general.person',
+}: AvatarProps) {
+  const shouldShowFallback = showFallback || !sourceUri
+
   return (
     <AvatarPrimitive.Root size={size}>
       <AvatarPrimitive.Mask>
-        <AvatarPrimitive.Image sourceUri={sourceUri} />
+        {shouldShowFallback ? (
+          <AvatarPrimitive.ImageFallback name={fallbackIconName} />
+        ) : (
+          <AvatarPrimitive.Image sourceUri={sourceUri} />
+        )}
       </AvatarPrimitive.Mask>
       {presence && <AvatarPrimitive.Presence presence={presence} />}
     </AvatarPrimitive.Root>

package/src/components/display/avatar_group.tsx

@@ -3,18 +3,34 @@ import AvatarPrimitive, {
   type AvatarGroupProps,
   type AvatarRootProps,
 } from '../primitive/avatar_primitive'
+import { type IconString } from './icon'
 
 interface AvatarGroupDisplayProps {
   sourceUris: AvatarGroupProps['sourceUris']
+  showFallback?: boolean
+  fallbackIconName?: IconString
   size?: AvatarRootProps['size']
 }
 
-export function AvatarGroup({ sourceUris, size = 'lg' }: AvatarGroupDisplayProps) {
+export function AvatarGroup({
+  sourceUris,
+  showFallback = false,
+  fallbackIconName = 'general.person',
+  size = 'lg',
+}: AvatarGroupDisplayProps) {
+  const shouldShowFallback = showFallback || !sourceUris || sourceUris.length === 0
+
   return (
     <AvatarPrimitive.Root size={size}>
       <AvatarPrimitive.Mask>
-        <AvatarPrimitive.Group sourceUris={sourceUris} />
-        <AvatarPrimitive.GroupLoader />
+        {shouldShowFallback ? (
+          <AvatarPrimitive.ImageFallback name={fallbackIconName} />
+        ) : (
+          <>
+            <AvatarPrimitive.Group sourceUris={sourceUris} />
+            <AvatarPrimitive.GroupLoader />
+          </>
+        )}
       </AvatarPrimitive.Mask>
     </AvatarPrimitive.Root>
   )

package/src/components/display/blank_state.tsx

@@ -1,30 +1,43 @@
 import { View, type ViewStyle, StyleSheet } from 'react-native'
-import { Heading } from './heading'
-import { Icon, type IconString } from './icon'
-import { Text } from './text'
+import { Heading, type HeadingProps } from './heading'
+import { Icon, type IconString, type IconStyle } from './icon'
+import { Text, type TextProps } from './text'
 import { useTheme } from '../../hooks'
 import { Button, type ButtonProps } from './button'
 
 interface BlankStateProps {
   iconName?: IconString
+  iconStyle?: IconStyle
   title: string
+  titleStyle?: HeadingProps['style']
   subtitle?: string
+  subtitleStyle?: TextProps['style']
   style?: ViewStyle
   buttonProps?: ButtonProps
 }
 
-export const BlankState = ({ iconName, title, subtitle, style, buttonProps }: BlankStateProps) => {
+export const BlankState = ({
+  iconName,
+  title,
+  titleStyle,
+  subtitle,
+  subtitleStyle,
+  style,
+  iconStyle,
+  buttonProps,
+}: BlankStateProps) => {
   const styles = useStyles()
 
   return (
     <View style={[styles.container, style]}>
-      {iconName && <Icon name={iconName} size={32} style={styles.icon} />}
+      {iconName && <Icon name={iconName} size={32} style={[styles.icon, iconStyle]} />}
+
       <View style={styles.content}>
-        <Heading variant="h3" style={styles.baseText}>
+        <Heading variant="h3" style={[styles.baseText, titleStyle]}>
           {title}
         </Heading>
         {subtitle && (
-          <Text variant="tertiary" style={styles.baseText}>
+          <Text variant="tertiary" style={[styles.baseText, subtitleStyle]}>
             {subtitle}
           </Text>
         )}
@@ -46,7 +59,7 @@ const useStyles = () => {
       padding: 16,
     },
     icon: {
-      color: colors.iconColorDefaultSecondary,
+      color: colors.iconColorDefaultDisabled,
     },
     content: {
       alignItems: 'center',

package/src/components/display/child_notice.tsx

@@ -13,10 +13,11 @@ import { Text } from './text'
 
 interface ChildNoticeProps {
   childMembers: MemberResource[]
+  showMembers?: boolean
   style?: ViewStyle
 }
 
-export function ChildNotice({ childMembers, style }: ChildNoticeProps) {
+export function ChildNotice({ childMembers, showMembers = false, style }: ChildNoticeProps) {
   const styles = useStyles()
   const heading = `${pluralize(childMembers.length, 'member')} under age 13`
 
@@ -30,9 +31,11 @@ export function ChildNotice({ childMembers, style }: ChildNoticeProps) {
       <BannerPrimitive.Text>
         Under age members cannot chat. They won't see conversations or notifications.
       </BannerPrimitive.Text>
-      <View style={styles.childrenWrapper}>
-        {childMembers?.map(child => <Child key={child.id} child={child} />)}
-      </View>
+      {showMembers && (
+        <View style={styles.childrenWrapper}>
+          {childMembers?.map(child => <Child key={child.id} child={child} />)}
+        </View>
+      )}
     </BannerCollapsible>
   )
 }

package/src/components/display/heading.tsx

@@ -13,7 +13,7 @@ import { platformFontWeightBold } from '../../utils/styles'
 // ====== Component ================
 // =================================
 
-interface TextProps extends ReactNativeTextProps {
+export interface HeadingProps extends ReactNativeTextProps {
   /**
    * Changes the styles and size of the text.
    * Semantically all React Native headings have the same 'hierarchical' level.
@@ -21,7 +21,7 @@ interface TextProps extends ReactNativeTextProps {
   variant?: 'h1' | 'h2' | 'h3' | 'h4'
 }
 
-export function Heading({ style, variant = 'h1', children, ...props }: TextProps) {
+export function Heading({ style, variant = 'h1', children, ...props }: HeadingProps) {
   const styles = useStyles()
   const variantStyleMap = {
     h1: styles.heading1,