Change streams tabs to a stack, initially show subscribed only, issue #5424

src/main/MainTabsScreen.js

@@ -6,24 +6,23 @@ import {
   type BottomTabNavigationProp,
 } from '@react-navigation/bottom-tabs';
 import { SafeAreaView } from 'react-native-safe-area-context';
-
 import type { RouteProp, RouteParamsOf } from '../react-navigation';
 import { getUnreadHuddlesTotal, getUnreadPmsTotal } from '../selectors';
 import { useSelector } from '../react-redux';
 import type { AppNavigationMethods, AppNavigationProp } from '../nav/AppNavigator';
 import { bottomTabNavigatorConfig } from '../styles/tabs';
 import HomeScreen from './HomeScreen';
-import StreamTabsScreen from './StreamTabsScreen';
 import PmConversationsScreen from '../pm-conversations/PmConversationsScreen';
 import { IconInbox, IconStream, IconPeople } 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';
 
 export type MainTabsNavigatorParamList = {|
   +home: RouteParamsOf<typeof HomeScreen>,
-  +'stream-tabs': RouteParamsOf<typeof StreamTabsScreen>,
+  +subscribed: RouteParamsOf<typeof SubscriptionsScreen>,
   +'pm-conversations': RouteParamsOf<typeof PmConversationsScreen>,
   +profile: RouteParamsOf<typeof ProfileScreen>,
 |};
@@ -66,8 +65,8 @@ export default function MainTabsScreen(props: Props): Node {
           }}
         />
         <Tab.Screen
