diff --git a/src/RootErrorBoundary.js b/src/RootErrorBoundary.js
index 4c1520cf957..d29e80993c8 100644
--- a/src/RootErrorBoundary.js
+++ b/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()}
diff --git a/src/account-info/AwayStatusSwitch.js b/src/account-info/AwayStatusSwitch.js
index 5742dc1003e..9fbf0c6647b 100644
--- a/src/account-info/AwayStatusSwitch.js
+++ b/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();
 
diff --git a/src/account-info/ProfileScreen.js b/src/account-info/ProfileScreen.js
index 050317b0d7c..2082c974d29 100644
--- a/src/account-info/ProfileScreen.js
+++ b/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 (
diff --git a/src/account/AccountItem.js b/src/account/AccountItem.js
index f9b7fb38f9f..118e58d15d5 100644
--- a/src/account/AccountItem.js
+++ b/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;
diff --git a/src/account/AccountList.js b/src/account/AccountList.js
index da409533555..9b5d22b25d4 100644
--- a/src/account/AccountList.js
+++ b/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 (
diff --git a/src/account/AccountPickScreen.js b/src/account/AccountPickScreen.js
index 458402c42be..38f745ec613 100644
--- a/src/account/AccountPickScreen.js
+++ b/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();
diff --git a/src/animation/AnimatedRotateComponent.js b/src/animation/AnimatedRotateComponent.js
index dfa89a2f0a2..fb4b5caa68c 100644
--- a/src/animation/AnimatedRotateComponent.js
+++ b/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],
diff --git a/src/animation/AnimatedScaleComponent.js b/src/animation/AnimatedScaleComponent.js
index 59e083e5b24..dac7cc0e5a3 100644
--- a/src/animation/AnimatedScaleComponent.js
+++ b/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 = {
diff --git a/src/autocomplete/EmojiAutocomplete.js b/src/autocomplete/EmojiAutocomplete.js
index 28671de3abe..5bf739d8ae1 100644
--- a/src/autocomplete/EmojiAutocomplete.js
+++ b/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);
diff --git a/src/autocomplete/PeopleAutocomplete.js b/src/autocomplete/PeopleAutocomplete.js
index b870fcf1438..28237015593 100644
--- a/src/autocomplete/PeopleAutocomplete.js
+++ b/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);
diff --git a/src/autocomplete/StreamAutocomplete.js b/src/autocomplete/StreamAutocomplete.js
index 8dfee8bc96f..4cf2aa4126f 100644
--- a/src/autocomplete/StreamAutocomplete.js
+++ b/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);
 
diff --git a/src/boot/AppDataFetcher.js b/src/boot/AppDataFetcher.js
index 745bc176340..c634c8afea0 100644
--- a/src/boot/AppDataFetcher.js
+++ b/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();
 
diff --git a/src/boot/CompatibilityChecker.js b/src/boot/CompatibilityChecker.js
index 50768f558bd..7d737498c9f 100644
--- a/src/boot/CompatibilityChecker.js
+++ b/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;
diff --git a/src/boot/HideIfNotHydrated.js b/src/boot/HideIfNotHydrated.js
index a4a526173e3..ec8479b2a24 100644
--- a/src/boot/HideIfNotHydrated.js
+++ b/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;
diff --git a/src/boot/StoreProvider.js b/src/boot/StoreProvider.js
index b56f5b89642..45531215296 100644
--- a/src/boot/StoreProvider.js
+++ b/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>;
   }
 }
diff --git a/src/boot/ThemeProvider.js b/src/boot/ThemeProvider.js
index 6b85d0798ce..bd0fcac43fc 100644
--- a/src/boot/ThemeProvider.js
+++ b/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 (
diff --git a/src/boot/TranslationProvider.js b/src/boot/TranslationProvider.js
index e8df12a46b3..81f51a76c9c 100644
--- a/src/boot/TranslationProvider.js
+++ b/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);
 
diff --git a/src/chat/ChatScreen.js b/src/chat/ChatScreen.js
index 8ec2ef5bf9a..c24070cb111 100644
--- a/src/chat/ChatScreen.js
+++ b/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);
 
