mockup: Drawer nav on the leftmost bottom tab

__libdef-tests__/bottom-tabs_v5.x.x-test.js

@@ -0,0 +1,36 @@
+/* @flow strict-local */
+import { type NavigationProp } from '@react-navigation/bottom-tabs';
+
+/* eslint-disable no-unused-vars */
+
+function test_setParams() {
+  type NavProp<P> = NavigationProp<{| r: P |}, 'r'>;
+
+  function test_happy(navigation: NavProp<{| a: number |}>) {
+    navigation.setParams({ a: 1 });
+  }
+
+  function test_accepts_missing(navigation: NavProp<{| a: number, b: number |}>) {
+    navigation.setParams({ a: 1 });
+  }
+
+  function test_rejects_extra(navigation: NavProp<{| a: number |}>) {
+    // $FlowExpectedError[prop-missing]
+    navigation.setParams({ b: 1 });
+  }
+
+  function test_rejects_mismatch(navigation: NavProp<{| a: number |}>) {
+    // $FlowExpectedError[incompatible-call]
+    navigation.setParams({ a: 'a' });
+  }
+
+  function test_rejects_object_to_void(navigation: NavProp<void>) {
+    // $FlowExpectedError[incompatible-call]
+    navigation.setParams({ a: 1 });
+  }
+
+  function test_rejects_void_to_object(navigation: NavProp<{| a: number |}>) {
+    // $FlowExpectedError[incompatible-call]
+    navigation.setParams();
+  }
+}

__libdef-tests__/drawer_v5.x.x-test.js

@@ -0,0 +1,36 @@
+/* @flow strict-local */
+import { type NavigationProp } from '@react-navigation/drawer';
+
+/* eslint-disable no-unused-vars */
+
+function test_setParams() {
+  type NavProp<P> = NavigationProp<{| r: P |}, 'r'>;
+
+  function test_happy(navigation: NavProp<{| a: number |}>) {
+    navigation.setParams({ a: 1 });
+  }
+
+  function test_accepts_missing(navigation: NavProp<{| a: number, b: number |}>) {
+    navigation.setParams({ a: 1 });
+  }
+
+  function test_rejects_extra(navigation: NavProp<{| a: number |}>) {
+    // $FlowExpectedError[prop-missing]
+    navigation.setParams({ b: 1 });
+  }
+
+  function test_rejects_mismatch(navigation: NavProp<{| a: number |}>) {
+    // $FlowExpectedError[incompatible-call]
+    navigation.setParams({ a: 'a' });
+  }
+
+  function test_rejects_object_to_void(navigation: NavProp<void>) {
+    // $FlowExpectedError[incompatible-call]
+    navigation.setParams({ a: 1 });
+  }
+
+  function test_rejects_void_to_object(navigation: NavProp<{| a: number |}>) {
+    // $FlowExpectedError[incompatible-call]
+    navigation.setParams();
+  }
+}

__libdef-tests__/material-top-tabs_v5.x.x-test.js

@@ -0,0 +1,36 @@
+/* @flow strict-local */
+import { type NavigationProp } from '@react-navigation/material-top-tabs';
+
+/* eslint-disable no-unused-vars */
+
+function test_setParams() {
+  type NavProp<P> = NavigationProp<{| r: P |}, 'r'>;
+
+  function test_happy(navigation: NavProp<{| a: number |}>) {
+    navigation.setParams({ a: 1 });
+  }
+
+  function test_accepts_missing(navigation: NavProp<{| a: number, b: number |}>) {
+    navigation.setParams({ a: 1 });
+  }
+
+  function test_rejects_extra(navigation: NavProp<{| a: number |}>) {
+    // $FlowExpectedError[prop-missing]
+    navigation.setParams({ b: 1 });
+  }
+
+  function test_rejects_mismatch(navigation: NavProp<{| a: number |}>) {
+    // $FlowExpectedError[incompatible-call]
+    navigation.setParams({ a: 'a' });
+  }
+
+  function test_rejects_object_to_void(navigation: NavProp<void>) {
+    // $FlowExpectedError[incompatible-call]
+    navigation.setParams({ a: 1 });
+  }
+
+  function test_rejects_void_to_object(navigation: NavProp<{| a: number |}>) {
+    // $FlowExpectedError[incompatible-call]
+    navigation.setParams();
+  }
+}

__libdef-tests__/native_v5.x.x-test.js

@@ -0,0 +1,36 @@
+/* @flow strict-local */
+import { type NavigationProp } from '@react-navigation/native';
+
+/* eslint-disable no-unused-vars */
+
+function test_setParams() {
+  type NavProp<P> = NavigationProp<{| r: P |}, 'r'>;
+
+  function test_happy(navigation: NavProp<{| a: number |}>) {
+    navigation.setParams({ a: 1 });
+  }
+
+  function test_accepts_missing(navigation: NavProp<{| a: number, b: number |}>) {
+    navigation.setParams({ a: 1 });
+  }
+
+  function test_rejects_extra(navigation: NavProp<{| a: number |}>) {
+    // $FlowExpectedError[prop-missing]
+    navigation.setParams({ b: 1 });
+  }
+
+  function test_rejects_mismatch(navigation: NavProp<{| a: number |}>) {
+    // $FlowExpectedError[incompatible-call]
+    navigation.setParams({ a: 'a' });
+  }
+
+  function test_rejects_object_to_void(navigation: NavProp<void>) {
+    // $FlowExpectedError[incompatible-call]
+    navigation.setParams({ a: 1 });
+  }
+
+  function test_rejects_void_to_object(navigation: NavProp<{| a: number |}>) {
+    // $FlowExpectedError[incompatible-call]
+    navigation.setParams();
+  }
+}

