@planningcenter/chat-react-native 3.32.1-rc.0 → 3.33.0-rc.0

package/src/screens/avatar_picker/emoji_tab.tsx

@@ -0,0 +1,76 @@
+import React, { useCallback } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { EmojiKeyboard, type EmojiType } from 'rn-emoji-keyboard'
+import { useTheme } from '../../hooks'
+
+interface EmojiTabProps {
+  onEmojiSelect: (emoji: string) => void
+}
+
+export function EmojiTab({ onEmojiSelect }: EmojiTabProps) {
+  const styles = useStyles()
+  const { colors } = useTheme()
+
+  const handleEmojiSelected = useCallback(
+    (emojiObject: EmojiType) => {
+      onEmojiSelect(emojiObject.emoji)
+    },
+    [onEmojiSelect]
+  )
+
+  const emojiTheme = {
+    container: colors.fillColorNeutral100Inverted,
+    header: colors.textColorDefaultSecondary,
+    knob: colors.fillColorNeutral040,
+    skinTonesContainer: colors.fillColorNeutral060,
+    category: {
+      icon: colors.textColorDefaultSecondary,
+      iconActive: colors.interaction,
+      container: colors.fillColorNeutral100Inverted,
+      containerActive: colors.fillColorNeutral080,
+    },
+    search: {
+      background: colors.fillColorNeutral080,
+      text: colors.textColorDefaultPrimary,
+      placeholder: colors.textColorDefaultSecondary,
+      icon: colors.textColorDefaultSecondary,
+    },
+    emoji: {
+      selected: colors.fillColorNeutral080,
+    },
+  }
+
+  return (
+    <View style={styles.container}>
+      <EmojiKeyboard
+        categoryPosition="top"
+        onEmojiSelected={handleEmojiSelected}
+        enableSearchBar
+        enableRecentlyUsed
+        theme={emojiTheme}
+        styles={{
+          container: { borderRadius: 0 },
+          category: {
+            container: {
+              borderRadius: 0,
+              marginTop: -6,
+              borderBottomWidth: 1,
+              borderBottomColor: colors.borderColorDefaultDim,
+            },
+          },
+        }}
+      />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      backgroundColor: colors.fillColorNeutral100Inverted,
+    },
+  })
+}

package/src/screens/avatar_picker/icon_grid.tsx

@@ -0,0 +1,81 @@
+import type { IconName } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
+import { PlatformPressable } from '@react-navigation/elements'
+import React, { useCallback } from 'react'
+import { FlatList, StyleSheet, useWindowDimensions } from 'react-native'
+import { useTheme } from '../../hooks'
+import { AVATAR_ICON_KEYS, GRID_COLUMNS } from './constants'
+
+interface IconGridProps {
+  selectedIconKey: string | null
+  onIconSelect: (iconKey: string) => void
+}
+
+export function IconGrid({ selectedIconKey, onIconSelect }: IconGridProps) {
+  const styles = useStyles()
+
+  const renderItem = useCallback(
+    ({ item }: { item: string }) => {
+      const isSelected = item === selectedIconKey
+
+      return (
+        <PlatformPressable
+          onPress={() => onIconSelect(item)}
+          style={[styles.cell, isSelected && styles.cellSelected]}
+          accessibilityRole="button"
+          accessibilityLabel={`${item.replace(/-/g, ' ')} icon`}
+          accessibilityState={{ selected: isSelected }}
+        >
+          <FontAwesomeIcon icon={['fas', item as IconName]} size={20} color="white" />
+        </PlatformPressable>
+      )
+    },
+    [selectedIconKey, onIconSelect, styles.cell, styles.cellSelected]
+  )
+
+  return (
+    <FlatList
+      data={AVATAR_ICON_KEYS}
+      numColumns={GRID_COLUMNS}
+      keyExtractor={item => item}
+      renderItem={renderItem}
+      contentContainerStyle={styles.grid}
+      columnWrapperStyle={styles.row}
+      style={styles.list}
+    />
+  )
+}
+
+const PADDING = 16
+const GAP = 8
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  const { width: screenWidth } = useWindowDimensions()
+  const cellSize = Math.floor((screenWidth - PADDING * 2 - (GRID_COLUMNS - 1) * GAP) / GRID_COLUMNS)
+
+  return StyleSheet.create({
+    list: {
+      flex: 1,
+    },
+    grid: {
+      padding: PADDING,
+    },
+    row: {
+      gap: GAP,
+      marginBottom: GAP,
+    },
+    cell: {
+      width: cellSize,
+      height: cellSize,
+      borderRadius: cellSize / 2,
+      backgroundColor: colors.fillColorNeutral040,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    cellSelected: {
+      borderWidth: 3,
+      borderColor: colors.interaction,
+    },
+  })
+}