diff --git a/src/chat/FetchError.js b/src/chat/FetchError.js
index 5c554bff084..825ece115a0 100644
--- a/src/chat/FetchError.js
+++ b/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}>
         {(() => {
diff --git a/src/chat/InvalidNarrow.js b/src/chat/InvalidNarrow.js
index 4b9f4596861..3ceae03c87b 100644
--- a/src/chat/InvalidNarrow.js
+++ b/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." />
diff --git a/src/chat/MarkAsReadButton.js b/src/chat/MarkAsReadButton.js
index 62ba6a7da46..0de99219315 100644
--- a/src/chat/MarkAsReadButton.js
+++ b/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);
diff --git a/src/common/CountOverlay.js b/src/common/CountOverlay.js
index 3d9361cd6fe..1ac26f42e2e 100644
--- a/src/common/CountOverlay.js
+++ b/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 (
diff --git a/src/common/ErrorMsg.js b/src/common/ErrorMsg.js
index 400e0cac735..662cca077a2 100644
--- a/src/common/ErrorMsg.js
+++ b/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) {
diff --git a/src/common/FloatingActionButton.js b/src/common/FloatingActionButton.js
index f74627acc8b..88936a97ef9 100644
--- a/src/common/FloatingActionButton.js
+++ b/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 = {
diff --git a/src/common/FullScreenLoading.js b/src/common/FullScreenLoading.js
index 5f81c9d7046..0900d90a19e 100644
--- a/src/common/FullScreenLoading.js
+++ b/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 (
diff --git a/src/common/GroupAvatar.js b/src/common/GroupAvatar.js
index 4f5f2909d62..0c2af628c4d 100644
--- a/src/common/GroupAvatar.js
+++ b/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 = {
diff --git a/src/common/Icons.js b/src/common/Icons.js
index da859e031b4..3c4efe61ed9 100644
--- a/src/common/Icons.js
+++ b/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');
diff --git a/src/common/KeyboardAvoider.js b/src/common/KeyboardAvoider.js
index e63ec44a362..18950d2b939 100644
--- a/src/common/KeyboardAvoider.js
+++ b/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') {
diff --git a/src/common/Label.js b/src/common/Label.js
index 5444f505003..9448f793538 100644
--- a/src/common/Label.js
+++ b/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 (
diff --git a/src/common/Logo.js b/src/common/Logo.js
index ea39f322947..6bad4269223 100644
--- a/src/common/Logo.js
+++ b/src/common/Logo.js
@@ -14,4 +14,6 @@ const styles = createStyleSheet({
   },
 });
 
-export default () => <Image style={styles.logo} source={logoImg} resizeMode="contain" />;
+export default (): React$Node => (
+  <Image style={styles.logo} source={logoImg} resizeMode="contain" />
+);
diff --git a/src/common/OfflineNotice.js b/src/common/OfflineNotice.js
index 3a56282247b..51ee15cf3e9 100644
--- a/src/common/OfflineNotice.js
+++ b/src/common/OfflineNotice.js
@@ -27,7 +27,7 @@ type Props = $ReadOnly<{||}>;
  * Displays a notice that the app is working in offline mode.
  * Not rendered if state is 'online'.
  */
-export default function OfflineNotice(props: Props) {
+export default function OfflineNotice(props: Props): React$Node {
   const isOnline = useSelector(state => getSession(state).isOnline);
   if (isOnline) {
     return null;
diff --git a/src/common/OwnAvatar.js b/src/common/OwnAvatar.js
index eb6ea8043f2..acf87824066 100644
--- a/src/common/OwnAvatar.js
+++ b/src/common/OwnAvatar.js
@@ -14,7 +14,7 @@ type Props = $ReadOnly<{|
  *
  * @prop size - Sets width and height in logical pixels.
  */
-export default function OwnAvatar(props: Props) {
+export default function OwnAvatar(props: Props): React$Node {
   const { size } = props;
   const user = useSelector(getOwnUser);
   return <UserAvatar avatarUrl={user.avatar_url} size={size} />;
diff --git a/src/common/PresenceStatusIndicator.js b/src/common/PresenceStatusIndicator.js
index fe064f7f50f..0aa7b51fad8 100644
--- a/src/common/PresenceStatusIndicator.js
+++ b/src/common/PresenceStatusIndicator.js
@@ -113,7 +113,7 @@ type Props = $ReadOnly<{|
  * @prop email - email of the user whose status we are showing.
  * @prop hideIfOffline - Do not render for 'offline' state.
  */
-export default function PresenceStatusIndicator(props: Props) {
+export default function PresenceStatusIndicator(props: Props): React$Node {
   const { email, style, hideIfOffline, useOpaqueBackground } = props;
   const presence = useSelector(getPresence);
   const allUsersByEmail = useSelector(getAllUsersByEmail);
diff --git a/src/common/Screen.js b/src/common/Screen.js
index 7f302b33e8a..2d8c394b9de 100644
--- a/src/common/Screen.js
+++ b/src/common/Screen.js
@@ -71,7 +71,7 @@ type Props = $ReadOnly<{|
  * @prop [title] - Text shown as the title of the screen.
  *                 Required unless `search` is true.
  */
-export default function Screen(props: Props) {
+export default function Screen(props: Props): React$Node {
   const { backgroundColor } = useContext(ThemeContext);
   const {
     autoFocus = false,
diff --git a/src/common/SearchEmptyState.js b/src/common/SearchEmptyState.js
index 463206ddeb5..22cf92582d1 100644
--- a/src/common/SearchEmptyState.js
+++ b/src/common/SearchEmptyState.js
@@ -23,7 +23,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class SearchEmptyState extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { text } = this.props;
 
     return (
diff --git a/src/common/SectionSeparator.js b/src/common/SectionSeparator.js
index e3f7fb49b5b..20ba28e3b5a 100644
--- a/src/common/SectionSeparator.js
+++ b/src/common/SectionSeparator.js
@@ -13,7 +13,7 @@ const styles = createStyleSheet({
 });
 
 export default class SectionSeparator extends PureComponent<{||}> {
-  render() {
+  render(): React$Node {
     return <View style={styles.separator} />;
   }
 }
diff --git a/src/common/SectionSeparatorBetween.js b/src/common/SectionSeparatorBetween.js
index 8787efbed60..4c9b37018b6 100644
--- a/src/common/SectionSeparatorBetween.js
+++ b/src/common/SectionSeparatorBetween.js
@@ -13,7 +13,7 @@ type Props = $ReadOnly<{|
 
 /** Can be passed to RN's `SectionList` as `SectionSeparatorComponent`. */
 export default class SectionSeparatorBetween extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { leadingItem, leadingSection } = this.props;
 
     if (leadingItem || !leadingSection || leadingSection.data.length === 0) {
diff --git a/src/common/SelectableOptionRow.js b/src/common/SelectableOptionRow.js
index 2185c3231e3..3a04bf60562 100644
--- a/src/common/SelectableOptionRow.js
+++ b/src/common/SelectableOptionRow.js
@@ -56,7 +56,9 @@ type Props<TItemKey: string | number> = $ReadOnly<{|
  * things that aren't related to that state, like navigating to a
  * different screen.
  */
-export default function SelectableOptionRow<TItemKey: string | number>(props: Props<TItemKey>) {
+export default function SelectableOptionRow<TItemKey: string | number>(
+  props: Props<TItemKey>,
+): React$Node {
   const { itemKey, title, subtitle, selected, onRequestSelectionChange } = props;
 
   return (
diff --git a/src/common/ServerCompatBanner.js b/src/common/ServerCompatBanner.js
index 724785f560a..1d8b95b5714 100644
--- a/src/common/ServerCompatBanner.js
+++ b/src/common/ServerCompatBanner.js
@@ -49,7 +49,7 @@ type Props = $ReadOnly<{||}>;
 // https://material.io/components/banners. Please consult that before making
 // layout changes, and try to make them in a direction that brings us closer
 // to those guidelines.
-export default function ServerCompatBanner(props: Props) {
+export default function ServerCompatBanner(props: Props): React$Node {
   const dispatch = useDispatch();
   const hasDismissedServerCompatNotice = useSelector(
     state => getSession(state).hasDismissedServerCompatNotice,
diff --git a/src/common/SpinningProgress.js b/src/common/SpinningProgress.js
index 92c51a7ff5e..80e15641221 100644
--- a/src/common/SpinningProgress.js
+++ b/src/common/SpinningProgress.js
@@ -22,7 +22,7 @@ type Props = $ReadOnly<{|
  * @prop size - Diameter of the circle in pixels.
  */
 export default class SpinningProgress extends React.PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { color, size } = this.props;
     const style = { width: size, height: size };
     const source = (() => {
diff --git a/src/common/Touchable.js b/src/common/Touchable.js
index 031c3600a61..100fd6ea34d 100644
--- a/src/common/Touchable.js
+++ b/src/common/Touchable.js
@@ -48,7 +48,7 @@ type Props = $ReadOnly<{|
  * @prop [onLongPress] - Passed through; see upstream docs.
  */
 export default class Touchable extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { accessibilityLabel, style, onPress, onLongPress } = this.props;
     const child: React$Node = React.Children.only(this.props.children);
 
diff --git a/src/common/TranslatedText.js b/src/common/TranslatedText.js
index 48274d3a7b2..9fe343712ab 100644
--- a/src/common/TranslatedText.js
+++ b/src/common/TranslatedText.js
@@ -14,7 +14,7 @@ type Props = $ReadOnly<{|
  *
  * @prop text - The text to be translated.
  */
-export default ({ text }: Props) => {
+export default ({ text }: Props): React$Node => {
   const message = typeof text === 'object' ? text.text : text;
   const values = typeof text === 'object' ? text.values : undefined;
 
diff --git a/src/common/UserAvatar.js b/src/common/UserAvatar.js
index 8d66231499c..0c578c6ab8d 100644
--- a/src/common/UserAvatar.js
+++ b/src/common/UserAvatar.js
@@ -26,7 +26,7 @@ type Props = $ReadOnly<{|
  * @prop [children] - If provided, will render inside the component body.
  * @prop [onPress] - Event fired on pressing the component.
  */
-function UserAvatar(props: Props) {
+function UserAvatar(props: Props): React$Node {
   const { avatarUrl, children, size, isMuted = false, onPress } = props;
   const borderRadius = size / 8;
   const style = {
diff --git a/src/common/UserAvatarWithPresence.js b/src/common/UserAvatarWithPresence.js
index 298fff6f7fc..d46376cd4d4 100644
--- a/src/common/UserAvatarWithPresence.js
+++ b/src/common/UserAvatarWithPresence.js
@@ -38,7 +38,7 @@ type Props = $ReadOnly<{|
  * @prop [onPress] - Event fired on pressing the component.
  */
 export default class UserAvatarWithPresence extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { avatarUrl, email, isMuted, size, onPress } = this.props;
 
     return (
@@ -69,7 +69,7 @@ export function UserAvatarWithPresenceById(
     ...$Diff<Props, {| avatarUrl: mixed, email: mixed |}>,
     userId: UserId,
   |}>,
-) {
+): React$Node {
   const { userId, ...restProps } = props;
 
   const user = useSelector(state => tryGetUserForId(state, userId));
diff --git a/src/common/ViewPlaceholder.js b/src/common/ViewPlaceholder.js
index 1ac95152a91..b3f951b8cf1 100644
--- a/src/common/ViewPlaceholder.js
+++ b/src/common/ViewPlaceholder.js
@@ -16,7 +16,7 @@ type Props = $ReadOnly<{|
  * @prop [height] - Height of the component in pixels.
  */
 export default class ViewPlaceholder extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { width, height } = this.props;
     const style = { width, height };
     return <View style={style} />;
diff --git a/src/common/WebLink.js b/src/common/WebLink.js
index d0fc359bd1c..a3c7e1a818b 100644
--- a/src/common/WebLink.js
+++ b/src/common/WebLink.js
@@ -20,7 +20,7 @@ const componentStyles = createStyleSheet({
 /**
  * A button styled like a web link.
  */
-export default function WebLink(props: Props) {
+export default function WebLink(props: Props): React$Node {
   return (
     <Label
       style={componentStyles.link}
diff --git a/src/common/ZulipTextButton.js b/src/common/ZulipTextButton.js
index 4d19d9be071..21797ef5539 100644
--- a/src/common/ZulipTextButton.js
+++ b/src/common/ZulipTextButton.js
@@ -97,7 +97,7 @@ type Props = $ReadOnly<{|
 // (https://callstack.github.io/react-native-paper/button.html), encoding
 // things like project-specific styles and making any sensible adjustments
 // to the interface.
-export default function ZulipTextButton(props: Props) {
+export default function ZulipTextButton(props: Props): React$Node {
   const { variant = 'standard', leftMargin, rightMargin, label, onPress } = props;
 
   const variantStyles = useMemo(() => styleSheetForVariant(variant), [variant]);
diff --git a/src/diagnostics/DiagnosticsScreen.js b/src/diagnostics/DiagnosticsScreen.js
index 665bb24646f..bba92f936d4 100644
--- a/src/diagnostics/DiagnosticsScreen.js
+++ b/src/diagnostics/DiagnosticsScreen.js
@@ -28,7 +28,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class DiagnosticsScreen extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     return (
       <Screen title="Diagnostics">
         <RawLabel style={styles.versionLabel} text={`v${nativeApplicationVersion ?? '?.?.?'}`} />
diff --git a/src/diagnostics/InfoItem.js b/src/diagnostics/InfoItem.js
index 1cb95258dd4..80d07b45d09 100644
--- a/src/diagnostics/InfoItem.js
+++ b/src/diagnostics/InfoItem.js
@@ -26,7 +26,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class InfoItem extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { label, value } = this.props;
 
     return (
diff --git a/src/diagnostics/SizeItem.js b/src/diagnostics/SizeItem.js
index 09e957463d9..33a6263ceee 100644
--- a/src/diagnostics/SizeItem.js
+++ b/src/diagnostics/SizeItem.js
@@ -26,7 +26,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class SizeItem extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { text, size } = this.props;
 
     return (
diff --git a/src/diagnostics/StorageScreen.js b/src/diagnostics/StorageScreen.js
index 95fd1f706f9..01bbd1815ee 100644
--- a/src/diagnostics/StorageScreen.js
+++ b/src/diagnostics/StorageScreen.js
@@ -22,7 +22,7 @@ type Props = $ReadOnly<{|
   route: RouteProp<'storage', void>,
 |}>;
 
-export default function StorageScreen(props: Props) {
+export default function StorageScreen(props: Props): React$Node {
   const state = useSelector(s => s);
   const storageSizes = calculateKeyStorageSizes(state);
 
diff --git a/src/diagnostics/TimeItem.js b/src/diagnostics/TimeItem.js
index 26c183b53de..db7063f153a 100644
--- a/src/diagnostics/TimeItem.js
+++ b/src/diagnostics/TimeItem.js
@@ -25,7 +25,7 @@ const styles = createStyleSheet({
 export default class TimeItem extends PureComponent<TimingItemType> {
   props: TimingItemType;
 
-  render() {
+  render(): React$Node {
     const { text, startMs, endMs } = this.props;
     const startStr = format(startMs, 'HH:mm:ss.S'); // eslint-disable-line
     const durationStrMs = numberWithSeparators(endMs - startMs);
diff --git a/src/diagnostics/TimingScreen.js b/src/diagnostics/TimingScreen.js
index b50dad19f43..00c3105b57b 100644
--- a/src/diagnostics/TimingScreen.js
+++ b/src/diagnostics/TimingScreen.js
@@ -13,7 +13,7 @@ type Props = $ReadOnly<{|
   route: RouteProp<'timing', void>,
 |}>;
 
-export default function TimingScreen(props: Props) {
+export default function TimingScreen(props: Props): React$Node {
   return (
     <Screen title="Timing" scrollEnabled={false}>
       <FlatList
diff --git a/src/diagnostics/VariablesScreen.js b/src/diagnostics/VariablesScreen.js
index b15b5c68a56..f477cd780e1 100644
--- a/src/diagnostics/VariablesScreen.js
+++ b/src/diagnostics/VariablesScreen.js
@@ -14,7 +14,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class VariablesScreen extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const variables = {
       enableReduxLogging: config.enableReduxLogging,
       enableReduxSlowReducerWarnings: config.enableReduxSlowReducerWarnings,
diff --git a/src/lightbox/Lightbox.js b/src/lightbox/Lightbox.js
index bfd3df740c4..07db1311cdc 100644
--- a/src/lightbox/Lightbox.js
+++ b/src/lightbox/Lightbox.js
@@ -44,7 +44,7 @@ type Props = $ReadOnly<{|
   message: Message,
 |}>;
 
-export default function Lightbox(props: Props) {
+export default function Lightbox(props: Props): React$Node {
   const [headerFooterVisible, setHeaderFooterVisible] = useState<boolean>(true);
   const showActionSheetWithOptions: ShowActionSheetWithOptions = useActionSheet()
     .showActionSheetWithOptions;
diff --git a/src/lightbox/LightboxFooter.js b/src/lightbox/LightboxFooter.js
index 53fb32a8caf..b65b1b43b25 100644
--- a/src/lightbox/LightboxFooter.js
+++ b/src/lightbox/LightboxFooter.js
@@ -33,7 +33,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class LightboxFooter extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { displayMessage, onOptionsPress, style } = this.props;
     return (
       <SafeAreaView mode="padding" edges={['right', 'bottom', 'left']}>
diff --git a/src/lightbox/LightboxHeader.js b/src/lightbox/LightboxHeader.js
index 12b5771dd19..9496ef6cc8a 100644
--- a/src/lightbox/LightboxHeader.js
+++ b/src/lightbox/LightboxHeader.js
@@ -53,7 +53,7 @@ type Props = $ReadOnly<{|
  * @prop [onPressBack]
  */
 export default class LightboxHeader extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { onPressBack, senderName, senderEmail, timestamp, avatarUrl } = this.props;
     const displayDate = humanDate(new Date(timestamp * 1000));
     const time = shortTime(new Date(timestamp * 1000));
diff --git a/src/lightbox/LightboxScreen.js b/src/lightbox/LightboxScreen.js
index 38eddb3d5db..973d193e2df 100644
--- a/src/lightbox/LightboxScreen.js
+++ b/src/lightbox/LightboxScreen.js
@@ -22,7 +22,7 @@ type Props = $ReadOnly<{|
   route: RouteProp<'lightbox', {| src: string, message: Message |}>,
 |}>;
 
-export default function LightboxScreen(props: Props) {
+export default function LightboxScreen(props: Props): React$Node {
   const { src, message } = props.route.params;
 
   return (
diff --git a/src/main/MainTabsScreen.js b/src/main/MainTabsScreen.js
index 38a4e2d8d74..757da3b7f89 100644
--- a/src/main/MainTabsScreen.js
+++ b/src/main/MainTabsScreen.js
@@ -44,7 +44,7 @@ type Props = $ReadOnly<{|
   route: RouteProp<'main-tabs', void>,
 |}>;
 
-export default function MainTabsScreen(props: Props) {
+export default function MainTabsScreen(props: Props): React$Node {
   const { backgroundColor } = useContext(ThemeContext);
 
   return (
diff --git a/src/main/StreamTabsScreen.js b/src/main/StreamTabsScreen.js
index b8ddc072e22..59fb6259c92 100644
--- a/src/main/StreamTabsScreen.js
+++ b/src/main/StreamTabsScreen.js
@@ -41,7 +41,7 @@ type Props = $ReadOnly<{|
   route: RouteProp<'stream-tabs', void>,
 |}>;
 
-export default function StreamTabsScreen(props: Props) {
+export default function StreamTabsScreen(props: Props): React$Node {
   return (
     <Tab.Navigator
       {...materialTopTabNavigatorConfig({
diff --git a/src/message/AnnouncementOnly.js b/src/message/AnnouncementOnly.js
index bb9e3f9bcc8..2aa45699852 100644
--- a/src/message/AnnouncementOnly.js
+++ b/src/message/AnnouncementOnly.js
@@ -6,7 +6,7 @@ import { Label } from '../common';
 import styles from '../styles';
 
 class AnnouncementOnly extends PureComponent<{||}> {
-  render() {
+  render(): React$Node {
     return (
       <View style={styles.disabledComposeBox}>
         <Label
diff --git a/src/message/NoMessages.js b/src/message/NoMessages.js
index 3ebcdd914a2..f99fafa3f2e 100644
--- a/src/message/NoMessages.js
+++ b/src/message/NoMessages.js
@@ -51,7 +51,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class NoMessages extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { narrow } = this.props;
 
     const message = messages.find(x => x.isFunc(narrow)) || {};
diff --git a/src/nav/AppNavigator.js b/src/nav/AppNavigator.js
index 243d03c4ec5..7446ddefbe3 100644
--- a/src/nav/AppNavigator.js
+++ b/src/nav/AppNavigator.js
@@ -85,7 +85,7 @@ const Stack = createStackNavigator<GlobalParamList, AppNavigatorParamList, AppNa
 
 type Props = $ReadOnly<{||}>;
 
-export default function AppNavigator(props: Props) {
+export default function AppNavigator(props: Props): React$Node {
   const hasAuth = useSelector(getHasAuth);
   const accounts = useSelector(getAccounts);
 
diff --git a/src/nav/ChatNavBar.js b/src/nav/ChatNavBar.js
index 42be40aaa42..fbbf1395702 100644
--- a/src/nav/ChatNavBar.js
+++ b/src/nav/ChatNavBar.js
@@ -21,7 +21,7 @@ type Props = $ReadOnly<{|
   editMessage: EditMessage | null,
 |}>;
 
-export default function ChatNavBar(props: Props) {
+export default function ChatNavBar(props: Props): React$Node {
   const { narrow, editMessage } = props;
   const streamColor = useSelector(state => getStreamColorForNarrow(state, narrow));
   const buttonColor =
diff --git a/src/nav/IconUnreadConversations.js b/src/nav/IconUnreadConversations.js
index fc15251c6a8..b799f5caedb 100644
--- a/src/nav/IconUnreadConversations.js
+++ b/src/nav/IconUnreadConversations.js
@@ -12,7 +12,7 @@ type Props = $ReadOnly<{|
   color: string,
 |}>;
 
-export default function IconUnreadConversations(props: Props) {
+export default function IconUnreadConversations(props: Props): React$Node {
   const { color } = props;
   const unreadHuddlesTotal = useSelector(getUnreadHuddlesTotal);
   const unreadPmsTotal = useSelector(getUnreadPmsTotal);
diff --git a/src/nav/IconUnreadMentions.js b/src/nav/IconUnreadMentions.js
index 036325b199c..dd40d389486 100644
--- a/src/nav/IconUnreadMentions.js
+++ b/src/nav/IconUnreadMentions.js
@@ -12,7 +12,7 @@ type Props = $ReadOnly<{|
   color: string,
 |}>;
 
-export default function IconUnreadMentions(props: Props) {
+export default function IconUnreadMentions(props: Props): React$Node {
   const { color } = props;
   const unreadMentionsTotal = useSelector(getUnreadMentionsTotal);
 
diff --git a/src/nav/ModalNavBar.js b/src/nav/ModalNavBar.js
index ba77e56de1a..4e74038325e 100644
--- a/src/nav/ModalNavBar.js
+++ b/src/nav/ModalNavBar.js
@@ -14,7 +14,7 @@ type Props = $ReadOnly<{|
   title: LocalizableText,
 |}>;
 
-export default function ModalNavBar(props: Props) {
+export default function ModalNavBar(props: Props): React$Node {
   const { canGoBack, title } = props;
   const { backgroundColor } = useContext(ThemeContext);
   const textStyle = [
diff --git a/src/nav/ModalSearchNavBar.js b/src/nav/ModalSearchNavBar.js
index 9d2751be510..6acf29ac72c 100644
--- a/src/nav/ModalSearchNavBar.js
+++ b/src/nav/ModalSearchNavBar.js
@@ -12,7 +12,7 @@ type Props = $ReadOnly<{|
   canGoBack?: boolean,
 |}>;
 
-export default function ModalSearchNavBar(props: Props) {
+export default function ModalSearchNavBar(props: Props): React$Node {
   const { autoFocus, searchBarOnChange, canGoBack = true } = props;
   const { backgroundColor } = useContext(ThemeContext);
   return (
diff --git a/src/nav/NavBarBackButton.js b/src/nav/NavBarBackButton.js
index 0638afa73fb..fb202e13acd 100644
--- a/src/nav/NavBarBackButton.js
+++ b/src/nav/NavBarBackButton.js
@@ -19,7 +19,7 @@ import * as NavigationService from './NavigationService';
  * https://material.io/design/navigation/understanding-navigation.html
  */
 // TODO: on iOS, give the right label for a back button
-export default function NavBarBackButton(props: {| +color?: string |}) {
+export default function NavBarBackButton(props: {| +color?: string |}): React$Node {
   const { color } = props;
   const iconName = Platform.OS === 'android' ? 'arrow-left' : 'chevron-left';
 
diff --git a/src/pm-conversations/GroupPmConversationItem.js b/src/pm-conversations/GroupPmConversationItem.js
index 681b7d0f3ae..a74cf12f255 100644
--- a/src/pm-conversations/GroupPmConversationItem.js
+++ b/src/pm-conversations/GroupPmConversationItem.js
@@ -26,7 +26,9 @@ type Props<U> = $ReadOnly<{|
 /**
  * A list item describing one group PM conversation.
  * */
-export default function GroupPmConversationItem<U: $ReadOnlyArray<UserOrBot>>(props: Props<U>) {
+export default function GroupPmConversationItem<U: $ReadOnlyArray<UserOrBot>>(
+  props: Props<U>,
+): React$Node {
   const { users, unreadCount, onPress } = props;
 
   const handlePress = useCallback(() => {
diff --git a/src/pm-conversations/PmConversationList.js b/src/pm-conversations/PmConversationList.js
index 8dee78d4f05..4053d969ef4 100644
--- a/src/pm-conversations/PmConversationList.js
+++ b/src/pm-conversations/PmConversationList.js
@@ -26,7 +26,7 @@ type Props = $ReadOnly<{|
 /**
  * A list describing all PM conversations.
  * */
-export default function PmConversationList(props: Props) {
+export default function PmConversationList(props: Props): React$Node {
   const dispatch = useDispatch();
 
   const handleUserNarrow = useCallback(
diff --git a/src/pm-conversations/PmConversationsScreen.js b/src/pm-conversations/PmConversationsScreen.js
index b31e3f1fd5d..a4a8d3575f8 100644
--- a/src/pm-conversations/PmConversationsScreen.js
+++ b/src/pm-conversations/PmConversationsScreen.js
@@ -41,7 +41,7 @@ type Props = $ReadOnly<{|
 /**
  * The "PMs" page in the main tabs navigation.
  * */
-export default function PmConversationsScreen(props: Props) {
+export default function PmConversationsScreen(props: Props): React$Node {
   const conversations = useSelector(getRecentConversations);
   const context = useContext(ThemeContext);
 
diff --git a/src/reactions/ReactionUserList.js b/src/reactions/ReactionUserList.js
index cf413b2d858..5b980476357 100644
--- a/src/reactions/ReactionUserList.js
+++ b/src/reactions/ReactionUserList.js
@@ -16,7 +16,7 @@ type Props = $ReadOnly<{|
  *
  * Used within `MessageReactionsScreen`.
  */
-export default function ReactionUserList(props: Props) {
+export default function ReactionUserList(props: Props): React$Node {
   const { reactedUserIds } = props;
 
   return (
diff --git a/src/search/SearchMessagesCard.js b/src/search/SearchMessagesCard.js
index 0bc5ff64b2b..cc3bdcfdb05 100644
--- a/src/search/SearchMessagesCard.js
+++ b/src/search/SearchMessagesCard.js
@@ -21,7 +21,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class SearchMessagesCard extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { isFetching, messages } = this.props;
 
     if (isFetching) {
diff --git a/src/settings/DebugScreen.js b/src/settings/DebugScreen.js
index fd78bd9f6a1..c0fa1e7397b 100644
--- a/src/settings/DebugScreen.js
+++ b/src/settings/DebugScreen.js
@@ -12,7 +12,7 @@ type Props = $ReadOnly<{|
   route: RouteProp<'debug', void>,
 |}>;
 
-export default function DebugScreen(props: Props) {
+export default function DebugScreen(props: Props): React$Node {
   return (
     <Screen title="Debug">
       <View />
diff --git a/src/settings/LanguageScreen.js b/src/settings/LanguageScreen.js
index 19d729d0fc1..387171cbc6f 100644
--- a/src/settings/LanguageScreen.js
+++ b/src/settings/LanguageScreen.js
@@ -15,7 +15,7 @@ type Props = $ReadOnly<{|
   route: RouteProp<'language', void>,
 |}>;
 
-export default function LanguageScreen(props: Props) {
+export default function LanguageScreen(props: Props): React$Node {
   const dispatch = useDispatch();
   const locale = useSelector(state => getSettings(state).locale);
 
diff --git a/src/settings/LegalScreen.js b/src/settings/LegalScreen.js
index 47563be75e0..2665f927e7e 100644
--- a/src/settings/LegalScreen.js
+++ b/src/settings/LegalScreen.js
@@ -14,7 +14,7 @@ type Props = $ReadOnly<{|
   route: RouteProp<'legal', void>,
 |}>;
 
-export default function LegalScreen(props: Props) {
+export default function LegalScreen(props: Props): React$Node {
   const realm = useSelector(getCurrentRealm);
 
   const openTermsOfService = useCallback(() => {
diff --git a/src/settings/NotificationsScreen.js b/src/settings/NotificationsScreen.js
index 7ea6a8fe58e..73b6eec665e 100644
--- a/src/settings/NotificationsScreen.js
+++ b/src/settings/NotificationsScreen.js
@@ -15,7 +15,7 @@ type Props = $ReadOnly<{|
   route: RouteProp<'notifications', void>,
 |}>;
 
-export default function NotificationsScreen(props: Props) {
+export default function NotificationsScreen(props: Props): React$Node {
   const auth = useSelector(getAuth);
   const offlineNotification = useSelector(state => getSettings(state).offlineNotification);
   const onlineNotification = useSelector(state => getSettings(state).onlineNotification);
diff --git a/src/settings/SettingsScreen.js b/src/settings/SettingsScreen.js
index 6c19ae6ff7b..c621f920e80 100644
--- a/src/settings/SettingsScreen.js
+++ b/src/settings/SettingsScreen.js
@@ -36,7 +36,7 @@ type Props = $ReadOnly<{|
   route: RouteProp<'settings', void>,
 |}>;
 
-export default function SettingsScreen(props: Props) {
+export default function SettingsScreen(props: Props): React$Node {
   const theme = useSelector(state => getSettings(state).theme);
   const browser = useSelector(state => getSettings(state).browser);
   const doNotMarkMessagesAsRead = useSelector(state => getSettings(state).doNotMarkMessagesAsRead);
diff --git a/src/sharing/SharingScreen.js b/src/sharing/SharingScreen.js
index 65fe7e0d03b..ee08921e86b 100644
--- a/src/sharing/SharingScreen.js
+++ b/src/sharing/SharingScreen.js
@@ -47,7 +47,7 @@ const styles = createStyleSheet({
   },
 });
 
-export default function SharingScreen(props: Props) {
+export default function SharingScreen(props: Props): React$Node {
   const { params } = props.route;
   const hasAuth = useSelector(getHasAuth);
 
diff --git a/src/start/IosCompliantAppleAuthButton/Custom.js b/src/start/IosCompliantAppleAuthButton/Custom.js
index 2378d11b5ad..c6801b50a51 100644
--- a/src/start/IosCompliantAppleAuthButton/Custom.js
+++ b/src/start/IosCompliantAppleAuthButton/Custom.js
@@ -55,7 +55,7 @@ type Props = $ReadOnly<{|
  * button should be used.
  */
 export default class Custom extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { style, onPress, theme } = this.props;
     const logoSource = theme === 'default' ? appleLogoBlackImg : appleLogoWhiteImg;
     const frameStyle = [
diff --git a/src/start/RealmInfo.js b/src/start/RealmInfo.js
index a5732963cc7..5d45132a371 100644
--- a/src/start/RealmInfo.js
+++ b/src/start/RealmInfo.js
@@ -28,7 +28,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class RealmInfo extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { name, iconUrl } = this.props;
 
     return (
diff --git a/src/streams/StreamCard.js b/src/streams/StreamCard.js
index 535ae1b1eef..3693c9e0b31 100644
--- a/src/streams/StreamCard.js
+++ b/src/streams/StreamCard.js
@@ -31,7 +31,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class StreamCard extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { stream, subscription } = this.props;
 
     return (
diff --git a/src/streams/StreamIcon.js b/src/streams/StreamIcon.js
index be102b86053..9774aa0b24a 100644
--- a/src/streams/StreamIcon.js
+++ b/src/streams/StreamIcon.js
@@ -12,7 +12,7 @@ type Props = $ReadOnly<{|
   style?: TextStyleProp,
 |}>;
 
-export default ({ color, style, isPrivate, isMuted, size }: Props) => {
+export default ({ color, style, isPrivate, isMuted, size }: Props): React$Node => {
   const StreamIcon = isMuted ? IconMute : isPrivate ? IconPrivate : IconStream;
 
   return <StreamIcon size={size} color={color} style={style} />;
diff --git a/src/streams/StreamItem.js b/src/streams/StreamItem.js
index 91573a108ce..fb9ba10c7fb 100644
--- a/src/streams/StreamItem.js
+++ b/src/streams/StreamItem.js
@@ -58,7 +58,7 @@ type Props = $ReadOnly<{|
  * @prop onPress - press handler for the item; receives the stream name
  * @prop onSwitch - if switch exists; receives stream name and new value
  */
-export default function StreamItem(props: Props) {
+export default function StreamItem(props: Props): React$Node {
   const {
     name,
     description,
diff --git a/src/streams/TopicItem.js b/src/streams/TopicItem.js
index 13ad1cad8f1..014ea30d90c 100644
--- a/src/streams/TopicItem.js
+++ b/src/streams/TopicItem.js
@@ -46,7 +46,7 @@ type Props = $ReadOnly<{|
   onPress: (stream: string, topic: string) => void,
 |}>;
 
-export default function TopicItem(props: Props) {
+export default function TopicItem(props: Props): React$Node {
   const { name, streamName, isMuted = false, isSelected = false, unreadCount = 0, onPress } = props;
 
   const showActionSheetWithOptions: ShowActionSheetWithOptions = useActionSheet()
diff --git a/src/title-buttons/ExtraNavButtonStream.js b/src/title-buttons/ExtraNavButtonStream.js
index 6a03b1dbb35..71585c5ed2d 100644
--- a/src/title-buttons/ExtraNavButtonStream.js
+++ b/src/title-buttons/ExtraNavButtonStream.js
@@ -15,7 +15,7 @@ type Props = $ReadOnly<{|
   color: string,
 |}>;
 
-export default function ExtraNavButtonStream(props: Props) {
+export default function ExtraNavButtonStream(props: Props): React$Node {
   const streams = useSelector(getStreams);
   const { color } = props;
 
diff --git a/src/title-buttons/InfoNavButtonGroup.js b/src/title-buttons/InfoNavButtonGroup.js
index 0cc5190b3f8..8136aa4853f 100644
--- a/src/title-buttons/InfoNavButtonGroup.js
+++ b/src/title-buttons/InfoNavButtonGroup.js
@@ -11,7 +11,7 @@ type Props = $ReadOnly<{|
   userIds: $ReadOnlyArray<UserId>,
 |}>;
 
-export default function InfoNavButtonGroup(props: Props) {
+export default function InfoNavButtonGroup(props: Props): React$Node {
   const { color } = props;
 
   return (
diff --git a/src/title-buttons/InfoNavButtonPrivate.js b/src/title-buttons/InfoNavButtonPrivate.js
index 0a12f36965f..e7259780e43 100644
--- a/src/title-buttons/InfoNavButtonPrivate.js
+++ b/src/title-buttons/InfoNavButtonPrivate.js
@@ -11,7 +11,7 @@ type Props = $ReadOnly<{|
   userId: UserId,
 |}>;
 
-export default function InfoNavButtonPrivate(props: Props) {
+export default function InfoNavButtonPrivate(props: Props): React$Node {
   const { color } = props;
   return (
     <NavButton
diff --git a/src/title-buttons/InfoNavButtonStream.js b/src/title-buttons/InfoNavButtonStream.js
index 7c59ebf1ae6..f61c71058db 100644
--- a/src/title-buttons/InfoNavButtonStream.js
+++ b/src/title-buttons/InfoNavButtonStream.js
@@ -15,7 +15,7 @@ type Props = $ReadOnly<{|
   color: string,
 |}>;
 
-export default function InfoNavButtonStream(props: Props) {
+export default function InfoNavButtonStream(props: Props): React$Node {
   const streams = useSelector(getStreams);
   const { color } = props;
 
diff --git a/src/title/Title.js b/src/title/Title.js
index 5a211090817..67c40bd9793 100644
--- a/src/title/Title.js
+++ b/src/title/Title.js
@@ -18,7 +18,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class Title extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { narrow, color, editMessage } = this.props;
     if (editMessage != null) {
       return <TitlePlain text="Edit message" color={color} />;
diff --git a/src/title/TitleGroup.js b/src/title/TitleGroup.js
index 25d06609449..eb4bd5c0c4d 100644
--- a/src/title/TitleGroup.js
+++ b/src/title/TitleGroup.js
@@ -21,7 +21,7 @@ const componentStyles = createStyleSheet({
   },
 });
 
-export default function TitleGroup(props: Props) {
+export default function TitleGroup(props: Props): React$Node {
   const { userIds } = props;
   const mutedUsers = useSelector(getMutedUsers);
 
diff --git a/src/title/TitlePlain.js b/src/title/TitlePlain.js
index 795bde6d8d1..a9f335d08f8 100644
--- a/src/title/TitlePlain.js
+++ b/src/title/TitlePlain.js
@@ -10,7 +10,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class TitlePlain extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { text, color } = this.props;
     return <Text style={[styles.navTitle, styles.flexed, { color }]}>{text}</Text>;
   }
diff --git a/src/title/TitlePrivate.js b/src/title/TitlePrivate.js
index d1132dc02c1..788b879a21c 100644
--- a/src/title/TitlePrivate.js
+++ b/src/title/TitlePrivate.js
@@ -24,7 +24,7 @@ const componentStyles = createStyleSheet({
   textWrapper: { flex: 1 },
 });
 
-export default function TitlePrivate(props: Props) {
+export default function TitlePrivate(props: Props): React$Node {
   const { userId, color } = props;
   const user = useSelector(state => tryGetUserForId(state, userId));
   if (!user) {
diff --git a/src/title/TitleSpecial.js b/src/title/TitleSpecial.js
index 1377cf22a81..31579914b4e 100644
--- a/src/title/TitleSpecial.js
+++ b/src/title/TitleSpecial.js
@@ -19,7 +19,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class TitleSpecial extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { code, color } = this.props;
     const { name, icon } = specials[code];
 
diff --git a/src/topics/TopicList.js b/src/topics/TopicList.js
index d7750974a33..4adb26b58d7 100644
--- a/src/topics/TopicList.js
+++ b/src/topics/TopicList.js
@@ -21,7 +21,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class TopicList extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { stream, topics, onPress } = this.props;
 
     if (!topics) {
diff --git a/src/unread/UnreadCards.js b/src/unread/UnreadCards.js
index a5c329bbf82..c035d4c4ca9 100644
--- a/src/unread/UnreadCards.js
+++ b/src/unread/UnreadCards.js
@@ -15,7 +15,7 @@ import { doNarrow } from '../actions';
 
 type Props = $ReadOnly<{||}>;
 
-export default function UnreadCards(props: Props) {
+export default function UnreadCards(props: Props): React$Node {
   const dispatch = useDispatch();
   const conversations = useSelector(getUnreadConversations);
   const unreadStreamsAndTopics = useSelector(getUnreadStreamsAndTopicsSansMuted);
diff --git a/src/user-picker/AvatarItem.js b/src/user-picker/AvatarItem.js
index 7b4d64b1ccd..77967216195 100644
--- a/src/user-picker/AvatarItem.js
+++ b/src/user-picker/AvatarItem.js
@@ -1,6 +1,7 @@
 /* @flow strict-local */
 import React, { PureComponent } from 'react';
 import { Animated, Easing, View } from 'react-native';
+import type AnimatedValue from 'react-native/Libraries/Animated/src/nodes/AnimatedValue';
 
 import type { UserId, UserOrBot } from '../types';
 import { UserAvatarWithPresence, ComponentWithOverlay, RawLabel, Touchable } from '../common';
@@ -35,7 +36,7 @@ type Props = $ReadOnly<{|
  * Pressable avatar for items in the user-picker card.
  */
 export default class AvatarItem extends PureComponent<Props> {
-  animatedValue = new Animated.Value(0);
+  animatedValue: AnimatedValue = new Animated.Value(0);
 
   componentDidMount() {
     Animated.timing(this.animatedValue, {
@@ -56,7 +57,7 @@ export default class AvatarItem extends PureComponent<Props> {
     }).start(() => onPress(user.user_id));
   };
 
-  render() {
+  render(): React$Node {
     const { user } = this.props;
     const animatedStyle = {
       transform: [{ scale: this.animatedValue }],
diff --git a/src/user-picker/AvatarList.js b/src/user-picker/AvatarList.js
index 832e1115674..09e3803cf5d 100644
--- a/src/user-picker/AvatarList.js
+++ b/src/user-picker/AvatarList.js
@@ -12,7 +12,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 export default class AvatarList extends PureComponent<Props> {
-  render() {
+  render(): React$Node {
     const { listRef, users, onPress } = this.props;
 
     return (
diff --git a/src/users/UserItem.js b/src/users/UserItem.js
index c321c098016..75697734057 100644
--- a/src/users/UserItem.js
+++ b/src/users/UserItem.js
@@ -50,7 +50,7 @@ type Props<UserT> = $ReadOnly<{|
  */
 export function UserItemRaw<UserT: { user_id: UserId, email: string, full_name: string, ... }>(
   props: Props<UserT>,
-) {
+): React$Node {
   const { user, isSelected = false, onPress, unreadCount, showEmail = false } = props;
   const _ = useContext(TranslationContext);
   const isMuted = useSelector(getMutedUsers).has(user.user_id);
@@ -108,7 +108,7 @@ type OuterProps = $ReadOnly<{|
  * encapsulate getting user data where it's needed.
  */
 // eslint-disable-next-line func-names
-export default function (props: OuterProps) {
+export default function (props: OuterProps): React$Node {
   const { userId, ...restProps } = props;
   const user = useSelector(state => getUserForId(state, userId));
   return <UserItemRaw {...restProps} user={user} />;
diff --git a/src/users/UserList.js b/src/users/UserList.js
index a39ce5e60f2..c76023b35e2 100644
--- a/src/users/UserList.js
+++ b/src/users/UserList.js
@@ -24,7 +24,7 @@ type Props = $ReadOnly<{|
   onPress: (user: UserOrBot) => void,
 |}>;
 
-export default function UserList(props: Props) {
+export default function UserList(props: Props): React$Node {
   const { filter, users, presences, onPress, selected = [] } = props;
   const mutedUsers = useSelector(getMutedUsers);
   const filteredUsers = filterUserList(users, filter).filter(user => !mutedUsers.has(user.user_id));