Skip to content

Commit 294d481

Browse files
swempishswempish
committed
Tasarım düzeltmeleri son dokunuşlar
1 parent 5578640 commit 294d481

11 files changed

Lines changed: 315 additions & 184 deletions

File tree

‎app/(tabs)/_layout.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
12
import { Tabs } from 'expo-router';
23
import React from 'react';
34
import { Ionicons } from '@expo/vector-icons';
5+
import { useTabBarVisibility } from '../../utils/TabBarVisibilityContext';
46

57
export default function TabLayout() {
6-
8+
const { tabBarVisible } = useTabBarVisibility();
79
return (
810
<Tabs
911
screenOptions={{
@@ -18,9 +20,12 @@ export default function TabLayout() {
1820
bottom: 0,
1921
borderTopWidth: 0,
2022
elevation: 10,
23+
// tabBarVisible false ise görünmez yap
24+
display: tabBarVisible ? 'flex' : 'none',
2125
},
2226
tabBarActiveTintColor: '#fff',
2327
tabBarInactiveTintColor: '#bbdefb',
28+
animation: 'fade',
2429
headerShown: false,
2530
tabBarIconStyle: {
2631
alignItems: 'center',

‎app/(tabs)/hatlar.tsx‎

Lines changed: 96 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,131 @@
11
import React from 'react';
2-
import { View, Text, StyleSheet, ImageBackground, TouchableOpacity } from 'react-native';
2+
import { View, Text, StyleSheet, ImageBackground, TouchableOpacity, SafeAreaView, StatusBar } from 'react-native';
33
import { Ionicons } from '@expo/vector-icons';
44
import { useRouter } from 'expo-router';
55

6-
const bgImage = require('../../assets/images/gaziantep.jpg');
7-
8-
export const unstable_settings = { initialRouteName: 'hatlar' };
6+
// Arka plan resmini buraya ekliyoruz
7+
const backgroundImage = require('../../assets/images/tram_stop.jpg');
98

109
export default function HatlarScreen() {
1110
const router = useRouter();
11+
1212
return (
13-
<View style={styles.container}>
14-
<Text style={styles.title}>Hatlar</Text>
15-
<Text style={styles.desc}>Gaziantep'teki tüm otobüs ve tramvay hatlarını keşfet.</Text>
16-
<TouchableOpacity style={styles.card} activeOpacity={0.85} onPress={() => router.push('/hatlar/ara')}>
17-
<ImageBackground source={bgImage} style={styles.cardBg} imageStyle={{ borderRadius: 18, opacity: 0.7 }}>
18-
<View style={styles.cardContent}>
19-
<Ionicons name="search" size={38} color="#1976D2" style={{ marginBottom: 8 }} />
20-
<Text style={styles.cardTitle}>Hatları Ara</Text>
21-
<Text style={styles.cardDesc}>Kod veya isimle otobüs/tramvay bul</Text>
22-
</View>
23-
</ImageBackground>
24-
</TouchableOpacity>
25-
</View>
13+
<ImageBackground source={backgroundImage} style={styles.container}>
14+
{/* Arka plan resminin üzerine gelen durum çubuğu metinlerini beyaz yapar */}
15+
<StatusBar barStyle="light-content" />
16+
17+
{/* SafeAreaView, içeriğin telefon çentikleri altına girmesini engeller */}
18+
<SafeAreaView style={styles.safeArea}>
19+
<View style={styles.header}>
20+
<Text style={styles.title}>Hatlar</Text>
21+
<Text style={styles.subtitle}>Gaziantep'teki tüm otobüs ve tramvay hatlarını keşfet.</Text>
22+
</View>
23+
24+
<View style={styles.content}>
25+
<TouchableOpacity
26+
style={styles.card}
27+
activeOpacity={0.8}
28+
onPress={() => router.push('/hatlar/ara')}
29+
>
30+
<View style={styles.cardIconContainer}>
31+
<Ionicons name="search" size={28} color="#FFFFFF" />
32+
</View>
33+
<View style={styles.cardTextContainer}>
34+
<Text style={styles.cardTitle}>Hatları Ara</Text>
35+
<Text style={styles.cardDescription}>Kod veya isimle otobüs/tramvay bul</Text>
36+
</View>
37+
<Ionicons name="chevron-forward" size={24} color="#555" />
38+
</TouchableOpacity>
39+
</View>
40+
</SafeAreaView>
41+
</ImageBackground>
2642
);
2743
}
2844

2945
// Hatlar ana sayfasında header'ı gizle
3046
HatlarScreen.options = {
3147
headerShown: false,
3248
};
49+
3350
const styles = StyleSheet.create({
3451
container: {
3552
flex: 1,
36-
alignItems: 'center',
37-
justifyContent: 'flex-start',
38-
backgroundColor: '#F7FAFC',
39-
paddingTop: 48,
40-
paddingHorizontal: 18,
53+
// Arka plan resminin tüm alanı kaplamasını sağlar
54+
},
55+
safeArea: {
56+
flex: 1,
57+
// Arka plan resminin üzerine hafif bir karartma ekleyerek metin okunabilirliğini artırır
58+
backgroundColor: 'rgba(0, 0, 0, 0.35)',
59+
},
60+
header: {
61+
paddingTop: 60,
62+
paddingHorizontal: 24,
63+
alignItems: 'flex-start', // Metinleri sola hizala
4164
},
4265
title: {
43-
fontSize: 28,
66+
fontSize: 36,
4467
fontWeight: 'bold',
45-
color: '#1976D2',
46-
marginBottom: 8,
68+
color: '#FFFFFF',
69+
textShadowColor: 'rgba(0, 0, 0, 0.5)',
70+
textShadowOffset: { width: 1, height: 2 },
71+
textShadowRadius: 3,
72+
},
73+
subtitle: {
74+
fontSize: 18,
75+
color: '#E0E0E0',
4776
marginTop: 8,
48-
letterSpacing: 0.2,
77+
textShadowColor: 'rgba(0, 0, 0, 0.7)',
78+
textShadowOffset: { width: 1, height: 1 },
79+
textShadowRadius: 2,
4980
},
50-
desc: {
51-
fontSize: 16,
52-
color: '#333',
53-
textAlign: 'center',
54-
marginBottom: 24,
55-
opacity: 0.85,
81+
content: {
82+
flex: 1,
83+
justifyContent: 'center', // Kartı dikeyde ortalar
84+
alignItems: 'center',
85+
paddingHorizontal: 20,
5686
},
5787
card: {
5888
width: '100%',
59-
maxWidth: 400,
60-
borderRadius: 18,
61-
overflow: 'hidden',
62-
marginTop: 12,
63-
shadowColor: '#1976D2',
64-
shadowOpacity: 0.10,
65-
shadowRadius: 8,
66-
elevation: 4,
89+
maxWidth: 500,
90+
flexDirection: 'row', // İçerikleri yatayda hizalar
91+
alignItems: 'center',
92+
// "Buzlu Cam" (Frosted Glass) efekti
93+
backgroundColor: 'rgba(255, 255, 255, 0.85)',
94+
borderRadius: 20,
95+
padding: 16,
96+
// Modern ve yumuşak bir gölge
97+
shadowColor: '#000',
98+
shadowOffset: {
99+
width: 0,
100+
height: 4,
101+
},
102+
shadowOpacity: 0.15,
103+
shadowRadius: 12,
104+
elevation: 8,
105+
// Cam efektini güçlendirmek için ince bir çerçeve
106+
borderWidth: 1,
107+
borderColor: 'rgba(255, 255, 255, 0.4)',
67108
},
68-
cardBg: {
69-
width: '100%',
70-
height: 170,
109+
cardIconContainer: {
110+
width: 50,
111+
height: 50,
112+
borderRadius: 25, // Daire şekli için
113+
backgroundColor: '#1976D2', // Ana tema rengi
71114
justifyContent: 'center',
72115
alignItems: 'center',
116+
marginRight: 16,
73117
},
74-
cardContent: {
75-
alignItems: 'center',
76-
justifyContent: 'center',
77-
backgroundColor: 'rgba(255,255,255,0.82)',
78-
borderRadius: 18,
79-
padding: 18,
80-
margin: 10,
118+
cardTextContainer: {
119+
flex: 1, // Kalan tüm boşluğu doldurur
81120
},
82121
cardTitle: {
83-
fontSize: 20,
122+
fontSize: 18,
84123
fontWeight: 'bold',
85-
color: '#1976D2',
86-
marginBottom: 2,
124+
color: '#1A202C', // Koyu renk metin
87125
},
88-
cardDesc: {
89-
fontSize: 15,
90-
color: '#333',
91-
opacity: 0.85,
126+
cardDescription: {
127+
fontSize: 14,
128+
color: '#4A5568', // Daha yumuşak bir gri
129+
marginTop: 2,
92130
},
93-
});
131+
});

‎app/(tabs)/index.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React, { useEffect, useState } from "react";
2+
import { useTabBarVisibility } from '../../utils/TabBarVisibilityContext';
23
import { View, Text, StyleSheet, ScrollView, Image, Pressable, ActivityIndicator, Linking, Alert, Animated, Easing, TextInput, Button } from "react-native";
34
import { SafeAreaView } from "react-native-safe-area-context";
45
import { MaskedTextInput } from "react-native-mask-text";
@@ -81,6 +82,7 @@ async function deleteKayitliKart(id: string): Promise<void> {
8182
}
8283

8384
export default function HomeScreen() {
85+
const { setTabBarVisible } = useTabBarVisibility();
8486
// Profil
8587
const [profil, setProfil] = useState<any>(null);
8688
const [profilLoading, setProfilLoading] = useState(true);
@@ -436,6 +438,20 @@ export default function HomeScreen() {
436438
return new Date().toLocaleDateString('tr-TR', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' });
437439
}
438440

441+
useEffect(() => {
442+
setTabBarVisible(!profilLoading);
443+
}, [profilLoading]);
444+
445+
if (profilLoading) {
446+
// Tam ekran şık yükleniyor ekranı
447+
return (
448+
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: COLORS.background }}>
449+
<ActivityIndicator size="large" color={COLORS.primary} style={{ marginBottom: 24 }} />
450+
<Text style={{ fontSize: 22, color: COLORS.primary, fontWeight: 'bold', marginBottom: 8 }}>Yükleniyor...</Text>
451+
<Text style={{ color: COLORS.muted, fontSize: 15 }}>Profil bilgileriniz getiriliyor</Text>
452+
</View>
453+
);
454+
}
439455
return (
440456
<SafeAreaView style={styles.container}>
441457
<ScrollView contentContainerStyle={{ paddingBottom: 100 }}>

‎app/_layout.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import * as SplashScreen from 'expo-splash-screen';
55
import { useEffect } from 'react';
66
import { StatusBar } from 'expo-status-bar';
77
import { GestureHandlerRootView } from 'react-native-gesture-handler';
8+
import { TabBarVisibilityProvider } from '../utils/TabBarVisibilityContext';
89

910
// Prevent the splash screen from auto-hiding before asset loading is complete.
1011
SplashScreen.preventAutoHideAsync();
@@ -25,17 +26,19 @@ export default function RootLayout() {
2526
}
2627
return (
2728
<GestureHandlerRootView style={{ flex: 1 }}>
28-
<StatusBar backgroundColor="#1976D2" style="light" />
29-
<ThemeProvider value={DarkTheme}>
30-
<Stack>
31-
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
32-
<Stack.Screen name="login" options={{ headerShown: false }} />
33-
<Stack.Screen name="info" options={{ headerShown: false }} />
34-
<Stack.Screen name="hatlar" options={{ headerShown: false }} />
35-
<Stack.Screen name="durak" options={{ headerShown: false }} />
36-
<Stack.Screen name="+not-found" />
37-
</Stack>
38-
</ThemeProvider>
29+
<TabBarVisibilityProvider>
30+
<StatusBar backgroundColor="#1976D2" style="light" />
31+
<ThemeProvider value={DarkTheme}>
32+
<Stack>
33+
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
34+
<Stack.Screen name="login" options={{ headerShown: false }} />
35+
<Stack.Screen name="info" options={{ headerShown: false }} />
36+
<Stack.Screen name="hatlar" options={{ headerShown: false }} />
37+
<Stack.Screen name="durak" options={{ headerShown: false }} />
38+
<Stack.Screen name="+not-found" />
39+
</Stack>
40+
</ThemeProvider>
41+
</TabBarVisibilityProvider>
3942
</GestureHandlerRootView>
4043
);
4144
}

‎app/hatlar/ara.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,6 @@ export default function HatlarAra() {
9393
placeholder="Hat kodu veya isimle ara (örn: B01, Gazikent)"
9494
value={query}
9595
onChangeText={setQuery}
96-
autoFocus
9796
autoCorrect={false}
9897
autoCapitalize="none"
9998
clearButtonMode="while-editing"

0 commit comments

Comments
 (0)