package/src/screens/avatar_picker/upload_tab.tsx

@@ -0,0 +1,62 @@
+import React, { useCallback } from 'react'
+import { Alert, StyleSheet, View } from 'react-native'
+import { Button } from '../../components'
+import { useTheme } from '../../hooks'
+import { ImagePicker } from '../../utils/native_adapters'
+import type { ImagePickerAsset } from '../../utils/native_adapters/image_picker'
+
+const MAX_FILE_SIZE = 10 * 1024 * 1024 // 10MB
+
+interface UploadTabProps {
+  imagePreviewUri: string | null
+  onImageSelect: (asset: ImagePickerAsset) => void
+}
+
+export function UploadTab({ imagePreviewUri, onImageSelect }: UploadTabProps) {
+  const styles = useStyles()
+
+  const pickImage = useCallback(async () => {
+    const result = await ImagePicker.openImageLibraryAsync({
+      mediaTypes: ['images'],
+      allowsEditing: true,
+      allowsMultipleSelection: false,
+    })
+
+    if (result.canceled || !result.assets?.[0]) return
+
+    const asset = result.assets[0]
+
+    if (asset.fileSize && asset.fileSize > MAX_FILE_SIZE) {
+      Alert.alert('Image too large', 'Please choose an image under 10MB.')
+      return
+    }
+
+    onImageSelect(asset)
+  }, [onImageSelect])
+
+  return (
+    <View style={styles.container}>
+      <Button
+        title={imagePreviewUri ? 'Change photo' : 'Choose photo'}
+        iconNameLeft="general.image"
+        onPress={pickImage}
+        variant="outline"
+        appearance="interaction"
+        size="md"
+      />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: colors.fillColorNeutral100Inverted,
+    },
+  })
+}

package/src/screens/conversation_details_screen.tsx

