flow: Annotate some more exported React components.

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

src/common/RawLabel.js

@@ -1,6 +1,7 @@
 /* @flow strict-local */
 import invariant from 'invariant';
 import React, { PureComponent } from 'react';
+import type { Node, Context } from 'react';
 import { Text } from 'react-native';
 
 import type { ThemeData } from '../styles';
@@ -24,10 +25,10 @@ type Props = $ReadOnly<{|
  *   See upstream: https://reactnative.dev/docs/text
  */
 export default class RawLabel extends PureComponent<Props> {
-  static contextType = ThemeContext;
+  static contextType: Context<ThemeData> = ThemeContext;
   context: ThemeData;
 
-  render() {
+  render(): Node {
     const { text, children, style, ...restProps } = this.props;
 
     invariant((text != null) !== (children != null), 'pass either `text` or `children`');

src/common/SectionHeader.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
+import type { Node, Context } from 'react';
 import { View } from 'react-native';
 
 import type { ThemeData } from '../styles';
@@ -18,10 +19,10 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class SectionHeader extends PureComponent<Props> {
-  static contextType = ThemeContext;
+  static contextType: Context<ThemeData> = ThemeContext;
   context: ThemeData;
 
-  render() {
+  render(): Node {
     const { text } = this.props;
     return (
       <View style={[styles.header, { backgroundColor: this.context.backgroundColor }]}>

src/nav/BackNavigationHandler.js

@@ -19,7 +19,7 @@ export default class BackNavigationHandler extends PureComponent<Props> {
     BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonPress);
   }
 
-  handleBackButtonPress = () => {
+  handleBackButtonPress: () => boolean = () => {
     const canGoBack = NavigationService.getState().index > 0;
     if (canGoBack) {
       NavigationService.dispatch(
@@ -32,7 +32,7 @@ export default class BackNavigationHandler extends PureComponent<Props> {
     return canGoBack;
   };
 
-  render() {
+  render(): Node {
     return this.props.children;
   }
 }

src/nav/NavButton.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React from 'react';
+import type { Node } from 'react';
 import type { TextStyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 
 import { BRAND_COLOR, createStyleSheet } from '../styles';
@@ -21,7 +22,7 @@ const componentStyles = createStyleSheet({
   },
 });
 
-export default function NavButton(props: Props) {
+export default function NavButton(props: Props): Node {
   const { name, style, color = BRAND_COLOR, onPress, accessibilityLabel } = props;
 
   return (

src/settings/LanguagePicker.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
+import type { Node, Context } from 'react';
 import { FlatList } from 'react-native';
 
 import type { GetText } from '../types';
@@ -15,10 +16,10 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class LanguagePicker extends PureComponent<Props> {
-  static contextType = TranslationContext;
+  static contextType: Context<GetText> = TranslationContext;
   context: GetText;
 
-  getTranslatedLanguages = (): Language[] =>
+  getTranslatedLanguages: () => Language[] = () =>
     languages.map((language: Language) => {
       const _ = this.context;
       const translatedName = _(language.name);
@@ -28,7 +29,7 @@ export default class LanguagePicker extends PureComponent<Props> {
       };
     });
 
-  getFilteredLanguageList = (filter: string): Language[] => {
+  getFilteredLanguageList: string => Language[] = filter => {
     const list = this.getTranslatedLanguages();
 
     if (!filter) {
@@ -43,7 +44,7 @@ export default class LanguagePicker extends PureComponent<Props> {
     });
   };
 
-  render() {
+  render(): Node {
     const { value, onValueChange, filter } = this.props;
     const data = this.getFilteredLanguageList(filter);
 

src/sharing/ShareToPm.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React from 'react';
+import type { Node, Context } from 'react';
 import { View, Modal } from 'react-native';
 
 import type { RouteProp } from '../react-navigation';
@@ -36,24 +37,24 @@ type State = $ReadOnly<{|
 |}>;
 
 export default class ShareToPm extends React.Component<Props, State> {
-  static contextType = TranslationContext;
+  static contextType: Context<GetText> = TranslationContext;
   context: GetText;
 
-  state = {
+  state: State = {
     selectedRecipients: [],
     choosingRecipients: false,
   };
 
-  handleModalClose = () => {
+  handleModalClose: () => void = () => {
     this.setState({ choosingRecipients: false });
   };
 
-  handleChooseRecipients = (selectedRecipients: $ReadOnlyArray<UserId>) => {
+  handleChooseRecipients: ($ReadOnlyArray<UserId>) => void = selectedRecipients => {
     this.setState({ selectedRecipients });
     this.setState({ choosingRecipients: false });
   };
 
-  isSendButtonEnabled = (message: string) => {
+  isSendButtonEnabled: string => boolean = message => {
     const { selectedRecipients } = this.state;
     const { sharedData } = this.props.route.params;
 
@@ -64,7 +65,7 @@ export default class ShareToPm extends React.Component<Props, State> {
     return selectedRecipients.length > 0;
   };
 
-  renderUsersPreview = () => {
+  renderUsersPreview: () => Node = () => {
     const { selectedRecipients } = this.state;
 
     if (selectedRecipients.length === 0) {
@@ -77,7 +78,7 @@ export default class ShareToPm extends React.Component<Props, State> {
     return preview;
   };
 
-  render() {
+  render(): Node {
     const { selectedRecipients, choosingRecipients } = this.state;
     const { sharedData } = this.props.route.params;
     const sendTo = { selectedRecipients, type: 'pm' };

src/start/CompatibilityScreen.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
+import type { Node } from 'react';
 import { Image, Text, View, Platform } from 'react-native';
 
 import { openLinkExternal } from '../utils/openLink';
@@ -46,16 +47,16 @@ const GooglePlayBadge = () => (
 );
 
 export default class CompatibilityScreen extends PureComponent<{||}> {
-  storeURL =
+  storeURL: string =
     Platform.OS === 'ios'
       ? 'https://itunes.apple.com/app/zulip/id1203036395'
       : 'https://play.google.com/store/apps/details?id=com.zulipmobile';
 
-  openStoreURL = () => {
+  openStoreURL: () => void = () => {
     openLinkExternal(this.storeURL);
   };
 
-  render() {
+  render(): Node {
     return (
       <View style={styles.screen}>
         <Text style={styles.text}>This app is too old!</Text>

src/start/RealmInputScreen.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
+import type { Node } from 'react';
 import { Keyboard } from 'react-native';
 
 import type { RouteProp } from '../react-navigation';
@@ -23,13 +24,13 @@ type State = {|
 |};
 
 export default class RealmInputScreen extends PureComponent<Props, State> {
-  state = {
+  state: State = {
     progress: false,
     realmInputValue: '',
     error: null,
   };
 
-  tryRealm = async () => {
+  tryRealm: () => Promise<void> = async () => {
     const { realmInputValue } = this.state;
 
     const parsedRealm = tryParseUrl(realmInputValue);
@@ -60,9 +61,9 @@ export default class RealmInputScreen extends PureComponent<Props, State> {
     }
   };
 
-  handleRealmChange = (value: string) => this.setState({ realmInputValue: value });
+  handleRealmChange: string => void = value => this.setState({ realmInputValue: value });
 
-  render() {
+  render(): Node {
     const { navigation } = this.props;
     const { progress, error, realmInputValue } = this.state;
 

src/streams/EditStreamCard.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 
 import { Input, Label, SwitchRow, ZulipButton } from '../common';
@@ -30,31 +31,31 @@ type State = {|
 |};
 
 export default class EditStreamCard extends PureComponent<Props, State> {
-  state = {
+  state: State = {
     name: this.props.initialValues.name,
     description: this.props.initialValues.description,
     isPrivate: this.props.initialValues.invite_only,
   };
 
-  handlePerformAction = () => {
+  handlePerformAction: () => void = () => {
     const { onComplete } = this.props;
     const { name, description, isPrivate } = this.state;
     onComplete(name, description, isPrivate);
   };
 
-  handleNameChange = (name: string) => {
+  handleNameChange: string => void = name => {
     this.setState({ name });
   };
 
-  handleDescriptionChange = (description: string) => {
+  handleDescriptionChange: string => void = description => {
     this.setState({ description });
   };
 
-  handleIsPrivateChange = (isPrivate: boolean) => {
+  handleIsPrivateChange: boolean => void = isPrivate => {
     this.setState({ isPrivate });
   };
 
-  render() {
+  render(): Node {
     const { initialValues, isNewStream } = this.props;
     const { name } = this.state;
 

src/user-picker/AvatarItem.js

@@ -48,7 +48,7 @@ export default class AvatarItem extends PureComponent<Props> {
     }).start();
   }
 
-  handlePress = () => {
+  handlePress: () => void = () => {
     const { user, onPress } = this.props;
     Animated.timing(this.animatedValue, {
       toValue: 0,