flow: Annotate some more exported React components.

This is much easier to do now that we've converted these to function
components in this series.

This will help move us along toward Flow's new "Types-First" mode;
switching entirely is zulip#4907.

Prefer the `Node` type exported from React over `React$Node`.
They're equivalent, but Greg prefers `Node` as it seems cleaner; see
  https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/Flow.20types-first/near/1239060.

src/animation/AnimatedComponent.js

@@ -19,7 +19,7 @@ type Props = $ReadOnly<{|
 /**
  * Animates the specified style property on visibility change.
  */
-export default function AnimatedComponent(props: Props) {
+export default function AnimatedComponent(props: Props): Node {
   const {
     visible = true,
     useNativeDriver = true,

src/autocomplete/AutocompleteView.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { useCallback } from 'react';
+import type { Node } from 'react';
 
 import type { InputSelection } from '../types';
 import getAutocompletedText from './getAutocompletedText';
@@ -31,7 +32,7 @@ type Props = $ReadOnly<{|
   onAutocomplete: (input: string, completion: string, lastWordPrefix: string) => void,
 |}>;
 
-export default function AutocompleteView(props: Props) {
+export default function AutocompleteView(props: Props): Node {
   const { isFocused, text, onAutocomplete, selection } = props;
 
   const handleAutocomplete = useCallback(

src/common/ComponentList.js

@@ -24,7 +24,7 @@ type Props = $ReadOnly<{|
  * @prop [style] - Style of the wrapper container.
  * @prop [itemStyle] - Style applied to each child.
  */
-export default function ComponentList(props: Props) {
+export default function ComponentList(props: Props): Node {
   const { children, itemStyle, spacing = 16, outerSpacing = true, style } = props;
   const outerStyle = outerSpacing ? { margin: spacing } : {};
   const marginStyle = { marginBottom: spacing };

src/common/ComponentWithOverlay.js

@@ -54,7 +54,7 @@ type Props = $ReadOnly<{|
  * @prop overlayPosition - What corner to align the overlay to.
  * @prop [style] - Applied to a wrapper View.
  */
-export default function ComponentWithOverlay(props: Props) {
+export default function ComponentWithOverlay(props: Props): Node {
   const {
     children,
     style,

src/common/Input.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { useState, useCallback, useContext } from 'react';
+import type { Node } from 'react';
 import { TextInput, Platform } from 'react-native';
 
 import type { LocalizableText } from '../types';
@@ -45,7 +46,7 @@ const componentStyles = createStyleSheet({
  * @prop ...all other TextInput props - Passed through verbatim to TextInput.
  *   See upstream: https://reactnative.dev/docs/textinput
  */
-export default function Input(props: Props) {
+export default function Input(props: Props): Node {
   const { style, placeholder, textInputRef, ...restProps } = props;
 
   const [isFocused, setIsFocused] = useState<boolean>(false);

src/common/InputWithClearButton.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { useRef, useState, useCallback } from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 
 import Input from './Input';
@@ -22,7 +23,7 @@ type Props = $ReadOnly<$Diff<InputProps, {| textInputRef: mixed, value: mixed, _
  *
  * All props are passed through to `Input`.  See `Input` for descriptions.
  */
-export default function InputWithClearButton(props: Props) {
+export default function InputWithClearButton(props: Props): Node {
   const { onChangeText } = props;
 
   const [text, setText] = useState<string>('');

src/common/LineSeparator.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { useContext } from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 
 import { ThemeContext, createStyleSheet } from '../styles';
@@ -11,7 +12,7 @@ const componentStyles = createStyleSheet({
   },
 });
 
-export default function LineSeparator(props: {||}) {
+export default function LineSeparator(props: {||}): Node {
   const themeContext = useContext(ThemeContext);
   return (
     <View style={[componentStyles.lineSeparator, { backgroundColor: themeContext.cardColor }]} />

src/common/LoadingIndicator.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React from 'react';
+import type { Node } from 'react';
 import { Image, View } from 'react-native';
 
 import SpinningProgress from './SpinningProgress';
@@ -36,7 +37,7 @@ type Props = $ReadOnly<{|
  * @prop [showLogo] - Show or not a Zulip logo in the center.
  * @prop [size] - Diameter of the indicator in pixels.
  */
-export default function LoadingIndicator(props: Props) {
+export default function LoadingIndicator(props: Props): Node {
   const { color = 'default', showLogo = false, size = 40 } = props;
 
   return (

src/common/NestedNavRow.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { useContext } from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 
 import Label from './Label';
@@ -22,7 +23,7 @@ type Props = $ReadOnly<{|
  * Shows a right-facing arrow to indicate its purpose. If you need a
  * selectable option row instead, use `SelectableOptionRow`.
  */
-export default function NestedNavRow(props: Props) {
+export default function NestedNavRow(props: Props): Node {
   const { label, onPress, Icon } = props;
 
   const themeContext = useContext(ThemeContext);

src/common/OptionDivider.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { useContext } from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 
 import { ThemeContext, createStyleSheet } from '../styles';
@@ -10,7 +11,7 @@ const componentStyles = createStyleSheet({
   },
 });
 
-export default function OptionDivider(props: {||}) {
+export default function OptionDivider(props: {||}): Node {
   const themeContext = useContext(ThemeContext);
   return (
     <View style={[componentStyles.divider, { borderBottomColor: themeContext.dividerColor }]} />

src/common/PasswordInput.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { useState, useCallback } from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 
 import Input from './Input';
@@ -35,7 +36,7 @@ type Props = $ReadOnly<$Diff<InputProps,
  *
  * All props are passed through to `Input`.  See `Input` for descriptions.
  */
-export default function PasswordInput(props: Props) {
+export default function PasswordInput(props: Props): Node {
   const [isHidden, setIsHidden] = useState<boolean>(true);
 
   const handleShow = useCallback(() => {

src/common/Popup.js

@@ -21,7 +21,7 @@ type Props = $ReadOnly<{|
   children: Node,
 |}>;
 
-export default function Popup(props: Props) {
+export default function Popup(props: Props): Node {
   const themeContext = useContext(ThemeContext);
   return (
     <View style={[{ backgroundColor: themeContext.backgroundColor }, styles.popup]}>

src/common/SearchInput.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 import InputWithClearButton from './InputWithClearButton';
 import { createStyleSheet } from '../styles';
@@ -29,7 +30,7 @@ type Props = $ReadOnly<{|
  * @prop [autoFocus] - should the component be focused when mounted.
  * @prop onChangeText - Event called when search query is edited.
  */
-export default function SearchInput(props: Props) {
+export default function SearchInput(props: Props): Node {
   const { autoFocus = true, onChangeText } = props;
 
   return (

src/common/SmartUrlInput.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { useState, useRef, useCallback, useContext } from 'react';
+import type { Node } from 'react';
 import { TextInput, TouchableWithoutFeedback, View } from 'react-native';
 import { useFocusEffect } from '@react-navigation/native';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
@@ -54,7 +55,7 @@ type Props = $ReadOnly<{|
   enablesReturnKeyAutomatically: boolean,
 |}>;
 
-export default function SmartUrlInput(props: Props) {
+export default function SmartUrlInput(props: Props): Node {
   const {
     defaultProtocol,
     defaultOrganization,

src/common/SwitchRow.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { useContext } from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 
@@ -25,7 +26,7 @@ const componentStyles = createStyleSheet({
 /**
  * A row with a label and a switch component.
  */
-export default function SwitchRow(props: Props) {
+export default function SwitchRow(props: Props): Node {
   const { label, value, onValueChange, style, Icon } = props;
 
   const themeContext = useContext(ThemeContext);

src/common/UnreadCount.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React from 'react';
+import type { Node } from 'react';
 import { Text, View } from 'react-native';
 import type { ViewStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 
@@ -54,7 +55,7 @@ type Props = $ReadOnly<{|
  * @prop [inverse] - Indicate if styling should be inverted (dark on light).
  * @prop [limited] - If set values over 100 will display as `99+`.
  */
-export default function UnreadCount(props: Props) {
+export default function UnreadCount(props: Props): Node {
   const {
     style,
     isMuted = false,

src/common/ZulipButton.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React from 'react';
+import type { Node } from 'react';
 import { Text, View, ActivityIndicator } from 'react-native';
 import type { TextStyle, ViewStyle } from 'react-native/Libraries/StyleSheet/StyleSheet';
 import TranslatedText from './TranslatedText';
@@ -121,7 +122,7 @@ type Props = $ReadOnly<{|
  * @prop [secondary] - Less prominent styling, the button is not as important.
  * @prop onPress - Event called on button press.
  */
-export default function ZulipButton(props: Props) {
+export default function ZulipButton(props: Props): Node {
   const {
     style,
     text,

src/common/ZulipSwitch.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React from 'react';
+import type { Node } from 'react';
 import { Switch } from 'react-native';
 // $FlowFixMe[untyped-import]
 import Color from 'color';
@@ -19,7 +20,7 @@ type Props = $ReadOnly<{|
  * @prop value - value of the switch.
  * @prop onValueChange - Event called on switch.
  */
-export default function ZulipSwitch(props: Props) {
+export default function ZulipSwitch(props: Props): Node {
   const { disabled = false, onValueChange, value } = props;
   return (
     <Switch

src/emoji/EmojiRow.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { useCallback } from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 
 import type { EmojiType } from '../types';
@@ -25,7 +26,7 @@ type Props = $ReadOnly<{|
   onPress: (name: string) => void,
 |}>;
 
-export default function EmojiRow(props: Props) {
+export default function EmojiRow(props: Props): Node {
   const { code, name, type, onPress } = props;
 
   const handlePress = useCallback(() => {

src/nav/NavButtonGeneral.js

@@ -21,7 +21,7 @@ const componentStyles = createStyleSheet({
   },
 });
 
-export default function NavButtonGeneral(props: Props) {
+export default function NavButtonGeneral(props: Props): Node {
   const { children, onPress, accessibilityLabel } = props;
 
   return (

src/streams/StreamList.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React from 'react';
+import type { Node } from 'react';
 import { SectionList } from 'react-native';
 
 import type { Stream, Subscription } from '../types';
@@ -46,7 +47,7 @@ type Props = $ReadOnly<{|
   onSwitch?: (streamName: string, newValue: boolean) => void,
 |}>;
 
-export default function StreamList(props: Props) {
+export default function StreamList(props: Props): Node {
   const {
     streams = [],
     showDescriptions = false,

src/user-groups/UserGroupItem.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { useCallback, useContext } from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 
 import { IconPeople } from '../common/Icons';
@@ -25,7 +26,7 @@ type Props = $ReadOnly<{|
   onPress: (name: string) => void,
 |}>;
 
-export default function UserGroupItem(props: Props) {
+export default function UserGroupItem(props: Props): Node {
   const { name, description, onPress } = props;
 
   const handlePress = useCallback(() => {

src/users/UsersScreen.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { useState } from 'react';
+import type { Node } from 'react';
 
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
@@ -11,7 +12,7 @@ type Props = $ReadOnly<{|
   route: RouteProp<'users', void>,
 |}>;
 
-export default function UsersScreen(props: Props) {
+export default function UsersScreen(props: Props): Node {
   const [filter, setFilter] = useState<string>('');
 
   return (