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 #4907.

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): React$Node {
   const {
     visible = true,
     useNativeDriver = true,

src/autocomplete/AutocompleteView.js

@@ -31,7 +31,7 @@ type Props = $ReadOnly<{|
   onAutocomplete: (input: string, completion: string, lastWordPrefix: string) => void,
 |}>;
 
-export default function AutocompleteView(props: Props) {
+export default function AutocompleteView(props: Props): React$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): React$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): React$Node {
   const {
     children,
     style,

src/common/Input.js

@@ -45,7 +45,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): React$Node {
   const { style, placeholder, textInputRef, ...restProps } = props;
 
   const [isFocused, setIsFocused] = useState<boolean>(false);

src/common/InputWithClearButton.js

@@ -22,7 +22,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): React$Node {
   const { onChangeText } = props;
 
   const [text, setText] = useState<string>('');

src/common/LineSeparator.js

@@ -11,7 +11,7 @@ const componentStyles = createStyleSheet({
   },
 });
 
-export default function LineSeparator(props: {||}) {
+export default function LineSeparator(props: {||}): React$Node {
   const themeContext = useContext(ThemeContext);
   return (
     <View style={[componentStyles.lineSeparator, { backgroundColor: themeContext.cardColor }]} />

src/common/LoadingIndicator.js

@@ -36,7 +36,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): React$Node {
   const { color = 'default', showLogo = false, size = 40 } = props;
 
   return (

src/common/NestedNavRow.js

@@ -22,7 +22,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): React$Node {
   const { label, onPress, Icon } = props;
 
   const themeContext = useContext(ThemeContext);

src/common/OptionDivider.js

@@ -10,7 +10,7 @@ const componentStyles = createStyleSheet({
   },
 });
 
-export default function OptionDivider(props: {||}) {
+export default function OptionDivider(props: {||}): React$Node {
   const themeContext = useContext(ThemeContext);
   return (
     <View style={[componentStyles.divider, { borderBottomColor: themeContext.dividerColor }]} />

src/common/PasswordInput.js

@@ -35,7 +35,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): React$Node {
   const [isHidden, setIsHidden] = useState<boolean>(true);
 
   const handleShow = useCallback(() => {

src/common/Popup.js

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

src/common/SearchInput.js

@@ -29,7 +29,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): React$Node {
   const { autoFocus = true, onChangeText } = props;
 
   return (

src/common/SmartUrlInput.js

@@ -54,7 +54,7 @@ type Props = $ReadOnly<{|
   enablesReturnKeyAutomatically: boolean,
 |}>;
 
-export default function SmartUrlInput(props: Props) {
+export default function SmartUrlInput(props: Props): React$Node {
   const {
     defaultProtocol,
     defaultOrganization,

src/common/SwitchRow.js

@@ -25,7 +25,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): React$Node {
   const { label, value, onValueChange, style, Icon } = props;
 
   const themeContext = useContext(ThemeContext);

src/common/UnreadCount.js

@@ -54,7 +54,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): React$Node {
   const {
     style,
     isMuted = false,

src/common/ZulipButton.js

@@ -121,7 +121,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): React$Node {
   const {
     style,
     text,

src/common/ZulipSwitch.js

@@ -19,7 +19,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): React$Node {
   const { disabled = false, onValueChange, value } = props;
   return (
     <Switch

src/emoji/EmojiRow.js

@@ -25,7 +25,7 @@ type Props = $ReadOnly<{|
   onPress: (name: string) => void,
 |}>;
 
-export default function EmojiRow(props: Props) {
+export default function EmojiRow(props: Props): React$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): React$Node {
   const { children, onPress, accessibilityLabel } = props;
 
   return (

src/streams/StreamList.js

@@ -46,7 +46,7 @@ type Props = $ReadOnly<{|
   onSwitch?: (streamName: string, newValue: boolean) => void,
 |}>;
 
-export default function StreamList(props: Props) {
+export default function StreamList(props: Props): React$Node {
   const {
     streams = [],
     showDescriptions = false,

src/user-groups/UserGroupItem.js

@@ -25,7 +25,7 @@ type Props = $ReadOnly<{|
   onPress: (name: string) => void,
 |}>;
 
-export default function UserGroupItem(props: Props) {
+export default function UserGroupItem(props: Props): React$Node {
   const { name, description, onPress } = props;
 
   const handlePress = useCallback(() => {

src/users/UsersScreen.js

@@ -11,7 +11,7 @@ type Props = $ReadOnly<{|
   route: RouteProp<'users', void>,
 |}>;
 
-export default function UsersScreen(props: Props) {
+export default function UsersScreen(props: Props): React$Node {
   const [filter, setFilter] = useState<string>('');
 
   return (