-          name="stream-tabs"
-          component={StreamTabsScreen}
+          name="subscribed"
+          component={SubscriptionsScreen}
           options={{
             tabBarLabel: 'Streams',
             tabBarIcon: ({ color }) => <IconStream size={24} color={color} />,

src/nav/AppNavigator.js

@@ -52,6 +52,7 @@ import SettingsScreen from '../settings/SettingsScreen';
 import UserStatusScreen from '../user-statuses/UserStatusScreen';
 import SharingScreen from '../sharing/SharingScreen';
 import SelectableOptionsScreen from '../common/SelectableOptionsScreen';
+import StreamListScreen from '../subscriptions/StreamListScreen';
 import { useHaveServerDataGate } from '../withHaveServerDataGate';
 
 export type AppNavigatorParamList = {|
@@ -63,6 +64,7 @@ export type AppNavigatorParamList = {|
   +'dev-auth': RouteParamsOf<typeof DevAuthScreen>,
   +'emoji-picker': RouteParamsOf<typeof EmojiPickerScreen>,
   +'main-tabs': RouteParamsOf<typeof MainTabsScreen>,
+  +'all-streams': RouteParamsOf<typeof StreamListScreen>,
   +'message-reactions': RouteParamsOf<typeof MessageReactionsScreen>,
   +'password-auth': RouteParamsOf<typeof PasswordAuthScreen>,
   +'realm-input': RouteParamsOf<typeof RealmInputScreen>,
@@ -165,6 +167,7 @@ export default function AppNavigator(props: Props): Node {
       <Stack.Screen name="chat" component={useHaveServerDataGate(ChatScreen)} />
       <Stack.Screen name="emoji-picker" component={useHaveServerDataGate(EmojiPickerScreen)} />
       <Stack.Screen name="main-tabs" component={useHaveServerDataGate(MainTabsScreen)} />
+      <Stack.Screen name="all-streams" component={useHaveServerDataGate(StreamListScreen)} />
       <Stack.Screen
         name="message-reactions"
         component={useHaveServerDataGate(MessageReactionsScreen)}

src/nav/globalTypes.js

@@ -2,12 +2,10 @@
 
 import type { AppNavigatorParamList } from './AppNavigator';
 import type { SharingNavigatorParamList } from '../sharing/SharingScreen';
-import type { StreamTabsNavigatorParamList } from '../main/StreamTabsScreen';
 import type { MainTabsNavigatorParamList } from '../main/MainTabsScreen';
 
 export type GlobalParamList = {|
   ...AppNavigatorParamList,
   ...SharingNavigatorParamList,
-  ...StreamTabsNavigatorParamList,
   ...MainTabsNavigatorParamList,
 |};

src/streams/SubscriptionsCard.js → src/streams/SubscriptionsScreen.js

@@ -1,13 +1,14 @@
 /* @flow strict-local */
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useContext } from 'react';
 import type { Node } from 'react';
 import { View, SectionList } from 'react-native';
 
+import { useNavigation } from '../react-navigation';
 import type { RouteProp } from '../react-navigation';
-import type { StreamTabsNavigationProp } from '../main/StreamTabsScreen';
+import type { AppNavigationProp } from '../nav/AppNavigator';
 import type { Subscription } from '../types';
-import { createStyleSheet } from '../styles';
+import appStyles, { createStyleSheet, ThemeContext } from '../styles';
 import { useDispatch, useSelector } from '../react-redux';
 import LoadingBanner from '../common/LoadingBanner';
 import SectionSeparatorBetween from '../common/SectionSeparatorBetween';
@@ -18,6 +19,10 @@ import { getSubscriptions } from '../directSelectors';
 import { doNarrow } from '../actions';
 import { caseInsensitiveCompareFunc } from '../utils/misc';
 import StreamItem from './StreamItem';
+import ModalNavBar from '../nav/ModalNavBar';
+import ZulipTextIntl from '../common/ZulipTextIntl';
+import Touchable from '../common/Touchable';
+import { IconRight } from '../common/Icons';
 
 const styles = createStyleSheet({
   container: {
@@ -28,14 +33,46 @@ const styles = createStyleSheet({
     flex: 1,
     flexDirection: 'column',
   },
+  rightItem: {
+    marginLeft: 'auto',
+  },
+  rightIcon: {
+    marginLeft: 'auto',
+  },
+  allStreamsButton: {
+    paddingRight: 12,
+  },
+  streamsText: {
+    textTransform: 'uppercase',
+    fontWeight: '500',
+  },
 });
 
 type Props = $ReadOnly<{|
-  navigation: StreamTabsNavigationProp<'subscribed'>,
+  navigation: AppNavigationProp<'subscribed'>,
   route: RouteProp<'subscribed', void>,
 |}>;
 
-export default function SubscriptionsCard(props: Props): Node {
+type FooterProps = $ReadOnly<{||}>;
+
+function AllStreamsButton(props: FooterProps): Node {
+  const navigation = useNavigation();
+  const themeContext = useContext(ThemeContext);
+  const handlePressAllScreens = useCallback(() => {
+    navigation.push('all-streams');
+  }, [navigation]);
+
+  return (
+    <Touchable onPress={handlePressAllScreens}>
+      <View style={[appStyles.listItem, styles.allStreamsButton]}>
+        <ZulipTextIntl style={styles.streamsText} text="All streams" />
+        <IconRight size={24} style={[styles.rightIcon, { color: themeContext.color }]} />
+      </View>
+    </Touchable>
+  );
+}
+
+export default function SubscriptionsScreen(props: Props): Node {
   const dispatch = useDispatch();
   const subscriptions = useSelector(getSubscriptions);
   const unreadByStream = useSelector(getUnreadByStream);
@@ -57,6 +94,7 @@ export default function SubscriptionsCard(props: Props): Node {
 
   return (
     <View style={styles.container}>
+      <ModalNavBar canGoBack={false} title="Streams" />
       <LoadingBanner />
       {subscriptions.length === 0 ? (
         <SearchEmptyState text="No streams found" />
@@ -84,6 +122,7 @@ export default function SubscriptionsCard(props: Props): Node {
             />
           )}
           SectionSeparatorComponent={SectionSeparatorBetween}
+          ListFooterComponent={AllStreamsButton}
         />
       )}
     </View>

src/subscriptions/StreamListCard.js → src/subscriptions/StreamListScreen.js

@@ -5,7 +5,7 @@ import type { Node } from 'react';
 import { View, FlatList } from 'react-native';
 
 import type { RouteProp } from '../react-navigation';
-import type { StreamTabsNavigationProp } from '../main/StreamTabsScreen';
+import type { AppNavigationProp } from '../nav/AppNavigator';
 import { createStyleSheet } from '../styles';
 import { useDispatch, useSelector } from '../react-redux';
 import ZulipButton from '../common/ZulipButton';
@@ -19,6 +19,7 @@ import { doNarrow } from '../actions';
 import { caseInsensitiveCompareFunc } from '../utils/misc';
 import StreamItem from '../streams/StreamItem';
 import { getSubscriptionsById } from './subscriptionSelectors';
+import ModalNavBar from '../nav/ModalNavBar';
 
 const styles = createStyleSheet({
   wrapper: {
@@ -34,11 +35,11 @@ const styles = createStyleSheet({
 });
 
 type Props = $ReadOnly<{|
-  navigation: StreamTabsNavigationProp<'allStreams'>,
-  route: RouteProp<'allStreams', void>,
+  navigation: AppNavigationProp<'all-streams'>,
+  route: RouteProp<'all-streams', void>,
 |}>;
 
-export default function StreamListCard(props: Props): Node {
+export default function StreamListScreen(props: Props): Node {
   const { navigation } = props;
   const dispatch = useDispatch();
   const auth = useSelector(getAuth);
@@ -71,6 +72,7 @@ export default function StreamListCard(props: Props): Node {
 
   return (
     <View style={styles.wrapper}>
+      <ModalNavBar canGoBack title="All streams" />
       <LoadingBanner />
       {canCreateStreams && (
         <ZulipButton

static/translations/messages_en.json

@@ -333,5 +333,6 @@
   "Failed to copy topic link": "Failed to copy topic link",
   "Copy link to stream": "Copy link to stream",
   "Failed to copy stream link": "Failed to copy stream link",
-  "A stream with this name already exists.": "A stream with this name already exists."
+  "A stream with this name already exists.": "A stream with this name already exists.",
+  "Streams": "Streams"
 }