diff --git a/native/navigation/disconnected-bar.react.js b/native/navigation/disconnected-bar.react.js index 183050742..5a3b58d41 100644 --- a/native/navigation/disconnected-bar.react.js +++ b/native/navigation/disconnected-bar.react.js @@ -1,103 +1,81 @@ // @flow import * as React from 'react'; import { Text, Platform, Animated, Easing } from 'react-native'; -import { - useDisconnectedBar, - useShouldShowDisconnectedBar, -} from 'lib/hooks/disconnected-bar.js'; - +import { useSelector } from '../redux/redux-utils.js'; import { useStyles } from '../themes/colors.js'; const expandedHeight: number = Platform.select({ android: 29.5, default: 27, }); const timingConfig = { useNativeDriver: false, duration: 200, easing: Easing.inOut(Easing.ease), }; type Props = { +visible: boolean, }; function DisconnectedBar(props: Props): React.Node { - const { shouldShowDisconnectedBar } = useShouldShowDisconnectedBar(); + const networkConnected = useSelector(state => state.connectivity.connected); const showingRef = React.useRef(); if (!showingRef.current) { - showingRef.current = new Animated.Value(shouldShowDisconnectedBar ? 1 : 0); + showingRef.current = new Animated.Value(networkConnected ? 0 : 1); } const showing = showingRef.current; const { visible } = props; - const changeShowing = React.useCallback( - (toState: boolean) => { - const toValue = toState ? 1 : 0; - if (!visible) { - showing.setValue(toValue); - return; - } + React.useEffect(() => { + if (!visible) { + showing.setValue(networkConnected ? 0 : 1); + } else { Animated.timing(showing, { ...timingConfig, - toValue, + toValue: networkConnected ? 0 : 1, + useNativeDriver: true, }).start(); - }, - [visible, showing], - ); - - const barCause = useDisconnectedBar(changeShowing); + } + }, [networkConnected, showing, visible]); const heightStyle = React.useMemo( () => ({ height: showing.interpolate({ inputRange: [0, 1], outputRange: ([0, expandedHeight]: number[]), // Flow... }), }), [showing], ); 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; + const containerStyle = React.useMemo( + () => [styles.disconnected, heightStyle], + [heightStyle, styles.disconnected], + ); return ( - - - {text} + + + DISCONNECTED ); } 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;