343 lines
11 KiB
TypeScript
343 lines
11 KiB
TypeScript
import Logo from '@/assets/images/logo.png';
|
||
import { useTheme } from '@/components/ThemeContext';
|
||
import { RefreshProvider } from '@/components/ui/RefreshContext';
|
||
import { useHomeStore } from '@/screens/home/lib/hook';
|
||
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
|
||
import { router, Tabs } from 'expo-router';
|
||
import { Home, Megaphone, PlusCircle, User } from 'lucide-react-native';
|
||
import { useEffect, useRef, useState } from 'react';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { Animated, Easing, Keyboard, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
||
|
||
export default function TabsLayout() {
|
||
const { isDark } = useTheme();
|
||
const { t } = useTranslation();
|
||
const { setShowFilter, setStep } = useHomeStore();
|
||
const rotateAnim = useRef(new Animated.Value(0)).current;
|
||
const [keyboard, setKeyboard] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const showSub = Keyboard.addListener('keyboardDidShow', () => setKeyboard(true));
|
||
const hideSub = Keyboard.addListener('keyboardDidHide', () => setKeyboard(false));
|
||
|
||
return () => {
|
||
showSub.remove();
|
||
hideSub.remove();
|
||
};
|
||
}, []);
|
||
|
||
console.log(keyboard);
|
||
|
||
|
||
useEffect(() => {
|
||
Animated.loop(
|
||
Animated.timing(rotateAnim, {
|
||
toValue: 1,
|
||
duration: 4000,
|
||
easing: Easing.linear,
|
||
useNativeDriver: true,
|
||
})
|
||
).start();
|
||
}, []);
|
||
|
||
const rotate = rotateAnim.interpolate({
|
||
inputRange: [0, 1],
|
||
outputRange: ['0deg', '360deg'],
|
||
});
|
||
|
||
return (
|
||
<GestureHandlerRootView style={{ flex: 1 }}>
|
||
<BottomSheetModalProvider>
|
||
<RefreshProvider>
|
||
<Tabs
|
||
screenOptions={{
|
||
headerShown: false,
|
||
headerStyle: {
|
||
backgroundColor: isDark ? '#0f172a' : '#ffffff',
|
||
borderBottomWidth: 0.5,
|
||
borderBottomColor: isDark ? '#334155' : '#e2e8f0',
|
||
},
|
||
headerTitleStyle: {
|
||
fontSize: 24,
|
||
fontWeight: '700',
|
||
color: isDark ? '#f1f5f9' : '#0f172a',
|
||
},
|
||
headerShadowVisible: false,
|
||
tabBarStyle: {
|
||
position: 'absolute',
|
||
display: keyboard ? "none" : "flex",
|
||
left: 16,
|
||
right: 16,
|
||
bottom: 8,
|
||
height: 70,
|
||
paddingTop: 8,
|
||
paddingBottom: 12,
|
||
borderTopLeftRadius: 24,
|
||
borderTopRightRadius: 24,
|
||
backgroundColor: isDark ? 'rgba(15, 23, 42, 1)' : 'rgba(255, 255, 255, 1)', // #0f172a mos fon
|
||
borderWidth: 0.5,
|
||
borderColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(226, 232, 240, 1)', // quyuq fon uchun yengil oq
|
||
...Platform.select({
|
||
ios: {
|
||
shadowColor: isDark ? '#0f172a' : '#0f172a', // shadow qora emas #0f172a bilan uyg‘un
|
||
shadowOffset: { width: 0, height: 8 },
|
||
shadowOpacity: isDark ? 0.5 : 0.15,
|
||
shadowRadius: 24,
|
||
},
|
||
android: {
|
||
elevation: 10,
|
||
},
|
||
}),
|
||
overflow: 'visible',
|
||
},
|
||
tabBarActiveTintColor: isDark ? '#3b82f6' : '#3b82f6', // active ko‘k
|
||
tabBarInactiveTintColor: isDark ? '#94a3b8' : '#64748b', // inactive ochiq kulrang
|
||
tabBarItemStyle: {
|
||
flex: 1,
|
||
paddingVertical: 4,
|
||
},
|
||
tabBarLabelPosition: 'below-icon',
|
||
}}
|
||
>
|
||
<Tabs.Screen
|
||
name="index"
|
||
key={"index"}
|
||
options={{
|
||
title: 'Bosh sahifa',
|
||
tabBarLabel: ({ color, focused }) => (
|
||
<Text
|
||
numberOfLines={1}
|
||
style={[
|
||
styles.tabLabel,
|
||
{
|
||
marginLeft: 0,
|
||
color,
|
||
fontWeight: focused ? '700' : '600',
|
||
},
|
||
]}
|
||
>
|
||
{t('Bosh sahifa')}
|
||
</Text>
|
||
),
|
||
tabBarIcon: ({ color, focused }) => (
|
||
<TouchableOpacity
|
||
onPress={() => {
|
||
router.push('/(dashboard)');
|
||
setShowFilter(false);
|
||
setStep('filter');
|
||
}}
|
||
style={[
|
||
styles.iconContainer,
|
||
focused && styles.iconContainerActive,
|
||
{
|
||
marginLeft: 0,
|
||
},
|
||
]}
|
||
>
|
||
<Home color={color} size={30} strokeWidth={2} />
|
||
</TouchableOpacity>
|
||
),
|
||
}}
|
||
/>
|
||
|
||
<Tabs.Screen
|
||
name="create-announcements"
|
||
options={{
|
||
title: "Qo'shish",
|
||
tabBarLabel: ({ color, focused }) => (
|
||
<Text
|
||
numberOfLines={1}
|
||
style={[
|
||
styles.tabLabel,
|
||
{
|
||
// marginRight: 10,
|
||
marginLeft: 0,
|
||
color,
|
||
fontWeight: focused ? '700' : '600',
|
||
},
|
||
]}
|
||
>
|
||
{t("Jo'natish")}
|
||
</Text>
|
||
),
|
||
tabBarIcon: ({ color, focused }) => (
|
||
<View
|
||
style={[
|
||
styles.iconContainer,
|
||
focused && styles.iconContainerActive,
|
||
{
|
||
// marginRight: 10,
|
||
marginLeft: 0,
|
||
},
|
||
]}
|
||
>
|
||
<PlusCircle color={color} size={30} strokeWidth={2} />
|
||
</View>
|
||
),
|
||
}}
|
||
/>
|
||
|
||
<Tabs.Screen
|
||
key="e-service-tab"
|
||
name="e-service"
|
||
options={{
|
||
title: '',
|
||
tabBarLabel: () => null,
|
||
tabBarItemStyle: {
|
||
flex: 1.2,
|
||
top: 8,
|
||
},
|
||
tabBarIcon: () => (
|
||
<TouchableOpacity
|
||
style={styles.centerTabContainer}
|
||
onPress={() => router.push('/(dashboard)/e-service/e-services')}
|
||
>
|
||
<View
|
||
style={[
|
||
styles.centerTabInner,
|
||
{
|
||
backgroundColor: isDark
|
||
? 'rgba(255, 255, 255, 0.1)'
|
||
: 'rgba(15, 23, 42, 0.1)',
|
||
},
|
||
]}
|
||
>
|
||
<Animated.Image
|
||
source={Logo}
|
||
style={{
|
||
width: 55,
|
||
height: 55,
|
||
transform: [{ rotate }],
|
||
}}
|
||
/>
|
||
</View>
|
||
{/* <Text
|
||
numberOfLines={1}
|
||
adjustsFontSizeToFit
|
||
minimumFontScale={0.85}
|
||
style={[
|
||
styles.centerTabLabel,
|
||
{
|
||
color: focused ? '#3b82f6' : isDark ? '#94a3b8' : '#64748b',
|
||
fontWeight: focused ? '700' : '600',
|
||
fontSize: 13,
|
||
width: 100,
|
||
textAlign: 'center',
|
||
},
|
||
]}
|
||
>
|
||
{t('Davlat xizmatlari')}
|
||
</Text> */}
|
||
</TouchableOpacity>
|
||
),
|
||
}}
|
||
/>
|
||
|
||
<Tabs.Screen
|
||
name="announcements"
|
||
options={{
|
||
title: "E'lonlar",
|
||
tabBarLabel: ({ color, focused }) => (
|
||
<Text
|
||
numberOfLines={1}
|
||
style={[
|
||
styles.tabLabel,
|
||
{
|
||
// marginLeft: 10,
|
||
marginRight: 0,
|
||
color,
|
||
fontWeight: focused ? '700' : '600',
|
||
},
|
||
]}
|
||
>
|
||
{t("E'lonlar")}
|
||
</Text>
|
||
),
|
||
tabBarIcon: ({ color, focused }) => (
|
||
<View
|
||
style={[
|
||
styles.iconContainer,
|
||
focused && styles.iconContainerActive,
|
||
{
|
||
// marginLeft: 10,
|
||
marginRight: 0,
|
||
},
|
||
]}
|
||
>
|
||
<Megaphone color={color} size={30} strokeWidth={2} />
|
||
</View>
|
||
),
|
||
}}
|
||
/>
|
||
|
||
<Tabs.Screen
|
||
name="profile"
|
||
options={{
|
||
title: 'Profil',
|
||
tabBarLabel: ({ color, focused }) => (
|
||
<Text
|
||
numberOfLines={1}
|
||
style={[
|
||
styles.tabLabel,
|
||
{
|
||
marginRight: 0,
|
||
color,
|
||
fontWeight: focused ? '700' : '600',
|
||
},
|
||
]}
|
||
>
|
||
{t('Profil')}
|
||
</Text>
|
||
),
|
||
tabBarIcon: ({ color, focused }) => (
|
||
<View
|
||
style={[
|
||
styles.iconContainer,
|
||
focused && styles.iconContainerActive,
|
||
{ marginRight: 0 },
|
||
]}
|
||
>
|
||
<User color={color} size={30} strokeWidth={2} />
|
||
</View>
|
||
),
|
||
}}
|
||
/>
|
||
</Tabs>
|
||
</RefreshProvider>
|
||
</BottomSheetModalProvider>
|
||
</GestureHandlerRootView>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
tabLabel: {
|
||
fontSize: 11,
|
||
textAlign: 'center',
|
||
marginTop: 4,
|
||
},
|
||
iconContainer: {
|
||
paddingVertical: 4,
|
||
},
|
||
iconContainerActive: {
|
||
transform: [{ scale: 1.05 }],
|
||
},
|
||
centerTabContainer: {
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
centerTabInner: {
|
||
width: 65,
|
||
height: 65,
|
||
borderRadius: 34,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
},
|
||
centerTabLabel: {
|
||
marginTop: 8,
|
||
fontSize: 11,
|
||
textAlign: 'center',
|
||
maxWidth: 110,
|
||
},
|
||
});
|