@@ -26,6 +26,7 @@ import {
 } from 'react-native'
 import {
   Badge,
+  Button,
   ChildNotice,
   Heading,
   Icon,
@@ -35,6 +36,7 @@ import {
   TextButton,
   type TextStyle,
 } from '../components'
+import { ConversationAvatar } from '../components/display/conversation_avatar'
 import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
 import { ButtonAppearanceUnion } from '../components/display/utils/button_colors'
 import { useSuspensePaginator, useTheme } from '../hooks'
@@ -46,7 +48,7 @@ import {
   useConversationUpdate,
 } from '../hooks/use_conversation'
 import { availableFeatures, useFeatures } from '../hooks/use_features'
-import { MemberResource, isDefined } from '../types'
+import { type ConversationResource, MemberResource, isDefined } from '../types'
 import { GroupResource } from '../types/resources/group_resource'
 import { genderDisplayLabel } from '../utils/gender_display_label'
 import { tokens } from '../vendor/tapestry/tokens'
@@ -102,6 +104,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   const { mutate: deleteConversation } = useConversationDelete(route.params)
   const { featureEnabled } = useFeatures()
   const granularNotificationsEnabled = featureEnabled(availableFeatures.granular_notifications_ui)
+  const customAvatarsEnabled = featureEnabled(availableFeatures.custom_conversation_avatars)
   const showGenderFilter =
     featureEnabled(availableFeatures.gender_specific_conversations) && !!conversation.genderOption
   const genderLabel = conversation.genderOption ? genderDisplayLabel(conversation.genderOption) : ''
@@ -234,6 +237,25 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   }, [HeaderRight, HeaderTitle, navigation])
 
   const listData = [
+    {
+      type: canUpdate && customAvatarsEnabled ? SectionTypes.view : SectionTypes.hidden,
+      data: {
+        children: (
+          <AvatarCard
+            conversation={conversation}
+            onPress={() => navigation.navigate('AvatarPicker', { conversation_id })}
+          />
+        ),
+      },
+      sectionOuterStyle: styles.sectionOuterAvatarCard,
+      sectionInnerStyle: styles.sectionInnerAvatarCard,
+    },
+    {
+      type: SectionTypes.header,
+      data: { title: 'Basic info' },
+      showBottomBorder: true,
+      sectionInnerStyle: styles.sectionInnerHeaderWithBottomBorder,
+    },
     {
       type: SectionTypes.view,
       data: {
@@ -595,6 +617,30 @@ function NavigableSettingRow({ title, subtitle, onPress }: NavigableSettingRowPr
   )
 }
 
+function AvatarCard({
+  conversation,
+  onPress,
+}: {
+  conversation: ConversationResource
+  onPress: () => void
+}) {
+  const styles = useStyles()
+
+  return (
+    <View style={styles.avatarCard}>
+      <ConversationAvatar conversation={conversation} size="2xl" />
+      <Button
+        title="Update avatar"
+        iconNameLeft="general.pencil"
+        onPress={onPress}
+        variant="outline"
+        appearance="interaction"
+        size="sm"
+      />
+    </View>
+  )
+}
+
 function TeamsGroup({ teams }: { teams: GroupResource[] }) {
   const styles = useStyles()
 
@@ -725,6 +771,19 @@ const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } =
     navigableSettingChevron: {
       color: colors.iconColorDefaultDisabled,
     },
+    avatarCard: {
+      alignItems: 'center',
+      gap: 16,
+    },
+    sectionOuterAvatarCard: {
+      paddingLeft: 0,
+    },
+    sectionInnerAvatarCard: {
+      paddingTop: 24,
+      paddingBottom: 24,
+      paddingHorizontal: 16,
+      alignItems: 'center',
+    },
     teamGroup: {
       flexDirection: 'row',
       gap: 4,

package/src/screens/conversation_new/components/avatar_selection_row.tsx

@@ -0,0 +1,82 @@
+import { useNavigation, useRoute } from '@react-navigation/native'
+import React from 'react'
+import { Pressable, StyleSheet, View } from 'react-native'
+import { Icon, Text } from '../../../components'
+import { EmojiAvatar } from '../../../components/display/emoji_avatar'
+import { IconAvatar } from '../../../components/display/icon_avatar'
+import AvatarPrimitive from '../../../components/primitive/avatar_primitive'
+import { useTheme } from '../../../hooks'
+import type { AvatarUpdatePayload } from '../../../hooks/use_conversation_avatar_update'
+
+interface AvatarSelectionRowProps {
+  avatarSelection?: AvatarUpdatePayload
+}
+
+export function AvatarSelectionRow({ avatarSelection }: AvatarSelectionRowProps) {
+  const styles = useStyles()
+  const navigation = useNavigation()
+  const route = useRoute()
+
+  return (
+    <Pressable
+      style={styles.avatarSection}
+      onPress={() =>
+        navigation.navigate('AvatarPicker', {
+          source_params: route.params as Record<string, unknown>,
+          ...(avatarSelection && { avatar_selection: avatarSelection }),
+        })
+      }
+    >
+      <Text style={styles.avatarLabel}>Customize avatar</Text>
+      <View style={styles.avatarSectionTrailing}>
+        <AvatarSelectionPreview avatarSelection={avatarSelection} />
+        <Icon name="general.rightChevron" size={12} />
+      </View>
+    </Pressable>
+  )
+}
+
+interface AvatarSelectionPreviewProps {
+  avatarSelection?: AvatarUpdatePayload
+}
+
+export function AvatarSelectionPreview({ avatarSelection }: AvatarSelectionPreviewProps) {
+  if (!avatarSelection || avatarSelection.kind === 'clear') return null
+
+  switch (avatarSelection.kind) {
+    case 'icon':
+      return <IconAvatar iconKey={avatarSelection.key} color={avatarSelection.color} size="md" />
+    case 'emoji':
+      return <EmojiAvatar emoji={avatarSelection.key} color={avatarSelection.color} size="md" />
+    case 'image':
+      return (
+        <AvatarPrimitive.Root size="md">
+          <AvatarPrimitive.Mask>
+            <AvatarPrimitive.Image sourceUri={avatarSelection.imageAsset.uri} />
+          </AvatarPrimitive.Mask>
+        </AvatarPrimitive.Root>
+      )
+  }
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    avatarSection: {
+      padding: 16,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+    },
+    avatarSectionTrailing: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+    },
+    avatarLabel: {
+      fontSize: 18,
+      color: colors.textColorDefaultPrimary,
+    },
+  })
+}

