diff --git a/native/navigation/community-drawer-content.react.js b/native/navigation/community-drawer-content.react.js index 2a0008daa3..224598d3dd 100644 --- a/native/navigation/community-drawer-content.react.js +++ b/native/navigation/community-drawer-content.react.js @@ -25,6 +25,7 @@ import { useResolvedThreadInfos } from 'lib/utils/entity-helpers.js'; import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js'; import CommunityDrawerItem from './community-drawer-item.react.js'; +import { showCommunityDirectory } from './root-navigator.react.js'; import { CommunityCreationRouteName } from './route-names.js'; import { useNavigateToThread } from '../chat/message-list-types.js'; import SWMansionIcon from '../components/swmansion-icon.react.js'; @@ -169,6 +170,24 @@ function CommunityDrawerContent(): React.Node { ); + let exploreCommunitiesButton; + if (showCommunityDirectory) { + exploreCommunitiesButton = ( + + + + + + Explore communities + + + ); + } + const flattenedDrawerItemsData = React.useMemo( () => flattenDrawerItemsData(drawerItemsData, [...expanded.values()]), [drawerItemsData, expanded], @@ -182,6 +201,7 @@ function CommunityDrawerContent(): React.Node { initialNumToRender={30} /> {communityCreationButton} + {exploreCommunitiesButton} ); } @@ -195,7 +215,7 @@ const unboundStyles = { }, communityCreationContainer: { flexDirection: 'row', - padding: 24, + padding: 16, alignItems: 'center', borderTopWidth: 1, borderColor: 'panelSeparator', @@ -218,6 +238,30 @@ const unboundStyles = { communityCreationIcon: { color: 'panelForegroundLabel', }, + exploreCommunitiesContainer: { + flexDirection: 'row', + paddingTop: 0, + padding: 16, + alignItems: 'center', + }, + exploreCommunitiesText: { + color: 'panelForegroundLabel', + fontSize: 16, + lineHeight: 24, + fontWeight: '500', + }, + exploreCommunitiesIconContainer: { + height: 28, + width: 28, + justifyContent: 'center', + alignItems: 'center', + borderRadius: 16, + marginRight: 12, + backgroundColor: 'panelSecondaryForeground', + }, + exploreCommunitiesIcon: { + color: 'panelForegroundLabel', + }, }; const labelUnboundStyles = { level0Label: { diff --git a/native/navigation/root-navigator.react.js b/native/navigation/root-navigator.react.js index d1a2b1792e..e03f63c654 100644 --- a/native/navigation/root-navigator.react.js +++ b/native/navigation/root-navigator.react.js @@ -82,6 +82,8 @@ import LinkedDevicesBottomSheet from '../profile/linked-devices-bottom-sheet.rea import RolesNavigator from '../roles/roles-navigator.react.js'; import UserProfileBottomSheetNavigator from '../user-profile/user-profile-bottom-sheet-navigator.react.js'; +export const showCommunityDirectory = __DEV__; + enableScreens(); export type RootNavigationHelpers = {