diff --git a/native/media/encrypted-image.react.js b/native/media/encrypted-image.react.js
--- a/native/media/encrypted-image.react.js
+++ b/native/media/encrypted-image.react.js
@@ -1,14 +1,11 @@
 // @flow
 
-import invariant from 'invariant';
 import * as React from 'react';
 
 import { MediaCacheContext } from 'lib/components/media-cache-provider.react.js';
-import { connectionSelector } from 'lib/selectors/keyserver-selectors.js';
 
 import { decryptBase64, useFetchAndDecryptMedia } from './encryption-utils.js';
 import LoadableImage from './loadable-image.react.js';
-import { authoritativeKeyserverID } from '../authoritative-keyserver.js';
 import { useSelector } from '../redux/redux-utils.js';
 import type { ImageSource } from '../types/react-native.js';
 import type { ImageStyle } from '../types/styles.js';
@@ -39,18 +36,16 @@
   const mediaCache = React.useContext(MediaCacheContext);
   const [source, setSource] = React.useState<?ImageSource>(null);
 
-  const connection = useSelector(connectionSelector(authoritativeKeyserverID));
-  invariant(connection, 'keyserver missing from keyserverStore');
-  const connectionStatus = connection.status;
-  const prevConnectionStatusRef = React.useRef(connectionStatus);
+  const connected = useSelector(state => state.connectivity.connected);
+  const prevConnectedRef = React.useRef(connected);
   const [attempt, setAttempt] = React.useState(0);
   const [errorOccured, setErrorOccured] = React.useState(false);
 
-  if (prevConnectionStatusRef.current !== connectionStatus) {
-    if (!source && connectionStatus === 'connected') {
+  if (prevConnectedRef.current !== connected) {
+    if (!source && connected) {
       setAttempt(attempt + 1);
     }
-    prevConnectionStatusRef.current = connectionStatus;
+    prevConnectedRef.current = connected;
   }
 
   const placeholder = React.useMemo(() => {
diff --git a/native/media/remote-image.react.js b/native/media/remote-image.react.js
--- a/native/media/remote-image.react.js
+++ b/native/media/remote-image.react.js
@@ -1,13 +1,8 @@
 // @flow
 
-import invariant from 'invariant';
 import * as React from 'react';
 
-import { connectionSelector } from 'lib/selectors/keyserver-selectors.js';
-import { type ConnectionStatus } from 'lib/types/socket-types.js';
-
 import LoadableImage from './loadable-image.react.js';
-import { authoritativeKeyserverID } from '../authoritative-keyserver.js';
 import { useSelector } from '../redux/redux-utils.js';
 import type { ImageSource } from '../types/react-native.js';
 import type { ImageStyle } from '../types/styles.js';
@@ -22,7 +17,7 @@
 };
 type Props = {
   ...BaseProps,
-  +connectionStatus: ConnectionStatus,
+  +connected: boolean,
 };
 type State = {
   +attempt: number,
@@ -34,11 +29,7 @@
   };
 
   componentDidUpdate(prevProps: Props) {
-    if (
-      !this.loaded &&
-      this.props.connectionStatus === 'connected' &&
-      prevProps.connectionStatus !== 'connected'
-    ) {
+    if (!this.loaded && this.props.connected && !prevProps.connected) {
       this.setState(otherPrevState => ({
         attempt: otherPrevState.attempt + 1,
       }));
@@ -69,9 +60,7 @@
 }
 
 function ConnectedRemoteImage(props: BaseProps): React.Node {
-  const connection = useSelector(connectionSelector(authoritativeKeyserverID));
-  invariant(connection, 'keyserver missing from keyserverStore');
-  const connectionStatus = connection.status;
+  const connected = useSelector(state => state.connectivity.connected);
 
   const { uri, onLoad, spinnerColor, style, invisibleLoad, placeholder } =
     props;
@@ -85,18 +74,10 @@
         style={style}
         invisibleLoad={invisibleLoad}
         placeholder={placeholder}
-        connectionStatus={connectionStatus}
+        connected={connected}
       />
     ),
-    [
-      connectionStatus,
-      invisibleLoad,
-      onLoad,
-      placeholder,
-      spinnerColor,
-      style,
-      uri,
-    ],
+    [connected, invisibleLoad, onLoad, placeholder, spinnerColor, style, uri],
   );
   return connectedRemoteImage;
 }