SharingScreen: Put share-to tabs behind useHaveServerDataGate

There are a few things wrong with the code before this change:

- The share-to tabs need more than the guarantee of a logged-in
  user. They depend on server data like `realm.mandatoryTopics`.

- Rendering `null` over the whole screen is likely to give an
  unpleasant white flicker.

- The "server data gate" encapsulates some subtle logic around when
  we use `connect` vs. `useSelector`, and in principle we want that
  to apply here.

Author: chrisbobbe

src/sharing/SharingScreen.js

@@ -1,5 +1,5 @@
 /* @flow strict-local */
-import React from 'react';
+import React, { useEffect } from 'react';
 import type { Node } from 'react';
 import {
   createMaterialTopTabNavigator,
@@ -21,6 +21,7 @@ import { getHasAuth } from '../selectors';
 import { navigateToAccountPicker } from '../nav/navActions';
 import ShareToStream from './ShareToStream';
 import ShareToPm from './ShareToPm';
+import { useHaveServerDataGate } from '../withHaveServerDataGate';
 
 export type SharingNavigatorParamList = {|
   'share-to-stream': RouteParamsOf<typeof ShareToStream>,
@@ -53,19 +54,20 @@ export default function SharingScreen(props: Props): Node {
   const { params } = props.route;
   const hasAuth = useGlobalSelector(getHasAuth);
 
-  // If there is no active logged-in account, abandon the sharing attempt,
-  // and present the account picker screen to the user.
-  if (!hasAuth) {
-    NavigationService.dispatch(navigateToAccountPicker());
-    return null;
-  }
+  useEffect(() => {
+    if (!hasAuth) {
+      // If there is no active logged-in account, abandon the sharing attempt,
+      // and present the account picker screen to the user.
+      NavigationService.dispatch(navigateToAccountPicker());
+    }
+  }, [hasAuth]);
 
   return (
     <Screen canGoBack={false} title="Share on Zulip" shouldShowLoadingBanner={false}>
       <Tab.Navigator {...materialTopTabNavigatorConfig()} swipeEnabled>
         <Tab.Screen
           name="share-to-stream"
-          component={ShareToStream}
+          component={useHaveServerDataGate(ShareToStream)}
           initialParams={params}
           options={{
             tabBarLabel: ({ color }) => (
@@ -75,7 +77,7 @@ export default function SharingScreen(props: Props): Node {
         />
         <Tab.Screen
           name="share-to-pm"
-          component={ShareToPm}
+          component={useHaveServerDataGate(ShareToPm)}
           initialParams={params}
           options={{
             tabBarLabel: ({ color }) => (