diff --git a/native/navigation/community-drawer-content.react.js b/native/navigation/community-drawer-content.react.js --- a/native/navigation/community-drawer-content.react.js +++ b/native/navigation/community-drawer-content.react.js @@ -25,6 +25,7 @@ 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 @@ </TouchableOpacity> ); + let exploreCommunitiesButton; + if (showCommunityDirectory) { + exploreCommunitiesButton = ( + <TouchableOpacity activeOpacity={0.4}> + <View style={styles.exploreCommunitiesContainer}> + <View style={styles.exploreCommunitiesIconContainer}> + <SWMansionIcon + name="search" + size={22} + style={styles.exploreCommunitiesIcon} + /> + </View> + <Text style={styles.exploreCommunitiesText}>Explore communities</Text> + </View> + </TouchableOpacity> + ); + } + const flattenedDrawerItemsData = React.useMemo( () => flattenDrawerItemsData(drawerItemsData, [...expanded.values()]), [drawerItemsData, expanded], @@ -182,6 +201,7 @@ initialNumToRender={30} /> {communityCreationButton} + {exploreCommunitiesButton} </SafeAreaView> ); } @@ -195,7 +215,7 @@ }, communityCreationContainer: { flexDirection: 'row', - padding: 24, + padding: 16, alignItems: 'center', borderTopWidth: 1, borderColor: 'panelSeparator', @@ -218,6 +238,30 @@ 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 --- a/native/navigation/root-navigator.react.js +++ b/native/navigation/root-navigator.react.js @@ -82,6 +82,8 @@ 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<ParamList: ParamListBase = ParamListBase> = {