buradaki home yönlendirmesi çalışmıyor bunu düzeltir misin?

// src/screens/ChatListScreen.tsx

import React, { useContext, useEffect, useState, useCallback } from 'react';
import { 
  View,
  FlatList, 
  Image, 
  TouchableOpacity, 
  StyleSheet, 
  Alert,
  SafeAreaView,
  Platform,
  StatusBar as RNStatusBar
} from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { useNavigation, useIsFocused } from '@react-navigation/native';
import { Ionicons } from '@expo/vector-icons';
import { ChatContext, ChatWithLastMessage } from '../context/ChatContext';
import CustomText from '../components/CustomText';
import { useApp } from '../context/AppContext';

const ChatListScreen: React.FC = () => {
  const navigation = useNavigation();
  const { chats, deleteChat, deleteAllChats } = useContext(ChatContext);
  const [sortedChats, setSortedChats] = useState<ChatWithLastMessage[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const isFocused = useIsFocused();
  const { t, currentTheme } = useApp();

  useEffect(() => {
    const sortChats = () => {
      const sorted = [...chats].sort(
        (a, b) => (b.lastMessageTimestamp || 0) - (a.lastMessageTimestamp || 0)
      );
      setSortedChats(sorted);
      setLoading(false);
    };

    sortChats();
  }, [chats, isFocused]);

  const handleDeleteChat = useCallback(
    (chatId: string) => {
      Alert.alert(
        t('deleteChat'),
        t('deleteChatConfirmation'),
        [
          { text: t('cancel'), style: "cancel" },
          { text: t('delete'), style: "destructive", onPress: () => deleteChat(chatId) }
        ]
      );
    },
    [deleteChat, t]
  );

  const handleDeleteAllChats = useCallback(() => {
    Alert.alert(
      t('deleteAllChats'),
      t('deleteAllChatsConfirmation'),
      [
        { text: t('cancel'), style: "cancel" },
        { text: t('delete'), style: "destructive", onPress: deleteAllChats }
      ]
    );
  }, [deleteAllChats, t]);

  const renderChatItem = useCallback(
    ({ item }: { item: ChatWithLastMessage }) => (
      <TouchableOpacity
        style={[styles.chatItem, { backgroundColor: currentTheme.cardBackground }]}
        onPress={() =>
          navigation.navigate('Chat', { chatId: item.id, figure: item.figure })
        }
      >
        <Image source={{ uri: item.figure.image }} style={styles.avatar} />
        <View style={styles.chatInfo}>
          <CustomText bold style={[styles.chatName, { color: currentTheme.textColor }]}>
            {item.figure.name}
          </CustomText>
          <CustomText style={[styles.chatLastMessage, { color: currentTheme.secondaryTextColor }]} numberOfLines={1}>
            {item.lastMessage || t('noMessages')}
          </CustomText>
        </View>
        <View style={styles.chatMeta}>
          <CustomText style={[styles.chatDate, { color: currentTheme.secondaryTextColor }]}>
            {timeAgo(item.lastMessageTimestamp)}
          </CustomText>
          <TouchableOpacity onPress={() => handleDeleteChat(item.id)} style={styles.deleteButton}>
            <Ionicons name="trash-outline" size={24} color={currentTheme.errorColor} />
          </TouchableOpacity>
        </View>
      </TouchableOpacity>
    ),
    [navigation, handleDeleteChat, currentTheme, t]
  );

  const keyExtractor = useCallback((item: ChatWithLastMessage) => item.id, []);

  const timeAgo = (timestamp: number | undefined): string => {
    if (!timestamp) return '';
    const now = Date.now();
    const diff = Math.floor((now - timestamp) / 60000); // difference in minutes
    if (diff < 1) return t('justNow');
    if (diff < 60) return t('minutesAgo').replace('{{count}}', diff.toString());
    const hours = Math.floor(diff / 60);
    if (hours < 24) return t('hoursAgo').replace('{{count}}', hours.toString());
    const days = Math.floor(hours / 24);
    return t('daysAgo').replace('{{count}}', days.toString());
  };

  return (
    <SafeAreaView style={[styles.safeArea, { backgroundColor: currentTheme.backgroundColor }]}>
      <StatusBar style={currentTheme.statusBarStyle} />
      <View style={styles.container}>
        <View style={styles.header}>
          <CustomText bold style={[styles.title, { color: currentTheme.textColor }]}>{t('myChats')}</CustomText>
          {chats.length > 0 && (
            <TouchableOpacity onPress={handleDeleteAllChats} style={styles.deleteAllButton}>
              <Ionicons name="trash-outline" size={24} color={currentTheme.errorColor} />
            </TouchableOpacity>
          )}
        </View>
        {sortedChats.length === 0 ? (
          <View style={styles.emptyContainer}>
            <CustomText style={[styles.emptyText, { color: currentTheme.secondaryTextColor }]}>
              {t('noChatsYet')}
            </CustomText>
          </View>
        ) : (
          <FlatList
            data={sortedChats}
            renderItem={renderChatItem}
            keyExtractor={keyExtractor}
            contentContainerStyle={styles.chatList}
            showsVerticalScrollIndicator={false}
          />
        )}
        <TouchableOpacity
          style={[styles.fab, { backgroundColor: currentTheme.accentColor }]}
          onPress={() => navigation.navigate('Home')}
        >
          <Ionicons name="add" size={30} color={currentTheme.buttonTextColor} />
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
  },
  container: {
    flex: 1,
    paddingHorizontal: 10,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: 15,
    paddingVertical: 15,
  },
  title: {
    fontSize: 24,
    fontFamily: 'Poppins_700Bold',
  },
  deleteAllButton: {
    padding: 5,
  },
  chatList: {
    paddingHorizontal: 15,
    paddingBottom: 80, // FAB için boşluk bırakmak
  },
  emptyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 32,
  },
  emptyText: {
    fontSize: 16,
    textAlign: 'center',
    fontFamily: 'Poppins_400Regular',
  },
  chatItem: {
    flexDirection: 'row',
    alignItems: 'center',
    borderRadius: 12,
    marginVertical: 8,
    padding: 15,
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    shadowColor: '#000',
    elevation: 2,
  },
  avatar: {
    width: 50,
    height: 50,
    borderRadius: 25,
  },
  chatInfo: {
    flex: 1,
    marginLeft: 15,
  },
  chatName: {
    fontSize: 16,
    fontFamily: 'Poppins_700Bold',
  },
  chatLastMessage: {
    fontSize: 14,
    fontFamily: 'Poppins_400Regular',
    marginTop: 2,
  },
  chatMeta: {
    alignItems: 'flex-end',
  },
  chatDate: {
    fontSize: 12,
    fontFamily: 'Poppins_400Regular',
    marginBottom: 5,
  },
  deleteButton: {
    padding: 5,
  },
  fab: {
    position: 'absolute',
    right: 20,
    bottom: 20,
    width: 56,
    height: 56,
    borderRadius: 28,
    justifyContent: 'center',
    alignItems: 'center',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
});

