flow: Annotate some exported React components, where very easy.

These were found by temporarily setting `well_formed_exports=true`
in the Flow config, as recommended in the Flow doc on Types-First:
  https://flow.org/en/docs/lang/types-first/.

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

src/RootErrorBoundary.js

@@ -33,7 +33,7 @@ type State = $ReadOnly<{|
  * [1] https://reactjs.org/docs/error-boundaries.html#how-about-event-handlers
  */
 export default class ErrorBoundary extends React.Component<Props, State> {
-  static getDerivedStateFromError(error: Error) {
+  static getDerivedStateFromError(error: Error): State {
     return { error };
   }
 
@@ -57,11 +57,11 @@ export default class ErrorBoundary extends React.Component<Props, State> {
     logging.error(error, errorInfo);
   }
 
-  state = {
+  state: State = {
     error: null,
   };
 
-  render() {
+  render(): React$Node {
     const { error } = this.state;
     if (error) {
       const details = `${error.toString()}

src/account-info/AwayStatusSwitch.js

@@ -13,7 +13,7 @@ type Props = $ReadOnly<{||}>;
  *  * retrieves the current user's `user status` data and presents it
  *  * allows by switching it to control the `away` status
  */
-export default function AwayStatusSwitch(props: Props) {
+export default function AwayStatusSwitch(props: Props): React$Node {
   const awayStatus = useSelector(getSelfUserAwayStatus);
   const dispatch = useDispatch();
 

src/account-info/ProfileScreen.js

@@ -102,7 +102,7 @@ type Props = $ReadOnly<{|
  *
  * The user can still open `AccountDetails` on themselves via the (i) icon in a chat screen.
  */
-export default function ProfileScreen(props: Props) {
+export default function ProfileScreen(props: Props): React$Node {
   const ownUser = useSelector(getOwnUser);
 
   return (

src/account/AccountItem.js

@@ -47,7 +47,7 @@ type Props = $ReadOnly<{|
   onRemove: (index: number) => Promise<void> | void,
 |}>;
 
-export default function AccountItem(props: Props) {
+export default function AccountItem(props: Props): React$Node {
   const { email, realm, isLoggedIn } = props.account;
 
   const showDoneIcon = props.index === 0 && isLoggedIn;

src/account/AccountList.js

@@ -12,7 +12,7 @@ type Props = $ReadOnly<{|
   onAccountRemove: number => Promise<void> | void,
 |}>;
 
-export default function AccountList(props: Props) {
+export default function AccountList(props: Props): React$Node {
   const { accounts, onAccountSelect, onAccountRemove } = props;
 
   return (

src/account/AccountPickScreen.js

@@ -26,7 +26,7 @@ type Props = $ReadOnly<{|
   route: RouteProp<'account-pick', void>,
 |}>;
 
-export default function AccountPickScreen(props: Props) {
+export default function AccountPickScreen(props: Props): React$Node {
   const { navigation } = props;
   const accounts = useSelector(getAccountStatuses);
   const dispatch = useDispatch();

src/animation/AnimatedRotateComponent.js

@@ -2,6 +2,7 @@
 import React, { PureComponent } from 'react';
 import type { Node as React$Node } from 'react';
 import { Animated, Easing } from 'react-native';
+import type AnimatedValue from 'react-native/Libraries/Animated/src/nodes/AnimatedValue';
 
 import type { Style } from '../types';
 
@@ -11,7 +12,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class AnimatedRotateComponent extends PureComponent<Props> {
-  rotation = new Animated.Value(0);
+  rotation: AnimatedValue = new Animated.Value(0);
 
   componentDidMount() {
     this.rotation.setValue(0);
@@ -23,7 +24,7 @@ export default class AnimatedRotateComponent extends PureComponent<Props> {
     }).start();
   }
 
-  render() {
+  render(): React$Node {
     const { children, style } = this.props;
     const rotation = this.rotation.interpolate({
       inputRange: [0, 360],

src/animation/AnimatedScaleComponent.js

@@ -2,6 +2,7 @@
 import React, { PureComponent } from 'react';
 import type { Node as React$Node } from 'react';
 import { Animated, Easing } from 'react-native';
+import type AnimatedValue from 'react-native/Libraries/Animated/src/nodes/AnimatedValue';
 
 import type { Style } from '../types';
 
@@ -16,11 +17,11 @@ type State = {|
 |};
 
 export default class AnimatedScaleComponent extends PureComponent<Props, State> {
-  state = {
+  state: State = {
     visible: this.props.visible,
   };
 
-  animatedValue = new Animated.Value(this.props.visible ? 1 : 0);
+  animatedValue: AnimatedValue = new Animated.Value(this.props.visible ? 1 : 0);
 
   UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (nextProps.visible) {
@@ -34,7 +35,7 @@ export default class AnimatedScaleComponent extends PureComponent<Props, State>
     }).start(() => this.setState({ visible: nextProps.visible }));
   }
 
-  render() {
+  render(): React$Node {
     const { children, style } = this.props;
     const { visible } = this.state;
     const animatedStyle = {

src/autocomplete/EmojiAutocomplete.js

@@ -16,7 +16,7 @@ type Props = $ReadOnly<{|
 
 const MAX_CHOICES = 30;
 
-export default function EmojiAutocomplete(props: Props) {
+export default function EmojiAutocomplete(props: Props): React$Node {
   const { filter, onAutocomplete } = props;
   const activeImageEmojiByName = useSelector(getActiveImageEmojiByName);
   const emojiNames = getFilteredEmojis(filter, activeImageEmojiByName);

src/autocomplete/PeopleAutocomplete.js

@@ -21,7 +21,7 @@ type Props = $ReadOnly<{|
   onAutocomplete: (name: string) => void,
 |}>;
 
-export default function PeopleAutocomplete(props: Props) {
+export default function PeopleAutocomplete(props: Props): React$Node {
   const { filter, onAutocomplete } = props;
   const mutedUsers = useSelector(getMutedUsers);
   const ownUserId = useSelector(getOwnUserId);

src/autocomplete/StreamAutocomplete.js

@@ -13,7 +13,7 @@ type Props = $ReadOnly<{|
   onAutocomplete: (name: string) => void,
 |}>;
 
-export default function StreamAutocomplete(props: Props) {
+export default function StreamAutocomplete(props: Props): React$Node {
   const { filter, onAutocomplete } = props;
   const subscriptions = useSelector(getSubscribedStreams);
 

src/boot/AppDataFetcher.js

@@ -11,7 +11,7 @@ type Props = $ReadOnly<{|
   children: React$Node,
 |}>;
 
-export default function AppDataFetcher(props: Props) {
+export default function AppDataFetcher(props: Props): React$Node {
   const needsInitialFetch = useSelector(state => getSession(state).needsInitialFetch);
   const dispatch = useDispatch();
 

src/boot/CompatibilityChecker.js

@@ -14,7 +14,7 @@ type State = {|
 |};
 
 export default class CompatibilityChecker extends PureComponent<Props, State> {
-  state = {
+  state: State = {
     compatibilityCheckFail: false,
   };
 
@@ -28,7 +28,7 @@ export default class CompatibilityChecker extends PureComponent<Props, State> {
     });
   }
 
-  render() {
+  render(): React$Node {
     const { compatibilityCheckFail } = this.state;
 
     return compatibilityCheckFail ? <CompatibilityScreen /> : this.props.children;

src/boot/HideIfNotHydrated.js

@@ -10,7 +10,7 @@ type Props = $ReadOnly<{|
   PlaceholderComponent?: React$ComponentType<{||}>,
 |}>;
 
-export default function HideIfNotHydrated(props: Props) {
+export default function HideIfNotHydrated(props: Props): React$Node {
   const isHydrated = useSelector(getIsHydrated);
 
   const { children, PlaceholderComponent } = props;

src/boot/StoreProvider.js

@@ -38,7 +38,7 @@ export default class StoreProvider extends PureComponent<Props> {
     }
   }
 
-  render() {
+  render(): React$Node {
     return <Provider store={store}>{this.props.children}</Provider>;
   }
 }

src/boot/ThemeProvider.js

@@ -12,7 +12,7 @@ type Props = $ReadOnly<{|
   children: React$Node,
 |}>;
 
-export default function ThemeProvider(props: Props) {
+export default function ThemeProvider(props: Props): React$Node {
   const { children } = props;
   const theme = useSelector(state => getSettings(state).theme);
   return (

src/boot/TranslationProvider.js

@@ -76,7 +76,7 @@ type Props = $ReadOnly<{|
   children: React$Node,
 |}>;
 
-export default function TranslationProvider(props: Props) {
+export default function TranslationProvider(props: Props): React$Node {
   const { children } = props;
   const locale = useSelector(state => getSettings(state).locale);
 

src/chat/ChatScreen.js

@@ -97,7 +97,7 @@ const useMessagesWithFetch = args => {
   return { fetchError, isFetching, messages, haveNoMessages, firstUnreadIdInNarrow };
 };
 
-export default function ChatScreen(props: Props) {
+export default function ChatScreen(props: Props): React$Node {
   const { route, navigation } = props;
   const { backgroundColor } = React.useContext(ThemeContext);
 

src/chat/FetchError.js

@@ -26,7 +26,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class FetchError extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     return (
       <View style={styles.container}>
         {(() => {

src/chat/InvalidNarrow.js

@@ -24,7 +24,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class InvalidNarrow extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     return (
       <View style={styles.container}>
         <Label style={styles.text} text="That conversation doesn't seem to exist." />

src/chat/MarkAsReadButton.js

@@ -29,7 +29,7 @@ type Props = $ReadOnly<{|
   narrow: Narrow,
 |}>;
 
-export default function MarkAsReadButton(props: Props) {
+export default function MarkAsReadButton(props: Props): React$Node {
   const { narrow } = props;
   const auth = useSelector(getAuth);
   const streams = useSelector(getStreams);

src/common/CountOverlay.js

@@ -19,7 +19,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class CountOverlay extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { children, unreadCount } = this.props;
 
     return (

src/common/ErrorMsg.js

@@ -29,7 +29,7 @@ type Props = $ReadOnly<{|
  * @prop error - The error message string.
  */
 export default class ErrorMsg extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { error } = this.props;
 
     if (!error) {

src/common/FloatingActionButton.js

@@ -38,7 +38,7 @@ type Props = $ReadOnly<{|
  * @prop onPress - Event called on component press.
  */
 export default class FloatingActionButton extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { style, size, disabled, onPress, Icon, accessibilityLabel } = this.props;
     const iconSize = Math.trunc(size / 2);
     const customWrapperStyle = {

src/common/FullScreenLoading.js

@@ -21,7 +21,7 @@ type Props = $ReadOnly<{||}>;
 /**
  * Meant to be used to cover the whole screen.
  */
-export default function FullScreenLoading(props: Props) {
+export default function FullScreenLoading(props: Props): React$Node {
   const insets = useSafeAreaInsets();
 
   return (

src/common/GroupAvatar.js

@@ -46,7 +46,7 @@ export const initialsForGroupIcon = (names: string[]): string => {
  * @prop onPress - Event fired on pressing the component.
  */
 export default class GroupAvatar extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { children, names, size, onPress } = this.props;
 
     const frameSize = {

src/common/Icons.js

@@ -39,7 +39,7 @@ const fixIconType = <Glyphs: string>(
 export type IconNames = FeatherGlyphs;
 
 /** A component-type for the icon set we mainly use. */
-export const Icon = fixIconType<IconNames>(Feather);
+export const Icon: ComponentType<IconProps<IconNames>> = fixIconType<IconNames>(Feather);
 
 /** A (type for a) component-type like `Icon` but with `name` already specified. */
 export type SpecificIconType = ComponentType<$Diff<IconProps<empty>, {| name: mixed |}>>;
@@ -52,37 +52,37 @@ const makeIcon = <Glyphs: string>(
   return <FixedIcon name={name} {...props} />;
 };
 
-export const IconInbox = makeIcon(Feather, 'inbox');
-export const IconMention = makeIcon(Feather, 'at-sign');
-export const IconSearch = makeIcon(Feather, 'search');
-export const IconDone = makeIcon(Feather, 'check');
-export const IconCancel = makeIcon(Feather, 'slash');
-export const IconTrash = makeIcon(Feather, 'trash-2');
-export const IconSend = makeIcon(MaterialIcon, 'send');
-export const IconMute = makeIcon(MaterialIcon, 'volume-off');
-export const IconStream = makeIcon(Feather, 'hash');
-export const IconPin = makeIcon(SimpleLineIcons, 'pin');
-export const IconPrivate = makeIcon(Feather, 'lock');
-export const IconPrivateChat = makeIcon(Feather, 'mail');
-export const IconApple = makeIcon(IoniconsIcon, 'logo-apple');
-export const IconGoogle = makeIcon(IoniconsIcon, 'logo-google');
-export const IconGitHub = makeIcon(Feather, 'github');
-export const IconWindows = makeIcon(IoniconsIcon, 'logo-windows');
-export const IconDiagnostics = makeIcon(Feather, 'activity');
-export const IconNotifications = makeIcon(Feather, 'bell');
-export const IconLanguage = makeIcon(Feather, 'globe');
-export const IconSettings = makeIcon(Feather, 'settings');
-export const IconRight = makeIcon(Feather, 'chevron-right');
-export const IconPlusCircle = makeIcon(Feather, 'plus-circle');
-export const IconLeft = makeIcon(Feather, 'chevron-left');
-export const IconPeople = makeIcon(Feather, 'users');
-export const IconImage = makeIcon(Feather, 'image');
-export const IconCamera = makeIcon(Feather, 'camera');
-export const IconTerminal = makeIcon(Feather, 'terminal');
-export const IconMoreHorizontal = makeIcon(Feather, 'more-horizontal');
-export const IconEdit = makeIcon(Feather, 'edit');
-export const IconPlusSquare = makeIcon(Feather, 'plus-square');
-export const IconVideo = makeIcon(Feather, 'video');
-export const IconUserMuted = makeIcon(FontAwesome, 'user');
-export const IconAttach = makeIcon(Feather, 'paperclip');
-export const IconAttachment = makeIcon(IoniconsIcon, 'document-attach-outline');
+export const IconInbox: SpecificIconType = makeIcon(Feather, 'inbox');
+export const IconMention: SpecificIconType = makeIcon(Feather, 'at-sign');
+export const IconSearch: SpecificIconType = makeIcon(Feather, 'search');
+export const IconDone: SpecificIconType = makeIcon(Feather, 'check');
+export const IconCancel: SpecificIconType = makeIcon(Feather, 'slash');
+export const IconTrash: SpecificIconType = makeIcon(Feather, 'trash-2');
+export const IconSend: SpecificIconType = makeIcon(MaterialIcon, 'send');
+export const IconMute: SpecificIconType = makeIcon(MaterialIcon, 'volume-off');
+export const IconStream: SpecificIconType = makeIcon(Feather, 'hash');
+export const IconPin: SpecificIconType = makeIcon(SimpleLineIcons, 'pin');
+export const IconPrivate: SpecificIconType = makeIcon(Feather, 'lock');
+export const IconPrivateChat: SpecificIconType = makeIcon(Feather, 'mail');
+export const IconApple: SpecificIconType = makeIcon(IoniconsIcon, 'logo-apple');
+export const IconGoogle: SpecificIconType = makeIcon(IoniconsIcon, 'logo-google');
+export const IconGitHub: SpecificIconType = makeIcon(Feather, 'github');
+export const IconWindows: SpecificIconType = makeIcon(IoniconsIcon, 'logo-windows');
+export const IconDiagnostics: SpecificIconType = makeIcon(Feather, 'activity');
+export const IconNotifications: SpecificIconType = makeIcon(Feather, 'bell');
+export const IconLanguage: SpecificIconType = makeIcon(Feather, 'globe');
+export const IconSettings: SpecificIconType = makeIcon(Feather, 'settings');
+export const IconRight: SpecificIconType = makeIcon(Feather, 'chevron-right');
+export const IconPlusCircle: SpecificIconType = makeIcon(Feather, 'plus-circle');
+export const IconLeft: SpecificIconType = makeIcon(Feather, 'chevron-left');
+export const IconPeople: SpecificIconType = makeIcon(Feather, 'users');
+export const IconImage: SpecificIconType = makeIcon(Feather, 'image');
+export const IconCamera: SpecificIconType = makeIcon(Feather, 'camera');
+export const IconTerminal: SpecificIconType = makeIcon(Feather, 'terminal');
+export const IconMoreHorizontal: SpecificIconType = makeIcon(Feather, 'more-horizontal');
+export const IconEdit: SpecificIconType = makeIcon(Feather, 'edit');
+export const IconPlusSquare: SpecificIconType = makeIcon(Feather, 'plus-square');
+export const IconVideo: SpecificIconType = makeIcon(Feather, 'video');
+export const IconUserMuted: SpecificIconType = makeIcon(FontAwesome, 'user');
+export const IconAttach: SpecificIconType = makeIcon(Feather, 'paperclip');
+export const IconAttachment: SpecificIconType = makeIcon(IoniconsIcon, 'document-attach-outline');

src/common/KeyboardAvoider.js

@@ -38,7 +38,7 @@ type Props = $ReadOnly<{|
  * to that component.
  */
 export default class KeyboardAvoider extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { behavior, children, style, contentContainerStyle, keyboardVerticalOffset } = this.props;
 
     if (Platform.OS === 'android') {

src/common/Label.js

@@ -20,7 +20,7 @@ type Props = $ReadOnly<{|
  * prop, and doesn't support `children`.
  */
 export default class Label extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { text, ...restProps } = this.props;
 
     return (