diff --git a/native/navigation/community-drawer-item-cummuninty.react.js b/native/navigation/community-drawer-item-cummuninty.react.js
new file mode 100644
--- /dev/null
+++ b/native/navigation/community-drawer-item-cummuninty.react.js
@@ -0,0 +1,45 @@
+// @flow
+
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { useStyles } from '../themes/colors';
+import CommunityDrawerItem from './community-drawer-item.react';
+import type { DrawerItemProps } from './community-drawer-item.react';
+
+function CommunityDrawerItemCommunity(props: DrawerItemProps): React.Node {
+  const styles = useStyles(unboundStyles);
+
+  const style = props.expanded
+    ? styles.communityExpanded
+    : styles.communityHidden;
+
+  return (
+    <View style={style}>
+      <CommunityDrawerItem {...props} />
+    </View>
+  );
+}
+
+const unboundStyles = {
+  communityHidden: {
+    paddingVertical: 8,
+    paddingRight: 24,
+    paddingLeft: 8,
+    overflow: 'hidden',
+  },
+  communityExpanded: {
+    paddingVertical: 8,
+    paddingRight: 24,
+    paddingLeft: 8,
+    overflow: 'hidden',
+    backgroundColor: 'drawerOpenCommunityBackground',
+    borderTopRightRadius: 8,
+    borderBottomRightRadius: 8,
+  },
+};
+
+const MemoizedCommunityDrawerItemCommunity: React.ComponentType<DrawerItemProps> = React.memo(
+  CommunityDrawerItemCommunity,
+);
+export default MemoizedCommunityDrawerItemCommunity;
diff --git a/native/navigation/community-drawer-item.react.js b/native/navigation/community-drawer-item.react.js
new file mode 100644
--- /dev/null
+++ b/native/navigation/community-drawer-item.react.js
@@ -0,0 +1,137 @@
+// @flow
+
+import * as React from 'react';
+import { View, Text, FlatList, TouchableOpacity } from 'react-native';
+
+import type { ThreadInfo } from 'lib/types/thread-types';
+
+import type { MessageListParams } from '../chat/message-list-types';
+import { useStyles } from '../themes/colors';
+import {
+  ExpandButton,
+  ExpandButtonDisabled,
+  ExpandButtonExpanded,
+} from './expand-buttons.react';
+
+export type CommunityDrawerItemData = {
+  threadInfo: ThreadInfo,
+  itemChildren?: $ReadOnlyArray<CommunityDrawerItemData>,
+};
+
+export type DrawerItemProps = {
+  itemData: CommunityDrawerItemData,
+  setExpanded: string => void,
+  expanded: boolean,
+  navigateToThread: (params: MessageListParams) => void,
+};
+
+function CommunityDrawerItem(props: DrawerItemProps): React.Node {
+  const {
+    itemData: { threadInfo, itemChildren },
+    navigateToThread,
+    expanded,
+    setExpanded,
+  } = props;
+
+  const styles = useStyles(unboundStyles);
+
+  const renderItem = React.useCallback(
+    ({ item }) => (
+      <MemoizedCommunityDrawerItemChat
+        key={item.threadInfo.id}
+        itemData={item}
+        navigateToThread={navigateToThread}
+      />
+    ),
+    [navigateToThread],
+  );
+
+  const children = React.useMemo(() => {
+    if (!expanded) {
+      return null;
+    }
+    return <FlatList data={itemChildren} renderItem={renderItem} />;
+  }, [expanded, itemChildren, renderItem]);
+
+  const onPressExpand = React.useCallback(() => {
+    setExpanded(threadInfo.id);
+  }, [setExpanded, threadInfo.id]);
+
+  const itemExpandButton = React.useMemo(() => {
+    if (!itemChildren?.length) {
+      return <ExpandButtonDisabled />;
+    }
+    if (!expanded) {
+      return <ExpandButton onPress={onPressExpand} />;
+    }
+    return <ExpandButtonExpanded onPress={onPressExpand} />;
+  }, [itemChildren?.length, expanded, onPressExpand]);
+
+  const onPress = React.useCallback(() => {
+    navigateToThread({ threadInfo }); //make them not stack
+  }, [navigateToThread, threadInfo]);
+
+  return (
+    <View>
+      <View style={styles.threadEntry}>
+        {itemExpandButton}
+        <TouchableOpacity onPress={onPress}>
+          <View>
+            <Text style={styles.title}>{threadInfo.uiName}</Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+      {children}
+    </View>
+  );
+}
+
+const unboundStyles = {
+  chatView: {
+    marginLeft: 16,
+    marginVertical: 6,
+    overflow: 'hidden',
+  },
+  threadEntry: {
+    flexDirection: 'row',
+  },
+  title: {
+    color: 'drawerItemLabel',
+    fontSize: 16,
+    lineHeight: 24,
+  },
+};
+
+export type CommunityDrawerItemChatProps = {
+  itemData: CommunityDrawerItemData,
+  navigateToThread: (params: MessageListParams) => void,
+};
+
+function CommunityDrawerItemChat(
+  props: CommunityDrawerItemChatProps,
+): React.Node {
+  const [expanded, setExpanded] = React.useState(false);
+  const styles = useStyles(unboundStyles);
+
+  const wrappedSetExpanded = () => {
+    setExpanded(!expanded);
+  };
+  return (
+    <View style={styles.chatView}>
+      <CommunityDrawerItem
+        {...props}
+        expanded={expanded}
+        setExpanded={wrappedSetExpanded}
+      />
+    </View>
+  );
+}
+const MemoizedCommunityDrawerItemChat: React.ComponentType<CommunityDrawerItemChatProps> = React.memo(
+  CommunityDrawerItemChat,
+);
+
+const MemoizedCommunityDrawerItem: React.ComponentType<DrawerItemProps> = React.memo(
+  CommunityDrawerItem,
+);
+
+export default MemoizedCommunityDrawerItem;
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -157,6 +157,8 @@
   tooltipBackground: '#1F1F1F',
   drawerExpandButton: '#808080',
   drawerExpandButtonDisabled: '#404040',
+  drawerItemLabel: '#CCCCCC',
+  drawerOpenCommunityBackground: '#333333',
 });
 const colors = { light, dark };