diff --git a/native/navigation/community-drawer-content.react.js b/native/navigation/community-drawer-content.react.js
new file mode 100644
--- /dev/null
+++ b/native/navigation/community-drawer-content.react.js
@@ -0,0 +1,126 @@
+// @flow
+
+import * as React from 'react';
+import { View, FlatList } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import {
+  childThreadInfos,
+  communityThreadSelector,
+} from 'lib/selectors/thread-selectors';
+import type { ThreadInfo } from 'lib/types/thread-types';
+import { threadTypes } from 'lib/types/thread-types';
+
+import { useNavigateToThread } from '../chat/message-list-types';
+import { useStyles } from '../themes/colors';
+import CommunityDrawerItemCommunity from './community-drawer-item-cummuninty.react';
+
+const MAX_DEPTH = 2;
+
+function CommunityDrawerContent(): React.Node {
+  let communities = useSelector(communityThreadSelector);
+  communities = React.useMemo(() => appendSuffix(communities), [communities]);
+  const styles = useStyles(unboundStyles);
+
+  const [openCommunity, setOpenCommunity] = React.useState(
+    communities.length === 1 ? communities[0].id : -1,
+  );
+
+  const navigateToThread = useNavigateToThread();
+  const childThreadInfosMap = useSelector(childThreadInfos);
+
+  const setOpenCommunnityOrClose = (index: string) => {
+    if (openCommunity === index) {
+      setOpenCommunity(-1);
+      return;
+    }
+    setOpenCommunity(index);
+  };
+
+  const renderItem = ({ item }) => {
+    const itemData = {
+      threadInfo: item.threadInfo,
+      itemChildren: item.itemChildren,
+    };
+    return (
+      <CommunityDrawerItemCommunity
+        key={item.key}
+        itemData={itemData}
+        setExpanded={setOpenCommunnityOrClose}
+        expanded={itemData.threadInfo.id === openCommunity}
+        navigateToThread={navigateToThread}
+      />
+    );
+  };
+
+  const drawerItems = React.useMemo(() => {
+    const result = communities.map(community => ({
+      key: community.id,
+      threadInfo: community,
+      itemChildren: [],
+    }));
+    let queue = result.map(item => [item, 0]);
+
+    for (let i = 0; i < queue.length; i++) {
+      const [item, lvl] = queue[i];
+      const itemChildThreadInfos =
+        childThreadInfosMap[item.threadInfo.id] ?? [];
+
+      if (lvl < MAX_DEPTH) {
+        item.itemChildren = itemChildThreadInfos
+          .filter(
+            childItem =>
+              childItem.type !== threadTypes.SIDEBAR &&
+              childItem.type !== threadTypes.PERSONAL &&
+              childItem.type !== threadTypes.PRIVATE &&
+              childItem.type !== threadTypes.LOCAL,
+          )
+          .map(childItem => ({
+            threadInfo: childItem,
+            itemChildren: [],
+          }));
+        queue = queue.concat(
+          item.itemChildren.map(childItem => [childItem, lvl + 1]),
+        );
+      }
+    }
+    return result;
+  }, [childThreadInfosMap, communities]);
+
+  return (
+    <View style={styles.drawerContent}>
+      <FlatList data={drawerItems} renderItem={renderItem} />
+    </View>
+  );
+}
+
+function appendSuffix(chats: $ReadOnlyArray<ThreadInfo>): ThreadInfo[] {
+  const result = [];
+  const names = new Map<string, number>();
+
+  for (const chat of chats) {
+    let name = chat.uiName;
+    const numberOfOccurrences = names.get(name);
+    names.set(name, (numberOfOccurrences ?? 0) + 1);
+    if (numberOfOccurrences) {
+      name = `${name} (${numberOfOccurrences.toString()})`;
+    }
+    result.push({ ...chat, uiName: name });
+  }
+  return result;
+}
+
+const unboundStyles = {
+  drawerContent: {
+    flex: 1,
+    paddingRight: 8,
+    paddingTop: 52,
+    backgroundColor: 'drawerBackgroud',
+  },
+};
+
+const MemoizedCommunityDrawerContent: React.ComponentType<{}> = React.memo(
+  CommunityDrawerContent,
+);
+
+export default MemoizedCommunityDrawerContent;
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -85,6 +85,7 @@
   drawerExpandButtonDisabled: '#404040',
   drawerItemLabel: '#CCCCCC',
   drawerOpenCommunityBackground: '#333333',
+  drawerBackgroud: '#404040',
 });
 export type Colors = $Exact<typeof light>;
 
@@ -163,6 +164,7 @@
   drawerExpandButtonDisabled: '#404040',
   drawerItemLabel: '#CCCCCC',
   drawerOpenCommunityBackground: '#333333',
+  drawerBackgroud: '#404040',
 });
 const colors = { light, dark };