package/src/screens/conversation_new/components/gender_filter_toggle.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { ActivityIndicator, StyleSheet, View } from 'react-native'
-import { Heading, Switch, Text, TextInlineButton } from '../../../components'
+import { Heading, Switch, Text } from '../../../components'
 import { useTheme } from '../../../hooks'
 import { genderDisplayLabel } from '../../../utils/gender_display_label'
 
@@ -26,10 +26,7 @@ function FilterableGenderContent({ genderValue, enabled, onToggle }: FilterableG
         />
       </View>
       <Text style={{ color: colors.textColorDefaultSecondary }}>
-        Filter limited to your profile's set gender.{' '}
-        <TextInlineButton nativeID="gender-filter-learn-more" onPress={() => {}}>
-          Learn more.
-        </TextInlineButton>
+        Filter limited to your profile's set gender.
       </Text>
     </>
   )
@@ -45,10 +42,7 @@ function NoGenderContent({ isFetching }: { isFetching: boolean }) {
         <ActivityIndicator size="small" />
       ) : (
         <Text style={{ color: colors.textColorDefaultSecondary }}>
-          Set a gender in your Church Center profile to enable gender filtering.{' '}
-          <TextInlineButton nativeID="gender-filter-learn-more" onPress={() => {}}>
-            Learn more.
-          </TextInlineButton>
+          Set a gender in your Church Center profile to enable gender filtering.
         </Text>
       )}
     </>

package/src/screens/conversation_new/components/groups_form.tsx

@@ -4,30 +4,42 @@ import { Platform, Pressable, StyleSheet, TextInput, View } from 'react-native'
 import { Banner, ChildNotice, Heading, Text } from '../../../components'
 import { ActionButton } from '../../../components/display/action_button'
 import { KeyboardView } from '../../../components/display/keyboard_view'
-import { useCurrentPerson, useSuspenseGet, useTheme } from '../../../hooks'
+import { useApiClient, useCurrentPerson, useSuspenseGet, useTheme } from '../../../hooks'
 import {
   GroupMembersForNewConversationResult,
   useGroupMembersForNewConversation,
 } from '../../../hooks/groups/use_group_members_for_new_conversation'
 import { useGroupsConversationCreate } from '../../../hooks/groups/use_groups_conversation_create'
+import {
+  type AvatarUpdatePayload,
+  patchConversationAvatar,
+} from '../../../hooks/use_conversation_avatar_update'
+import { availableFeatures, useFeatures } from '../../../hooks/use_features'
 import { useMyGender } from '../../../hooks/use_my_gender'
+import { useUploadClient } from '../../../hooks/use_upload_client'
 import { GroupsGroupResource } from '../../../types'
 import { GraphId } from '../../../types/resources/group_resource'
 import { pluralize } from '../../../utils'
 import { genderDisplayLabel } from '../../../utils/gender_display_label'
 import { Haptic } from '../../../utils/native_adapters'
