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

package/src/__tests__/event-polyfill.test.ts

@@ -0,0 +1,314 @@
+/**
+ * Tests for Event/CustomEvent/EventTarget polyfills
+ */
+
+import Event from '../polyfills/events/Event'
+import EventTarget from '../polyfills/events/EventTarget'
+import { CustomEvent } from '../polyfills/events/CustomEvent'
+
+// Set up global polyfill for tests
+;(global as any).Event = Event
+;(global as any).CustomEvent = CustomEvent
+
+describe('Event Polyfill', () => {
+  describe('Event', () => {
+    it('should create a basic event', () => {
+      const event = new Event('test')
+      expect(event.type).toBe('test')
+      expect(event.bubbles).toBe(false)
+      expect(event.cancelable).toBe(false)
+      expect(event.composed).toBe(false)
+      expect(event.defaultPrevented).toBe(false)
+      expect(event.isTrusted).toBe(false)
+      expect(event.eventPhase).toBe(Event.NONE)
+      expect(typeof event.timeStamp).toBe('number')
+    })
+
+    it('should create an event with options', () => {
+      const event = new Event('test', {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+      })
+      expect(event.bubbles).toBe(true)
+      expect(event.cancelable).toBe(true)
+      expect(event.composed).toBe(true)
+    })
+
+    it('should have correct phase constants', () => {
+      expect(Event.NONE).toBe(0)
+      expect(Event.CAPTURING_PHASE).toBe(1)
+      expect(Event.AT_TARGET).toBe(2)
+      expect(Event.BUBBLING_PHASE).toBe(3)
+    })
+
+    it('should prevent default when cancelable', () => {
+      const event = new Event('test', { cancelable: true })
+      expect(event.defaultPrevented).toBe(false)
+      event.preventDefault()
+      expect(event.defaultPrevented).toBe(true)
+    })
+
+    it('should not prevent default when not cancelable', () => {
+      const event = new Event('test', { cancelable: false })
+      event.preventDefault()
+      expect(event.defaultPrevented).toBe(false)
+    })
+
+    it('should support stopPropagation', () => {
+      const event = new Event('test')
+      // No error thrown - internal flags are set
+      event.stopPropagation()
+      event.stopImmediatePropagation()
+    })
+  })
+
+  describe('CustomEvent', () => {
+    it('should create a custom event with detail', () => {
+      const detail = { foo: 'bar', count: 42 }
+      const event = new CustomEvent('custom', { detail })
+      expect(event.type).toBe('custom')
+      expect(event.detail).toEqual(detail)
+    })
+
+    it('should inherit from Event', () => {
+      const event = new CustomEvent('custom', {
+        bubbles: true,
+        cancelable: true,
+        detail: 'test',
+      })
+      expect(event instanceof Event).toBe(true)
+      expect(event.bubbles).toBe(true)
+      expect(event.cancelable).toBe(true)
+    })
+
+    it('should handle undefined detail', () => {
+      const event = new CustomEvent('custom')
+      expect(event.detail).toBeUndefined()
+    })
+  })
+
+  describe('EventTarget', () => {
+    let target: EventTarget
+
+    beforeEach(() => {
+      target = new EventTarget()
+    })
+
+    it('should add and remove event listeners', () => {
+      const listener = jest.fn()
+      target.addEventListener('test', listener)
+
+      const event = new Event('test')
+      const result = target.dispatchEvent(event)
+
+      expect(listener).toHaveBeenCalledWith(event)
+      expect(listener).toHaveBeenCalledTimes(1)
+      expect(result).toBe(true) // not prevented
+
+      target.removeEventListener('test', listener)
+      target.dispatchEvent(new Event('test'))
+      expect(listener).toHaveBeenCalledTimes(1) // not called again
+    })
+
+    it('should handle multiple listeners for the same event', () => {
+      const listener1 = jest.fn()
+      const listener2 = jest.fn()
+
+      target.addEventListener('test', listener1)
+      target.addEventListener('test', listener2)
+
+      target.dispatchEvent(new Event('test'))
+
+      expect(listener1).toHaveBeenCalledTimes(1)
+      expect(listener2).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle once option', () => {
+      const listener = jest.fn()
+      target.addEventListener('test', listener, { once: true })
+
+      target.dispatchEvent(new Event('test'))
+      target.dispatchEvent(new Event('test'))
+
+      expect(listener).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle capture option', () => {
+      const listener = jest.fn()
+      target.addEventListener('test', listener, { capture: true })
+
+      target.dispatchEvent(new Event('test'))
+      expect(listener).toHaveBeenCalledTimes(1)
+
+      target.removeEventListener('test', listener, { capture: true })
+      target.dispatchEvent(new Event('test'))
+      expect(listener).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle passive option', () => {
+      const listener = jest.fn()
+      target.addEventListener('test', listener, { passive: true })
+
+      target.dispatchEvent(new Event('test'))
+      expect(listener).toHaveBeenCalledTimes(1)
+    })
+
+    it('should handle object listeners with handleEvent', () => {
+      const listener = {
+        handleEvent: jest.fn(),
+      }
+
+      target.addEventListener('test', listener)
+      target.dispatchEvent(new Event('test'))
+
+      expect(listener.handleEvent).toHaveBeenCalledTimes(1)
+    })
+
+    it('should return false when event is prevented', () => {
+      const listener = (event: Event) => {
+        event.preventDefault()
+      }
+
+      target.addEventListener('test', listener)
+      const event = new Event('test', { cancelable: true })
+      const result = target.dispatchEvent(event)
+
+      expect(result).toBe(false)
+      expect(event.defaultPrevented).toBe(true)
+    })
+
+    it('should set event properties during dispatch', () => {
+      let capturedEvent: Event | null = null
+
+      const listener = (event: Event) => {
+        capturedEvent = event
+        expect(event.target).toBe(target)
+        expect(event.currentTarget).toBe(target)
+        expect(event.eventPhase).toBe(Event.AT_TARGET)
+      }
+
+      target.addEventListener('test', listener)
+      target.dispatchEvent(new Event('test'))
+
+      expect(capturedEvent).not.toBeNull()
+      // After dispatch, these should be reset
+      expect(capturedEvent!.currentTarget).toBeNull()
+      expect(capturedEvent!.eventPhase).toBe(Event.NONE)
+    })
+
+    it('should handle bubbling events', () => {
+      const listener = jest.fn()
+      target.addEventListener('test', listener)
+
+      const bubblingEvent = new Event('test', { bubbles: true })
+      target.dispatchEvent(bubblingEvent)
+
+      expect(listener).toHaveBeenCalledWith(bubblingEvent)
+    })
+
+    it('should handle error in listener gracefully', () => {
+      const errorListener = () => {
+        throw new Error('Test error')
+      }
+      const normalListener = jest.fn()
+
+      // Mock console.error to avoid test output noise
+      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation()
+
+      target.addEventListener('test', errorListener)
+      target.addEventListener('test', normalListener)
+
+      target.dispatchEvent(new Event('test'))
+
+      expect(normalListener).toHaveBeenCalledTimes(1)
+      expect(consoleErrorSpy).toHaveBeenCalled()
+
+      consoleErrorSpy.mockRestore()
+    })
+
+    it('should ignore null listeners', () => {
+      // Should not throw
+      target.addEventListener('test', null)
+      target.removeEventListener('test', null)
+      target.dispatchEvent(new Event('test'))
+    })
+
+    it('should handle composed path', () => {
+      let composedPath: readonly EventTarget[] | null = null
+
+      const listener = (event: Event) => {
+        composedPath = event.composedPath()
+      }
+
+      target.addEventListener('test', listener)
+      target.dispatchEvent(new Event('test'))
+
+      expect(composedPath).toEqual([target])
+    })
+
+    it('should prevent duplicate listeners', () => {
+      const listener = jest.fn()
+
+      target.addEventListener('test', listener)
+      target.addEventListener('test', listener) // Same listener
+
+      target.dispatchEvent(new Event('test'))
+      expect(listener).toHaveBeenCalledTimes(1) // Only called once
+    })
+  })
+
+  describe('Event flow integration', () => {
+    it('should work with CustomEvent dispatch', () => {
+      const target = new EventTarget()
+      const listener = jest.fn()
+      const detail = { message: 'hello' }
+
+      target.addEventListener('custom', listener)
+
+      const event = new CustomEvent('custom', {
+        detail,
+        bubbles: true,
+        cancelable: true,
+      })
+
+      const result = target.dispatchEvent(event)
+
+      expect(listener).toHaveBeenCalledWith(event)
+      expect(listener.mock.calls[0][0].detail).toEqual(detail)
+      expect(result).toBe(true)
+    })
+
+    it('should handle stopImmediatePropagation', () => {
+      const target = new EventTarget()
+      const listener1 = jest.fn((event: Event) => {
+        event.stopImmediatePropagation()
+      })
+      const listener2 = jest.fn()
+
+      target.addEventListener('test', listener1)
+      target.addEventListener('test', listener2)
+
+      target.dispatchEvent(new Event('test'))
+
+      expect(listener1).toHaveBeenCalledTimes(1)
+      expect(listener2).toHaveBeenCalledTimes(0) // Stopped
+    })
+  })
+
+  describe('Global polyfill installation', () => {
+    it('should make Event available globally', () => {
+      // This tests that our polyfill setup works
+      expect(typeof (global as any).Event).toBe('function')
+      expect(typeof (global as any).CustomEvent).toBe('function')
+
+      const globalEvent = new (global as any).Event('test')
+      expect(globalEvent.type).toBe('test')
+
+      const globalCustomEvent = new (global as any).CustomEvent('custom', {
+        detail: 'test',
+      })
+      expect(globalCustomEvent.detail).toBe('test')
+    })
+  })
+})

