diff --git a/native/media/encrypted-image.react.js b/native/media/encrypted-image.react.js
index b140163d4..bed0c305d 100644
--- a/native/media/encrypted-image.react.js
+++ b/native/media/encrypted-image.react.js
@@ -1,123 +1,118 @@
 // @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';
 
 type BaseProps = {
   +blobURI: string,
   +encryptionKey: string,
   +onLoad?: (uri: string) => void,
   +spinnerColor: string,
   +style: ImageStyle,
   +invisibleLoad: boolean,
   +thumbHash?: ?string,
 };
 type Props = {
   ...BaseProps,
 };
 
 function EncryptedImage(props: Props): React.Node {
   const {
     blobURI,
     encryptionKey,
     onLoad: onLoadProp,
     thumbHash: encryptedThumbHash,
   } = props;
 
   const fetchAndDecryptMedia = useFetchAndDecryptMedia();
 
   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(() => {
     if (!encryptedThumbHash) {
       return null;
     }
     try {
       const decryptedThumbHash = decryptBase64(
         encryptedThumbHash,
         encryptionKey,
       );
       return { thumbhash: decryptedThumbHash };
     } catch (e) {
       return null;
     }
   }, [encryptedThumbHash, encryptionKey]);
 
   React.useEffect(() => {
     let isMounted = true;
     setSource(null);
 
     const loadDecrypted = async () => {
       const cached = await mediaCache?.get(blobURI);
       if (cached && isMounted) {
         setSource({ uri: cached });
         return;
       }
 
       const { result } = await fetchAndDecryptMedia(blobURI, encryptionKey, {
         destination: 'data_uri',
       });
 
       if (isMounted) {
         if (result.success) {
           void mediaCache?.set(blobURI, result.uri);
           setSource({ uri: result.uri });
         } else {
           setErrorOccured(true);
         }
       }
     };
 
     void loadDecrypted();
 
     return () => {
       isMounted = false;
     };
   }, [attempt, blobURI, encryptionKey, mediaCache, fetchAndDecryptMedia]);
 
   const onLoad = React.useCallback(() => {
     onLoadProp && onLoadProp(blobURI);
   }, [blobURI, onLoadProp]);
 
   const { style, spinnerColor, invisibleLoad } = props;
 
   return (
     <LoadableImage
       placeholder={placeholder}
       source={source}
       onLoad={onLoad}
       spinnerColor={spinnerColor}
       style={style}
       invisibleLoad={invisibleLoad}
       key={attempt}
       errorOccured={errorOccured}
     />
   );
 }
 
 export default EncryptedImage;
diff --git a/native/media/remote-image.react.js b/native/media/remote-image.react.js
index 8b7853e90..496fc2691 100644
--- a/native/media/remote-image.react.js
+++ b/native/media/remote-image.react.js
@@ -1,104 +1,85 @@
 // @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';
 
 type BaseProps = {
   +uri: string,
   +onLoad?: (uri: string) => void,
   +spinnerColor: string,
   +style: ImageStyle,
   +invisibleLoad: boolean,
   +placeholder?: ?ImageSource,
 };
 type Props = {
   ...BaseProps,
-  +connectionStatus: ConnectionStatus,
+  +connected: boolean,
 };
 type State = {
   +attempt: number,
 };
 class RemoteImage extends React.PureComponent<Props, State> {
   loaded: boolean = false;
   state: State = {
     attempt: 0,
   };
 
   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,
       }));
     }
   }
 
   render(): React.Node {
     const { style, spinnerColor, invisibleLoad, uri, placeholder } = this.props;
     const source = { uri };
 
     return (
       <LoadableImage
         source={source}
         placeholder={placeholder}
         onLoad={this.onLoad}
         spinnerColor={spinnerColor}
         style={style}
         invisibleLoad={invisibleLoad}
         key={this.state.attempt}
       />
     );
   }
 
   onLoad = () => {
     this.loaded = true;
     this.props.onLoad && this.props.onLoad(this.props.uri);
   };
 }
 
 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;
 
   const connectedRemoteImage = React.useMemo(
     () => (
       <RemoteImage
         uri={uri}
         onLoad={onLoad}
         spinnerColor={spinnerColor}
         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;
 }
 
 export default ConnectedRemoteImage;