+import { AvatarSelectionRow } from './avatar_selection_row'
 import { Divider, FormList } from './form_list'
 import { GenderFilterToggle } from './gender_filter_toggle'
 
 type GroupsFormProps = {
   groupId: number
   chat_group_graph_id?: GraphId
+  avatarSelection?: AvatarUpdatePayload
 }
 
-export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) => {
+export const GroupsForm = ({ groupId, chat_group_graph_id, avatarSelection }: GroupsFormProps) => {
   const navigation = useNavigation()
+  const apiClient = useApiClient()
+  const uploadClient = useUploadClient()
   const [title, setTitle] = useState('')
   const [genderFilterEnabled, setGenderFilterEnabled] = useState(false)
+  const { featureEnabled } = useFeatures()
+  const customAvatarsEnabled = featureEnabled(availableFeatures.custom_conversation_avatars)
   const {
     isFeatureEnabled: genderFilterAvailable,
     genderId,
@@ -67,9 +79,8 @@ export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) =>
     }
   }
 
-  const redirectToConversation = useCallback(
+  const handleCreateSuccess = useCallback(
     (conversationId: number) => {
-      // navigate to the conversation screen
       navigation.dispatch(
         StackActions.popTo('Conversation', {
           conversation_id: conversationId,
@@ -77,15 +88,19 @@ export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) =>
         })
       )
       Haptic.notificationSuccess()
+
+      if (avatarSelection && avatarSelection.kind !== 'clear') {
+        patchConversationAvatar(apiClient, uploadClient, conversationId, avatarSelection)
+      }
     },
-    [chat_group_graph_id, navigation]
+    [apiClient, avatarSelection, chat_group_graph_id, navigation, uploadClient]
   )
 
   const { mutate: handleSave, isPending } = useGroupsConversationCreate({
     groupId,
     title,
     genderId: activeGenderId,
-    onSuccess: redirectToConversation,
+    onSuccess: handleCreateSuccess,
   })
 
   return (
@@ -106,6 +121,8 @@ export const GroupsForm = ({ groupId, chat_group_graph_id }: GroupsFormProps) =>
             onGenderToggle={handleGenderToggle}
             groupMemberships={groupMemberships}
             filteredMemberCount={groupMemberships.adultMembers.length}
+            avatarSelection={avatarSelection}
+            customAvatarsEnabled={customAvatarsEnabled}
           />
         }
       />
