diff --git a/lib/shared/markdown.js b/lib/shared/markdown.js
--- a/lib/shared/markdown.js
+++ b/lib/shared/markdown.js
@@ -45,7 +45,7 @@
   prevCapture: string,
 ) => ?Capture);
 
-export type ReactElement = React$Element<any>;
+export type ReactElement = React.MixedElement;
 type ReactElements = React.Node;
 
 export type Output<Result> = (node: ASTNode, state?: ?State) => Result;
diff --git a/native/account/logged-out-modal.react.js b/native/account/logged-out-modal.react.js
--- a/native/account/logged-out-modal.react.js
+++ b/native/account/logged-out-modal.react.js
@@ -439,7 +439,7 @@
       return null;
     }
 
-    const signInButtons: Array<React.Element<any>> = [];
+    const signInButtons: Array<React.Node> = [];
     if (!usingRestoreFlow) {
       signInButtons.push(
         <PromptButton
diff --git a/native/calendar/entry.react.js b/native/calendar/entry.react.js
--- a/native/calendar/entry.react.js
+++ b/native/calendar/entry.react.js
@@ -95,7 +95,7 @@
 
 function dummyNodeForEntryHeightMeasurement(
   entryText: string,
-): React.Element<typeof View> {
+): React.MixedElement {
   const text = entryText === '' ? ' ' : entryText;
   return (
     <View style={[unboundStyles.entry, unboundStyles.textContainer]}>
diff --git a/native/chat/inline-engagement.react.js b/native/chat/inline-engagement.react.js
--- a/native/chat/inline-engagement.react.js
+++ b/native/chat/inline-engagement.react.js
@@ -35,7 +35,7 @@
   sidebarInfo: ?ThreadInfo,
   reactions: ReactionInfo,
   deleted: boolean,
-): React.Element<typeof View> {
+): React.MixedElement {
   return (
     <View>
       <DummyInlineEngagementNode
diff --git a/native/chat/inner-robotext-message.react.js b/native/chat/inner-robotext-message.react.js
--- a/native/chat/inner-robotext-message.react.js
+++ b/native/chat/inner-robotext-message.react.js
@@ -28,7 +28,7 @@
   threadID: string,
   sidebarInfo: ?ThreadInfo,
   reactions: ReactionInfo,
-): React.Element<typeof View> {
+): React.MixedElement {
   return (
     <View>
       <View style={unboundStyles.robotextContainer}>
diff --git a/native/chat/inner-text-message.react.js b/native/chat/inner-text-message.react.js
--- a/native/chat/inner-text-message.react.js
+++ b/native/chat/inner-text-message.react.js
@@ -32,7 +32,7 @@
   sidebarInfo: ?ThreadInfo,
   reactions: ReactionInfo,
   deleted: boolean,
-): React.Element<typeof View> {
+): React.MixedElement {
   return (
     <View>
       <DummyTextNode withoutMarkdown={deleted}>{text}</DummyTextNode>
diff --git a/native/chat/swipeable-message.react.js b/native/chat/swipeable-message.react.js
--- a/native/chat/swipeable-message.react.js
+++ b/native/chat/swipeable-message.react.js
@@ -1,6 +1,5 @@
 // @flow
 
-import type { IconProps } from '@expo/vector-icons';
 import * as Haptics from 'expo-haptics';
 import * as React from 'react';
 import { View } from 'react-native';
@@ -86,17 +85,16 @@
   return interpolate(translateX, [0, 80, 120, 130], [0, 30, 120, 130]);
 }
 
-type SwipeSnakeProps<IconGlyphs: string> = {
+type SwipeSnakeProps = {
   +isViewer: boolean,
   +translateX: SharedValue<number>,
   +color: string,
-  +children: React.Element<React.ComponentType<IconProps<IconGlyphs>>>,
   +opacityInterpolator?: number => number, // must be worklet
   +translateXInterpolator?: number => number, // must be worklet
+  +iconName: string,
+  +iconSize: number,
 };
-function SwipeSnake<IconGlyphs: string>(
-  props: SwipeSnakeProps<IconGlyphs>,
-): React.Node {
+function SwipeSnake(props: SwipeSnakeProps): React.Node {
   const { translateX, isViewer, opacityInterpolator, translateXInterpolator } =
     props;
   const transformStyle = useAnimatedStyle(() => {
@@ -140,16 +138,13 @@
     ];
   }, [iconAlign, screenWidth, color]);
 
-  const { children } = props;
+  const { iconName, iconSize } = props;
   const iconColor = tinycolor(color).isDark()
     ? colors.dark.listForegroundLabel
     : colors.light.listForegroundLabel;
   const coloredIcon = React.useMemo(
-    () =>
-      React.cloneElement(children, {
-        color: iconColor,
-      }),
-    [children, iconColor],
+    () => <CommIcon name={iconName} size={iconSize} color={iconColor} />,
+    [iconName, iconSize, iconColor],
   );
 
   const swipeSnake = React.useMemo(
@@ -286,10 +281,6 @@
   const threadColor = `#${props.threadColor}`;
   const tinyThreadColor = tinycolor(threadColor);
 
-  const replyIcon = React.useMemo(
-    () => <CommIcon name="reply-filled" size={14} />,
-    [],
-  );
   const replySwipeSnake = React.useMemo(
     () => (
       <SwipeSnake
@@ -302,17 +293,13 @@
             : interpolateOpacityForNonViewerPrimarySnake
         }
         key="reply"
-      >
-        {replyIcon}
-      </SwipeSnake>
+        iconName="reply-filled"
+        iconSize={14}
+      />
     ),
-    [isViewer, replyIcon, threadColor, translateX],
+    [isViewer, threadColor, translateX],
   );
 
-  const sidebarIcon = React.useMemo(
-    () => <CommIcon name="sidebar-filled" size={16} />,
-    [],
-  );
   const sidebarSwipeSnakeWithReplySwipeSnake = React.useMemo(
     () => (
       <SwipeSnake
@@ -327,11 +314,11 @@
             : interpolateTranslateXForNonViewerSecondarySnake
         }
         key="sidebar"
-      >
-        {sidebarIcon}
-      </SwipeSnake>
+        iconName="sidebar-filled"
+        iconSize={16}
+      />
     ),
-    [isViewer, sidebarIcon, tinyThreadColor, translateX],
+    [isViewer, tinyThreadColor, translateX],
   );
 
   const sidebarSwipeSnakeWithoutReplySwipeSnake = React.useMemo(
@@ -346,11 +333,11 @@
             : interpolateOpacityForNonViewerPrimarySnake
         }
         key="sidebar"
-      >
-        {sidebarIcon}
-      </SwipeSnake>
+        iconName="sidebar-filled"
+        iconSize={16}
+      />
     ),
-    [isViewer, sidebarIcon, threadColor, translateX],
+    [isViewer, threadColor, translateX],
   );
 
   const panGestureHandler = React.useMemo(
diff --git a/native/components/node-height-measurer.react.js b/native/components/node-height-measurer.react.js
--- a/native/components/node-height-measurer.react.js
+++ b/native/components/node-height-measurer.react.js
@@ -50,7 +50,7 @@
   // These are the dummies currently being rendered
   currentlyMeasuring: $ReadOnlyArray<{
     +measureKey: string,
-    +dummy: React.Element<any>,
+    +dummy: React.MixedElement,
   }>,
   // When certain parameters change we need to remeasure everything. In order to
   // avoid considering any onLayouts that got queued before we issued the
@@ -504,10 +504,11 @@
   render(): React.Node {
     const { currentlyMeasuring, iteration } = this.state;
     const dummies = currentlyMeasuring.map(({ measureKey, dummy }) => {
-      const { children } = dummy.props;
-      const style = [dummy.props.style, styles.dummy];
+      const { children } = (dummy as any).props;
+      const style = [(dummy as any).props.style, styles.dummy];
       const onLayout = (event: LayoutChangeEvent) =>
         this.onDummyLayout(measureKey, iteration, event);
+      // $FlowFixMe[incompatible-call]
       const node = React.cloneElement(dummy, {
         style,
         onLayout,
diff --git a/web/navigation-panels/navigation-panel.react.js b/web/navigation-panels/navigation-panel.react.js
--- a/web/navigation-panels/navigation-panel.react.js
+++ b/web/navigation-panels/navigation-panel.react.js
@@ -8,50 +8,61 @@
 import type { AppState } from '../redux/redux-setup.js';
 import { useSelector } from '../redux/redux-utils.js';
 
+type NavigationPanelContextType = {
+  +currentTab: ?string,
+  +css: { [key: string]: string },
+};
+
+const NavigationPanelContext = React.createContext<NavigationPanelContextType>({
+  currentTab: null,
+  css: {},
+});
+
 type NavigationPanelItemProps = {
   +tab: string,
   +children: React.Node,
 };
 
 function NavigationPanelItem(props: NavigationPanelItemProps): React.Node {
-  const { children } = props;
-  return children;
+  const { children, tab } = props;
+  const { currentTab, css } = React.useContext(NavigationPanelContext);
+  return (
+    <div
+      className={classNames({
+        [css.current_tab]: currentTab === tab,
+      })}
+    >
+      {children}
+    </div>
+  );
 }
 
-type NavigationPanelContainerProps<T> = {
+type NavigationPanelContainerProps<T: ?string> = {
   +tabSelector: AppState => T,
-  +children: React.ChildrenArray<?React.Element<typeof NavigationPanelItem>>,
+  +children: React.ChildrenArray<?React.MixedElement>,
   +horizontal?: boolean,
 };
 
-function NavigationPanelContainer<T>(
+function NavigationPanelContainer<T: ?string>(
   props: NavigationPanelContainerProps<T>,
 ): React.Node {
   const { children, tabSelector, horizontal = false } = props;
   const currentTab = useSelector(tabSelector);
   const css = horizontal ? horizontalCSS : verticalCSS;
 
-  const items = React.useMemo(
-    () =>
-      React.Children.map(children, child => {
-        if (!child) {
-          return null;
-        }
-        return (
-          <div
-            key={child.props.tab}
-            className={classNames({
-              [css.current_tab]: currentTab === child.props.tab,
-            })}
-          >
-            {child}
-          </div>
-        );
-      }),
-    [children, css.current_tab, currentTab],
+  const navigationPanelContextValue = React.useMemo(
+    () => ({
+      currentTab,
+      css,
+    }),
+    [css, currentTab],
   );
 
-  return <div className={css.navigationPanelContainer}>{items}</div>;
+  return (
+    <NavigationPanelContext.Provider value={navigationPanelContextValue}>
+      <div className={css.navigationPanelContainer}>{children}</div>
+    </NavigationPanelContext.Provider>
+  );
 }
 
 const NavigationPanel = {