export default ChatListScreen;

// App.tsx

import React from 'react';
import { NavigationContainer, CommonActions } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator, BottomTabBarProps } from '@react-navigation/bottom-tabs';
import { View, StyleSheet, Platform, TouchableOpacity, Keyboard, Dimensions, SafeAreaView } from 'react-native';
import HomeScreen from './src/screens/HomeScreen';
import ChatListScreen from './src/screens/ChatListScreen';
import ChatScreen from './src/screens/ChatScreen';
import SettingsScreen from './src/screens/SettingsScreen';
import { Ionicons } from '@expo/vector-icons';
import CustomText from './src/components/CustomText';
import { ChatProvider } from './src/context/ChatContext';
import { AppProvider, useApp } from './src/context/AppContext';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

const ChatStack = () => (
  <Stack.Navigator
    initialRouteName="ChatList"
    screenOptions={{
      headerShown: false,
    }}
  >
    <Stack.Screen name="ChatList" component={ChatListScreen} />
    <Stack.Screen name="Chat" component={ChatScreen} />
  </Stack.Navigator>
);

const FiguresStack = () => (
  <Stack.Navigator
    initialRouteName="Home"
    screenOptions={{
      headerShown: false,
    }}
  >
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Settings" component={SettingsScreen} />
    <Stack.Screen name="Chat" component={ChatScreen} />
  </Stack.Navigator>
);

