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

package/src/components/display/icon.tsx

@@ -4,14 +4,24 @@ import type { ColorValue, StyleProp, ViewStyle } from 'react-native'
 import { SvgXml } from 'react-native-svg'
 import type { XmlProps } from 'react-native-svg'
 import { useFontScale, useTheme } from '../../hooks'
+
+// @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 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'
 
 // =================================
@@ -37,6 +47,9 @@ type IconStyle = ViewStyle & {
   color?: string
 }
 
+export type IconSetName = keyof typeof ICONS
+export type IconString = `${IconSetName}.${(typeof ICONS)[IconSetName]}`
+
 // =================================
 // ====== Component ================
 // =================================
@@ -46,7 +59,7 @@ export interface IconProps extends Omit<XmlProps, 'xml' | 'fontSize'> {
    * Made up of the set.iconName.
    * Example: "general.textMessage"
    */
-  name: string
+  name: IconString
   /**
    * This sets a static size for the icon.
    * Providing a fontSize style will allow the icon to scale with the device's text a11y size.
@@ -112,10 +125,10 @@ const useGetIconSize = (size?: number, style?: IconStyle, maxFontSizeMultiplier?
   return size || FALLBACK_SIZE
 }
 
-const getIconPath = (name: string): string => {
+const getIconPath = (name: IconString): string => {
   const [setName, iconName] = name.split('.')
 
-  return ICONS[setName]?.[iconName]
+  return ICONS[setName as IconSetName]?.[iconName]
 }
 
 // =================================

package/src/components/display/icon_button.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Pressable, StyleSheet } from 'react-native'
 import type { PressableProps, ViewStyle } from 'react-native'
 import { Icon } from './icon'
-import type { IconProps } from './icon'
+import type { IconProps, IconString } from './icon'
 import { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../hooks'
 import { platformPressedOpacityStyle } from '../../utils'
 import { Spinner } from './spinner'
@@ -67,7 +67,7 @@ interface IconButtonProps extends PressableProps {
   /**
    * Generates an icon from `@planningcenter/icons`
    */
-  name: string
+  name: IconString
   /**
    * Changes the overall size of the button and its contents
    */

package/src/components/display/index.ts

@@ -15,3 +15,4 @@ export * from './switch'
 export * from './text_button'
 export * from './text_inline_button'
 export * from './text'
+export * from './toggle_button'

package/src/components/display/text.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '../../hooks'
 import React from 'react'
-import { Platform, StyleSheet, Text as ReactNativeText } from 'react-native'
+import { StyleSheet, Text as ReactNativeText } from 'react-native'
 import type { TextStyle, TextProps as ReactNativeTextProps } from 'react-native'
 import { tokens } from '../../vendor/tapestry/tokens'
 

package/src/components/display/toggle_button.tsx

@@ -0,0 +1,157 @@
+import React, { useMemo } from 'react'
+import { Pressable, StyleSheet } from 'react-native'
+import type { PressableProps } from 'react-native'
+import { Text } from './text'
+import { useTheme, useFontScale, useCreateAndroidRippleColor } from '../../hooks'
+import { platformFontWeightBold, platformPressedOpacityStyle } from '../../utils'
+import colorFunction from 'color'
+import { Icon, IconString } from './icon'
+import { tokens } from '../../vendor/tapestry/tokens'
+
+// =================================
+// ====== Component ================
+// =================================
+
+export interface ToggleButtonProps extends PressableProps {
+  /**
+   * Pressable container styles
+   */
+  active: boolean
+  /**
+   * Specifies whether fonts should be scaled down automatically to fit given style constraints.
+   */
+  adjustsFontSizeToFit?: boolean
+  /**
+   * Specifies whether fonts should scale to respect the device's text size accessibility settings. The default is true.
+   */
+  allowFontScaling?: boolean
+  /**
+   * Generates an icon to the left of the button text
+   */
+  iconNameLeft?: IconString
+  /**
+   * Generates an icon to the right of the button text
+   */
+  iconNameRight?: IconString
+  /**
+   * Specifies the maximum size a font can reach when allowFontScaling is enabled.
+   */
+  maxFontSizeMultiplier?: number
+  /**
+   * Specifies smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).
+   */
+  minimumFontScale?: number
+  /**
+   * Renders as text within the button
+   */
+  title: string
+  /**
+   * Pressable container styles
+   */
+  style?: PressableProps['style']
+}
+
+export function ToggleButton({
+  active,
+  adjustsFontSizeToFit = false,
+  allowFontScaling = true,
+  iconNameLeft,
+  iconNameRight,
+  maxFontSizeMultiplier,
+  minimumFontScale,
+  title,
+  style,
+  ...props
+}: ToggleButtonProps) {
+  const styles = useStyles({ active, maxFontSizeMultiplier })
+  const { colors } = useTheme()
+  const overrideStyles = StyleSheet.flatten(style) // Ensures the pressed styles still get applied
+
+  const baseRippleColor = active ? colors.interaction : colors.fillColorNeutral050Base
+  const androidRippleColor = useCreateAndroidRippleColor({ color: baseRippleColor })
+
+  return (
+    <Pressable
+      style={({ pressed }) => ({
+        ...styles.pressable,
+        ...(pressed ? platformPressedOpacityStyle : null),
+        ...overrideStyles,
+      })}
+      accessibilityRole="togglebutton"
+      accessibilityState={{ checked: active }}
+      android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}
+      {...props}
+    >
+      {iconNameLeft && (
+        <Icon
+          name={iconNameLeft}
+          style={styles.icon}
+          maxFontSizeMultiplier={maxFontSizeMultiplier}
+        />
+      )}
+      <Text
+        allowFontScaling={allowFontScaling}
+        minimumFontScale={minimumFontScale}
+        maxFontSizeMultiplier={maxFontSizeMultiplier}
+        adjustsFontSizeToFit={adjustsFontSizeToFit}
+        numberOfLines={1}
+        style={styles.text}
+        variant="tertiary"
+      >
+        {title}
+      </Text>
+      {iconNameRight && (
+        <Icon
+          name={iconNameRight}
+          style={styles.icon}
+          maxFontSizeMultiplier={maxFontSizeMultiplier}
+        />
+      )}
+    </Pressable>
+  )
+}
+
+// =================================
+// ====== Styles ===================
+// =================================
+
+const useStyles = ({ active, maxFontSizeMultiplier }: Partial<ToggleButtonProps>) => {
+  const { colors, button } = useTheme()
+  const fontScale = useFontScale({ maxFontSizeMultiplier })
+
+  const activeBackgroundColor = useMemo(() => {
+    return colorFunction(colors.interaction)
+      .hsl()
+      .lightness(colors.name === 'dark' ? 12 : 92)
+      .string()
+  }, [colors.interaction, colors.name])
+
+  const color = active ? colors.interaction : colors.textColorDefaultSecondary
+
+  return StyleSheet.create({
+    pressable: {
+      borderRadius: button.borderRadius * fontScale,
+      borderWidth: 1,
+      borderColor: active ? colors.interaction : colors.borderColorDefaultBase,
+      backgroundColor: active ? activeBackgroundColor : 'transparent',
+      paddingHorizontal: 16 * fontScale,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: 32 * fontScale,
+      gap: 6 * fontScale,
+      overflow: 'hidden',
+    },
+    text: {
+      textAlign: 'center',
+      textAlignVertical: 'center',
+      includeFontPadding: false,
+      fontWeight: platformFontWeightBold,
+      color,
+    },
+    icon: {
+      fontSize: tokens.fontSizeSm * fontScale,
+      color,
+    },
+  })
+}

