70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { View, Text, StyleSheet, Platform, Animated } from 'react-native';
|
|
import NetInfo from '@react-native-community/netinfo';
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
|
|
export const NetworkStatus = () => {
|
|
const [isConnected, setIsConnected] = useState<boolean | null>(true);
|
|
const insets = useSafeAreaInsets();
|
|
const opacityAnim = useState(new Animated.Value(1))[0];
|
|
|
|
useEffect(() => {
|
|
const unsubscribe = NetInfo.addEventListener(state => {
|
|
const connected = !!state.isConnected && !!state.isInternetReachable;
|
|
if (isConnected !== connected) {
|
|
setIsConnected(connected);
|
|
}
|
|
});
|
|
return () => unsubscribe();
|
|
}, [isConnected]);
|
|
|
|
// Optionally fade it out if online? Or keep it permanently. Let's keep it permanently but subtle if online.
|
|
const isOnline = isConnected !== false;
|
|
|
|
return (
|
|
<View style={[styles.container, { top: Math.max(insets.top, Platform.OS === 'ios' ? 44 : 10) }]} pointerEvents="none">
|
|
<Animated.View style={[
|
|
styles.pill,
|
|
{
|
|
backgroundColor: isOnline ? 'rgba(52, 199, 89, 0.15)' : 'rgba(255, 59, 48, 0.15)',
|
|
borderColor: isOnline ? 'rgba(52, 199, 89, 0.3)' : 'rgba(255, 59, 48, 0.3)',
|
|
}
|
|
]}>
|
|
<View style={[styles.dot, { backgroundColor: isOnline ? '#34C759' : '#FF3B30' }]} />
|
|
<Text style={[styles.text, { color: isOnline ? '#34C759' : '#FF3B30' }]}>
|
|
{isOnline ? 'Online' : 'Offline'}
|
|
</Text>
|
|
</Animated.View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
position: 'absolute',
|
|
right: 24,
|
|
zIndex: 9999,
|
|
},
|
|
pill: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 6,
|
|
borderRadius: 20,
|
|
borderWidth: 1,
|
|
},
|
|
dot: {
|
|
width: 6,
|
|
height: 6,
|
|
borderRadius: 3,
|
|
marginRight: 6,
|
|
},
|
|
text: {
|
|
fontSize: 10,
|
|
fontWeight: '700',
|
|
fontFamily: 'Outfit_600SemiBold',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: 0.5,
|
|
},
|
|
});
|