MainTabsScreen: Add Users icon to bottom nav

Fixes: zulip#5495

src/main/MainTabsScreen.js

@@ -13,12 +13,13 @@ 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 UsersProfileScreen from '../users/UsersProfileScreen';
 
 export type MainTabsNavigatorParamList = {|
   +home: RouteParamsOf<typeof HomeScreen>,
@@ -77,14 +78,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,32 @@
+/* @flow strict-local */
+
+import React, { useCallback } from 'react';
+import type { Node } from 'react';
+
+import type { UserOrBot } from '../types';
+import { useSelector } from '../react-redux';
+import UserList from './UserList';
+import { getUsers, getPresence } from '../selectors';
+import { useNavigation } from '../react-navigation';
+
+type Props = $ReadOnly<{|
+  filter: string,
+|}>;
+
+export default function UsersProfileCard(props: Props): Node {
+  const { filter } = props;
+  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,19 @@
+/* @flow strict-local */
+import React from 'react';
+import type { Node } from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import type { AppNavigationProp } from '../nav/AppNavigator';
+import UsersProfileCard from './UsersProfileCard';
+
+type Props = $ReadOnly<{|
+  navigation: AppNavigationProp<'users'>,
+|}>;
+
+export default function UsersInfoScreen(props: Props): Node {
+  return (
+    <SafeAreaView mode="padding" edges={['top']} style={{ flex: 1 }} scrollEnabled={false}>
+      <UsersProfileCard filter="" />
+    </SafeAreaView>
+  );
+}