package/src/components/display/utils/button_colors.ts

@@ -89,12 +89,17 @@ function useGradientColorMap(): GradientColorMap {
 // ====== Functions ================
 // =================================
 
-interface GetColorKeyArgs {
+interface GetColorKeyArgs<T> {
   disabled: boolean | null
   loading?: boolean
-  appearance: ButtonAppearanceUnion | IconButtonAppearanceUnion
+  appearance: T
 }
-function getColorKey({ disabled, loading, appearance }: GetColorKeyArgs) {
+
+function getColorKey<T extends ButtonAppearanceUnion | IconButtonAppearanceUnion>({
+  disabled,
+  loading,
+  appearance,
+}: GetColorKeyArgs<T>) {
   if (disabled || loading) return 'disabled'
   return appearance
 }

package/src/components/primitive/avatar_primitive.tsx

@@ -168,10 +168,11 @@ interface AvatarGroupProps {
   sourceUris: string[]
 }
 
+type AvatarIndex = 0 | 1 | 2 | 3
 function AvatarGroup({ sourceUris }: AvatarGroupProps) {
   const styles = useStyles()
   const { setAllImagesLoaded } = useAvatarContext()
-  const [loadingStatus, setLoadingStatus] = useState({
+  const [loadingStatus, setLoadingStatus] = useState<Record<AvatarIndex, boolean>>({
     0: false,
     1: false,
     2: false,
@@ -180,7 +181,7 @@ function AvatarGroup({ sourceUris }: AvatarGroupProps) {
   const displayUris = sourceUris.slice(0, 4)
   const hasDisplayUris = displayUris.length > 0
 
-  const handleImageLoaded = index => {
+  const handleImageLoaded = (index: AvatarIndex) => {
     setLoadingStatus(prev => ({
       ...prev,
       [index]: true,
@@ -189,7 +190,8 @@ function AvatarGroup({ sourceUris }: AvatarGroupProps) {
 
   useEffect(() => {
     const allImagesLoaded =
-      hasDisplayUris && displayUris.every((_, index) => loadingStatus[index] === true)
+      hasDisplayUris &&
+      displayUris.every((_, index) => loadingStatus[index as AvatarIndex] === true)
 
     setAllImagesLoaded(allImagesLoaded)
   }, [displayUris, hasDisplayUris, loadingStatus, setAllImagesLoaded])

package/src/components/primitive/banner_primitive.tsx

@@ -12,7 +12,7 @@ import {
 } from '../../utils'
 import { tokens } from '../../vendor/tapestry/tokens'
 import { useCreateAndroidRippleColor, useFontScale } from '../../hooks'
-import { Icon } from '../display/icon'
+import { Icon, IconString } from '../display/icon'
 import { Heading } from '../display/heading'
 import { Text } from '../display/text'
 import { TextInlineButton } from '../display/text_inline_button'
@@ -161,7 +161,7 @@ BannerContent.displayName = 'Banner.Content'
 // ========================================
 
 interface BannerStatusIconProps {
-  iconName?: string
+  iconName?: IconString
 }
 
 function BannerStatusIcon({ iconName }: BannerStatusIconProps) {

package/src/contexts/api_provider.tsx

@@ -48,7 +48,7 @@ function useSessionChanged(value: Pick<ChatContextValue, 'token' | 'env'>): bool
   return Boolean(prevToken && newToken !== prevToken) || Boolean(prevEnv && newEnv !== prevEnv)
 }
 
-function usePrevious<T>(value) {
+function usePrevious<T>(value: T): T {
   const ref = useRef<T>(value)
 
   useEffect(() => {

package/src/contexts/swipeable_active_conversation.tsx

@@ -0,0 +1,27 @@
+import React, { createContext, useContext, useState } from 'react'
+
+type ConversationActionsValue = {
+  activeConversationId?: number
+  setActiveConversationId: (_id: number) => void
+}
+const ConversationActionsContext = createContext<ConversationActionsValue>({
+  activeConversationId: undefined,
+  setActiveConversationId: () => {},
+})
+
+export const ConversationActionsProvider = ({ children }: { children: React.ReactNode }) => {
+  const [activeConversationId, setActiveConversationId] = useState<number | undefined>()
+
+  return (
+    <ConversationActionsContext.Provider
+      value={{
+        activeConversationId,
+        setActiveConversationId,
+      }}
+    >
+      {children}
+    </ConversationActionsContext.Provider>
+  )
+}
+
+export const useConversationActionsContext = () => useContext(ConversationActionsContext)

package/src/hooks/use_conversation.ts

@@ -34,7 +34,7 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
   },
 })
 
-export const useConversation = ({ conversation_id }) => {
+export const useConversation = ({ conversation_id }: { conversation_id: number }) => {
   return useSuspenseGet<ConversationResource>(getConversationRequestArgs({ conversation_id }))
 }
 
@@ -60,7 +60,7 @@ export const useConversationMute = ({ conversation_id }: { conversation_id: numb
     mutationFn: async (muted: boolean) => {
       const action = muted ? 'mute' : 'unmute'
 
-      return apiClient.chat.post({
+      return apiClient.chat.post<ApiResource<ConversationResource>>({
         url: `/me/conversations/${conversation_id}/${action}`,
         data: { data: { type: '', attributes: {} }, fields: { Conversation: 'muted' } },
       })
@@ -104,12 +104,12 @@ export const useConversationUpdate = ({ conversation_id }: { conversation_id: nu
     mutationKey: ['mutateConversation'],
     mutationFn: async (update: Partial<ConversationResource>) => {
       const postArgs = transformGetToPost(requestArgs).data
-      return apiClient.chat.patch({
+      return apiClient.chat.patch<ApiResource<ConversationResource>>({
         url: `/me/conversations/${conversation_id}/`,
         data: { data: { type: '', attributes: update }, ...postArgs },
       })
     },
-    onSuccess: (response: ApiResource<ConversationResource>) => {
+    onSuccess: response => {
       queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, () => response)
     },
   })
@@ -153,7 +153,7 @@ export const useConversationDisableReplies = ({ conversation_id }: { conversatio
     },
     mutationKey: ['disableRepliesConversation'],
     mutationFn: async (repliesDisabled: boolean) => {
-      return apiClient.chat.patch({
+      return apiClient.chat.patch<ApiResource<ConversationResource>>({
         url: `/me/conversations/${conversation_id}`,
         data: {
           data: {

package/src/hooks/use_jolt.ts

@@ -38,7 +38,7 @@ export const useJoltClient = (): JoltClient | undefined => {
 
   const fetchSubscribeTokenFn: FetchSubscribeToken = (channel: string, connectionId: string) => {
     return apiClient.chat
-      .post({
+      .post<ApiResource<JoltResponse>>({
         url: '/me/jolt_subscribe',
         data: {
           data: {
@@ -47,7 +47,7 @@ export const useJoltClient = (): JoltClient | undefined => {
           },
         },
       })
-      .then((res: ApiResource<JoltResponse>) => res.data.id)
+      .then(res => res.data.id)
   }
 
   const { data: joltClient } = useQuery({

package/src/navigation/index.tsx

@@ -8,7 +8,7 @@ import React from 'react'
 import { Icon } from '../components'
 import { ConversationDetailsScreen } from '../screens/conversation_details_screen'
 import { ConversationScreen } from '../screens/conversation_screen'
-import { ConversationsScreen } from '../screens/conversations_screen'
+import { ConversationsScreen } from '../screens/conversations/conversations_screen'
 import { ConversationCreateScreen } from '../screens/create/conversation_create_screen'
 import {
   ConversationFilterReceipientsScreenOptions,
@@ -27,6 +27,7 @@ import {
   ConversationFiltersScreen,
   ConversationFiltersScreenOptions,
 } from '../screens/conversation_filters_screen'
+import { ConversationFiltersParams } from '../screens/conversation_filters/screen_props'
 
 export const CreateConversationStack = createNativeStackNavigator({
   initialRouteName: 'ConversationSelectRecipients',
@@ -85,6 +86,23 @@ export const ChatStack = createNativeStackNavigator({
     },
     Conversation: {
       screen: ConversationScreen,
+      options: ({ route, navigation }) => ({
+        headerTitle: (route.params as { title?: string })?.title ?? 'Chat',
+        headerLeft: props => (
+          <HeaderBackButton
+            displayMode="minimal"
+            onPress={() => {
+              if ((route.params as ConversationFiltersParams)?.chat_group_graph_id) {
+                // Ensure that conversations with a graph id pass them back to the conversation list
+                navigation.popTo('Conversations', route.params)
+              } else {
+                navigation.goBack()
+              }
+            }}
+            {...props}
+          />
+        ),
+      }),
     },
     ConversationDetails: {
       screen: ConversationDetailsScreen,

package/src/screens/conversation_filters/components/conversation_filters.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo } from 'react'
-import { FlatList, RefreshControl, StyleSheet, View, ViewStyle } from 'react-native'
+import { FlatList, StyleSheet, View, ViewStyle } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Heading } from '../../../components'
 import { useTheme } from '../../../hooks'

package/src/screens/conversation_filters/components/rows.tsx

@@ -14,13 +14,22 @@ import { ConversationFilterStackParamList } from '../screen_props'
 export type FilterProps = { group_source_app_name?: string; isActive: boolean; filter: FilterTypes }
 
 export const FilterRow = ({ group_source_app_name, isActive, filter }: FilterProps) => {
-  const styles = useRowStyles()
+  const styles = useRowStyles({ isActive })
   const { setAppFilter } = useContext(FilterContext)
 
   return (
-    <PressableRow style={styles.row} onPress={() => setAppFilter({ group_source_app_name })}>
+    <PressableRow
+      style={styles.row}
+      onPress={() => setAppFilter({ group_source_app_name })}
+      isActive={isActive}
+    >
       <Text>{filter}</Text>
-      {isActive ? <Icon name="general.check" size={16} style={styles.rowIconRight} /> : null}
+      <Icon
+        name="general.check"
+        size={16}
+        style={styles.rowIconRight}
+        accessibilityElementsHidden
+      />
     </PressableRow>
   )
 }
@@ -31,7 +40,7 @@ export type GroupRowProps = {
 }
 
 export const GroupRow = ({ group, isActive }: GroupRowProps) => {
-  const styles = useRowStyles()
+  const styles = useRowStyles({ isActive })
   const { setGroupFilter } = useContext(FilterContext)
 
   const handleFilterByGroup = () => {
@@ -41,7 +50,7 @@ export const GroupRow = ({ group, isActive }: GroupRowProps) => {
   const { headerImage, membershipsCount } = group
 
   return (
-    <PressableRow style={styles.row} onPress={handleFilterByGroup}>
+    <PressableRow style={styles.row} onPress={handleFilterByGroup} isActive={isActive}>
       {headerImage?.thumbnail && (
         <Image
           source={{ uri: headerImage?.thumbnail }}
@@ -50,13 +59,18 @@ export const GroupRow = ({ group, isActive }: GroupRowProps) => {
           alt={`Image for ${group.name}`}
         />
       )}
-      <View>
+      <View style={styles.rowContent}>
         <Heading variant="h3" style={styles.rowTitle}>
           {group.name}
         </Heading>
         {membershipsCount && <Text>{group.membershipsCount} members</Text>}
       </View>
-      {isActive ? <Icon name="general.check" size={16} style={styles.rowIconRight} /> : null}
+      <Icon
+        name="general.check"
+        size={16}
+        style={styles.rowIconRight}
+        accessibilityElementsHidden
+      />
     </PressableRow>
   )
 }
@@ -67,12 +81,12 @@ export type TeamRowProps = {
 }
 
 export const TeamRow = ({ team }: TeamRowProps) => {
-  const styles = useRowStyles()
   const { setGroupFilter } = useContext(FilterContext)
   const servicesTeams = useServicesTeamsMap()
   const { params } = useContext(FilterContext)
   const { chat_group_graph_id } = params
   const isActive = chat_group_graph_id === team.id.toString()
+  const styles = useRowStyles({ isActive })
 
   const handleFilterByGroup = () => {
     setGroupFilter({ chat_group_graph_id: team.id })
@@ -82,14 +96,19 @@ export const TeamRow = ({ team }: TeamRowProps) => {
   const serviceTypeName = servicesTeam?.serviceTypeName || servicesTeam?.group
 
   return (
-    <PressableRow style={styles.row} onPress={handleFilterByGroup}>
-      <View>
+    <PressableRow style={styles.row} onPress={handleFilterByGroup} isActive={isActive}>
+      <View style={styles.rowContent}>
         <Heading variant="h3" style={styles.rowTitle}>
           {team.name}
         </Heading>
         <Text>{serviceTypeName}</Text>
       </View>
-      {isActive ? <Icon name="general.check" size={16} style={styles.rowIconRight} /> : null}
+      <Icon
+        name="general.check"
+        size={16}
+        style={styles.rowIconRight}
+        accessibilityElementsHidden
+      />
     </PressableRow>
   )
 }
@@ -109,12 +128,18 @@ export const ViewMore = ({ routeName }: ViewMoreRowProps) => {
 
 export const PressableRow = ({
   children,
+  isActive,
   onPress,
   style,
-}: PropsWithChildren<{ onPress: () => void; style?: ViewStyle }>) => {
+}: PropsWithChildren<{ isActive: boolean; onPress: () => void; style?: ViewStyle }>) => {
   const styles = useRowStyles()
   return (
-    <PlatformPressable style={styles.container} onPress={onPress}>
+    <PlatformPressable
+      style={styles.container}
+      onPress={onPress}
+      accessibilityRole="radio"
+      accessibilityState={{ selected: isActive }}
+    >
       <View style={[styles.innerContainer, style]}>{children}</View>
     </PlatformPressable>
   )
@@ -124,7 +149,7 @@ const ASPECT_RATIO = 16 / 9
 const THUMBNAIL_WIDTH = 80
 const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO
 
-const useRowStyles = () => {
+const useRowStyles = ({ isActive = false }: { isActive?: boolean } = {}) => {
   const theme = useTheme()
   return StyleSheet.create({
     container: {
@@ -153,12 +178,17 @@ const useRowStyles = () => {
       height: THUMBNAIL_HEIGHT,
       borderRadius: 4,
     },
+    rowContent: {
+      flexShrink: 1,
+    },
     rowIconRight: {
       marginLeft: 'auto',
       color: theme.colors.statusSuccessIcon,
+      opacity: isActive ? 1 : 0,
     },
     rowTitle: {
       fontSize: 16,
+      flexShrink: 1,
     },
   })
 }

package/src/screens/conversations/components/chat_group_badge.tsx

@@ -0,0 +1,47 @@
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
+import React, { useCallback } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Badge } from '../../../components'
+import { useApiGet } from '../../../hooks/use_api'
+import { GroupResource } from '../../../types/resources/group_resource'
+import { ConversationScreenProps } from '../conversations_screen'
+
+export const ChatGroupBadge = () => {
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const route = useRoute<RouteProp<ConversationScreenProps['route']>>()
+  const { chat_group_graph_id } = route.params || {}
+  const { data: group } = useApiGet<GroupResource>({
+    url: `/me/groups/${chat_group_graph_id}`,
+    data: {
+      fields: {
+        Group: [],
+      },
+    },
+    enabled: !!chat_group_graph_id,
+    app: 'chat',
+  })
+
+  const handleBadgePress = useCallback(() => {
+    navigation.setParams({
+      chat_group_graph_id: undefined,
+      group_source_app_name: undefined,
+    })
+  }, [navigation])
+
+  if (!group) return null
+
+  return (
+    <View style={styles.row}>
+      <Badge iconNameRight="general.x" label={group?.name || ''} onPress={handleBadgePress} />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  return StyleSheet.create({
+    row: {
+      flexDirection: 'row',
+    },
+  })
+}