package/src/components/conversations/conversation_actions.tsx

@@ -219,7 +219,7 @@ const useStyles = () => {
   const { colors } = useTheme()
   return StyleSheet.create({
     swipeableChildContainer: {
-      backgroundColor: colors.surfaceColor100,
+      backgroundColor: colors.conversationActionsBackground,
     },
     actionButtonContainer: {
       flexDirection: 'row',

package/src/components/conversations/conversation_preview.tsx

@@ -3,7 +3,12 @@ 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, useAtFontScaleBreakpoint } from '../../hooks'
+import {
+  useTheme,
+  useAtFontScaleBreakpoint,
+  useFontScale,
+  useScalableNumberOfLines,
+} from '../../hooks'
 import { UnreadCountBadge } from './unread_count_badge'
 import { ConversationActions } from './conversation_actions'
 import { MuteIndicator } from './mute_indicator'
@@ -41,6 +46,9 @@ export const ConversationPreview = ({
   const fallbackIconName = emptyConversation ? 'people.noTextMessage' : 'general.person'
   const hasMetaContent = lastMessageCreatedAt || unreadCount > 0 || muted
 
+  const numberOfLinesScaledTitle = useScalableNumberOfLines(1)
+  const numberOfLinesScaledPreviewText = useScalableNumberOfLines(2)
+
   const conversationPreviewText = lastMessageTextPreview
     ? `${lastMessageAuthorName}: ${lastMessageTextPreview}`
     : EMPTY_CONVERSATION_PREVIEW_TEXT
@@ -64,12 +72,12 @@ export const ConversationPreview = ({
         fallbackIconName={fallbackIconName}
       />
       <View style={styles.conversationBody}>
-        <Heading numberOfLines={1} variant="h3" style={styles.title}>
+        <Heading numberOfLines={numberOfLinesScaledTitle} variant="h3" style={styles.title}>
           {title}
         </Heading>
         <Text
           variant="tertiary"
-          numberOfLines={2}
+          numberOfLines={numberOfLinesScaledPreviewText}
           style={emptyConversation && styles.emptyConversationPreviewText}
         >
           {conversationPreviewText}
@@ -96,6 +104,7 @@ interface BadgeShape {
 }
 const ConversationBadges = ({ visible, badges }: { visible: boolean; badges?: BadgeShape[] }) => {
   const styles = useStyles()
+  const numberOfLinesScaled = useScalableNumberOfLines(1)
 
   if (!visible || !badges || badges.length === 0) {
     return null
@@ -110,6 +119,7 @@ const ConversationBadges = ({ visible, badges }: { visible: boolean; badges?: Ba
           productLogoName={badge.appName}
           label={badge.pcoResourceType}
           metaLabel={badge.text || ''}
+          numberOfLinesMetaLabel={numberOfLinesScaled}
         />
       ))}
     </View>
@@ -183,6 +193,7 @@ const getConversationAccessibilityLabel = ({
 const useStyles = () => {
   const { colors } = useTheme()
   const atFontScaleBreakpoint = useAtFontScaleBreakpoint()
+  const fontScale = useFontScale()
 
   return StyleSheet.create({
     previewRow: {
@@ -238,7 +249,7 @@ const useStyles = () => {
     statusContainer: {
       flexDirection: 'row',
       alignItems: 'center',
-      gap: 4,
+      gap: 4 * fontScale,
     },
   })
 }

package/src/components/conversations/mute_indicator.tsx

@@ -2,13 +2,20 @@ import React from 'react'
 import { StyleSheet } from 'react-native'
 import { Icon } from '../display'
 import { useTheme } from '../../hooks'
+import { MAX_FONT_SIZE_MULTIPLIER } from '../../utils'
 
 export const MuteIndicator = ({ muted }: { muted: boolean }) => {
   const styles = useStyles()
 
   if (!muted) return null
 
-  return <Icon name="general.bellMuted" size={16} style={styles.mutedIcon} />
+  return (
+    <Icon
+      name="general.bellMuted"
+      style={styles.mutedIcon}
+      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+    />
+  )
 }
 
 const useStyles = () => {
@@ -16,6 +23,7 @@ const useStyles = () => {
   return StyleSheet.create({
     mutedIcon: {
       color: colors.iconColorDefaultDim,
+      fontSize: 16,
     },
   })
 }

package/src/components/conversations/swipeable_toggle_button.tsx

@@ -3,7 +3,11 @@ import { StyleSheet } from 'react-native'
 import { Pressable, type PressableProps } from 'react-native-gesture-handler'
 import { Icon, IconString, Spinner, Text } from '../display'
 import { useCreateAndroidRippleColor, useTheme } from '../../hooks'
-import { platformFontWeightMedium, platformPressedOpacityStyle } from '../../utils/styles'
+import {
+  MAX_FONT_SIZE_MULTIPLIER,
+  platformFontWeightMedium,
+  platformPressedOpacityStyle,
+} from '../../utils/styles'
 import { tokens } from '../../vendor/tapestry/tokens'
 import { Haptic } from '../../utils/native_adapters/configuration'
 
@@ -50,8 +54,16 @@ export function SwipeableToggleButton({
         <Spinner size={20} />
       ) : (
         <>
-          <Icon name={iconName} style={styles.icon} size={20} />
-          <Text variant="footnote" style={styles.text}>
+          <Icon
+            name={iconName}
+            style={styles.icon}
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+          />
+          <Text
+            variant="footnote"
+            style={styles.text}
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}
+          >
             {label}
           </Text>
         </>
@@ -78,12 +90,15 @@ const useStyles = ({ backgroundColor, disabled }: Partial<SwipeableToggleButtonP
       backgroundColor: buttonBackgroundColor,
     },
     icon: {
+      fontSize: 20,
       color: fillColor,
       marginTop: 4,
     },
     text: {
       color: fillColor,
       fontWeight: platformFontWeightMedium,
+      textAlign: 'center',
+      paddingHorizontal: 8,
     },
   })
 }

package/src/components/conversations/unread_count_badge.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Text } from '../display'
-import { useTheme } from '../../hooks'
-import { platformFontWeightBold } from '../../utils'
+import { useFontScale, useTheme } from '../../hooks'
+import { MAX_FONT_SIZE_MULTIPLIER, platformFontWeightBold } from '../../utils'
 
 export const UnreadCountBadge = ({ count, showDot }: { count: number; showDot: boolean }) => {
   const styles = useStyles()
@@ -22,6 +22,9 @@ export const UnreadCountBadge = ({ count, showDot }: { count: number; showDot: b
 
 const useStyles = () => {
   const { colors } = useTheme()
+  const dotScaleLimit = MAX_FONT_SIZE_MULTIPLIER * 1.5
+  const fontScale = useFontScale({ maxFontSizeMultiplier: dotScaleLimit })
+  const size = 8 * fontScale
 
   return StyleSheet.create({
     badge: {
@@ -29,16 +32,16 @@ const useStyles = () => {
       backgroundColor: colors.fillColorInteractionDefault,
       paddingVertical: 2,
       paddingHorizontal: 8,
-      borderRadius: 24,
+      borderRadius: 24 * fontScale,
     },
     count: {
       fontWeight: platformFontWeightBold,
       color: 'white',
     },
     dot: {
-      width: 8,
-      height: 8,
-      borderRadius: 8,
+      width: size,
+      height: size,
+      borderRadius: size,
       backgroundColor: colors.fillColorInteractionDefault,
     },
   })

package/src/components/display/action_button.tsx

@@ -58,20 +58,19 @@ export const ActionButton = ({
           iconNameLeft={buttonIconNameLeft}
           loading={loading}
           maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          accessibilityShowsLargeContentViewer
+          accessibilityLargeContentTitle={title}
         />
       </View>
     </Animated.View>
   )
 }
 
-const SCALE_THAT_BUTTONS_WRAP = 1.15
-
 const useStyles = () => {
   const { fontScale } = useWindowDimensions()
   const { bottom } = useSafeAreaInsets()
   const { colors } = useTheme()
   const containerVerticalPadding = 16
-  const isButtonsWrapping = fontScale >= SCALE_THAT_BUTTONS_WRAP
 
   return StyleSheet.create({
     container: {
@@ -85,7 +84,7 @@ const useStyles = () => {
     },
     buttonRow: {
       flexDirection: 'row',
-      justifyContent: isButtonsWrapping ? 'center' : 'space-between',
+      justifyContent: fontScale > 1 ? 'center' : 'space-between',
       alignItems: 'center',
       gap: 16,
       flexWrap: 'wrap-reverse',

package/src/components/display/avatar.tsx

@@ -12,6 +12,8 @@ interface AvatarProps {
   presence?: AvatarPresenceProps['presence']
   showFallback?: boolean
   fallbackIconName?: IconString
+  style?: AvatarRootProps['style']
+  maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']
 }
 
 export function Avatar({
@@ -20,11 +22,13 @@ export function Avatar({
   sourceUri,
   showFallback = false,
   fallbackIconName = 'general.person',
+  style,
+  maxFontSizeMultiplier,
 }: AvatarProps) {
   const shouldShowFallback = showFallback || !sourceUri
 
   return (
-    <AvatarPrimitive.Root size={size}>
+    <AvatarPrimitive.Root size={size} style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>
       <AvatarPrimitive.Mask>
         {shouldShowFallback ? (
           <AvatarPrimitive.ImageFallback name={fallbackIconName} />

package/src/components/display/avatar_group.tsx

@@ -10,6 +10,8 @@ interface AvatarGroupDisplayProps {
   showFallback?: boolean
   fallbackIconName?: IconString
   size?: AvatarRootProps['size']
+  style?: AvatarRootProps['style']
+  maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']
 }
 
 export function AvatarGroup({
@@ -17,11 +19,13 @@ export function AvatarGroup({
   showFallback = false,
   fallbackIconName = 'general.person',
   size = 'lg',
+  style,
+  maxFontSizeMultiplier,
 }: AvatarGroupDisplayProps) {
   const shouldShowFallback = showFallback || !sourceUris || sourceUris.length === 0
 
   return (
-    <AvatarPrimitive.Root size={size}>
+    <AvatarPrimitive.Root size={size} style={style} maxFontSizeMultiplier={maxFontSizeMultiplier}>
       <AvatarPrimitive.Mask>
         {shouldShowFallback ? (
           <AvatarPrimitive.ImageFallback name={fallbackIconName} />

package/src/components/display/badge.tsx

@@ -91,6 +91,10 @@ export interface BadgeProps {
    * Callback function when the badge is pressed.
    */
   onPress?: () => void
+  /**
+   * Specifies the number of lines for the meta label before truncating.
+   */
+  numberOfLinesMetaLabel?: number
 }
 
 export function Badge({
@@ -103,6 +107,7 @@ export function Badge({
   productLogoName,
   variant = 'default',
   maxFontSizeMultiplier,
+  numberOfLinesMetaLabel = 1,
   onPress,
 }: BadgeProps) {
   const styles = useStyles({ appearance, maxFontSizeMultiplier, variant })
@@ -134,7 +139,7 @@ export function Badge({
         <Text
           variant="footnote"
           style={styles.metaLabel}
-          numberOfLines={1}
+          numberOfLines={numberOfLinesMetaLabel}
           maxFontSizeMultiplier={maxFontSizeMultiplier}
         >
           {metaLabel}

package/src/components/display/icon.tsx

@@ -5,29 +5,17 @@ import { SvgXml } from 'react-native-svg'
 import type { XmlProps } from 'react-native-svg'
 import { useFontScale, useTheme } from '../../hooks'
 
-// @ts-ignore
 import * as accounts from '@planningcenter/icons/paths/accounts'
-// @ts-ignore
 import * as api from '@planningcenter/icons/paths/api'
-// @ts-ignore
 import * as brand from '@planningcenter/icons/paths/brand'
-// @ts-ignore
 import * as calendar from '@planningcenter/icons/paths/calendar'
-// @ts-ignore
 import * as chat from '@planningcenter/icons/paths/chat'
-// @ts-ignore
 import * as churchCenter from '@planningcenter/icons/paths/church-center'
-// @ts-ignore
 import * as general from '@planningcenter/icons/paths/general'
-// @ts-ignore
 import * as groups from '@planningcenter/icons/paths/groups'
-// @ts-ignore
 import * as logomark from '@planningcenter/icons/paths/logomark'
-// @ts-ignore
 import * as people from '@planningcenter/icons/paths/people'
-// @ts-ignore
 import * as services from '@planningcenter/icons/paths/services'
-// @ts-ignore
 import * as publishing from '@planningcenter/icons/paths/publishing'
 
 // =================================
@@ -57,7 +45,22 @@ export type IconStyle = ViewStyle & {
 }
 
 export type IconSetName = keyof typeof ICONS
-export type IconString = `${IconSetName}.${(typeof ICONS)[IconSetName]}`
+
+type IconName<T extends IconSetName> = keyof (typeof ICONS)[T] & string
+
+export type IconString =
+  | `accounts.${IconName<'accounts'>}`
+  | `api.${IconName<'api'>}`
+  | `brand.${IconName<'brand'>}`
+  | `calendar.${IconName<'calendar'>}`
+  | `chat.${IconName<'chat'>}`
+  | `churchCenter.${IconName<'churchCenter'>}`
+  | `general.${IconName<'general'>}`
+  | `groups.${IconName<'groups'>}`
+  | `logomark.${IconName<'logomark'>}`
+  | `people.${IconName<'people'>}`
+  | `services.${IconName<'services'>}`
+  | `publishing.${IconName<'publishing'>}`
 
 // =================================
 // ====== Component ================
@@ -137,7 +140,7 @@ const useGetIconSize = (size?: number, style?: IconStyle, maxFontSizeMultiplier?
 const getIconPath = (name: IconString): string => {
   const [setName, iconName] = name.split('.')
 
-  return ICONS[setName as IconSetName]?.[iconName]
+  return (ICONS[setName as IconSetName] as Record<string, string>)?.[iconName]
 }
 
 // =================================

package/src/components/display/index.ts

@@ -19,3 +19,4 @@ export * from './text_inline_button'
 export * from './text'
 export * from './toggle_button'
 export * from './keyboard_view'
+export * from './pressable_row'