feat: add expo mobile application source code

2026-05-21 16:06:35 +07:00
parent 76d7a5c5c6
commit 0c65a7811b
77 changed files with 20356 additions and 0 deletions
@@ -0,0 +1,69 @@
+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,
+  },
+});