interface TabBarPropsExtended extends BottomTabBarProps {}

const TabBar: React.FC<TabBarPropsExtended> = ({ state, descriptors, navigation }) => {
  const [isKeyboardVisible, setKeyboardVisible] = React.useState(false);
  const { t, currentTheme } = useApp();

  React.useEffect(() => {
    const showSubscription = Keyboard.addListener('keyboardDidShow', () => {
      setKeyboardVisible(true);
    });
    const hideSubscription = Keyboard.addListener('keyboardDidHide', () => {
      setKeyboardVisible(false);
    });

    return () => {
      showSubscription.remove();
      hideSubscription.remove();
    };
  }, []);

  if (isKeyboardVisible) {
    return null;
  }

  return (
    <View style={[styles.tabContainer, { backgroundColor: currentTheme.tabBackground, borderTopColor: currentTheme.tabBorder }]}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const icon = options.tabBarIcon
          ? options.tabBarIcon({
              focused: isFocused,
              color: isFocused ? currentTheme.activeTab : currentTheme.inactiveTab,
              size: 24,
            })
          : null;

        return (
          <TouchableOpacity
            key={route.key}
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            style={styles.tabItem}
          >
            {icon}
            <CustomText style={[styles.tabLabel, { color: isFocused ? currentTheme.activeTab : currentTheme.inactiveTab }]}>
              {t(label.toString())}
            </CustomText>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

const AppContent = () => {
  const { t, currentTheme } = useApp();

  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName="Figures"
        tabBar={(props) => <TabBar {...props} />}
        screenOptions={({ route }) => ({
          headerShown: false,
          tabBarIcon: ({ focused, color, size }) => {
            let iconName = '';
            if (route.name === 'Figures') {
              iconName = focused ? 'people' : 'people-outline';
            } else if (route.name === 'Chats') {
              iconName = focused ? 'chatbubbles' : 'chatbubbles-outline';
            }
            return <Ionicons name={iconName as any} size={size} color={color} />;
          },
        })}
      >
        <Tab.Screen
          name="Figures"
          component={FiguresStack}
          options={{
            tabBarLabel: t('characters'),
          }}
        />
        <Tab.Screen
          name="Chats"
          component={ChatStack}
          options={{
            tabBarLabel: t('chats'),
          }}
          listeners={({ navigation, route }) => ({
            tabPress: (e) => {
              e.preventDefault();
              navigation.dispatch(
                CommonActions.reset({
                  index: 0,
                  routes: [{ name: 'Chats', state: { routes: [{ name: 'ChatList' }] } }],
                })
              );
            },
          })}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

const App = () => {
  return (
    <AppProvider>
      <ChatProvider>
        <SafeAreaWrapper>
          <AppContent />
        </SafeAreaWrapper>
      </ChatProvider>
    </AppProvider>
  );
};

// SafeAreaWrapper component to ensure all screens are wrapped in SafeAreaView
const SafeAreaWrapper = ({ children }: { children: React.ReactNode }) => {
  const { currentTheme } = useApp();
  return (
<SafeAreaView style={{ flex: 1, backgroundColor: currentTheme.backgroundColor, paddingTop: 30 }}>
  {children}
</SafeAreaView>

  );
};

const styles = StyleSheet.create({
  tabContainer: {
    flexDirection: 'row',
    paddingBottom: Platform.OS === 'ios' ? 20 : 10,
    paddingTop: 10,
    borderTopWidth: 1,
    // Additional padding to ensure tab bar items are not too cramped
  },
  tabItem: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'center',
    paddingVertical: 5,
  },
  tabLabel: {
    fontFamily: 'Poppins_400Regular',
    fontSize: 12,
    marginTop: 3,
  },
});

export default App; home düğmesi ana sayfaya homescreen e yönlendirmiyor