diff --git a/native/chat/settings/thread-settings-avatar.react.js b/native/chat/settings/thread-settings-avatar.react.js
new file mode 100644
--- /dev/null
+++ b/native/chat/settings/thread-settings-avatar.react.js
@@ -0,0 +1,38 @@
+// @flow
+
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
+import { type ResolvedThreadInfo } from 'lib/types/thread-types.js';
+
+import Avatar from '../../components/avatar.react.js';
+import { useStyles } from '../../themes/colors.js';
+
+type Props = {
+ +threadInfo: ResolvedThreadInfo,
+};
+function ThreadSettingsAvatar(props: Props): React.Node {
+ const styles = useStyles(unboundStyles);
+ const avatarInfo = useGetAvatarForThread(props.threadInfo);
+
+ return (
+
+
+
+ );
+}
+
+const unboundStyles = {
+ container: {
+ alignItems: 'center',
+ backgroundColor: 'panelForeground',
+ flex: 1,
+ paddingVertical: 16,
+ },
+};
+
+const MemoizedThreadSettingsAvatar: React.ComponentType =
+ React.memo(ThreadSettingsAvatar);
+
+export default MemoizedThreadSettingsAvatar;
diff --git a/native/chat/settings/thread-settings.react.js b/native/chat/settings/thread-settings.react.js
--- a/native/chat/settings/thread-settings.react.js
+++ b/native/chat/settings/thread-settings.react.js
@@ -43,6 +43,7 @@
useResolvedOptionalThreadInfos,
} from 'lib/utils/entity-helpers.js';
+import ThreadSettingsAvatar from './thread-settings-avatar.react.js';
import type { CategoryType } from './thread-settings-category.react.js';
import {
ThreadSettingsCategoryHeader,
@@ -94,6 +95,7 @@
} from '../../themes/colors.js';
import type { VerticalBounds } from '../../types/layout-types.js';
import type { ViewStyle } from '../../types/styles.js';
+import { useShouldRenderAvatars } from '../../utils/avatar-utils.js';
import type { ChatNavigationProp } from '../chat.react.js';
const itemPageLength = 5;
@@ -126,6 +128,11 @@
+key: string,
+categoryType: CategoryType,
}
+ | {
+ +itemType: 'avatar',
+ +key: string,
+ +threadInfo: ResolvedThreadInfo,
+ }
| {
+itemType: 'name',
+key: string,
@@ -246,6 +253,7 @@
// withKeyboardState
+keyboardState: ?KeyboardState,
+canPromoteSidebar: boolean,
+ +shouldRenderAvatars: boolean,
};
type State = {
+numMembersShowing: number,
@@ -341,6 +349,25 @@
const canChangeColor = canEditThreadColor && canStartEditing;
const listData: ChatSettingsItem[] = [];
+ if (this.props.shouldRenderAvatars) {
+ listData.push({
+ itemType: 'header',
+ key: 'avatarHeader',
+ title: 'Channel Avatar',
+ categoryType: 'unpadded',
+ });
+ listData.push({
+ itemType: 'avatar',
+ key: 'avatar',
+ threadInfo,
+ });
+ listData.push({
+ itemType: 'footer',
+ key: 'avatarFooter',
+ categoryType: 'outline',
+ });
+ }
+
listData.push({
itemType: 'header',
key: 'basicsHeader',
@@ -878,6 +905,8 @@
);
} else if (item.itemType === 'footer') {
return ;
+ } else if (item.itemType === 'avatar') {
+ return ;
} else if (item.itemType === 'name') {
return (
);
});