MainTabsScreen: Add Users icon to bottom nav

Fixes: zulip#5495

src/main/MainTabsScreen.js

@@ -13,12 +13,14 @@ import type { AppNavigationMethods, AppNavigationProp } from '../nav/AppNavigato
 import { bottomTabNavigatorConfig } from '../styles/tabs';
 import HomeScreen from './HomeScreen';
 import PmConversationsScreen from '../pm-conversations/PmConversationsScreen';
-import { IconInbox, IconStream, IconPeople } from '../common/Icons';
+import { IconInbox, IconStream, IconPeople, IconPrivateChat } from '../common/Icons';
 import OwnAvatar from '../common/OwnAvatar';
 import OfflineNotice from '../common/OfflineNotice';
 import ProfileScreen from '../account-info/ProfileScreen';
 import styles, { BRAND_COLOR, ThemeContext } from '../styles';
 import SubscriptionsScreen from '../streams/SubscriptionsScreen';
+import UsersScreen from '../users/UsersScreen';
+import UsersProfileScreen from '../users/UsersProfileScreen';
 
 export type MainTabsNavigatorParamList = {|
   +home: RouteParamsOf<typeof HomeScreen>,
@@ -77,14 +79,22 @@ export default function MainTabsScreen(props: Props): Node {
           component={PmConversationsScreen}
           options={{
             tabBarLabel: 'Private messages',
-            tabBarIcon: ({ color }) => <IconPeople size={24} color={color} />,
+            tabBarIcon: ({ color }) => <IconPrivateChat size={24} color={color} />,
             tabBarBadge: unreadPmsCount > 0 ? unreadPmsCount : undefined,
             tabBarBadgeStyle: {
               color: 'white',
               backgroundColor: BRAND_COLOR,
             },
           }}
         />
+        <Tab.Screen
+          name="users"
+          component={UsersProfileScreen}
+          options={{
+            tabBarLabel: 'Users',
+            tabBarIcon: ({ color }) => <IconPeople size={24} color={color} />,
+          }}
+        />
         <Tab.Screen
           name="profile"
           component={ProfileScreen}

src/users/UsersProfileCard.js

@@ -0,0 +1,35 @@
+/* @flow strict-local */
+
+import React, { useCallback } from 'react';
+import type { Node } from 'react';
+
+import type { UserOrBot } from '../types';
+import { useSelector, useDispatch } from '../react-redux';
+import UserList from './UserList';
+import { getUsers, getPresence } from '../selectors';
+import { navigateBack, doNarrow } from '../actions';
+import { useNavigation } from '../react-navigation';
+import { AccountDetailsScreen } from '../account-info/AccountDetailsScreen';
+
+type Props = $ReadOnly<{|
+  filter: string,
+|}>;
+
+export default function UsersProfileCard(props: Props): Node {
+  const { filter } = props;
+  const dispatch = useDispatch();
+  const users = useSelector(getUsers);
+  const presences = useSelector(getPresence);
+
+  const navigation = useNavigation();
+  const handleUserNarrow = useCallback(
+    (user: UserOrBot) => {
+      navigation.push('account-details', {userId: user.user_id});
+    },
+    [navigation],
+  );
+
+  return (
+    <UserList users={users} filter={filter} presences={presences} onPress={handleUserNarrow} />
+  );
+}

src/users/UsersProfileScreen.js

@@ -0,0 +1,23 @@
+/* @flow strict-local */
+import React, { useState } from 'react';
+import type { Node } from 'react';
+import { View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import type { RouteProp } from '../react-navigation';
+import type { AppNavigationProp } from '../nav/AppNavigator';
+import Screen from '../common/Screen';
+import UsersProfileCard from './UsersProfileCard';
+
+type Props = $ReadOnly<{|
+  navigation: AppNavigationProp<'users'>,
+  route: op<'users', void>,
+|}>;
+
+export default function UsersInfoScreen(props: Props): Node {
+  return (
+    <SafeAreaView mode="padding" edges={['top']} style={{flex: 1}} scrollEnabled={false}>
+      <UsersProfileCard filter="" />
+    </SafeAreaView>
+  );
+}