diff --git a/native/navigation/disconnected-bar-visibility-handler.react.js b/native/navigation/disconnected-bar-visibility-handler.react.js
index d2cdfde2c..55cbd2489 100644
--- a/native/navigation/disconnected-bar-visibility-handler.react.js
+++ b/native/navigation/disconnected-bar-visibility-handler.react.js
@@ -1,69 +1,15 @@
 // @flow
 
-import * as React from 'react';
-import { useDispatch } from 'react-redux';
-
-import { updateDisconnectedBarActionType } from 'lib/types/socket-types';
+import { useDisconnectedBarVisibilityHandler } from 'lib/hooks/disconnected-bar';
 
 import { useSelector } from '../redux/redux-utils';
 
 function DisconnectedBarVisibilityHandler(): null {
-  const dispatch = useDispatch();
-  const disconnected = useSelector(
-    state => state.connection.showDisconnectedBar,
-  );
-  const setDisconnected = React.useCallback(
-    (newDisconnected: boolean) => {
-      if (newDisconnected === disconnected) {
-        return;
-      }
-      dispatch({
-        type: updateDisconnectedBarActionType,
-        payload: { visible: newDisconnected },
-      });
-    },
-    [disconnected, dispatch],
-  );
-
-  const networkActiveRef = React.useRef(true);
   const networkConnected = useSelector(state => state.connectivity.connected);
-  React.useEffect(() => {
-    networkActiveRef.current = networkConnected;
-    if (!networkConnected) {
-      setDisconnected(true);
-    }
-  }, [setDisconnected, networkConnected]);
-
-  const prevConnectionStatusRef = React.useRef();
-  const connectionStatus = useSelector(state => state.connection.status);
-  const someRequestIsLate = useSelector(
-    state => state.connection.lateResponses.length !== 0,
-  );
-  React.useEffect(() => {
-    const prevConnectionStatus = prevConnectionStatusRef.current;
-    prevConnectionStatusRef.current = connectionStatus;
 
-    if (
-      connectionStatus === 'connected' &&
-      prevConnectionStatus !== 'connected'
-    ) {
-      // Sometimes NetInfo misses the network coming back online for some
-      // reason. But if the socket reconnects, the network must be up
-      networkActiveRef.current = true;
-      setDisconnected(false);
-    } else if (!networkActiveRef.current || someRequestIsLate) {
-      setDisconnected(true);
-    } else if (
-      connectionStatus === 'reconnecting' ||
-      connectionStatus === 'forcedDisconnecting'
-    ) {
-      setDisconnected(true);
-    } else if (connectionStatus === 'connected') {
-      setDisconnected(false);
-    }
-  }, [connectionStatus, someRequestIsLate, setDisconnected]);
+  useDisconnectedBarVisibilityHandler(networkConnected);
 
   return null;
 }
 
 export default DisconnectedBarVisibilityHandler;
diff --git a/native/navigation/disconnected-bar.react.js b/native/navigation/disconnected-bar.react.js
index d1d25ce52..2e0214211 100644
--- a/native/navigation/disconnected-bar.react.js
+++ b/native/navigation/disconnected-bar.react.js
@@ -1,124 +1,104 @@
 // @flow
 
 import * as React from 'react';
 import { Text, Platform, Animated, Easing } from 'react-native';
 
-import { useSelector } from '../redux/redux-utils';
+import {
+  useDisconnectedBar,
+  useShouldShowDisconnectedBar,
+} from 'lib/hooks/disconnected-bar';
+
 import { useStyles } from '../themes/colors';
 
 const expandedHeight = Platform.select({
   android: 29.5,
   default: 27,
 });
 const timingConfig = {
   useNativeDriver: false,
   duration: 200,
   // $FlowFixMe[method-unbinding]
   easing: Easing.inOut(Easing.ease),
 };
 
 type Props = {
   +visible: boolean,
 };
 function DisconnectedBar(props: Props): React.Node {
-  const disconnected = useSelector(
-    state => state.connection.showDisconnectedBar,
-  );
-  const socketConnected = useSelector(
-    state => state.connection.status === 'connected',
-  );
-  const shouldShowDisconnectedBar = disconnected || !socketConnected;
-
+  const { shouldShowDisconnectedBar } = useShouldShowDisconnectedBar();
   const showingRef = new React.useRef();
   if (!showingRef.current) {
     showingRef.current = new Animated.Value(shouldShowDisconnectedBar ? 1 : 0);
   }
   const showing = showingRef.current;
 
   const { visible } = props;
   const changeShowing = React.useCallback(
-    toValue => {
+    (toState: boolean) => {
+      const toValue = toState ? 1 : 0;
       if (!visible) {
         showing.setValue(toValue);
         return;
       }
       Animated.timing(showing, {
         ...timingConfig,
         toValue,
       }).start();
     },
     [visible, showing],
   );
 
-  const prevShowDisconnectedBar = React.useRef();
-  React.useEffect(() => {
-    const wasShowing = prevShowDisconnectedBar.current;
-    if (shouldShowDisconnectedBar && wasShowing === false) {
-      changeShowing(1);
-    } else if (!shouldShowDisconnectedBar && wasShowing) {
-      changeShowing(0);
-    }
-    prevShowDisconnectedBar.current = shouldShowDisconnectedBar;
-  }, [shouldShowDisconnectedBar, changeShowing]);
+  const barCause = useDisconnectedBar(changeShowing);
 
   const heightStyle = React.useMemo(
     () => ({
       height: showing.interpolate({
         inputRange: [0, 1],
         outputRange: ([0, expandedHeight]: number[]), // Flow...
       }),
     }),
     [showing],
   );
 
-  const [barCause, setBarCause] = React.useState('connecting');
-  React.useEffect(() => {
-    if (shouldShowDisconnectedBar && disconnected) {
-      setBarCause('disconnected');
-    } else if (shouldShowDisconnectedBar) {
-      setBarCause('connecting');
-    }
-  }, [shouldShowDisconnectedBar, disconnected]);
-
   const styles = useStyles(unboundStyles);
   const text = barCause === 'disconnected' ? 'DISCONNECTED' : 'CONNECTING…';
   const viewStyle =
     barCause === 'disconnected' ? styles.disconnected : styles.connecting;
   const textStyle =
     barCause === 'disconnected'
       ? styles.disconnectedText
       : styles.connectingText;
 
   return (
     <Animated.View style={[viewStyle, heightStyle]} pointerEvents="none">
       <Text style={textStyle} numberOfLines={1}>
         {text}
       </Text>
     </Animated.View>
   );
 }
 
 const unboundStyles = {
   disconnected: {
     backgroundColor: '#CC0000',
     overflow: 'hidden',
   },
   connecting: {
     backgroundColor: 'disconnectedBarBackground',
     overflow: 'hidden',
   },
   disconnectedText: {
     color: 'white',
     fontSize: 14,
     padding: 5,
     textAlign: 'center',
   },
   connectingText: {
     color: 'panelForegroundLabel',
     fontSize: 14,
     padding: 5,
     textAlign: 'center',
   },
 };
 
 export default DisconnectedBar;