Page MenuHomePhabricator
Files F3535340

D10475.id.diff
No OneTemporary
Actions

D10475.id.diff
View Options

diff --git a/native/navigation/disconnected-bar.react.js b/native/navigation/disconnected-bar.react.js
--- a/native/navigation/disconnected-bar.react.js
+++ b/native/navigation/disconnected-bar.react.js
@@ -3,11 +3,7 @@
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({
@@ -24,30 +20,24 @@
+visible: boolean,
};
function DisconnectedBar(props: Props): React.Node {
- const { shouldShowDisconnectedBar } = useShouldShowDisconnectedBar();
+ const networkConnected = useSelector(state => state.connectivity.connected);
const showingRef = React.useRef<?Animated.Value>();
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,
}).start();
- },
- [visible, showing],
- );
-
- const barCause = useDisconnectedBar(changeShowing);
+ }
+ }, [networkConnected, showing, visible]);
const heightStyle = React.useMemo(
() => ({
@@ -60,18 +50,15 @@
);
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 (
- <Animated.View style={[viewStyle, heightStyle]} pointerEvents="none">
- <Text style={textStyle} numberOfLines={1}>
- {text}
+ <Animated.View style={containerStyle} pointerEvents="none">
+ <Text style={styles.disconnectedText} numberOfLines={1}>
+ DISCONNECTED
</Text>
</Animated.View>
);
@@ -79,20 +66,10 @@
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,

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 26, 3:21 PM (7 h, 57 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2707282
Default Alt Text
D10475.id.diff (3 KB)

Event Timeline