@@ -130,6 +147,8 @@ interface FormContentProps {
   onGenderToggle: (enabled: boolean) => void
   groupMemberships: GroupMembersForNewConversationResult
   filteredMemberCount: number
+  avatarSelection?: AvatarUpdatePayload
+  customAvatarsEnabled: boolean
 }
 
 function FormContent({
@@ -143,6 +162,8 @@ function FormContent({
   onGenderToggle,
   groupMemberships,
   filteredMemberCount,
+  avatarSelection,
+  customAvatarsEnabled,
 }: FormContentProps) {
   const styles = useStyles()
   const inputRef = useRef<TextInput>(null)
@@ -185,6 +206,12 @@ function FormContent({
         />
       </Pressable>
       <Divider />
+      {customAvatarsEnabled && (
+        <>
+          <AvatarSelectionRow avatarSelection={avatarSelection} />
+          <Divider />
+        </>
+      )}
       {genderFilterAvailable && (
         <>
           <GenderFilterToggle

package/src/screens/conversation_new/components/services_form.tsx

@@ -4,14 +4,22 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { Badge, Banner, ChildNotice, Heading, Switch, TextButton } from '../../../components'
 import { ActionButton } from '../../../components/display/action_button'
+import { useApiClient } from '../../../hooks'
 import { useFindOrCreateServicesConversation } from '../../../hooks/services/use_find_or_create_services_conversation'
 import { useServicesTeams } from '../../../hooks/services/use_services_team'
 import { useTeamMembersForNewConversation } from '../../../hooks/services/use_team_members_for_new_conversation'
-import { ConversationResource, MemberResource } from '../../../types'
+import {
+  type AvatarUpdatePayload,
+  patchConversationAvatar,
+} from '../../../hooks/use_conversation_avatar_update'
+import { availableFeatures, useFeatures } from '../../../hooks/use_features'
+import { useUploadClient } from '../../../hooks/use_upload_client'
+import { MemberResource } from '../../../types'
 import { pluralize } from '../../../utils'
 import { Haptic } from '../../../utils/native_adapters'
 import { tokens } from '../../../vendor/tapestry/tokens'
 import { TeamFilterTypes } from '../../conversation_filter_recipients/types'
+import { AvatarSelectionRow } from './avatar_selection_row'
 import { FilterByPlan } from './filter_by_plan'
 import { Divider, FormList } from './form_list'
 
@@ -19,14 +27,20 @@ type ServicesFormProps = {
   initialTeamIds?: number[]
   initialPlanId?: number
   teamFilterType?: TeamFilterTypes
+  avatarSelection?: AvatarUpdatePayload
 }
 
 export const ServicesForm = ({
   initialTeamIds,
   initialPlanId,
   teamFilterType,
+  avatarSelection,
 }: ServicesFormProps) => {
   const styles = useStyles()
+  const apiClient = useApiClient()
+  const uploadClient = useUploadClient()
+  const { featureEnabled } = useFeatures()
+  const customAvatarsEnabled = featureEnabled(availableFeatures.custom_conversation_avatars)
   const [selectedPlanId, setSelectedPlanId] = useState<number | undefined>(initialPlanId)
   const initialState = useMemo(() => uniq(initialTeamIds) || [], [initialTeamIds]) // Uniq here because services can send duplicates in the teams_i_lead response.
   const [selectedTeamIds, setSelectedTeamIds] = useState<number[]>(initialState)
@@ -61,17 +75,19 @@ export const ServicesForm = ({
   } = useFindOrCreateServicesConversation({
     teamIds: selectedTeamIds,
     planId: filerByPlan ? selectedPlanId : undefined,
-    onSuccess: (conversation: ConversationResource) => {
-      // exit from the create stack
+    onSuccess: (conversation, { created }) => {
       navigation.getParent()?.goBack()
-      // navigate to the conversation screen
       navigation.dispatch(
         StackActions.push('Conversation', {
           conversation_id: conversation.id,
         })
       )
-      // Only trigger success haptic if creating a new conversation
-      if (!selectionHasConversation) Haptic.notificationSuccess()
+      if (created) {
+        Haptic.notificationSuccess()
+        if (avatarSelection && avatarSelection.kind !== 'clear') {
+          patchConversationAvatar(apiClient, uploadClient, conversation.id, avatarSelection)
+        }
+      }
     },
   })
 
@@ -90,6 +106,9 @@ export const ServicesForm = ({
             members={members}
             isMemberError={isMemberError}
             teamFilterType={teamFilterType}
+            avatarSelection={avatarSelection}
+            selectionHasConversation={selectionHasConversation}
+            customAvatarsEnabled={customAvatarsEnabled}
           />
         }
       />
@@ -114,6 +133,9 @@ interface FormContentProps {
   members: MemberResource[]
   isMemberError: boolean
   teamFilterType?: TeamFilterTypes
+  avatarSelection?: AvatarUpdatePayload
+  selectionHasConversation: boolean
+  customAvatarsEnabled: boolean
 }
 
 function FormContent({
@@ -126,6 +148,9 @@ function FormContent({
   members,
   isMemberError,
   teamFilterType,
+  avatarSelection,
+  selectionHasConversation,
+  customAvatarsEnabled,
 }: FormContentProps) {
   const navigation = useNavigation()
   const servicesTeams = useServicesTeams()
@@ -205,6 +230,12 @@ function FormContent({
         )}
       </View>
       <Divider />
+      {!selectionHasConversation && customAvatarsEnabled && (
+        <>
+          <AvatarSelectionRow avatarSelection={avatarSelection} />
+          <Divider />
+        </>
+      )}
       <View style={styles.memberSection}>
         <Heading variant="h3">{pluralize(memberCount, 'member')} selected</Heading>
         {hasChildren && (