complated project
This commit is contained in:
Samandar Turgunboyev
@@ -1,10 +1,13 @@
|
||||
import Logo from '@/assets/images/logo.png';
|
||||
import { useTheme } from '@/components/ThemeContext';
|
||||
import { RefreshProvider } from '@/components/ui/RefreshContext';
|
||||
import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
|
||||
import { Image } from 'expo-image';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { Tabs } from 'expo-router';
|
||||
import { Home, Megaphone, PlusCircle, User } from 'lucide-react-native';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Text } from 'react-native';
|
||||
import { Platform, StyleSheet, Text, View } from 'react-native';
|
||||
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
||||
|
||||
export default function TabsLayout() {
|
||||
@@ -13,37 +16,53 @@ export default function TabsLayout() {
|
||||
|
||||
return (
|
||||
<GestureHandlerRootView style={{ flex: 1 }}>
|
||||
<RefreshProvider>
|
||||
<BottomSheetModalProvider>
|
||||
<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',
|
||||
left: 16,
|
||||
right: 16,
|
||||
bottom: 0,
|
||||
bottom: 4,
|
||||
height: 70,
|
||||
borderTopLeftRadius: 16,
|
||||
borderTopRightRadius: 16,
|
||||
backgroundColor: isDark ? '#0f172a' : '#fff',
|
||||
borderWidth: 1,
|
||||
borderColor: isDark ? '#334155' : '#e2e8f0',
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: isDark ? 0.5 : 0.1,
|
||||
shadowOffset: { width: 0, height: -3 },
|
||||
shadowRadius: isDark ? 12 : 10,
|
||||
elevation: 8,
|
||||
overflow: 'hidden',
|
||||
paddingTop: 8,
|
||||
paddingBottom: 12,
|
||||
borderTopLeftRadius: 24,
|
||||
borderTopRightRadius: 24,
|
||||
backgroundColor: isDark ? 'rgba(15, 23, 42, 0.95)' : 'rgba(255, 255, 255, 0.95)', // #0f172a mos fon
|
||||
borderWidth: 0.5,
|
||||
borderColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(226, 232, 240, 0.8)', // 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: '#3b82f6',
|
||||
tabBarInactiveTintColor: isDark ? '#64748b' : '#94a3b8',
|
||||
tabBarLabelStyle: { fontSize: 12, fontWeight: '600' },
|
||||
tabBarActiveTintColor: isDark ? '#3b82f6' : '#3b82f6', // active ko‘k
|
||||
tabBarInactiveTintColor: isDark ? '#94a3b8' : '#64748b', // inactive ochiq kulrang
|
||||
tabBarItemStyle: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'flex-start',
|
||||
alignContent: 'center',
|
||||
flex: 1,
|
||||
paddingVertical: 4,
|
||||
},
|
||||
tabBarLabelPosition: 'below-icon',
|
||||
}}
|
||||
@@ -51,93 +70,236 @@ export default function TabsLayout() {
|
||||
<Tabs.Screen
|
||||
name="index"
|
||||
options={{
|
||||
tabBarLabel: ({ color }) => (
|
||||
title: 'Bosh sahifa',
|
||||
tabBarLabel: ({ color, focused }) => (
|
||||
<Text
|
||||
style={{
|
||||
color: color,
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
textAlign: 'center',
|
||||
flexWrap: 'wrap',
|
||||
width: 80, // yetarli joy berish
|
||||
}}
|
||||
numberOfLines={2} // 2 qatorga sig‘adi
|
||||
numberOfLines={1}
|
||||
style={[
|
||||
styles.tabLabel,
|
||||
{
|
||||
marginLeft: 10,
|
||||
color,
|
||||
fontWeight: focused ? '700' : '600',
|
||||
},
|
||||
]}
|
||||
>
|
||||
{t('Bosh sahifa')}
|
||||
</Text>
|
||||
),
|
||||
tabBarIcon: ({ color, size }) => <Home color={color} size={size} />,
|
||||
tabBarIcon: ({ color, focused }) => (
|
||||
<View
|
||||
style={[
|
||||
styles.iconContainer,
|
||||
focused && styles.iconContainerActive,
|
||||
{
|
||||
marginLeft: 10,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Home color={color} size={30} strokeWidth={2} />
|
||||
</View>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
<Tabs.Screen
|
||||
name="create-announcements"
|
||||
options={{
|
||||
tabBarLabel: ({ focused, color }) => (
|
||||
title: "Qo'shish",
|
||||
tabBarLabel: ({ color, focused }) => (
|
||||
<Text
|
||||
style={{
|
||||
color: color,
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
textAlign: 'center',
|
||||
flexWrap: 'wrap',
|
||||
width: 80, // yetarli joy berish
|
||||
}}
|
||||
numberOfLines={2} // 2 qatorga sig‘adi
|
||||
numberOfLines={1}
|
||||
style={[
|
||||
styles.tabLabel,
|
||||
{
|
||||
marginRight: 10,
|
||||
color,
|
||||
fontWeight: focused ? '700' : '600',
|
||||
},
|
||||
]}
|
||||
>
|
||||
{t("E'lon joylashtirish")}
|
||||
{t("Qo'shish")}
|
||||
</Text>
|
||||
),
|
||||
tabBarIcon: ({ color, size }) => <PlusCircle color={color} size={size} />,
|
||||
tabBarIcon: ({ color, focused }) => (
|
||||
<View
|
||||
style={[
|
||||
styles.iconContainer,
|
||||
focused && styles.iconContainerActive,
|
||||
{
|
||||
marginRight: 10,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<PlusCircle color={color} size={30} strokeWidth={2} />
|
||||
</View>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
<Tabs.Screen
|
||||
name="e-services"
|
||||
options={{
|
||||
title: 'Davlat xizmatlari',
|
||||
tabBarLabel: () => null,
|
||||
tabBarItemStyle: {
|
||||
flex: 1.2,
|
||||
top: -10,
|
||||
},
|
||||
tabBarIcon: ({ focused }) => (
|
||||
<View style={styles.centerTabContainer}>
|
||||
<LinearGradient
|
||||
colors={focused ? ['#3b82f6', '#2563eb'] : ['#1e40af', '#1e3a8a']} // dark mod uchun quyuq ko‘k
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 1 }}
|
||||
style={styles.centerTabGradient}
|
||||
>
|
||||
<View style={styles.centerTabInner}>
|
||||
<Image source={Logo} style={{ width: 60, height: 60 }} />
|
||||
</View>
|
||||
</LinearGradient>
|
||||
<Text
|
||||
numberOfLines={1} // 1 qatorda
|
||||
adjustsFontSizeToFit
|
||||
minimumFontScale={0.85}
|
||||
style={[
|
||||
styles.centerTabLabel,
|
||||
{
|
||||
color: focused ? '#3b82f6' : isDark ? '#94a3b8' : '#64748b',
|
||||
fontWeight: focused ? '700' : '600',
|
||||
fontSize: 13, // kattalashtirildi
|
||||
width: 100, // kenglik oshirildi
|
||||
textAlign: 'center',
|
||||
},
|
||||
]}
|
||||
>
|
||||
{t('Davlat xizmatlari')}
|
||||
</Text>
|
||||
</View>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
<Tabs.Screen
|
||||
name="announcements"
|
||||
options={{
|
||||
tabBarLabel: ({ focused, color }) => (
|
||||
title: "E'lonlar",
|
||||
tabBarLabel: ({ color, focused }) => (
|
||||
<Text
|
||||
style={{
|
||||
color: color,
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
textAlign: 'center',
|
||||
flexWrap: 'wrap',
|
||||
width: 80, // yetarli joy berish
|
||||
}}
|
||||
numberOfLines={2} // 2 qatorga sig‘adi
|
||||
numberOfLines={1}
|
||||
style={[
|
||||
styles.tabLabel,
|
||||
{
|
||||
marginLeft: 20,
|
||||
color,
|
||||
fontWeight: focused ? '700' : '600',
|
||||
},
|
||||
]}
|
||||
>
|
||||
{t("E'lonlar")}
|
||||
</Text>
|
||||
),
|
||||
tabBarIcon: ({ color, size }) => <Megaphone color={color} size={size} />,
|
||||
tabBarIcon: ({ color, focused }) => (
|
||||
<View
|
||||
style={[
|
||||
styles.iconContainer,
|
||||
focused && styles.iconContainerActive,
|
||||
{
|
||||
marginLeft: 20,
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Megaphone color={color} size={30} strokeWidth={2} />
|
||||
</View>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
|
||||
<Tabs.Screen
|
||||
name="profile"
|
||||
options={{
|
||||
tabBarLabel: ({ focused, color }) => (
|
||||
title: 'Profil',
|
||||
tabBarLabel: ({ color, focused }) => (
|
||||
<Text
|
||||
style={{
|
||||
color: color,
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
textAlign: 'center',
|
||||
flexWrap: 'wrap',
|
||||
width: 80, // yetarli joy berish
|
||||
}}
|
||||
numberOfLines={2} // 2 qatorga sig‘adi
|
||||
numberOfLines={1}
|
||||
style={[
|
||||
styles.tabLabel,
|
||||
{
|
||||
marginRight: 20,
|
||||
color,
|
||||
fontWeight: focused ? '700' : '600',
|
||||
},
|
||||
]}
|
||||
>
|
||||
{t('Profil')}
|
||||
</Text>
|
||||
),
|
||||
tabBarIcon: ({ color, size }) => <User color={color} size={size} />,
|
||||
tabBarIcon: ({ color, focused }) => (
|
||||
<View
|
||||
style={[
|
||||
styles.iconContainer,
|
||||
focused && styles.iconContainerActive,
|
||||
{ marginRight: 20 },
|
||||
]}
|
||||
>
|
||||
<User color={color} size={30} strokeWidth={2} />
|
||||
</View>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</Tabs>
|
||||
</BottomSheetModalProvider>
|
||||
</RefreshProvider>
|
||||
</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',
|
||||
},
|
||||
centerTabGradient: {
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: 36,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
...Platform.select({
|
||||
ios: {
|
||||
shadowColor: '#3b82f6',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.4,
|
||||
shadowRadius: 12,
|
||||
},
|
||||
android: {
|
||||
elevation: 12,
|
||||
},
|
||||
}),
|
||||
},
|
||||
centerTabInner: {
|
||||
width: 68,
|
||||
height: 68,
|
||||
borderRadius: 34,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
centerTabLabel: {
|
||||
marginTop: 8,
|
||||
fontSize: 11,
|
||||
textAlign: 'center',
|
||||
maxWidth: 110,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user