babel.config.js

@@ -13,5 +13,6 @@ module.exports = {
     // @babel/reset-env, but that doesn't get used as a base plugin; see a
     // comment on that issue explaining why.
     '@babel/plugin-proposal-numeric-separator',
+    'react-native-reanimated/plugin',
   ],
 };

flow-typed/@react-navigation/bottom-tabs_v5.x.x.js

@@ -840,11 +840,13 @@ declare module '@react-navigation/bottom-tabs' {
     >>,
     +setOptions: (options: $Shape<ScreenOptions>) => void,
     +setParams: (
-      params: $If<
-        $IsUndefined<$ElementType<ParamList, RouteName>>,
-        empty,
-        $Shape<$NonMaybeType<$ElementType<ParamList, RouteName>>>,
-      >,
+      // We've edited this to be less complicated, so Flow in types-first
+      // mode can handle it.
+      //
+      // The complicated version appears to have been a workaround for the
+      // brokenness of $Shape: `$Shape<empty>` is `{ ... }`.  `$Partial` is
+      // basically the fixed `$Shape`, and makes the complexity unneeded.
+      params: $Partial<$NonMaybeType<$ElementType<ParamList, RouteName>>>,
     ) => void,
     ...
   };

flow-typed/@react-navigation/drawer_v5.x.x.js

@@ -840,11 +840,13 @@ declare module '@react-navigation/drawer' {
     >>,
     +setOptions: (options: $Shape<ScreenOptions>) => void,
     +setParams: (
-      params: $If<
-        $IsUndefined<$ElementType<ParamList, RouteName>>,
-        empty,
-        $Shape<$NonMaybeType<$ElementType<ParamList, RouteName>>>,
-      >,
+      // We've edited this to be less complicated, so Flow in types-first
+      // mode can handle it.
+      //
+      // The complicated version appears to have been a workaround for the
+      // brokenness of $Shape: `$Shape<empty>` is `{ ... }`.  `$Partial` is
+      // basically the fixed `$Shape`, and makes the complexity unneeded.
+      params: $Partial<$NonMaybeType<$ElementType<ParamList, RouteName>>>,
     ) => void,
     ...
   };

flow-typed/@react-navigation/material-top-tabs_v5.x.x.js

@@ -840,11 +840,13 @@ declare module '@react-navigation/material-top-tabs' {
     >>,
     +setOptions: (options: $Shape<ScreenOptions>) => void,
     +setParams: (
-      params: $If<
-        $IsUndefined<$ElementType<ParamList, RouteName>>,
-        empty,
-        $Shape<$NonMaybeType<$ElementType<ParamList, RouteName>>>,
-      >,
+      // We've edited this to be less complicated, so Flow in types-first
+      // mode can handle it.
+      //
+      // The complicated version appears to have been a workaround for the
+      // brokenness of $Shape: `$Shape<empty>` is `{ ... }`.  `$Partial` is
+      // basically the fixed `$Shape`, and makes the complexity unneeded.
+      params: $Partial<$NonMaybeType<$ElementType<ParamList, RouteName>>>,
     ) => void,
     ...
   };

flow-typed/@react-navigation/native_v5.x.x.js

@@ -840,11 +840,13 @@ declare module '@react-navigation/native' {
     >>,
     +setOptions: (options: $Shape<ScreenOptions>) => void,
     +setParams: (
-      params: $If<
-        $IsUndefined<$ElementType<ParamList, RouteName>>,
-        empty,
-        $Shape<$NonMaybeType<$ElementType<ParamList, RouteName>>>,
-      >,
+      // We've edited this to be less complicated, so Flow in types-first
+      // mode can handle it.
+      //
+      // The complicated version appears to have been a workaround for the
+      // brokenness of $Shape: `$Shape<empty>` is `{ ... }`.  `$Partial` is
+      // basically the fixed `$Shape`, and makes the complexity unneeded.
+      params: $Partial<$NonMaybeType<$ElementType<ParamList, RouteName>>>,
     ) => void,
     ...
   };

index.js

@@ -1,4 +1,5 @@
 /* @flow strict-local */
+import 'react-native-gesture-handler';
 import { AppRegistry } from 'react-native';
 import ZulipMobile from './src/ZulipMobile';
 

src/account-info/ProfileScreen.js

@@ -2,6 +2,7 @@
 import React, { useContext } from 'react';
 import type { Node } from 'react';
 import { ScrollView, View, Alert } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { TranslationContext } from '../boot/TranslationProvider';
 import type { RouteProp } from '../react-navigation';
@@ -121,19 +122,21 @@ export default function ProfileScreen(props: Props): Node {
   const ownUser = useSelector(getOwnUser);
 
   return (
-    <ScrollView>
-      <AccountDetails user={ownUser} />
-      <AwayStatusSwitch />
-      <View style={styles.buttonRow}>
-        <SetStatusButton />
-      </View>
-      <View style={styles.buttonRow}>
-        <SettingsButton />
-      </View>
-      <View style={styles.buttonRow}>
-        <SwitchAccountButton />
-        <LogoutButton />
-      </View>
-    </ScrollView>
+    <SafeAreaView mode="padding" edges={['top']} style={{ flex: 1 }}>
+      <ScrollView>
+        <AccountDetails user={ownUser} />
+        <AwayStatusSwitch />
+        <View style={styles.buttonRow}>
+          <SetStatusButton />
+        </View>
+        <View style={styles.buttonRow}>
+          <SettingsButton />
+        </View>
+        <View style={styles.buttonRow}>
+          <SwitchAccountButton />
+          <LogoutButton />
+        </View>
+      </ScrollView>
+    </SafeAreaView>
   );
 }