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,112 @@
+import { Tabs } from 'expo-router';
+import React from 'react';
+import { StyleSheet, Platform, View } from 'react-native';
+import { Feather } from '@expo/vector-icons';
+import { useAppTheme } from '../../context/ThemeContext';
+import { useAppConfig } from '../../context/ConfigContext';
+
+export default function TabLayout() {
+  const { colors, isDark } = useAppTheme();
+  const { config, syncConfig } = useAppConfig();
+
+  // Reference design: dark/charcoal tab bar with lime active, gray inactive
+  const tabBarBg   = isDark ? '#111111' : '#FFFFFF';
+  const activeColor   = isDark ? '#C6F135' : '#1A1A1A'; // lime on dark, black on light
+  const inactiveColor = isDark ? '#555555' : '#AAAAAA';
+
+  return (
+    <Tabs
+      screenListeners={{
+        state: () => {
+          syncConfig();
+        },
+      }}
+      screenOptions={{
+        tabBarActiveTintColor:   activeColor,
+        tabBarInactiveTintColor: inactiveColor,
+        headerShown: false,
+        tabBarStyle: {
+          position: 'absolute',
+          borderTopWidth: 0,
+          backgroundColor: 'transparent',
+          elevation: 0,
+          height: 78,
+          paddingBottom: Platform.OS === 'ios' ? 22 : 12,
+          paddingTop: 10,
+        },
+        tabBarBackground: () => (
+          <View
+            style={[
+              StyleSheet.absoluteFill,
+              {
+                backgroundColor: tabBarBg,
+                borderTopWidth: 1,
+                borderTopColor: isDark ? '#2A2A2A' : '#EEEEEE',
+              }
+            ]}
+          />
+        ),
+        tabBarLabelStyle: {
+          fontFamily: 'Outfit_600SemiBold',
+          fontSize: 11,
+          marginTop: 2,
+        },
+      }}>
+
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Home',
+          tabBarIcon: ({ color, focused }) => (
+            <View style={focused ? [styles.activeIconWrap, { backgroundColor: isDark ? '#C6F13520' : '#1A1A1A12' }] : null}>
+              <Feather name="home" size={22} color={color} />
+            </View>
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="notifications"
+        options={{
+          title: 'Activity',
+          tabBarIcon: ({ color, focused }) => (
+            <View style={focused ? [styles.activeIconWrap, { backgroundColor: isDark ? '#C6F13520' : '#1A1A1A12' }] : null}>
+              <Feather name="bell" size={22} color={color} />
+            </View>
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="help"
+        options={{
+          title: 'Support',
+          tabBarIcon: ({ color, focused }) => (
+            <View style={focused ? [styles.activeIconWrap, { backgroundColor: isDark ? '#C6F13520' : '#1A1A1A12' }] : null}>
+              <Feather name="help-circle" size={22} color={color} />
+            </View>
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="explore"
+        options={{
+          title: 'Profile',
+          tabBarIcon: ({ color, focused }) => (
+            <View style={focused ? [styles.activeIconWrap, { backgroundColor: isDark ? '#C6F13520' : '#1A1A1A12' }] : null}>
+              <Feather name="user" size={22} color={color} />
+            </View>
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}
+
+const styles = StyleSheet.create({
+  activeIconWrap: {
+    width: 42,
+    height: 30,
+    borderRadius: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});